fix(material-experimental/mdc-radio): add hover indication

Fixes that the MDC-based radio button doesn't have hover indication, because it usually comes from the MDC ripple which we don't use.

Author: crisbeto

src/material-experimental/mdc-radio/_radio-theme.scss

@@ -16,7 +16,9 @@
   ));
 
   // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
-  @include mdc-radio-theme.focus-indicator-color($color-palette);
+  &.mat-mdc-radio-checked {
+    @include mdc-radio-theme.focus-indicator-color($color-palette);
+  }
 }
 
 @mixin color($config-or-theme) {
@@ -30,6 +32,7 @@
 
     .mat-mdc-radio-button {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-radio-theme.focus-indicator-color(mdc-theme-color.prop-value(on-surface));
       @include mdc-radio-theme.theme((
         // The disabled colors don't use the `rgba` version, because
         // MDC applies a separate opacity to disabled buttons.

src/material-experimental/mdc-radio/radio.scss

@@ -3,6 +3,7 @@
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '@material/touch-target' as mdc-touch-target;
+@use '@material/ripple' as mdc-ripple;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 @use '../../material/core/style/layout-common';
@@ -34,6 +35,13 @@
         unselected-pressed-state-layer-opacity: null,
       )));
     }
+
+    &:hover .mdc-radio__native-control:not([disabled]):not(:focus) {
+      & ~ .mdc-radio__background::before {
+        opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
+        transform: scale(1);
+      }
+    }
   }
 
   // This is necessary because we do not depend on MDC's ripple, but have our own that should be

src/material-experimental/mdc-radio/radio.ts

@@ -90,6 +90,7 @@ export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
     '[class.mat-primary]': 'color === "primary"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',
+    '[class.mat-mdc-radio-checked]': 'checked',
     '[class._mat-animation-noopable]': '_noopAnimations',
     // Needs to be removed since it causes some a11y issues (see #21266).
     '[attr.tabindex]': 'null',