fix(ripple): ripple not triggered by HTMLLabelElement

checkbox/internal/_checkbox.scss

@@ -149,6 +149,8 @@ $_checkmark-bottom-left: 7px, -14px;
 
   // Ripple
 
+  @include ripple.controls;
+
   md-ripple {
     border-radius: map.get($tokens, 'state-layer-shape');
     height: map.get($tokens, 'state-layer-size');

radio/internal/_radio.scss

@@ -33,6 +33,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 @mixin styles() {
   $tokens: tokens.md-comp-radio-values();
 
+  @include ripple.controls;
+
   @layer {
     :host {
       display: inline-flex;

ripple/_ripple.scss

@@ -4,3 +4,4 @@
 //
 
 @forward './internal/ripple' show theme;
+@forward './internal/ripple' show controls;

ripple/internal/_ripple.scss

@@ -11,6 +11,28 @@
 @use '../../tokens';
 // go/keep-sorted end
 
+@mixin ripple-hover($tokens) {
+  background-color: map.get($tokens, 'hover-color');
+  opacity: map.get($tokens, 'hover-opacity');
+}
+
+@mixin ripple-active($tokens) {
+  opacity: map.get($tokens, 'pressed-opacity');
+  transition-duration: 105ms;
+}
+
+// controls for elements that might be triggered via a HTMLLabelElement
+@mixin controls {
+  $tokens: tokens.md-comp-ripple-values();
+  :host(:hover) md-ripple::part(surface)::before {
+    @include ripple-hover($tokens);
+  }
+
+  :host(:active) md-ripple::part(surface)::after {
+    @include ripple-active($tokens);
+  }
+}
+
 @mixin theme($tokens) {
   $supported-tokens: tokens.$md-comp-ripple-supported-tokens;
   @each $token, $value in $tokens {
@@ -80,13 +102,11 @@
   }
 
   .hovered::before {
-    background-color: map.get($tokens, 'hover-color');
-    opacity: map.get($tokens, 'hover-opacity');
+    @include ripple-hover($tokens);
   }
 
   .pressed::after {
     // press ripple fade-in
-    opacity: map.get($tokens, 'pressed-opacity');
-    transition-duration: 105ms;
+    @include ripple-active($tokens);
   }
 }

ripple/internal/ripple.ts

@@ -150,13 +150,18 @@ export class Ripple extends LitElement implements Attachable {
     this.setAttribute('aria-hidden', 'true');
   }
 
+  protected override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    this.initPressAnimation();
+  }
+
   protected override render() {
     const classes = {
       'hovered': this.hovered,
       'pressed': this.pressed,
     };
 
-    return html`<div class="surface ${classMap(classes)}"></div>`;
+    return html`<div part="surface" class="surface ${classMap(classes)}"></div>`;
   }
 
   protected override update(changedProps: PropertyValues<Ripple>) {
@@ -248,7 +253,7 @@ export class Ripple extends LitElement implements Attachable {
     this.startPressAnimation(event);
   }
 
-  private handleClick() {
+  private handleClick(event: Event) {
     // Click is a MouseEvent in Firefox and Safari, so we cannot use
     // `shouldReactToEvent`
     if (this.disabled) {
@@ -260,7 +265,8 @@ export class Ripple extends LitElement implements Attachable {
       return;
     }
 
-    if (this.state === State.INACTIVE) {
+    // prevent click event triggered by HTMLLabelElement
+    if (this.state === State.INACTIVE && event instanceof PointerEvent && event.pointerType === "") {
       // keyboard synthesized click event
       this.startPressAnimation();
       this.endPressAnimation();
@@ -340,13 +346,16 @@ export class Ripple extends LitElement implements Attachable {
     return {startPoint, endPoint};
   }
 
-  private startPressAnimation(positionEvent?: Event) {
+  private initPressAnimation() {
+    this.setPressAnimation()
+  }
+
+  private setPressAnimation(duration?: number, positionEvent?: Event) {
     if (!this.mdRoot) {
       return;
     }
 
-    this.pressed = true;
-    this.growAnimation?.cancel();
+    this.pressed = duration > 0;
     this.determineRippleSize();
     const {startPoint, endPoint} =
       this.getTranslationCoordinates(positionEvent);
@@ -366,13 +375,18 @@ export class Ripple extends LitElement implements Attachable {
       },
       {
         pseudoElement: PRESS_PSEUDO,
-        duration: PRESS_GROW_MS,
+        duration: duration,
         easing: EASING.STANDARD,
         fill: ANIMATION_FILL,
       },
     );
   }
 
+  private startPressAnimation(positionEvent?: Event) {
+    this.growAnimation?.cancel();
+    this.setPressAnimation(PRESS_GROW_MS, positionEvent);
+  }
+
   private async endPressAnimation() {
     this.rippleStartEvent = undefined;
     this.state = State.INACTIVE;
@@ -454,7 +468,7 @@ export class Ripple extends LitElement implements Attachable {
 
     switch (event.type) {
       case 'click':
-        this.handleClick();
+        this.handleClick(event);
         break;
       case 'contextmenu':
         this.handleContextmenu();

switch/internal/_switch.scss

@@ -10,6 +10,7 @@
 // go/keep-sorted start
 @use '../../focus/focus-ring';
 @use '../../tokens';
+@use '../../ripple/ripple';
 @use './handle';
 @use './icon';
 @use './track';
@@ -29,6 +30,8 @@
 }
 
 @mixin styles() {
+  @include ripple.controls;
+
   $tokens: tokens.md-comp-switch-values();
 
   @layer styles, hcm;