feat(chips): add ripple

PiperOrigin-RevId: 517159107

chips/lib/_shared.scss

@@ -3,9 +3,13 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
 // go/keep-sorted start
 @use '../../elevation/elevation';
 @use '../../focus/focus-ring';
+@use '../../ripple/ripple';
 @use '../../sass/shape';
 @use '../../sass/typography';
 // go/keep-sorted end
@@ -24,6 +28,17 @@
         surface-tint: var(--_container-surface-tint-layer-color),
       )
     );
+
+    @include ripple.theme(
+      (
+        focus-color: var(--_focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
   }
 
   .container {
@@ -75,13 +90,23 @@
     );
   }
 
+  md-ripple {
+    border-radius: inherit;
+  }
+
   .label {
     color: var(--_label-text-color);
     font: var(--_label-text-type);
   }
 }
 
 @function resolve-tokens($tokens) {
+  // Remove unsupported tokens
+  $tokens: map.remove(
+    $tokens,
+    'dragged-state-layer-color',
+    'dragged-state-layer-opacity'
+  );
   $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return $tokens;
 }

chips/lib/chip.ts

@@ -6,13 +6,17 @@
 
 import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
 
-import {LitElement, nothing} from 'lit';
-import {property, state} from 'lit/decorators.js';
+import {html, LitElement, nothing} from 'lit';
+import {property, queryAsync, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
+import {when} from 'lit/directives/when.js';
 import {html as staticHtml, literal} from 'lit/static-html.js';
 
 import {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';
+import {ripple} from '../../ripple/directive.js';
+import {MdRipple} from '../../ripple/ripple.js';
 
 /**
  * A chip component.
@@ -25,6 +29,8 @@ export class Chip extends LitElement {
   @property({type: String}) target = '';
 
   @state() private showFocusRing = false;
+  @state() private showRipple = false;
+  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;
 
   override render() {
     const classes = {
@@ -40,14 +46,25 @@ export class Chip extends LitElement {
           target=${this.href ? this.target : nothing}
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
-          @pointerdown=${this.handlePointerDown}>
+          @pointerdown=${this.handlePointerDown}
+          ${ripple(this.getRipple)}>
         <md-elevation shadow=${this.elevated} surface></md-elevation>
+        ${when(this.showRipple, this.renderRipple)}
         <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
         <div class="label">${this.label}</div>
       </${button}>
     `;
   }
 
+  private readonly getRipple = () => {  // bind to this
+    this.showRipple = true;
+    return this.ripple;
+  };
+
+  private readonly renderRipple = () => {  // bind to this
+    return html`<md-ripple ?disabled=${this.disabled}></md-ripple>`;
+  };
+
   private handleBlur() {
     this.showFocusRing = false;
   }