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 {
+    --mat-mdc-radio-ripple-color: #{$color-palette};
+  }
 }
 
 @mixin color($config-or-theme) {
@@ -41,6 +43,8 @@
         unselected-pressed-icon-color: $on-surface,
       ));
 
+      --mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
+
       &.mat-primary {
         @include _color-palette($primary);
       }

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';
@@ -33,6 +34,18 @@
         unselected-pressed-state-layer-color: null,
         unselected-pressed-state-layer-opacity: null,
       )));
+
+      // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
+      @include mdc-radio-theme.focus-indicator-color(
+        var(--mat-mdc-radio-ripple-color, transparent));
+    }
+
+    // MDC's hover indication comes from their ripple which we don't use.
+    &: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);
+      }
     }
   }
 

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',