feat(chips): add focus ring

PiperOrigin-RevId: 517156213

chips/lib/_shared.scss

@@ -5,6 +5,8 @@
 
 // go/keep-sorted start
 @use '../../elevation/elevation';
+@use '../../focus/focus-ring';
+@use '../../sass/shape';
 @use '../../sass/typography';
 // go/keep-sorted end
 
@@ -33,6 +35,7 @@
     display: flex;
     gap: 8px;
     height: 100%;
+    outline: none;
     padding: 0 16px;
     position: relative;
     text-decoration: none;
@@ -64,6 +67,14 @@
     position: absolute;
   }
 
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        shape: shape.corners-to-shape-token('--_container-shape'),
+      )
+    );
+  }
+
   .label {
     color: var(--_label-text-color);
     font: var(--_label-text-type);

chips/lib/chip.ts

@@ -5,12 +5,15 @@
  */
 
 import '../../elevation/elevation.js';
+import '../../focus/focus-ring.js';
 
 import {LitElement, nothing} from 'lit';
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {html as staticHtml, literal} from 'lit/static-html.js';
 
+import {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';
+
 /**
  * A chip component.
  */
@@ -21,6 +24,8 @@ export class Chip extends LitElement {
   @property({type: String}) label = '';
   @property({type: String}) target = '';
 
+  @state() private showFocusRing = false;
+
   override render() {
     const classes = {
       elevated: this.elevated,
@@ -32,10 +37,27 @@ export class Chip extends LitElement {
       <${button} class="container ${classMap(classes)}"
           ?disabled=${this.disabled}
           href=${this.href || nothing}
-          target=${this.href ? this.target : nothing}>
+          target=${this.href ? this.target : nothing}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @pointerdown=${this.handlePointerDown}>
         <md-elevation shadow=${this.elevated} surface></md-elevation>
+        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
         <div class="label">${this.label}</div>
       </${button}>
     `;
   }
+
+  private handleBlur() {
+    this.showFocusRing = false;
+  }
+
+  private handleFocus() {
+    this.showFocusRing = shouldShowStrongFocus();
+  }
+
+  private handlePointerDown() {
+    pointerPress();
+    this.showFocusRing = shouldShowStrongFocus();
+  }
 }