fix(material/stepper): add border radius to header hover state in m2 (angular#33529)

Fixes that the stepper header didn't have a border radius on hover. Also makes the strong focus indicator radius match the header's.

Relates to angular#33517.

(cherry picked from commit c729db7)

Author: crisbeto

src/material/stepper/_m2-stepper.scss

@@ -9,8 +9,8 @@
 
   @return (
     base: (
-      stepper-header-focus-state-layer-shape: 0,
-      stepper-header-hover-state-layer-shape: 0,
+      stepper-header-focus-state-layer-shape: 4px,
+      stepper-header-hover-state-layer-shape: 4px,
     ),
     color: map.merge(private-get-color-palette-color-tokens($theme, primary), (
       stepper-container-color: map.get($system, surface),

src/material/stepper/step-header.scss

@@ -29,12 +29,20 @@ $fallbacks: m3-stepper.get-tokens();
   &:hover[aria-disabled='false'] {
     background-color: token-utils.slot(stepper-header-hover-state-layer-color, $fallbacks);
     border-radius: token-utils.slot(stepper-header-hover-state-layer-shape, $fallbacks);
+
+    .mat-step-header-ripple::before {
+      border-radius: token-utils.slot(stepper-header-hover-state-layer-shape, $fallbacks);
+    }
   }
 
   &.cdk-keyboard-focused,
   &.cdk-program-focused {
     background-color: token-utils.slot(stepper-header-focus-state-layer-color, $fallbacks);
     border-radius: token-utils.slot(stepper-header-focus-state-layer-shape, $fallbacks);
+
+    .mat-step-header-ripple::before {
+      border-radius: token-utils.slot(stepper-header-focus-state-layer-shape, $fallbacks);
+    }
   }
 
   // On touch devices the :hover state will linger on the element after a tap.