From 243e231a1370c06d6ecd34b81be5f7c091cee6a7 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Mon, 17 Jul 2023 20:27:33 -0700
Subject: [PATCH] feat(all): expose `focus-ring` parts

PiperOrigin-RevId: 548873009
---
 button/lib/button.ts                         | 2 +-
 checkbox/lib/checkbox.ts                     | 2 +-
 chips/lib/chip.ts                            | 2 +-
 chips/lib/trailing-icons.ts                  | 2 +-
 fab/lib/shared.ts                            | 2 +-
 iconbutton/lib/icon-button.ts                | 2 +-
 labs/navigationtab/lib/navigation-tab.ts     | 2 +-
 labs/segmentedbutton/lib/segmented-button.ts | 2 +-
 list/lib/listitem/list-item.ts               | 2 +-
 menu/lib/menu.ts                             | 2 +-
 radio/lib/radio.ts                           | 4 ++--
 select/lib/select.ts                         | 1 +
 slider/lib/slider.ts                         | 2 +-
 switch/lib/switch.ts                         | 2 +-
 tabs/lib/tab.ts                              | 2 +-
 15 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/button/lib/button.ts b/button/lib/button.ts
index fbdfbd3203..29574d125c 100644
--- a/button/lib/button.ts
+++ b/button/lib/button.ts
@@ -159,7 +159,7 @@ export abstract class Button extends LitElement {
   }
 
   private renderFocusRing() {
-    return html`<md-focus-ring></md-focus-ring>`;
+    return html`<md-focus-ring part="focus-ring"></md-focus-ring>`;
   }
 
   private renderLabel() {
diff --git a/checkbox/lib/checkbox.ts b/checkbox/lib/checkbox.ts
index 265984e6ac..047d2e9b04 100644
--- a/checkbox/lib/checkbox.ts
+++ b/checkbox/lib/checkbox.ts
@@ -143,7 +143,7 @@ export class Checkbox extends LitElement {
       <div class="container ${containerClasses}">
         <div class="outline"></div>
         <div class="background"></div>
-        <md-focus-ring for="input"></md-focus-ring>
+        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
         <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
         <svg class="icon" viewBox="0 0 18 18">
           <rect class="mark short" />
diff --git a/chips/lib/chip.ts b/chips/lib/chip.ts
index bd36427642..ea228ad345 100644
--- a/chips/lib/chip.ts
+++ b/chips/lib/chip.ts
@@ -54,7 +54,7 @@ export abstract class Chip extends LitElement {
       <div class="container ${classMap(this.getContainerClasses())}"
           role=${this.containerRole || nothing}>
         ${this.renderOutline()}
-        <md-focus-ring for=${this.primaryId}></md-focus-ring>
+        <md-focus-ring part="focus-ring" for=${this.primaryId}></md-focus-ring>
         <md-ripple for=${this.primaryId}
           ?disabled=${this.rippleDisabled}></md-ripple>
         ${this.renderActions()}
diff --git a/chips/lib/trailing-icons.ts b/chips/lib/trailing-icons.ts
index d94028a67a..a159d971d0 100644
--- a/chips/lib/trailing-icons.ts
+++ b/chips/lib/trailing-icons.ts
@@ -27,7 +27,7 @@ export function renderRemoveButton(
       tabindex=${!tabbable ? -1 : nothing}
       @click=${handleRemoveClick}
     >
-      <md-focus-ring></md-focus-ring>
+      <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple></md-ripple>
       <svg class="trailing icon" viewBox="0 96 960 960">
         <path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
diff --git a/fab/lib/shared.ts b/fab/lib/shared.ts
index 02345894e7..e196fac822 100644
--- a/fab/lib/shared.ts
+++ b/fab/lib/shared.ts
@@ -74,7 +74,7 @@ export abstract class SharedFab extends LitElement {
         aria-label=${ariaLabel || nothing}
       >
         <md-elevation></md-elevation>
-        <md-focus-ring></md-focus-ring>
+        <md-focus-ring part="focus-ring"></md-focus-ring>
         <md-ripple class="ripple"></md-ripple>
         ${this.renderTouchTarget()}
         ${this.renderIcon()}
diff --git a/iconbutton/lib/icon-button.ts b/iconbutton/lib/icon-button.ts
index f41298f20a..1a62291f92 100644
--- a/iconbutton/lib/icon-button.ts
+++ b/iconbutton/lib/icon-button.ts
@@ -139,7 +139,7 @@ export class IconButton extends LitElement {
   }
 
   private renderFocusRing() {
-    return html`<md-focus-ring for=${
+    return html`<md-focus-ring part="focus-ring" for=${
         this.href ? 'link' : 'button'}></md-focus-ring>`;
   }
 
diff --git a/labs/navigationtab/lib/navigation-tab.ts b/labs/navigationtab/lib/navigation-tab.ts
index c3c250757c..35ee319ce3 100644
--- a/labs/navigationtab/lib/navigation-tab.ts
+++ b/labs/navigationtab/lib/navigation-tab.ts
@@ -47,7 +47,7 @@ export class NavigationTab extends LitElement implements NavigationTabState {
         tabindex="${this.active ? 0 : -1}"
         @click="${this.handleClick}"
       >
-        <md-focus-ring inward></md-focus-ring>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
         <md-ripple ?disabled="${
         this.disabled}" class="md3-navigation-tab__ripple"></md-ripple>
         <span aria-hidden="true" class="md3-navigation-tab__icon-content"
diff --git a/labs/segmentedbutton/lib/segmented-button.ts b/labs/segmentedbutton/lib/segmented-button.ts
index 14a8f1df60..31badb5f6f 100644
--- a/labs/segmentedbutton/lib/segmented-button.ts
+++ b/labs/segmentedbutton/lib/segmented-button.ts
@@ -78,7 +78,7 @@ export class SegmentedButton extends LitElement {
         @click="${this.handleClick}"
         class="md3-segmented-button ${classMap(this.getRenderClasses())}"
       >
-        <md-focus-ring class="md3-segmented-button__focus-ring"></md-focus-ring>
+        <md-focus-ring class="md3-segmented-button__focus-ring" part="focus-ring"></md-focus-ring>
         <md-ripple ?disabled="${
         this.disabled}" class="md3-segmented-button__ripple"></md-ripple>
         ${this.renderOutline()}
diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts
index c0150fb5dd..7c08435701 100644
--- a/list/lib/listitem/list-item.ts
+++ b/list/lib/listitem/list-item.ts
@@ -161,7 +161,7 @@ export class ListItemEl extends LitElement implements ListItem {
    * Handles rendering of the focus ring.
    */
   protected renderFocusRing(): TemplateResult|typeof nothing {
-    return html`<md-focus-ring class="focus-ring" for="item" inward></md-focus-ring>`;
+    return html`<md-focus-ring class="focus-ring" part="focus-ring" for="item" inward></md-focus-ring>`;
   }
 
   /**
diff --git a/menu/lib/menu.ts b/menu/lib/menu.ts
index 45149ff164..98a37937e6 100644
--- a/menu/lib/menu.ts
+++ b/menu/lib/menu.ts
@@ -298,7 +298,7 @@ export abstract class Menu extends LitElement {
    * Renders the focus ring component.
    */
   private renderFocusRing() {
-    return html`<md-focus-ring for="list"></md-focus-ring>`;
+    return html`<md-focus-ring part="focus-ring" for="list"></md-focus-ring>`;
   }
 
   private getSurfaceClasses() {
diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
index 3c0d893e8b..56fdc6baa1 100644
--- a/radio/lib/radio.ts
+++ b/radio/lib/radio.ts
@@ -35,7 +35,7 @@ export class Radio extends LitElement {
   /** @nocollapse */
   static formAssociated = true;
 
-  // Unique maskId is required because of a Safari bug that fail to persist 
+  // Unique maskId is required because of a Safari bug that fail to persist
   // reference to the mask. This should be removed once the bug is fixed.
   private readonly maskId = `cutout${++maskId}`;
 
@@ -125,7 +125,7 @@ export class Radio extends LitElement {
     return html`
       <div class=${classMap(classes)}>
         <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
-        <md-focus-ring for="input"></md-focus-ring>
+        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
           <mask id="${this.maskId}">
             <rect width="100%" height="100%" fill="white" />
diff --git a/select/lib/select.ts b/select/lib/select.ts
index 34cddcc06f..ad3847caf9 100644
--- a/select/lib/select.ts
+++ b/select/lib/select.ts
@@ -256,6 +256,7 @@ export abstract class Select extends LitElement {
           type="listbox"
           stay-open-on-focusout
           part="menu"
+          exportparts="focus-ring: menu-focus-ring"
           .anchor=${this.field}
           .open=${this.open}
           .quick=${this.quick}
diff --git a/slider/lib/slider.ts b/slider/lib/slider.ts
index c163c20f6b..0e0a055aa9 100644
--- a/slider/lib/slider.ts
+++ b/slider/lib/slider.ts
@@ -383,7 +383,7 @@ export class Slider extends LitElement {
     })}">
       <div class="handleNub"><md-elevation></md-elevation></div>
       ${when(this.labeled, () => this.renderLabel(label))}
-      <md-focus-ring for=${name}></md-focus-ring>
+      <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
       <md-ripple for=${name} class=${name} ?disabled=${
         this.disabled}></md-ripple>
     </div>`;
diff --git a/switch/lib/switch.ts b/switch/lib/switch.ts
index 48018e91c7..49178486ee 100644
--- a/switch/lib/switch.ts
+++ b/switch/lib/switch.ts
@@ -128,7 +128,7 @@ export class Switch extends LitElement {
         ?disabled=${this.disabled}
         @click=${this.handleClick}
       >
-        <md-focus-ring></md-focus-ring>
+        <md-focus-ring part="focus-ring"></md-focus-ring>
         <span class="track">
           ${this.renderHandle()}
         </span>
diff --git a/tabs/lib/tab.ts b/tabs/lib/tab.ts
index a3467d455f..0fbe423634 100644
--- a/tabs/lib/tab.ts
+++ b/tabs/lib/tab.ts
@@ -111,7 +111,7 @@ export class Tab extends LitElement {
         ?disabled=${this.disabled}
         aria-label=${ariaLabel || nothing}
       >
-        <md-focus-ring inward></md-focus-ring>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
         <md-elevation></md-elevation>
         <md-ripple ?disabled=${this.disabled}></md-ripple>
         <span class="touch"></span>