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

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.

(cherry picked from commit 356618d)

Author: crisbeto

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

@@ -15,8 +15,7 @@
     selected-pressed-icon-color: $color-palette,
   ));
 
-  // 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-ripple-color: #{$color-palette};
 }
 
 @mixin color($config-or-theme) {
@@ -41,6 +40,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,9 +34,27 @@
         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);
+      }
     }
   }
 
+  &.mat-mdc-radio-checked {
+    // 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-checked-ripple-color, transparent));
+  }
+
   // This is necessary because we do not depend on MDC's ripple, but have our own that should be
   // positioned correctly. This can be removed once we start using MDC's ripple implementation.
   .mat-radio-ripple {

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