diff --git a/button/demo/demo.ts b/button/demo/demo.ts
index f69762f75..33295e2dd 100644
--- a/button/demo/demo.ts
+++ b/button/demo/demo.ts
@@ -4,19 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Button', [
-      new Knob('label', {ui: textInput(), defaultValue: ''}),
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Button',
+  [
+    new Knob('label', {ui: textInput(), defaultValue: ''}),
+    new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/button/demo/stories.ts b/button/demo/stories.ts
index ead4a67bf..96ee61bcb 100644
--- a/button/demo/stories.ts
+++ b/button/demo/stories.ts
@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
 import '@material/web/button/elevated-button.js';
 import '@material/web/button/filled-button.js';
+import '@material/web/button/filled-tonal-button.js';
 import '@material/web/button/outlined-button.js';
 import '@material/web/button/text-button.js';
-import '@material/web/button/filled-tonal-button.js';
+import '@material/web/icon/icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html} from 'lit';
@@ -88,7 +88,7 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
         </div>
       </div>
     `;
-  }
+  },
 };
 
 const links: MaterialStoryInit<StoryKnobs> = {
@@ -101,40 +101,35 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-filled-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Filled'}
           </md-filled-button>
 
           <md-outlined-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Outlined'}
           </md-outlined-button>
 
           <md-elevated-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Elevated'}
           </md-elevated-button>
 
           <md-filled-tonal-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Tonal'}
           </md-filled-tonal-button>
 
           <md-text-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Text'}
           </md-text-button>
         </div>
@@ -142,8 +137,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-filled-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Filled'}
           </md-filled-button>
@@ -151,8 +145,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-outlined-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Outlined'}
           </md-outlined-button>
@@ -160,8 +153,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-elevated-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Elevated'}
           </md-elevated-button>
@@ -169,8 +161,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-filled-tonal-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Tonal'}
           </md-filled-tonal-button>
@@ -178,15 +169,14 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-text-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Text'}
           </md-text-button>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 /** Button stories. */
diff --git a/button/elevated-button.ts b/button/elevated-button.ts
index 2f5a1b477..6b94fef30 100644
--- a/button/elevated-button.ts
+++ b/button/elevated-button.ts
@@ -41,6 +41,9 @@ declare global {
  */
 @customElement('md-elevated-button')
 export class MdElevatedButton extends ElevatedButton {
-  static override styles =
-      [sharedStyles, sharedElevationStyles, elevatedStyles];
+  static override styles = [
+    sharedStyles,
+    sharedElevationStyles,
+    elevatedStyles,
+  ];
 }
diff --git a/button/internal/button.ts b/button/internal/button.ts
index bb7e2766a..501268dc3 100644
--- a/button/internal/button.ts
+++ b/button/internal/button.ts
@@ -10,13 +10,20 @@ import '../../ripple/ripple.js';
 import {html, isServer, LitElement, nothing} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {html as staticHtml, literal} from 'lit/static-html.js';
+import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
 import {internals} from '../../internal/controller/element-internals.js';
-import {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';
-import {FormSubmitter, FormSubmitterType, setupFormSubmitter} from '../../internal/controller/form-submitter.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '../../internal/controller/events.js';
+import {
+  FormSubmitter,
+  FormSubmitterType,
+  setupFormSubmitter,
+} from '../../internal/controller/form-submitter.js';
 
 /**
  * A button component.
@@ -31,8 +38,10 @@ export abstract class Button extends LitElement implements FormSubmitter {
   static readonly formAssociated = true;
 
   /** @nocollapse */
-  static override shadowRootOptions:
-      ShadowRootInit = {mode: 'open', delegatesFocus: true};
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
 
   /**
    * Whether or not the button is disabled.
@@ -48,7 +57,7 @@ export abstract class Button extends LitElement implements FormSubmitter {
    * Where to display the linked `href` URL for a link button. Common options
    * include `_blank` to open in a new tab.
    */
-  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
+  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
   /**
    * Whether to render the icon at the inline end of the label rather than the
@@ -81,14 +90,14 @@ export abstract class Button extends LitElement implements FormSubmitter {
     return this[internals].form;
   }
 
-  @query('.button') private readonly buttonElement!: HTMLElement|null;
+  @query('.button') private readonly buttonElement!: HTMLElement | null;
 
   @queryAssignedElements({slot: 'icon', flatten: true})
   private readonly assignedIcons!: HTMLElement[];
 
   /** @private */
-  [internals] =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  [internals] = (this as HTMLElement) /* needed for closure */
+    .attachInternals();
 
   constructor() {
     super();
@@ -138,12 +147,12 @@ export abstract class Button extends LitElement implements FormSubmitter {
   private renderContent() {
     // Link buttons may not be disabled
     const isDisabled = this.disabled && !this.href;
-    const icon =
-        html`<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`;
+    const icon = html`<slot
+      name="icon"
+      @slotchange="${this.handleSlotChange}"></slot>`;
 
     return html`
-      ${this.renderElevation?.()}
-      ${this.renderOutline?.()}
+      ${this.renderElevation?.()} ${this.renderOutline?.()}
       <md-focus-ring part="focus-ring"></md-focus-ring>
       <md-ripple class="button__ripple" ?disabled="${isDisabled}"></md-ripple>
       <span class="touch"></span>
@@ -154,7 +163,7 @@ export abstract class Button extends LitElement implements FormSubmitter {
   }
 
   private readonly handleActivationClick = (event: MouseEvent) => {
-    if (!isActivationClick((event)) || !this.buttonElement) {
+    if (!isActivationClick(event) || !this.buttonElement) {
       return;
     }
     this.focus();
diff --git a/catalog/src/components/catalog-component-header-title.ts b/catalog/src/components/catalog-component-header-title.ts
index 611f7ac8b..aa7e3b2db 100644
--- a/catalog/src/components/catalog-component-header-title.ts
+++ b/catalog/src/components/catalog-component-header-title.ts
@@ -57,4 +57,4 @@ export class CatalogComponentHeaderTitle extends LitElement {
       }
     }
   `;
-}
\ No newline at end of file
+}
diff --git a/catalog/src/components/catalog-component-header.ts b/catalog/src/components/catalog-component-header.ts
index f17184425..67482b635 100644
--- a/catalog/src/components/catalog-component-header.ts
+++ b/catalog/src/components/catalog-component-header.ts
@@ -17,13 +17,10 @@ import {customElement} from 'lit/decorators.js';
 @customElement('catalog-component-header')
 export class CatalogComponentHeader extends LitElement {
   render() {
-    return html`
-      <div>
-        <slot class="title" name="title"></slot>
-        <slot
-          class="image"
-        ></slot>
-      </div>`;
+    return html` <div>
+      <slot class="title" name="title"></slot>
+      <slot class="image"></slot>
+    </div>`;
   }
 
   static styles = css`
diff --git a/catalog/src/components/copy-code-button.ts b/catalog/src/components/copy-code-button.ts
index 2ebb08119..b94fd8d05 100644
--- a/catalog/src/components/copy-code-button.ts
+++ b/catalog/src/components/copy-code-button.ts
@@ -4,12 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 
 import {MdIconButton} from '@material/web/iconbutton/icon-button.js';
 import {css, html, LitElement} from 'lit';
-import {customElement, property, query, queryAssignedElements, state,} from 'lit/decorators.js';
+import {
+  customElement,
+  property,
+  query,
+  queryAssignedElements,
+  state,
+} from 'lit/decorators.js';
 
 /**
  * A custom element that places a copy button at the top right corner of a
@@ -37,7 +43,7 @@ export class CopyCodeButton extends LitElement {
     }
   `;
 
-  private timeoutId: number|undefined;
+  private timeoutId: number | undefined;
 
   @state() private showCheckmark = false;
 
@@ -72,8 +78,7 @@ export class CopyCodeButton extends LitElement {
         title=${this.buttonTitle}
         .selected=${this.showCheckmark}
         aria-label=${this.label}
-        aria-label-selected=${this.successLabel}
-      >
+        aria-label-selected=${this.successLabel}>
         <md-icon>content_copy</md-icon>
         <md-icon slot="selected">checkmark</md-icon>
       </md-icon-button>
diff --git a/catalog/src/components/hct-slider.ts b/catalog/src/components/hct-slider.ts
index 5e105b522..4676036fb 100644
--- a/catalog/src/components/hct-slider.ts
+++ b/catalog/src/components/hct-slider.ts
@@ -48,7 +48,7 @@ export class HCTSlider extends LitElement {
   /**
    * The type of HCT slider to display
    */
-  @property({type: String}) type: 'hue'|'chroma'|'tone' = 'hue';
+  @property({type: String}) type: 'hue' | 'chroma' | 'tone' = 'hue';
 
   override render() {
     let range = HUE_RANGE;
@@ -62,21 +62,19 @@ export class HCTSlider extends LitElement {
     return html`<section>
       <span id="label" class="color-on-surface-text">${this.label}</span>
       <md-slider
-          id="source"
-          labeled
-          aria-label=${this.label}
-          .min=${range[0]}
-          .max=${range[1]}
-          .value=${this.value}
-          @input=${this.onInput}
-      ></md-slider>
+        id="source"
+        labeled
+        aria-label=${this.label}
+        .min=${range[0]}
+        .max=${range[1]}
+        .value=${this.value}
+        @input=${this.onInput}></md-slider>
       <div
         id="gradient"
         class=${this.type}
         style=${styleMap({
-      background: this.buildGradient(),
-    })}
-      ></div>
+          background: this.buildGradient(),
+        })}></div>
     </section>`;
   }
 
@@ -100,7 +98,7 @@ export class HCTSlider extends LitElement {
 
     if (this.type === 'hue') {
       for (let i = 0; i < numStops; i++) {
-        const hue = HUE_RANGE[1] / numStops * i;
+        const hue = (HUE_RANGE[1] / numStops) * i;
         // Set chroma to something fairly saturated + tone in the middle of
         // black and white so it's not too dark or too bright and vary the hue
         const hex = hexFromHct(hue, 100, 50);
@@ -111,7 +109,7 @@ export class HCTSlider extends LitElement {
       const hue = hct.hue;
 
       for (let i = 0; i < numStops; i++) {
-        const chroma = CHROMA_RANGE[1] / numStops * i;
+        const chroma = (CHROMA_RANGE[1] / numStops) * i;
         // Change the color of the bar to the current hue and set the tone to
         // mid so we it's not too dark or too bright and vary the chroma
         const hex = hexFromHct(hue, chroma, 50);
@@ -119,7 +117,7 @@ export class HCTSlider extends LitElement {
       }
     } else if (this.type === 'tone') {
       for (let i = 0; i < numStops; i++) {
-        const tone = TONE_RANGE[1] / numStops * i;
+        const tone = (TONE_RANGE[1] / numStops) * i;
         // Set tone color to black (0 chroma means that hue doesn't matter) and
         // vary the tone
         const hex = hexFromHct(0, 0, tone);
diff --git a/catalog/src/components/nav-drawer.ts b/catalog/src/components/nav-drawer.ts
index ed3ffa2b8..de9da1c4b 100644
--- a/catalog/src/components/nav-drawer.ts
+++ b/catalog/src/components/nav-drawer.ts
@@ -6,7 +6,7 @@
 
 import {animate, fadeIn, fadeOut} from '@lit-labs/motion';
 import {EASING} from '@material/web/internal/motion/animation.js';
-import {css, html, LitElement, nothing, PropertyValues} from 'lit';
+import {LitElement, PropertyValues, css, html, nothing} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 
 import {drawerOpenSignal} from '../signals/drawer-open-state.js';
@@ -21,8 +21,8 @@ import {SignalElement} from '../signals/signal-element.js';
  * widths, and position itself inline with the page at wider page widths. Most
  * importantly, this sidebar is SSR compatible.
  */
-@customElement('nav-drawer') export class NavDrawer extends SignalElement
-(LitElement) {
+@customElement('nav-drawer')
+export class NavDrawer extends SignalElement(LitElement) {
   /**
    * Whether or not the side drawer is collapsible or inline.
    */
@@ -45,8 +45,9 @@ import {SignalElement} from '../signals/signal-element.js';
     const drawerContentOpacityDuration = showModal ? 300 : 150;
     const scrimOpacityDuration = 150;
 
-    const drawerSlideAnimationEasing =
-        showModal ? EASING.EMPHASIZED : EASING.EMPHASIZED_ACCELERATE;
+    const drawerSlideAnimationEasing = showModal
+      ? EASING.EMPHASIZED
+      : EASING.EMPHASIZED_ACCELERATE;
 
     return html`
       <div class="root">
@@ -65,8 +66,7 @@ import {SignalElement} from '../signals/signal-element.js';
                     },
                     in: fadeIn,
                     out: fadeOut,
-                  })}
-                ></div>`
+                  })}></div>`
               : nothing}
             <aside
               ?inert=${this.isCollapsible && !drawerOpenSignal.value}
@@ -76,18 +76,16 @@ import {SignalElement} from '../signals/signal-element.js';
                   duration: drawerSlideAnimationDuration,
                   easing: drawerSlideAnimationEasing,
                 },
-              })}
-            >
-            <div class="scroll-wrapper">
-              <slot
-                ${animate({
-                  properties: ['opacity'],
-                  keyframeOptions: {
-                    duration: drawerContentOpacityDuration,
-                    easing: 'linear',
-                  },
-                })}
-              ></slot>
+              })}>
+              <div class="scroll-wrapper">
+                <slot
+                  ${animate({
+                    properties: ['opacity'],
+                    keyframeOptions: {
+                      duration: drawerContentOpacityDuration,
+                      easing: 'linear',
+                    },
+                  })}></slot>
               </div>
             </aside>
           </div>
@@ -102,8 +100,7 @@ import {SignalElement} from '../signals/signal-element.js';
   private renderContent(showModal: boolean) {
     return html` <div
       class="pane content-pane"
-      ?inert=${showModal || inertContentSignal.value}
-    >
+      ?inert=${showModal || inertContentSignal.value}>
       <div class="scroll-wrapper">
         <div class="content">
           <slot name="app-content"></slot>
@@ -119,8 +116,7 @@ import {SignalElement} from '../signals/signal-element.js';
 
     return html` <div
       class="pane toc"
-      ?inert=${showModal || inertContentSignal.value}
-    >
+      ?inert=${showModal || inertContentSignal.value}>
       <div class="scroll-wrapper">
         <p>On this page:</p>
         <h2>${this.pageTitle}</h2>
@@ -148,11 +144,16 @@ import {SignalElement} from '../signals/signal-element.js';
 
   updated(changed: PropertyValues<this>) {
     super.updated(changed);
-    if (this.lastDrawerOpen !== drawerOpenSignal.value &&
-        drawerOpenSignal.value && this.isCollapsible) {
-      (this.querySelector('md-list.nav md-list-item[tabindex="0"]') as
-       HTMLElement)
-          ?.focus();
+    if (
+      this.lastDrawerOpen !== drawerOpenSignal.value &&
+      drawerOpenSignal.value &&
+      this.isCollapsible
+    ) {
+      (
+        this.querySelector(
+          'md-list.nav md-list-item[tabindex="0"]',
+        ) as HTMLElement
+      )?.focus();
     }
   }
 
diff --git a/catalog/src/components/theme-changer.ts b/catalog/src/components/theme-changer.ts
index 79a0b804c..15a792e04 100644
--- a/catalog/src/components/theme-changer.ts
+++ b/catalog/src/components/theme-changer.ts
@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/segmentedbuttonset/outlined-segmented-button-set.js';
-import '@material/web/labs/segmentedbutton/outlined-segmented-button.js';
-import '@material/web/icon/icon.js';
-import './hct-slider.js';
-import './copy-code-button.js';
 import '@material/web/focus/md-focus-ring.js';
+import '@material/web/icon/icon.js';
+import '@material/web/labs/segmentedbutton/outlined-segmented-button.js';
+import '@material/web/labs/segmentedbuttonset/outlined-segmented-button-set.js';
+import './copy-code-button.js';
+import './hct-slider.js';
 
 import type {MdOutlinedSegmentedButton} from '@material/web/labs/segmentedbutton/outlined-segmented-button.js';
 import {css, html, LitElement} from 'lit';
@@ -18,8 +18,12 @@ import {live} from 'lit/directives/live.js';
 
 import {ChangeColorEvent, ChangeDarkModeEvent} from '../types/color-events.js';
 import {hctFromHex, hexFromHct} from '../utils/material-color-helpers.js';
-import {getCurrentMode, getCurrentSeedColor, getCurrentThemeString} from '../utils/theme.js';
 import type {ColorMode} from '../utils/theme.js';
+import {
+  getCurrentMode,
+  getCurrentSeedColor,
+  getCurrentThemeString,
+} from '../utils/theme.js';
 
 import type {HCTSlider} from './hct-slider.js';
 
@@ -37,7 +41,7 @@ export class ThemeChanger extends LitElement {
   /**
    * The currently selected color mode.
    */
-  @state() selectedColorMode: ColorMode|null = null;
+  @state() selectedColorMode: ColorMode | null = null;
 
   /**
    * The currently selected hex color.
@@ -68,17 +72,14 @@ export class ThemeChanger extends LitElement {
   render() {
     return html`
       <div id="head-wrapper">
-        <h2>
-          Theme Controls
-        </h2>
+        <h2> Theme Controls </h2>
         <copy-code-button
-            button-title="Copy current theme to clipboard"
-            label="Copy current theme"
-            .getCopyText=${getCurrentThemeString}>
+          button-title="Copy current theme to clipboard"
+          label="Copy current theme"
+          .getCopyText=${getCurrentThemeString}>
         </copy-code-button>
       </div>
-      ${this.renderHexPicker()}
-      ${this.renderHctPicker()}
+      ${this.renderHexPicker()} ${this.renderHctPicker()}
       ${this.renderColorModePicker()}
     `;
   }
@@ -96,8 +97,7 @@ export class ThemeChanger extends LitElement {
               id="color-input"
               @input=${this.onHexPickerInput}
               type="color"
-              .value=${live(this.hexColor)}
-            />
+              .value=${live(this.hexColor)} />
           </div>
           <md-focus-ring for="color-input"></md-focus-ring>
         </span>
@@ -111,27 +111,24 @@ export class ThemeChanger extends LitElement {
   private renderHctPicker() {
     return html`<div class="sliders">
       <hct-slider
-          .value=${live(this.hue)}
-          type="hue"
-          label="Hue"
-          max="360"
-          @input=${this.onSliderInput}
-      ></hct-slider>
+        .value=${live(this.hue)}
+        type="hue"
+        label="Hue"
+        max="360"
+        @input=${this.onSliderInput}></hct-slider>
       <hct-slider
-          .value=${live(this.chroma)}
-          .color=${this.hexColor}
-          type="chroma"
-          label="Chroma"
-          max="150"
-          @input=${this.onSliderInput}
-      ></hct-slider>
+        .value=${live(this.chroma)}
+        .color=${this.hexColor}
+        type="chroma"
+        label="Chroma"
+        max="150"
+        @input=${this.onSliderInput}></hct-slider>
       <hct-slider
-          .value=${live(this.tone)}
-          type="tone"
-          label="Tone"
-          max="100"
-          @input=${this.onSliderInput}
-      ></hct-slider>
+        .value=${live(this.tone)}
+        type="tone"
+        label="Tone"
+        max="100"
+        @input=${this.onSliderInput}></hct-slider>
     </div>`;
   }
 
@@ -140,9 +137,8 @@ export class ThemeChanger extends LitElement {
    */
   private renderColorModePicker() {
     return html`<md-outlined-segmented-button-set
-        @segmented-button-set-selection=${this.onColorModeSelection}
-        aria-label="Color mode"
-    >
+      @segmented-button-set-selection=${this.onColorModeSelection}
+      aria-label="Color mode">
       ${this.renderModeButton('dark', 'dark_mode')}
       ${this.renderModeButton('auto', 'brightness_medium')}
       ${this.renderModeButton('light', 'light_mode')}
@@ -161,8 +157,7 @@ export class ThemeChanger extends LitElement {
       data-value=${mode}
       title=${mode}
       aria-label="${mode} color scheme"
-      .selected=${this.selectedColorMode === mode}
-    >
+      .selected=${this.selectedColorMode === mode}>
       <md-icon slot="icon">${icon}</md-icon>
     </md-outlined-segmented-button>`;
   }
@@ -208,9 +203,13 @@ export class ThemeChanger extends LitElement {
     this.updateHctFromHex(this.hexColor);
   }
 
-  private onColorModeSelection(e: CustomEvent<{
-    button: MdOutlinedSegmentedButton; selected: boolean; index: number;
-  }>) {
+  private onColorModeSelection(
+    e: CustomEvent<{
+      button: MdOutlinedSegmentedButton;
+      selected: boolean;
+      index: number;
+    }>,
+  ) {
     const {button} = e.detail;
     const value = button.dataset.value as ColorMode;
     this.selectedColorMode = value;
diff --git a/catalog/src/components/top-app-bar.ts b/catalog/src/components/top-app-bar.ts
index a9c38b949..ad613892c 100644
--- a/catalog/src/components/top-app-bar.ts
+++ b/catalog/src/components/top-app-bar.ts
@@ -5,8 +5,8 @@
  */
 
 import '@material/web/focus/md-focus-ring.js';
-import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 
 import type {MdIconButton} from '@material/web/iconbutton/icon-button.js';
 import {css, html, LitElement} from 'lit';
@@ -21,8 +21,8 @@ import {materialDesign} from '../svg/material-design-logo.js';
 /**
  * Top app bar of the catalog.
  */
-@customElement('top-app-bar') export class TopAppBar extends SignalElement
-(LitElement) {
+@customElement('top-app-bar')
+export class TopAppBar extends SignalElement(LitElement) {
   /**
    * Whether or not the color picker menu is open.
    */
@@ -40,11 +40,11 @@ import {materialDesign} from '../svg/material-design-logo.js';
               aria-label-selected="open navigation menu"
               aria-label="close navigation menu"
               aria-expanded=${drawerOpenSignal.value ? 'false' : 'true'}
-              title="${
-        !drawerOpenSignal.value ? 'Open' : 'Close'} navigation menu"
+              title="${!drawerOpenSignal.value
+                ? 'Open'
+                : 'Close'} navigation menu"
               .selected=${live(!drawerOpenSignal.value)}
-              @input=${this.onMenuIconToggle}
-            >
+              @input=${this.onMenuIconToggle}>
               <md-icon slot="selected">menu</md-icon>
               <md-icon>menu_open</md-icon>
             </md-icon-button>
@@ -52,8 +52,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
               href="/"
               class="home-button"
               title="Home"
-              aria-label="Home"
-            >
+              aria-label="Home">
               ${materialDesign}
             </md-icon-button>
           </section>
@@ -71,16 +70,14 @@ import {materialDesign} from '../svg/material-design-logo.js';
             <lit-island
               on:interaction="pointerenter,focusin,pointerdown"
               import="/js/hydration-entrypoints/menu.js"
-              id="menu-island"
-            >
+              id="menu-island">
               <md-icon-button
                 id="theme-button"
                 @click="${this.onPaletteClick}"
                 title="Page theme controls"
                 aria-label="Page theme controls"
                 aria-haspopup="dialog"
-                aria-expanded=${this.menuOpen ? 'true' : 'false'}
-              >
+                aria-expanded=${this.menuOpen ? 'true' : 'false'}>
                 <md-icon>palette</md-icon>
               </md-icon-button>
               <md-menu
@@ -93,8 +90,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
                 .open=${this.menuOpen}
                 @opened=${this.onMenuOpened}
                 @closed=${this.onMenuClosed}
-                @keydown=${this.onKeydown}
-              >
+                @keydown=${this.onKeydown}>
                 <theme-changer></theme-changer>
               </md-menu>
             </lit-island>
diff --git a/catalog/src/hydration-entrypoints/components/button.ts b/catalog/src/hydration-entrypoints/components/button.ts
index 49744f2df..a13f00be4 100644
--- a/catalog/src/hydration-entrypoints/components/button.ts
+++ b/catalog/src/hydration-entrypoints/components/button.ts
@@ -8,4 +8,4 @@ import '@material/web/button/elevated-button.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/button/filled-tonal-button.js';
 import '@material/web/button/outlined-button.js';
-import '@material/web/button/text-button.js';
\ No newline at end of file
+import '@material/web/button/text-button.js';
diff --git a/catalog/src/hydration-entrypoints/components/checkbox.ts b/catalog/src/hydration-entrypoints/components/checkbox.ts
index 8e49dbede..8a81ee197 100644
--- a/catalog/src/hydration-entrypoints/components/checkbox.ts
+++ b/catalog/src/hydration-entrypoints/components/checkbox.ts
@@ -4,4 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/checkbox/checkbox.js';
\ No newline at end of file
+import '@material/web/checkbox/checkbox.js';
diff --git a/catalog/src/hydration-entrypoints/components/fab.ts b/catalog/src/hydration-entrypoints/components/fab.ts
index 93c7a3eec..75d1803a5 100644
--- a/catalog/src/hydration-entrypoints/components/fab.ts
+++ b/catalog/src/hydration-entrypoints/components/fab.ts
@@ -4,5 +4,5 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '@material/web/fab/branded-fab.js';
 import '@material/web/fab/fab.js';
-import '@material/web/fab/branded-fab.js';
\ No newline at end of file
diff --git a/catalog/src/hydration-entrypoints/components/icon-button.ts b/catalog/src/hydration-entrypoints/components/icon-button.ts
index 8f5e00a15..f19f0f98b 100644
--- a/catalog/src/hydration-entrypoints/components/icon-button.ts
+++ b/catalog/src/hydration-entrypoints/components/icon-button.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/iconbutton/icon-button.js';
 import '@material/web/iconbutton/filled-icon-button.js';
 import '@material/web/iconbutton/filled-tonal-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/iconbutton/outlined-icon-button.js';
diff --git a/catalog/src/hydration-entrypoints/components/menu.ts b/catalog/src/hydration-entrypoints/components/menu.ts
index fa3149849..f0d9e8117 100644
--- a/catalog/src/hydration-entrypoints/components/menu.ts
+++ b/catalog/src/hydration-entrypoints/components/menu.ts
@@ -7,4 +7,4 @@
 import '@material/web/button/filled-button.js';
 import '@material/web/menu/menu.js';
 import '@material/web/menu/menu-item.js';
-import '@material/web/menu/sub-menu.js';
\ No newline at end of file
+import '@material/web/menu/sub-menu.js';
diff --git a/catalog/src/hydration-entrypoints/components/select.ts b/catalog/src/hydration-entrypoints/components/select.ts
index b8cfe1ea3..46253aa56 100644
--- a/catalog/src/hydration-entrypoints/components/select.ts
+++ b/catalog/src/hydration-entrypoints/components/select.ts
@@ -4,6 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/select/select-option.js';
-import '@material/web/select/outlined-select.js';
 import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-select.js';
+import '@material/web/select/select-option.js';
diff --git a/catalog/src/hydration-entrypoints/components/text-field.ts b/catalog/src/hydration-entrypoints/components/text-field.ts
index 65b98d197..9c92e387d 100644
--- a/catalog/src/hydration-entrypoints/components/text-field.ts
+++ b/catalog/src/hydration-entrypoints/components/text-field.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/textfield/outlined-text-field.js';
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/icon-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/textfield/outlined-text-field.js';
diff --git a/catalog/src/hydration-entrypoints/navigation.ts b/catalog/src/hydration-entrypoints/navigation.ts
index 4c256f022..c116461e7 100644
--- a/catalog/src/hydration-entrypoints/navigation.ts
+++ b/catalog/src/hydration-entrypoints/navigation.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '@material/web/list/list.js';
+import '@material/web/list/list-item.js';
 import '../components/nav-drawer.js';
 import '../components/top-app-bar.js';
-import '@material/web/list/list-item.js';
-import '@material/web/list/list.js';
diff --git a/catalog/src/hydration-entrypoints/playground-elements.ts b/catalog/src/hydration-entrypoints/playground-elements.ts
index ea42d5c03..0b8b52113 100644
--- a/catalog/src/hydration-entrypoints/playground-elements.ts
+++ b/catalog/src/hydration-entrypoints/playground-elements.ts
@@ -4,6 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import 'playground-elements/playground-project.js';
+import 'playground-elements/playground-file-editor.js';
 import 'playground-elements/playground-preview.js';
-import 'playground-elements/playground-file-editor.js';
\ No newline at end of file
+import 'playground-elements/playground-project.js';
diff --git a/catalog/src/pages/components.ts b/catalog/src/pages/components.ts
index 93c48c0a1..7f6a26ed3 100644
--- a/catalog/src/pages/components.ts
+++ b/catalog/src/pages/components.ts
@@ -20,7 +20,9 @@ import {getCurrentThemeString} from '../utils/theme.js';
  * @param previewEl An element reference to the playground preview element.
  */
 async function updateMessageTargetOnIframeLoad(
-    postdoc: PostDoc, previewEl: PlaygroundPreview) {
+  postdoc: PostDoc,
+  previewEl: PlaygroundPreview,
+) {
   await previewEl.updateComplete;
   const iframe = previewEl.iframe!;
 
@@ -76,9 +78,9 @@ function demoDropdown() {
 
   // tslint:disable:no-unnecessary-type-assertion TSC externally seems to differ
   // from internal here and needs these type assertions
-  const expandButton =
-      detailsEl?.querySelector('summary md-outlined-icon-button') as
-      MdOutlinedIconButton;
+  const expandButton = detailsEl?.querySelector(
+    'summary md-outlined-icon-button',
+  ) as MdOutlinedIconButton;
   // tslint:enable:no-unnecessary-type-assertion
 
   // Synchronize details open state with toggle button
diff --git a/catalog/src/pages/global.ts b/catalog/src/pages/global.ts
index c4e700137..7e3185362 100644
--- a/catalog/src/pages/global.ts
+++ b/catalog/src/pages/global.ts
@@ -12,7 +12,16 @@
  * and global scroll listeners.
  */
 
-import {changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark} from '../utils/theme.js';
+import {
+  changeColor,
+  changeColorAndMode,
+  changeColorMode,
+  getCurrentMode,
+  getCurrentSeedColor,
+  getCurrentThemeString,
+  getLastSavedAutoColorMode,
+  isModeDark,
+} from '../utils/theme.js';
 
 /**
  * Applies theme-based event listeners such as changing color, mode, and
@@ -29,14 +38,15 @@ function applyColorThemeListeners() {
 
   // Listen for system color change and applies the new theme if the current
   // color mode is 'auto'.
-  window.matchMedia('(prefers-color-scheme: dark)')
-      .addEventListener('change', () => {
-        if (getCurrentMode() !== 'auto') {
-          return;
-        }
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', () => {
+      if (getCurrentMode() !== 'auto') {
+        return;
+      }
 
-        changeColor(getCurrentSeedColor()!);
-      });
+      changeColor(getCurrentSeedColor()!);
+    });
 }
 
 /**
diff --git a/catalog/src/signals/drawer-open-state.ts b/catalog/src/signals/drawer-open-state.ts
index 8c90c61e5..875fc0bc6 100644
--- a/catalog/src/signals/drawer-open-state.ts
+++ b/catalog/src/signals/drawer-open-state.ts
@@ -9,4 +9,4 @@ import {signal} from './signal-element.js';
 /**
  * Whether or not the sidebar drawer should be open.
  */
-export const drawerOpenSignal = signal(false);
\ No newline at end of file
+export const drawerOpenSignal = signal(false);
diff --git a/catalog/src/signals/inert.ts b/catalog/src/signals/inert.ts
index 001990092..3199c4e25 100644
--- a/catalog/src/signals/inert.ts
+++ b/catalog/src/signals/inert.ts
@@ -15,4 +15,4 @@ export const inertContentSignal = signal(false);
 /**
  * Whether or not the sidebar should be inert.
  */
-export const inertSidebarSignal = signal(false);
\ No newline at end of file
+export const inertSidebarSignal = signal(false);
diff --git a/catalog/src/signals/signal-element.ts b/catalog/src/signals/signal-element.ts
index f083b68cb..e57b74a95 100644
--- a/catalog/src/signals/signal-element.ts
+++ b/catalog/src/signals/signal-element.ts
@@ -18,8 +18,9 @@ type ReactiveElementConstructor = new (...args: any[]) => ReactiveElement;
  *
  * @param Base The class to mix-in and listen to Preact signal changes.
  */
-export function SignalElement<T extends ReactiveElementConstructor>(Base: T):
-    T {
+export function SignalElement<T extends ReactiveElementConstructor>(
+  Base: T,
+): T {
   return class SignalElement extends Base {
     private _disposeEffect?: () => void;
 
@@ -39,4 +40,4 @@ export function SignalElement<T extends ReactiveElementConstructor>(Base: T):
       });
     }
   };
-}
\ No newline at end of file
+}
diff --git a/catalog/src/ssr-utils/dsd-polyfill.ts b/catalog/src/ssr-utils/dsd-polyfill.ts
index 35f79dc46..6f64fdc2a 100644
--- a/catalog/src/ssr-utils/dsd-polyfill.ts
+++ b/catalog/src/ssr-utils/dsd-polyfill.ts
@@ -10,4 +10,4 @@ import {hydrateShadowRoots} from '@webcomponents/template-shadowroot/template-sh
 if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {
   hydrateShadowRoots(document.body);
 }
-document.body.removeAttribute('dsd-pending');
\ No newline at end of file
+document.body.removeAttribute('dsd-pending');
diff --git a/catalog/src/ssr-utils/lit-hydrate-support.ts b/catalog/src/ssr-utils/lit-hydrate-support.ts
index 23b4acc13..0158fd1a7 100644
--- a/catalog/src/ssr-utils/lit-hydrate-support.ts
+++ b/catalog/src/ssr-utils/lit-hydrate-support.ts
@@ -6,4 +6,4 @@
 
 // Must be loaded before any lit element see /site/_includes/default.html for
 // usage. Allows hydrating SSRd lit elements.
-import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
\ No newline at end of file
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
diff --git a/catalog/src/ssr-utils/lit-island.ts b/catalog/src/ssr-utils/lit-island.ts
index 23f114385..6a87af037 100644
--- a/catalog/src/ssr-utils/lit-island.ts
+++ b/catalog/src/ssr-utils/lit-island.ts
@@ -6,7 +6,10 @@
 
 import {Island} from '@11ty/is-land';
 
-customElements.define('lit-island', class extends Island {
-  // Removes the feature in which 11ty island removes DOM to render a fallback.
-  override forceFallback() {}
-});
+customElements.define(
+  'lit-island',
+  class extends Island {
+    // Removes the feature in which 11ty island removes DOM to render a fallback.
+    override forceFallback() {}
+  },
+);
diff --git a/catalog/src/ssr.ts b/catalog/src/ssr.ts
index 955e3b5f7..52ea560e7 100644
--- a/catalog/src/ssr.ts
+++ b/catalog/src/ssr.ts
@@ -6,11 +6,11 @@
 
 // This file imports only files that will be SSRd e.g. if you can't SSR a
 // component, don't import it here.
+import '@material/web/all.js';
 import './components/catalog-component-header.js';
 import './components/catalog-component-header-title.js';
-import './components/top-app-bar.js';
 import './components/nav-drawer.js';
 import './components/theme-changer.js';
-import '@material/web/all.js';
+import './components/top-app-bar.js';
 // 🤫
-import '@material/web/labs/item/item.js';
\ No newline at end of file
+import '@material/web/labs/item/item.js';
diff --git a/catalog/src/svg/material-design-logo.ts b/catalog/src/svg/material-design-logo.ts
index 29a21fe1c..164f65884 100644
--- a/catalog/src/svg/material-design-logo.ts
+++ b/catalog/src/svg/material-design-logo.ts
@@ -11,8 +11,7 @@ import {html} from 'lit';
  *
  * Source: Internal google symbols search.
  */
-export const materialDesign = html`
-<svg
+export const materialDesign = html` <svg
   viewBox="0 96 960 960"
   fill="currentColor">
   <path
diff --git a/catalog/src/types/color-events.ts b/catalog/src/types/color-events.ts
index bc7b48ae9..2133cef85 100644
--- a/catalog/src/types/color-events.ts
+++ b/catalog/src/types/color-events.ts
@@ -32,7 +32,7 @@ export class ChangeDarkModeEvent extends Event {
   /**
    * @param mode The new color mode to apply.
    */
-  constructor(public mode: 'light'|'dark'|'auto') {
+  constructor(public mode: 'light' | 'dark' | 'auto') {
     super('change-mode', {bubbles: true, composed: true});
   }
 }
diff --git a/catalog/src/types/is-land.d.ts b/catalog/src/types/is-land.d.ts
index e84f473f8..4572eea05 100644
--- a/catalog/src/types/is-land.d.ts
+++ b/catalog/src/types/is-land.d.ts
@@ -8,4 +8,4 @@ declare module '@11ty/is-land' {
   export class Island extends HTMLElement {
     forceFallback(): void;
   }
-}
\ No newline at end of file
+}
diff --git a/catalog/src/utils/apply-theme-string.ts b/catalog/src/utils/apply-theme-string.ts
index 3f2d59f9a..494ec5454 100644
--- a/catalog/src/utils/apply-theme-string.ts
+++ b/catalog/src/utils/apply-theme-string.ts
@@ -4,8 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-type WithStylesheet =
-    typeof globalThis&{[stylesheetName: string]: CSSStyleSheet | undefined};
+type WithStylesheet = typeof globalThis & {
+  [stylesheetName: string]: CSSStyleSheet | undefined;
+};
 
 /**
  * Applies a stringified CSS theme to a document or shadowroot by creating or
@@ -23,7 +24,10 @@ type WithStylesheet =
  *     used to generate the localstorage name.
  */
 export function applyThemeString(
-    doc: DocumentOrShadowRoot, themeString: string, ssName = 'material-theme') {
+  doc: DocumentOrShadowRoot,
+  themeString: string,
+  ssName = 'material-theme',
+) {
   // Get constructable stylesheet
   let sheet = (globalThis as WithStylesheet)[ssName];
   // Create a new sheet if it doesn't exist already and save it globally.
@@ -34,11 +38,13 @@ export function applyThemeString(
   }
 
   // Set the color of the URL bar because we are cool like that.
-  const surfaceContainer =
-      themeString.match(/--md-sys-color-surface-container:(.+?);/)?.[1];
+  const surfaceContainer = themeString.match(
+    /--md-sys-color-surface-container:(.+?);/,
+  )?.[1];
   if (surfaceContainer) {
-    document.querySelector('meta[name="theme-color"]')
-        ?.setAttribute('content', surfaceContainer);
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute('content', surfaceContainer);
   }
 
   sheet.replaceSync(themeString);
diff --git a/catalog/src/utils/material-color-helpers.ts b/catalog/src/utils/material-color-helpers.ts
index 324d8805f..775975266 100644
--- a/catalog/src/utils/material-color-helpers.ts
+++ b/catalog/src/utils/material-color-helpers.ts
@@ -4,7 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {argbFromHex, Hct, hexFromArgb, MaterialDynamicColors, SchemeContent} from '@material/material-color-utilities';
+import {
+  argbFromHex,
+  Hct,
+  hexFromArgb,
+  MaterialDynamicColors,
+  SchemeContent,
+} from '@material/material-color-utilities';
 
 import type {Theme} from '../types/color-events.js';
 
@@ -110,7 +116,10 @@ export function themeFromSourceColor(color: string, isDark: boolean): Theme {
  *     used to generate the localstorage name.
  */
 export function applyMaterialTheme(
-    doc: DocumentOrShadowRoot, theme: Theme, ssName = 'material-theme') {
+  doc: DocumentOrShadowRoot,
+  theme: Theme,
+  ssName = 'material-theme',
+) {
   let styleString = ':root,:host{';
   for (const [key, value] of Object.entries(theme)) {
     styleString += `--md-sys-color-${key}:${value};`;
diff --git a/catalog/src/utils/theme.ts b/catalog/src/utils/theme.ts
index 080363590..239a56c0f 100644
--- a/catalog/src/utils/theme.ts
+++ b/catalog/src/utils/theme.ts
@@ -4,9 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {applyMaterialTheme, themeFromSourceColor} from './material-color-helpers.js';
+import {
+  applyMaterialTheme,
+  themeFromSourceColor,
+} from './material-color-helpers.js';
 
-export type ColorMode = 'light'|'dark'|'auto';
+/** Color mode, either overriding light/dark or the user's preference. */
+export type ColorMode = 'light' | 'dark' | 'auto';
 
 /**
  * Generates a Material Theme from a given color and dark mode boolean, and
@@ -56,7 +60,7 @@ export function isModeDark(mode: ColorMode, saveAutoMode = true) {
  *
  * @return The current stringified material theme css string.
  */
-export function getCurrentThemeString(): string|null {
+export function getCurrentThemeString(): string | null {
   return localStorage.getItem('material-theme');
 }
 
@@ -65,7 +69,7 @@ export function getCurrentThemeString(): string|null {
  *
  * @return The current color mode.
  */
-export function getCurrentMode(): ColorMode|null {
+export function getCurrentMode(): ColorMode | null {
   return localStorage.getItem('color-mode') as ColorMode | null;
 }
 
@@ -83,7 +87,7 @@ export function saveColorMode(mode: ColorMode) {
  *
  * @return The current seed color.
  */
-export function getCurrentSeedColor(): string|null {
+export function getCurrentSeedColor(): string | null {
   return localStorage.getItem('seed-color');
 }
 
@@ -102,8 +106,10 @@ export function saveSeedColor(color: string) {
  * @return The last applied color mode while in "auto".
  */
 export function getLastSavedAutoColorMode() {
-  return localStorage.getItem('last-auto-color-mode') as | 'light' | 'dark' |
-      null;
+  return localStorage.getItem('last-auto-color-mode') as
+    | 'light'
+    | 'dark'
+    | null;
 }
 
 /**
@@ -112,7 +118,7 @@ export function getLastSavedAutoColorMode() {
  * @param mode The last applied color mode while in "auto" to be saved to local
  *     storage.
  */
-export function saveLastSavedAutoColorMode(mode: 'light'|'dark') {
+export function saveLastSavedAutoColorMode(mode: 'light' | 'dark') {
   localStorage.setItem('last-auto-color-mode', mode);
 }
 
diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts
index f05439323..afa51ddd8 100644
--- a/catalog/stories/components/knob-ui-components.ts
+++ b/catalog/stories/components/knob-ui-components.ts
@@ -8,10 +8,10 @@
 import '@material/web/button/outlined-button.js';
 import '@material/web/checkbox/checkbox.js';
 import '@material/web/radio/radio.js';
+import '@material/web/ripple/ripple.js';
 import '@material/web/select/filled-select.js';
 import '@material/web/select/select-option.js';
 import '@material/web/textfield/filled-text-field.js';
-import '@material/web/ripple/ripple.js';
 
 import {css, html, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
@@ -36,8 +36,7 @@ export function boolInput(): KnobUi<boolean> {
               touch-target="none"
               style="margin-inline-end: 16px;"
               .checked=${!!knob.latestValue}
-              @change="${valueChanged}"
-            >
+              @change="${valueChanged}">
             </md-checkbox>
             ${knob.name}
           </label>
@@ -70,11 +69,17 @@ export class KnobColorSelector extends LitElement {
       box-sizing: content-box;
       width: var(--_color-picker-size);
       height: var(--_color-picker-size);
-      margin: calc((var(--_component-size) - var(--_color-picker-size) - var(--_color-picker-border-width) * 2) / 2);
+      margin: calc(
+        (
+            var(--_component-size) - var(--_color-picker-size) -
+              var(--_color-picker-border-width) * 2
+          ) / 2
+      );
       padding: 0;
       cursor: pointer;
       border-radius: var(--_color-picker-border-width);
-      border: var(--_color-picker-border-width) solid var(--md-sys-color-outline);
+      border: var(--_color-picker-border-width) solid
+        var(--md-sys-color-outline);
       outline: none;
     }
 
@@ -126,9 +131,8 @@ export class KnobColorSelector extends LitElement {
       </span>
       <md-outlined-button
         @click=${() => {
-      this.hasAlpha = !this.hasAlpha;
-    }}
-      >
+          this.hasAlpha = !this.hasAlpha;
+        }}>
         ${this.hasAlpha ? 'rgba' : 'rgb'}
       </md-outlined-button>
     </span>`;
@@ -139,8 +143,7 @@ export class KnobColorSelector extends LitElement {
       style=${styleMap(sharedTextFieldStyles)}
       .value=${this.value}
       @change=${this.propagateEvt}
-      @input=${this.onInput}
-    ></md-filled-text-field>`;
+      @input=${this.onInput}></md-filled-text-field>`;
   }
 
   private renderColorInput() {
@@ -155,8 +158,7 @@ export class KnobColorSelector extends LitElement {
         id="color-picker"
         .value=${this.value}
         @change=${this.propagateEvt}
-        @input=${this.onInput}
-      />
+        @input=${this.onInput} />
     `;
   }
 
@@ -176,14 +178,16 @@ export class KnobColorSelector extends LitElement {
 
   override click() {
     const input = this.renderRoot!.querySelector(
-                      'input,md-filled-text-field') as HTMLElement;
+      'input,md-filled-text-field',
+    ) as HTMLElement;
     input.click();
     input.focus();
   }
 
   override focus() {
     const input = this.renderRoot!.querySelector(
-                      'input,md-filled-text-field') as HTMLElement;
+      'input,md-filled-text-field',
+    ) as HTMLElement;
     input.focus();
   }
 }
@@ -222,8 +226,7 @@ export function colorPicker(opts?: ColorPickerOpts): KnobUi<string> {
             <knob-color-selector
               .value="${knob.latestValue ?? ''}"
               .hasAlpha="${config.hasAlpha}"
-              @input=${valueChanged}
-            ></knob-color-selector>
+              @input=${valueChanged}></knob-color-selector>
             ${knob.name}
           </label>
         </div>
@@ -269,8 +272,7 @@ export function textInput<T>(options?: TextInputOptions<T>): KnobUi<T> {
             <md-filled-text-field
               style=${styleMap(sharedTextFieldStyles)}
               .value="${(knob.latestValue ?? '') as unknown as string}"
-              @input="${valueChanged}"
-            ></md-filled-text-field>
+              @input="${valueChanged}"></md-filled-text-field>
             ${knob.name}
           </label>
         </div>
@@ -311,8 +313,7 @@ export function numberInput(opts?: NumberInputOpts): KnobUi<number> {
               type="number"
               step="${config.step}"
               .value="${knob.latestValue ? knob.latestValue.toString() : '0'}"
-              @input="${valueChanged}"
-            ></md-filled-text-field>
+              @input="${valueChanged}"></md-filled-text-field>
             ${knob.name}
           </label>
         </div>
@@ -343,7 +344,7 @@ export function button(): KnobUi<number> {
 }
 
 interface RadioSelectorConfig<T extends string> {
-  readonly options: ReadonlyArray<{readonly value: T; readonly label: string;}>;
+  readonly options: ReadonlyArray<{readonly value: T; readonly label: string}>;
   readonly name: string;
 }
 
@@ -364,8 +365,7 @@ export function radioSelector<T extends string>({
             name="${name}"
             value="${value}"
             @change="${valueChanged}"
-            ?checked="${knob.latestValue === option.value}"
-          ></md-radio>
+            ?checked="${knob.latestValue === option.value}"></md-radio>
           ${option.label}
         </label>`;
       });
@@ -375,15 +375,15 @@ export function radioSelector<T extends string>({
 }
 
 interface SelectDropdownConfig<T extends string> {
-  readonly options: ReadonlyArray<{readonly value: T; readonly label: string;}>;
+  readonly options: ReadonlyArray<{readonly value: T; readonly label: string}>;
 }
 
 /** A select dropdown Knob UI. */
 export function selectDropdown<T extends string>({
   options,
-}: SelectDropdownConfig<T>): KnobUi<T|undefined> {
+}: SelectDropdownConfig<T>): KnobUi<T | undefined> {
   return {
-    render(knob: Knob<T|undefined>, onChange: (val: T) => void) {
+    render(knob: Knob<T | undefined>, onChange: (val: T) => void) {
       const valueChanged = (e: Event) => {
         onChange((e.target as HTMLInputElement).value as T);
       };
@@ -391,15 +391,14 @@ export function selectDropdown<T extends string>({
         return html`<md-select-option
           ?selected="${knob.latestValue === option.value}"
           .value="${option.value}"
-          .headline=${option.label}
-        ></md-select-option>`;
+          .headline=${option.label}></md-select-option>`;
       });
       return html`
         <label>
           <md-filled-select
-              @change="${valueChanged}"
-              menu-positioning="fixed"
-              style=${styleMap(sharedTextFieldStyles)}>
+            @change="${valueChanged}"
+            menu-positioning="fixed"
+            style=${styleMap(sharedTextFieldStyles)}>
             ${listItems}
           </md-filled-select>
           ${knob.name}
@@ -414,7 +413,10 @@ export function selectDropdown<T extends string>({
  * to the updated value.
  */
 export function cssCustomProperty(
-    knob: Knob<string>, val: string, containerOfRenderedStory: HTMLElement) {
+  knob: Knob<string>,
+  val: string,
+  containerOfRenderedStory: HTMLElement,
+) {
   const value = knob.isUnset ? knob.defaultValue : val;
   if (value) {
     containerOfRenderedStory.style.setProperty(knob.name, value);
diff --git a/catalog/stories/components/stories-renderer.ts b/catalog/stories/components/stories-renderer.ts
index 6e637ab08..25b57d674 100644
--- a/catalog/stories/components/stories-renderer.ts
+++ b/catalog/stories/components/stories-renderer.ts
@@ -66,10 +66,10 @@ export class StoriesRenderer extends LitElement {
   @property({type: Boolean}) hideLabels = false;
   @property({type: Boolean, reflect: true}) hasKnobs = false;
   @state() knobsOpen = true;
-  @state() knobsPanelType: 'modal'|'inline' = 'inline';
+  @state() knobsPanelType: 'modal' | 'inline' = 'inline';
 
-  private observedKnobs: undefined|KnobValues<PolymorphicArrayOfKnobs> =
-      undefined;
+  private observedKnobs: undefined | KnobValues<PolymorphicArrayOfKnobs> =
+    undefined;
 
   override render() {
     const collection = this.collection;
@@ -90,11 +90,12 @@ export class StoriesRenderer extends LitElement {
 
   private renderStories(stories: Story[]): TemplateResult[] {
     return stories.map((story) => {
-      let label: string|TemplateResult = '';
+      let label: string | TemplateResult = '';
 
       if (!this.hideLabels) {
-        const description =
-            story.description ? html`<small>${story.description}</small>` : '';
+        const description = story.description
+          ? html`<small>${story.description}</small>`
+          : '';
         label = html`
           <h3 class="m-headline5">${story.name}</h3>
           ${description}
@@ -113,7 +114,7 @@ export class StoriesRenderer extends LitElement {
   private renderKnobs(collection: Collection) {
     const knobs = collection.knobs;
 
-    let knobsSection: string|TemplateResult = '';
+    let knobsSection: string | TemplateResult = '';
 
     this.hasKnobs = !this.hideKnobs && !knobs.empty;
 
@@ -126,8 +127,7 @@ export class StoriesRenderer extends LitElement {
         <story-knob-panel
           .open=${this.knobsOpen}
           .type=${this.knobsPanelType}
-          @open-changed=${onOpenChanged}
-        >
+          @open-changed=${onOpenChanged}>
           ${knobs.renderUI()}
         </story-knob-panel>
       `;
@@ -163,7 +163,7 @@ export class StoriesRenderer extends LitElement {
 
   private updateObservedKnobs() {
     if (this.collection?.knobs === this.observedKnobs) {
-      return;  // nothing to do;
+      return; // nothing to do;
     }
     // Stop watching the knobs that we're currently observing.
     this.unobserveKnobs();
@@ -183,8 +183,9 @@ export class StoriesRenderer extends LitElement {
       for (const story of this.focusStories) {
         if (!allowedStories.has(story)) {
           console.error(
-              `A stories renderer can only render stories ` +
-              `from its collection.`);
+            `A stories renderer can only render stories ` +
+              `from its collection.`,
+          );
         } else {
           storiesToRender.push(story);
         }
@@ -199,7 +200,9 @@ export class StoriesRenderer extends LitElement {
   private unobserveKnobs() {
     if (this.observedKnobs !== undefined) {
       this.observedKnobs.removeEventListener(
-          'changed', this.boundRequestUpdate);
+        'changed',
+        this.boundRequestUpdate,
+      );
     }
   }
 
diff --git a/catalog/stories/components/story-knob-panel.ts b/catalog/stories/components/story-knob-panel.ts
index af4056565..46879a826 100644
--- a/catalog/stories/components/story-knob-panel.ts
+++ b/catalog/stories/components/story-knob-panel.ts
@@ -6,9 +6,9 @@
 
 /* Fork of Lit stories story-knob-renderer with m3 components and theming */
 
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/icon/icon.js';
 import '@material/web/elevation/elevation.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 
 import {css, html, LitElement, PropertyValues} from 'lit';
 import {customElement, property, query} from 'lit/decorators.js';
@@ -29,13 +29,13 @@ export const DEFAULT_DIMENSIONS = {
  */
 @customElement('story-knob-panel')
 export class StoryKnobPanel extends LitElement {
-  @query('.dragBar') dragBar!: HTMLElement|null;
+  @query('.dragBar') dragBar!: HTMLElement | null;
 
   @property({type: Boolean}) showCloseIcon = true;
   @property({type: Boolean, reflect: true}) open = false;
   @property({type: Boolean, reflect: true}) override draggable = false;
   @property({type: Boolean}) hideDragIcon = false;
-  @property({type: String, reflect: true}) type: 'modal'|'inline' = 'inline';
+  @property({type: String, reflect: true}) type: 'modal' | 'inline' = 'inline';
   private isDragging = false;
   private previousX = 0;
   private currentX = 0;
@@ -84,8 +84,7 @@ export class StoryKnobPanel extends LitElement {
           class="dragBar"
           @pointerdown=${this.onDragStart}
           @pointermove=${this.onDrag}
-          @pointerup=${this.onDragEnd}
-        >
+          @pointerup=${this.onDragEnd}>
           <md-icon>drag_handle</md-icon>
         </div>
       `;
@@ -99,8 +98,7 @@ export class StoryKnobPanel extends LitElement {
         <md-icon-button
           class="dragIconButton"
           aria-label=${iconLabel}
-          @click=${this.onDragIconClick}
-        >
+          @click=${this.onDragIconClick}>
           <md-icon>${iconSvg}</md-icon>
         </md-icon-button>
       `;
@@ -127,11 +125,13 @@ export class StoryKnobPanel extends LitElement {
     super.updated(changed);
 
     if (changed.has('open')) {
-      this.dispatchEvent(new CustomEvent('open-changed', {
-        detail: {
-          open: this.open,
-        },
-      }));
+      this.dispatchEvent(
+        new CustomEvent('open-changed', {
+          detail: {
+            open: this.open,
+          },
+        }),
+      );
     }
   }
 
@@ -181,11 +181,12 @@ export class StoryKnobPanel extends LitElement {
     }
 
     const rightBound = DEFAULT_DIMENSIONS.RIGHT_OFFSET;
-    const leftBound = DEFAULT_DIMENSIONS.RIGHT_OFFSET + this.containerWidth -
-        window.innerWidth;
+    const leftBound =
+      DEFAULT_DIMENSIONS.RIGHT_OFFSET + this.containerWidth - window.innerWidth;
     const topBound = -DEFAULT_DIMENSIONS.TOP_OFFSET;
-    const bottomBound = window.innerHeight -
-        (DEFAULT_DIMENSIONS.DRAG_BAR_HEIGHT + DEFAULT_DIMENSIONS.TOP_OFFSET);
+    const bottomBound =
+      window.innerHeight -
+      (DEFAULT_DIMENSIONS.DRAG_BAR_HEIGHT + DEFAULT_DIMENSIONS.TOP_OFFSET);
 
     // do not allow drag outside right bound
     if (x > rightBound) {
diff --git a/catalog/stories/components/story-renderer.ts b/catalog/stories/components/story-renderer.ts
index 9446ec215..044a338f8 100644
--- a/catalog/stories/components/story-renderer.ts
+++ b/catalog/stories/components/story-renderer.ts
@@ -6,7 +6,7 @@
 
 /* Slimmed down version of Lit stories story-renderer without IE renderer */
 
-import {css, LitElement, PropertyValues,} from 'lit';
+import {css, LitElement, PropertyValues} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
 import {Story} from '../story.js';
@@ -24,7 +24,7 @@ export class StoryRenderer extends LitElement {
     `,
   ];
   @property({attribute: false}) story?: Story = undefined;
-  private storyRenderComplete: Promise<void>|undefined = undefined;
+  private storyRenderComplete: Promise<void> | undefined = undefined;
 
   override updated(propertiesChanged: PropertyValues) {
     super.updated(propertiesChanged);
diff --git a/catalog/stories/index.ts b/catalog/stories/index.ts
index 084461adf..615c64a60 100644
--- a/catalog/stories/index.ts
+++ b/catalog/stories/index.ts
@@ -10,4 +10,4 @@ export * from './knobs.js';
 export * from './story.js';
 
 // This file is resolved by base.json
-import './components/stories-renderer.js';
\ No newline at end of file
+import './components/stories-renderer.js';
diff --git a/catalog/stories/knobs.ts b/catalog/stories/knobs.ts
index 559f8d6c8..4f3041879 100644
--- a/catalog/stories/knobs.ts
+++ b/catalog/stories/knobs.ts
@@ -53,8 +53,9 @@ export class Knob<T, Name extends string = string> extends EventTarget {
   private readonly onReset = () => {
     this.reset();
   };
-  private readonly renderedStoryContainers =
-      new Set<HTMLElement|DocumentFragment>();
+  private readonly renderedStoryContainers = new Set<
+    HTMLElement | DocumentFragment
+  >();
 
   constructor(readonly name: Name, init: KnobInit<T>) {
     super();
@@ -80,25 +81,28 @@ export class Knob<T, Name extends string = string> extends EventTarget {
    * Connect the knob's wiring, if any, up to a container of a rendered story.
    * This is fast and idempotent, so it's fine to call frequently.
    */
-  connectWiring(containerOfRenderedStory: HTMLElement|DocumentFragment) {
+  connectWiring(containerOfRenderedStory: HTMLElement | DocumentFragment) {
     // Fast path the common case where we have no wiring.
     if (!this.wiring) {
       return;
     }
-    const alreadyWired =
-        this.renderedStoryContainers.has(containerOfRenderedStory);
+    const alreadyWired = this.renderedStoryContainers.has(
+      containerOfRenderedStory,
+    );
     if (!alreadyWired) {
       this.renderedStoryContainers.add(containerOfRenderedStory);
       // Ensure default values are wired correctly.
-      if (this.dirty ||
-          (this.latestValue !== undefined &&
-           this.latestValue === this.defaultValue)) {
+      if (
+        this.dirty ||
+        (this.latestValue !== undefined &&
+          this.latestValue === this.defaultValue)
+      ) {
         this.wiring?.(this, this.latestValue!, containerOfRenderedStory);
       }
     }
   }
 
-  disconnectWiring(containerOfRenderedStory: HTMLElement|DocumentFragment) {
+  disconnectWiring(containerOfRenderedStory: HTMLElement | DocumentFragment) {
     return this.renderedStoryContainers.delete(containerOfRenderedStory);
   }
 
@@ -139,15 +143,17 @@ type KnobKeys<Knobs extends PolymorphicArrayOfKnobs> = Knobs[number]['name'];
  *
  * This type operator would return `number`.
  */
-type TypeOfKnobWithName<Knobs extends PolymorphicArrayOfKnobs,
-                                      SearchName extends string> =
-    Extract<Knobs[number], {name: SearchName}> extends Knob<infer U>?
-    U|undefined :
-    never;
+type TypeOfKnobWithName<
+  Knobs extends PolymorphicArrayOfKnobs,
+  SearchName extends string,
+> = Extract<Knobs[number], {name: SearchName}> extends Knob<infer U>
+  ? U | undefined
+  : never;
 
 /** A helper class for getting the latest value for a knob by name. */
-export class KnobValues<Knobs extends PolymorphicArrayOfKnobs> extends
-    EventTarget {
+export class KnobValues<
+  Knobs extends PolymorphicArrayOfKnobs,
+> extends EventTarget {
   private readonly byName: ReadonlyMap<string, Knob<unknown>>;
 
   constructor(knobsArray: PolymorphicArrayOfKnobs) {
@@ -156,25 +162,32 @@ export class KnobValues<Knobs extends PolymorphicArrayOfKnobs> extends
     for (const knob of knobsArray) {
       if (byName.has(knob.name)) {
         throw new Error(
-            `More than one knob with name '${knob.name}' given to a story.`);
+          `More than one knob with name '${knob.name}' given to a story.`,
+        );
       }
       byName.set(knob.name, knob);
       knob.addEventListener('changed', (e) => {
         this.dispatchEvent(
-            new CustomEvent('changed', {detail: {knobName: knob.name}}));
+          new CustomEvent('changed', {detail: {knobName: knob.name}}),
+        );
       });
     }
     this.byName = byName;
   }
 
-  get<SearchName extends KnobKeys<Knobs>>(knobName: SearchName):
-      TypeOfKnobWithName<Knobs, SearchName> {
-    return this.byName.get(knobName)?.latestValue as
-        TypeOfKnobWithName<Knobs, SearchName>;
+  get<SearchName extends KnobKeys<Knobs>>(
+    knobName: SearchName,
+  ): TypeOfKnobWithName<Knobs, SearchName> {
+    return this.byName.get(knobName)?.latestValue as TypeOfKnobWithName<
+      Knobs,
+      SearchName
+    >;
   }
 
   set<SearchName extends KnobKeys<Knobs>>(
-      knobName: SearchName, newValue: TypeOfKnobWithName<Knobs, SearchName>) {
+    knobName: SearchName,
+    newValue: TypeOfKnobWithName<Knobs, SearchName>,
+  ) {
     const knob = this.byName.get(knobName);
     if (knob === undefined) {
       throw new Error(`No knob with name ${knobName}`);
@@ -210,7 +223,7 @@ export class KnobValues<Knobs extends PolymorphicArrayOfKnobs> extends
    * Unlikely that any code outside of the stories system internals would
    * call this.
    */
-  connectWiring(container: HTMLElement|DocumentFragment) {
+  connectWiring(container: HTMLElement | DocumentFragment) {
     for (const knob of this.byName.values()) {
       if (container instanceof DocumentFragment) {
         container = container.firstElementChild as HTMLElement;
@@ -225,7 +238,7 @@ export class KnobValues<Knobs extends PolymorphicArrayOfKnobs> extends
    *
    * Returns false if the container wasn't actually connected.
    */
-  disconnectWiring(container: HTMLElement|DocumentFragment) {
+  disconnectWiring(container: HTMLElement | DocumentFragment) {
     let disconnected = false;
     for (const knob of this.byName.values()) {
       disconnected = knob.disconnectWiring(container) || disconnected;
@@ -261,8 +274,11 @@ export interface KnobUi<T> {
    *     and wiring may treat this case differently (e.g. restoring a value
    *     to the value it had before the wiring set it the first time).
    */
-  render(knob: Knob<T>, onChange: (val: T) => void, onReset: () => void):
-      TemplateResult;
+  render(
+    knob: Knob<T>,
+    onChange: (val: T) => void,
+    onReset: () => void,
+  ): TemplateResult;
 }
 
 /**
@@ -276,6 +292,9 @@ export interface KnobUi<T> {
  * wired up by just applying styles to the containerOfRenderedStory.
  */
 export interface KnobWiring<T> {
-  (knob: Knob<T>, val: T,
-   containerOfRenderedStory: HTMLElement|DocumentFragment): void;
+  (
+    knob: Knob<T>,
+    val: T,
+    containerOfRenderedStory: HTMLElement | DocumentFragment,
+  ): void;
 }
diff --git a/catalog/stories/material-collection.ts b/catalog/stories/material-collection.ts
index ca7648b06..9534a3ec8 100644
--- a/catalog/stories/material-collection.ts
+++ b/catalog/stories/material-collection.ts
@@ -52,11 +52,11 @@ export function title(): KnobUi<void> {
  * ```
  */
 export type KnobTypesToKnobs<
-    // tslint:disable-next-line:no-any No way to represent this type clearly.
-    T extends {[name: string]: any},
-              Names extends Extract<keyof T, string> = Extract<keyof T, string>,
-    // tslint:disable-next-line:no-any We need to "map" the union type to knobs.
-    > = ReadonlyArray<Names extends any ? Knob<T[Names], Names>: never>;
+  // tslint:disable-next-line:no-any No way to represent this type clearly.
+  T extends {[name: string]: any},
+  Names extends Extract<keyof T, string> = Extract<keyof T, string>,
+  // tslint:disable-next-line:no-any We need to "map" the union type to knobs.
+> = ReadonlyArray<Names extends any ? Knob<T[Names], Names> : never>;
 
 /**
  * An init object for Material Stories. This should be exposed to the user.
@@ -86,7 +86,7 @@ export type KnobTypesToKnobs<
 export interface MaterialStoryInit<T extends {[name: string]: any}> {
   name: string;
   render: (knobs: T) => TemplateResult | Promise<TemplateResult>;
-  styles?: CSSResult|CSSResult[];
+  styles?: CSSResult | CSSResult[];
 }
 
 /**
@@ -94,8 +94,8 @@ export interface MaterialStoryInit<T extends {[name: string]: any}> {
  */
 // tslint:disable-next-line:no-any No way to represent this type clearly.
 export function materialInitsToStoryInits<T extends {[name: string]: any}>(
-    inits: Array<MaterialStoryInit<T>>):
-    Array<LitStoryInit<KnobValues<KnobTypesToKnobs<T>>>> {
+  inits: Array<MaterialStoryInit<T>>,
+): Array<LitStoryInit<KnobValues<KnobTypesToKnobs<T>>>> {
   return inits.map((init) => {
     return {
       name: init.name,
@@ -119,4 +119,4 @@ export function setUpDemo(collection: LitCollection): void {
   const renderer = document.createElement('stories-renderer');
   renderer.collection = collection;
   document.body.appendChild(renderer);
-}
\ No newline at end of file
+}
diff --git a/catalog/stories/story.ts b/catalog/stories/story.ts
index e9274798d..2a5b0dc74 100644
--- a/catalog/stories/story.ts
+++ b/catalog/stories/story.ts
@@ -24,22 +24,23 @@ export interface BaseStoryInit {
 type GenericKnobValues = KnobValues<PolymorphicArrayOfKnobs>;
 
 /** A story with an arbitrary render function. */
-export interface StoryInit<
-    KV extends GenericKnobValues = GenericKnobValues> extends BaseStoryInit {
-  render(container: HTMLElement|DocumentFragment, knobs: KV): Promise<void>;
+export interface StoryInit<KV extends GenericKnobValues = GenericKnobValues>
+  extends BaseStoryInit {
+  render(container: HTMLElement | DocumentFragment, knobs: KV): Promise<void>;
   styles?: CSSStyleSheet[];
 }
 
-class StoryImpl<Knobs extends PolymorphicArrayOfKnobs =
-                                  PolymorphicArrayOfKnobs> {
+class StoryImpl<
+  Knobs extends PolymorphicArrayOfKnobs = PolymorphicArrayOfKnobs,
+> {
   readonly name: string;
   readonly id: string;
-  readonly description: string|undefined;
-  readonly render: (container: HTMLElement|DocumentFragment) => Promise<void>;
-  readonly dispose: (container: HTMLElement|DocumentFragment) => void;
+  readonly description: string | undefined;
+  readonly render: (container: HTMLElement | DocumentFragment) => Promise<void>;
+  readonly dispose: (container: HTMLElement | DocumentFragment) => void;
   readonly knobs: KnobValues<Knobs>;
 
-  private readonly initStyles: CSSStyleSheet[]|undefined;
+  private readonly initStyles: CSSStyleSheet[] | undefined;
 
   get styles() {
     let styles = [...this.collection.customStyles];
@@ -54,19 +55,22 @@ class StoryImpl<Knobs extends PolymorphicArrayOfKnobs =
     this.description = init.description;
     this.id = init.id || this.name.replace(/ /g, '_').replace(/,/g, '');
     if (this.id.includes('/')) {
-      const message = `A story id can't contain a '/' character. ` +
-          `The name can, but if so you have to give an ` +
-          `explicit id that doesn't.`;
+      const message =
+        `A story id can't contain a '/' character. ` +
+        `The name can, but if so you have to give an ` +
+        `explicit id that doesn't.`;
       throw new Error(message);
     }
-    const wrapperDivMap =
-        new WeakMap<HTMLElement|DocumentFragment, HTMLDivElement>();
+    const wrapperDivMap = new WeakMap<
+      HTMLElement | DocumentFragment,
+      HTMLDivElement
+    >();
 
     this.initStyles = init.styles;
 
     this.knobs = collection.knobs;
 
-    this.render = async (container: HTMLElement|DocumentFragment) => {
+    this.render = async (container: HTMLElement | DocumentFragment) => {
       let wrapperDiv = wrapperDivMap.get(container);
       if (wrapperDiv === undefined) {
         wrapperDiv = document.createElement('div');
@@ -77,7 +81,7 @@ class StoryImpl<Knobs extends PolymorphicArrayOfKnobs =
       await init.render(wrapperDiv, this.knobs);
     };
 
-    this.dispose = (container: HTMLElement|DocumentFragment) => {
+    this.dispose = (container: HTMLElement | DocumentFragment) => {
       wrapperDivMap.delete(container);
       render(nothing, container);
     };
@@ -93,8 +97,9 @@ class StoryImpl<Knobs extends PolymorphicArrayOfKnobs =
  * The type is exposed here, but the implementation isn't, because a Story
  * must be constructed via a Collection.
  */
-export type Story<Knobs extends PolymorphicArrayOfKnobs =
-                                    PolymorphicArrayOfKnobs> = StoryImpl<Knobs>;
+export type Story<
+  Knobs extends PolymorphicArrayOfKnobs = PolymorphicArrayOfKnobs,
+> = StoryImpl<Knobs>;
 
 /**
  * A tree of related stories and sub-collections.
@@ -106,9 +111,10 @@ export type Story<Knobs extends PolymorphicArrayOfKnobs =
  * either a toplevel collection for a named component, or it is a member of
  * exactly one collection.
  */
-export class Collection<T extends PolymorphicArrayOfKnobs =
-                                      ReadonlyArray<Knob<unknown>>> {
-  private readonly children = new Map<string, Story|Collection>();
+export class Collection<
+  T extends PolymorphicArrayOfKnobs = ReadonlyArray<Knob<unknown>>,
+> {
+  private readonly children = new Map<string, Story | Collection>();
   readonly customStyles: CSSStyleSheet[] = [];
   private static readonly collectionsByName = new Map<string, Collection>();
   readonly knobs: KnobValues<T>;
@@ -136,7 +142,7 @@ export class Collection<T extends PolymorphicArrayOfKnobs =
     return stories;
   }
 
-  get tree(): ReadonlyMap<string, Story<T>|Collection<T>> {
+  get tree(): ReadonlyMap<string, Story<T> | Collection<T>> {
     return this.children;
   }
 
@@ -148,8 +154,9 @@ export class Collection<T extends PolymorphicArrayOfKnobs =
     for (const init of inits) {
       const story = new StoryImpl(init, this);
       if (this.children.has(story.id)) {
-        const message = `A story or subcollection already exists with the id ${
-            JSON.stringify(story.id)}`;
+        const message = `A story or subcollection already exists with the id ${JSON.stringify(
+          story.id,
+        )}`;
         // Don't throw an error, as that will disrupt live_reload / hot reload,
         // by halting this module's initialization.
         console.error(message);
@@ -168,10 +175,10 @@ export class Collection<T extends PolymorphicArrayOfKnobs =
  * Describes a single configuration of a specific web UI component.
  */
 export interface LitStoryInit<
-    KV extends KnobValues<PolymorphicArrayOfKnobs> =
-                   KnobValues<PolymorphicArrayOfKnobs>> extends BaseStoryInit {
-  renderLit(knobs: KV): TemplateResult|Promise<TemplateResult>;
-  litStyles?: CSSResult|CSSResult[];
+  KV extends KnobValues<PolymorphicArrayOfKnobs> = KnobValues<PolymorphicArrayOfKnobs>,
+> extends BaseStoryInit {
+  renderLit(knobs: KV): TemplateResult | Promise<TemplateResult>;
+  litStyles?: CSSResult | CSSResult[];
 }
 
 function isLitStoryInit(init: Partial<LitStoryInit>): init is LitStoryInit {
@@ -181,19 +188,21 @@ function isLitStoryInit(init: Partial<LitStoryInit>): init is LitStoryInit {
 /**
  * A collection with convenience methods for rendering lit-html templates.
  */
-export class LitCollection<T extends PolymorphicArrayOfKnobs =
-                                         ReadonlyArray<Knob<unknown>>> extends
-    Collection<T> {
+export class LitCollection<
+  T extends PolymorphicArrayOfKnobs = ReadonlyArray<Knob<unknown>>,
+> extends Collection<T> {
   override addStories(
-      ...inits: Array<StoryInit<KnobValues<T>>|LitStoryInit<KnobValues<T>>>) {
+    ...inits: Array<StoryInit<KnobValues<T>> | LitStoryInit<KnobValues<T>>>
+  ) {
     const simpleInits: StoryInit[] = [];
     for (const init of inits) {
       if (isLitStoryInit(init)) {
         let styles: CSSStyleSheet[] = [];
         if (init.litStyles) {
-          styles = init.litStyles instanceof Array ?
-              init.litStyles.map((s) => s.styleSheet!) :
-              [init.litStyles.styleSheet!];
+          styles =
+            init.litStyles instanceof Array
+              ? init.litStyles.map((s) => s.styleSheet!)
+              : [init.litStyles.styleSheet!];
         }
         simpleInits.push({
           ...init,
diff --git a/catalog/stories/theme-loader.ts b/catalog/stories/theme-loader.ts
index 91a8047b5..eda95aa61 100644
--- a/catalog/stories/theme-loader.ts
+++ b/catalog/stories/theme-loader.ts
@@ -44,7 +44,6 @@ const postdoc = new PostDoc({
   onMessage,
 });
 
-
 await postdoc.handshake;
 
 // Request the initial theme.
diff --git a/checkbox/checkbox_test.ts b/checkbox/checkbox_test.ts
index d73db3969..0b58261bc 100644
--- a/checkbox/checkbox_test.ts
+++ b/checkbox/checkbox_test.ts
@@ -20,63 +20,68 @@ describe('<md-checkbox>', () => {
 
   describe('forms', () => {
     createFormTests({
-      queryControl: root => root.querySelector('md-checkbox'),
+      queryControl: (root) => root.querySelector('md-checkbox'),
       valueTests: [
         {
           name: 'unnamed',
           render: () => html`<md-checkbox checked></md-checkbox>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form without a name')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form without a name')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'unchecked',
           render: () => html`<md-checkbox name="checkbox"></md-checkbox>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when unchecked')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form when unchecked')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'checked default value',
           render: () =>
-              html`<md-checkbox name="checkbox" checked></md-checkbox>`,
+            html`<md-checkbox name="checkbox" checked></md-checkbox>`,
           assertValue(formData) {
             expect(formData.get('checkbox')).toBe('on');
-          }
+          },
         },
         {
           name: 'checked custom value',
           render: () =>
-              html`<md-checkbox name="checkbox" checked value="Custom value"></md-checkbox>`,
+            html`<md-checkbox
+              name="checkbox"
+              checked
+              value="Custom value"></md-checkbox>`,
           assertValue(formData) {
             expect(formData.get('checkbox')).toBe('Custom value');
-          }
+          },
         },
         {
           name: 'indeterminate',
           render: () =>
-              html`<md-checkbox name="checkbox" checked indeterminate></md-checkbox>`,
+            html`<md-checkbox
+              name="checkbox"
+              checked
+              indeterminate></md-checkbox>`,
           assertValue(formData) {
             expect(formData)
-                .withContext(
-                    'should not add anything to form when indeterminate')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form when indeterminate')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'disabled',
           render: () =>
-              html`<md-checkbox name="checkbox" checked disabled></md-checkbox>`,
+            html`<md-checkbox name="checkbox" checked disabled></md-checkbox>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when disabled')
-                .toHaveSize(0);
-          }
-        }
+              .withContext('should not add anything to form when disabled')
+              .toHaveSize(0);
+          },
+        },
       ],
       resetTests: [
         {
@@ -87,36 +92,36 @@ describe('<md-checkbox>', () => {
           },
           assertReset(checkbox) {
             expect(checkbox.checked)
-                .withContext('checkbox.checked after reset')
-                .toBeFalse();
-          }
+              .withContext('checkbox.checked after reset')
+              .toBeFalse();
+          },
         },
         {
           name: 'reset to checked',
           render: () =>
-              html`<md-checkbox name="checkbox" checked></md-checkbox>`,
+            html`<md-checkbox name="checkbox" checked></md-checkbox>`,
           change(checkbox) {
             checkbox.checked = false;
           },
           assertReset(checkbox) {
             expect(checkbox.checked)
-                .withContext('checkbox.checked after reset')
-                .toBeTrue();
-          }
+              .withContext('checkbox.checked after reset')
+              .toBeTrue();
+          },
         },
         {
           name: 'reset to indeterminate',
           render: () =>
-              html`<md-checkbox name="checkbox" indeterminate></md-checkbox>`,
+            html`<md-checkbox name="checkbox" indeterminate></md-checkbox>`,
           change(checkbox) {
             checkbox.indeterminate = false;
           },
           assertReset(checkbox) {
             expect(checkbox.indeterminate)
-                .withContext('checkbox.indeterminate should not be reset')
-                .toBeFalse();
-          }
-        }
+              .withContext('checkbox.indeterminate should not be reset')
+              .toBeFalse();
+          },
+        },
       ],
       restoreTests: [
         {
@@ -124,31 +129,31 @@ describe('<md-checkbox>', () => {
           render: () => html`<md-checkbox name="checkbox"></md-checkbox>`,
           assertRestored(checkbox) {
             expect(checkbox.checked)
-                .withContext('checkbox.checked after restore')
-                .toBeFalse();
-          }
+              .withContext('checkbox.checked after restore')
+              .toBeFalse();
+          },
         },
         {
           name: 'restore checked',
           render: () =>
-              html`<md-checkbox name="checkbox" checked></md-checkbox>`,
+            html`<md-checkbox name="checkbox" checked></md-checkbox>`,
           assertRestored(checkbox) {
             expect(checkbox.checked)
-                .withContext('checkbox.checked after restore')
-                .toBeTrue();
-          }
+              .withContext('checkbox.checked after restore')
+              .toBeTrue();
+          },
         },
         {
           name: 'restore indeterminate',
           render: () =>
-              html`<md-checkbox name="checkbox" indeterminate></md-checkbox>`,
+            html`<md-checkbox name="checkbox" indeterminate></md-checkbox>`,
           assertRestored(checkbox) {
             expect(checkbox.indeterminate)
-                .withContext('checkbox.indeterminate should not be restored')
-                .toBeFalse();
-          }
-        }
-      ]
+              .withContext('checkbox.indeterminate should not be restored')
+              .toBeFalse();
+          },
+        },
+      ],
     });
   });
 });
diff --git a/checkbox/demo/demo.ts b/checkbox/demo/demo.ts
index c520af9d7..79767ec5a 100644
--- a/checkbox/demo/demo.ts
+++ b/checkbox/demo/demo.ts
@@ -4,20 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Checkbox', [
-      new Knob('checked', {defaultValue: false, ui: boolInput()}),
-      new Knob('indeterminate', {defaultValue: false, ui: boolInput()}),
-      new Knob('disabled', {defaultValue: false, ui: boolInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Checkbox',
+  [
+    new Knob('checked', {defaultValue: false, ui: boolInput()}),
+    new Knob('indeterminate', {defaultValue: false, ui: boolInput()}),
+    new Knob('disabled', {defaultValue: false, ui: boolInput()}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/checkbox/demo/stories.ts b/checkbox/demo/stories.ts
index c4c7f0acd..f91d88880 100644
--- a/checkbox/demo/stories.ts
+++ b/checkbox/demo/stories.ts
@@ -6,7 +6,10 @@
 
 import '@material/web/checkbox/checkbox.js';
 
-import {labelStyles, MaterialStoryInit} from './material-collection.js';
+import {
+  labelStyles,
+  MaterialStoryInit,
+} from './material-collection.js';
 import {css, html} from 'lit';
 
 /** Knob types for checkbox stories. */
@@ -25,8 +28,7 @@ const checkbox: MaterialStoryInit<StoryKnobs> = {
         ?checked=${checked}
         ?disabled=${disabled}
         ?indeterminate=${indeterminate}
-        touch-target="wrapper"
-      ></md-checkbox>
+        touch-target="wrapper"></md-checkbox>
     `;
   },
 };
@@ -53,8 +55,7 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
           <md-checkbox
             ?disabled=${disabled}
             aria-label="Cats"
-            touch-target="wrapper"
-          ></md-checkbox>
+            touch-target="wrapper"></md-checkbox>
           Cats
         </label>
         <label>
@@ -62,8 +63,7 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
             checked
             ?disabled=${disabled}
             aria-label="dogs"
-            touch-target="wrapper"
-          ></md-checkbox>
+            touch-target="wrapper"></md-checkbox>
           Dogs
         </label>
         <label>
@@ -71,8 +71,7 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
             indeterminate
             ?disabled=${disabled}
             aria-label="Birds"
-            touch-target="wrapper"
-          ></md-checkbox>
+            touch-target="wrapper"></md-checkbox>
           Birds
         </label>
       </div>
diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts
index f0911483a..941b88b49 100644
--- a/checkbox/internal/checkbox.ts
+++ b/checkbox/internal/checkbox.ts
@@ -13,7 +13,11 @@ import {classMap} from 'lit/directives/class-map.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
-import {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+  redispatchEvent,
+} from '../../internal/controller/events.js';
 
 /**
  * A checkbox component.
@@ -26,7 +30,7 @@ export class Checkbox extends LitElement {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
   };
 
   /** @nocollapse */
@@ -126,12 +130,12 @@ export class Checkbox extends LitElement {
   @state() private prevChecked = false;
   @state() private prevDisabled = false;
   @state() private prevIndeterminate = false;
-  @query('input') private readonly input!: HTMLInputElement|null;
+  @query('input') private readonly input!: HTMLInputElement | null;
   // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
   // Replace with this.internals.validity.customError when resolved.
   private hasCustomValidityError = false;
-  private readonly internals =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  // Cast needed for closure
+  private readonly internals = (this as HTMLElement).attachInternals();
 
   constructor() {
     super();
@@ -196,12 +200,15 @@ export class Checkbox extends LitElement {
   }
 
   protected override update(changed: PropertyValues<Checkbox>) {
-    if (changed.has('checked') || changed.has('disabled') ||
-        changed.has('indeterminate')) {
+    if (
+      changed.has('checked') ||
+      changed.has('disabled') ||
+      changed.has('indeterminate')
+    ) {
       this.prevChecked = changed.get('checked') ?? this.checked;
       this.prevDisabled = changed.get('disabled') ?? this.disabled;
       this.prevIndeterminate =
-          changed.get('indeterminate') ?? this.indeterminate;
+        changed.get('indeterminate') ?? this.indeterminate;
     }
 
     const shouldAddFormValue = this.checked && !this.indeterminate;
@@ -235,7 +242,8 @@ export class Checkbox extends LitElement {
     // form.reportValidity() to work in Chrome.
     return html`
       <div class="container ${containerClasses}">
-        <input type="checkbox"
+        <input
+          type="checkbox"
           id="input"
           aria-checked=${isIndeterminate ? 'mixed' : nothing}
           aria-label=${ariaLabel || nothing}
@@ -244,8 +252,7 @@ export class Checkbox extends LitElement {
           ?required=${this.required}
           .indeterminate=${this.indeterminate}
           .checked=${this.checked}
-          @change=${this.handleChange}
-        >
+          @change=${this.handleChange} />
 
         <div class="outline"></div>
         <div class="background"></div>
@@ -284,7 +291,10 @@ export class Checkbox extends LitElement {
     }
 
     this.internals.setValidity(
-        input.validity, input.validationMessage, this.getInput());
+      input.validity,
+      input.validationMessage,
+      this.getInput(),
+    );
   }
 
   private getInput() {
diff --git a/checkbox/internal/checkbox_test.ts b/checkbox/internal/checkbox_test.ts
index ebc8bc40b..9106f4421 100644
--- a/checkbox/internal/checkbox_test.ts
+++ b/checkbox/internal/checkbox_test.ts
@@ -23,7 +23,8 @@ describe('checkbox', () => {
   const env = new Environment();
 
   async function setupTest(
-      template = html`<md-test-checkbox></md-test-checkbox>`) {
+    template = html`<md-test-checkbox></md-test-checkbox>`,
+  ) {
     const element = env.render(template).querySelector('md-test-checkbox');
     if (!element) {
       throw new Error('Could not query rendered <md-test-checkbox>.');
@@ -84,84 +85,78 @@ describe('checkbox', () => {
   });
 
   describe('checked', () => {
-    it('get/set updates the checked property on the native checkbox element',
-       async () => {
-         const {harness, input} = await setupTest();
-         harness.element.checked = true;
-         await env.waitForStability();
-         expect(input.checked).toEqual(true);
-         harness.element.checked = false;
-         await env.waitForStability();
-         expect(input.checked).toEqual(false);
-       });
+    it('get/set updates the checked property on the native checkbox element', async () => {
+      const {harness, input} = await setupTest();
+      harness.element.checked = true;
+      await env.waitForStability();
+      expect(input.checked).toEqual(true);
+      harness.element.checked = false;
+      await env.waitForStability();
+      expect(input.checked).toEqual(false);
+    });
 
-    it('get/set updates the checked property after user updates checked state',
-       async () => {
-         const {harness, input} = await setupTest();
+    it('get/set updates the checked property after user updates checked state', async () => {
+      const {harness, input} = await setupTest();
 
-         // Simulate user interaction setting checked to true.
-         await harness.clickWithMouse();
-         await env.waitForStability();
-         expect(input.checked).toEqual(true);
-         expect(harness.element.checked).toEqual(true);
+      // Simulate user interaction setting checked to true.
+      await harness.clickWithMouse();
+      await env.waitForStability();
+      expect(input.checked).toEqual(true);
+      expect(harness.element.checked).toEqual(true);
 
-         // Set custom element checked to false.
-         harness.element.checked = false;
-         await env.waitForStability();
-         expect(input.checked).toEqual(false);
-         expect(harness.element.checked).toEqual(false);
+      // Set custom element checked to false.
+      harness.element.checked = false;
+      await env.waitForStability();
+      expect(input.checked).toEqual(false);
+      expect(harness.element.checked).toEqual(false);
 
-         // Set custom element checked to true.
-         harness.element.checked = true;
-         await env.waitForStability();
-         expect(input.checked).toEqual(true);
-         expect(harness.element.checked).toEqual(true);
-       });
+      // Set custom element checked to true.
+      harness.element.checked = true;
+      await env.waitForStability();
+      expect(input.checked).toEqual(true);
+      expect(harness.element.checked).toEqual(true);
+    });
   });
 
   describe('indeterminate', () => {
-    it('get/set updates the indeterminate property on the native checkbox element',
-       async () => {
-         const {harness, input} = await setupTest();
-         harness.element.indeterminate = true;
-         await env.waitForStability();
+    it('get/set updates the indeterminate property on the native checkbox element', async () => {
+      const {harness, input} = await setupTest();
+      harness.element.indeterminate = true;
+      await env.waitForStability();
 
-         expect(input.indeterminate).toEqual(true);
-         expect(input.getAttribute('aria-checked')).toEqual('mixed');
+      expect(input.indeterminate).toEqual(true);
+      expect(input.getAttribute('aria-checked')).toEqual('mixed');
 
-         harness.element.indeterminate = false;
-         await env.waitForStability();
+      harness.element.indeterminate = false;
+      await env.waitForStability();
 
-         expect(input.indeterminate).toEqual(false);
-         expect(input.getAttribute('aria-checked')).not.toEqual('mixed');
-       });
+      expect(input.indeterminate).toEqual(false);
+      expect(input.getAttribute('aria-checked')).not.toEqual('mixed');
+    });
   });
 
   describe('disabled', () => {
-    it('get/set updates the disabled property on the native checkbox element',
-       async () => {
-         const {harness, input} = await setupTest();
-         harness.element.disabled = true;
-         await env.waitForStability();
+    it('get/set updates the disabled property on the native checkbox element', async () => {
+      const {harness, input} = await setupTest();
+      harness.element.disabled = true;
+      await env.waitForStability();
 
-         expect(input.disabled).toEqual(true);
-         harness.element.disabled = false;
-         await env.waitForStability();
-         expect(input.disabled).toEqual(false);
-       });
+      expect(input.disabled).toEqual(true);
+      harness.element.disabled = false;
+      await env.waitForStability();
+      expect(input.disabled).toEqual(false);
+    });
   });
 
   describe('form submission', () => {
     async function setupFormTest(propsInit: Partial<Checkbox> = {}) {
-      return await setupTest(html`
-        <form>
-          <md-test-checkbox
-           .checked=${propsInit.checked === true}
-           .disabled=${propsInit.disabled === true}
-           .name=${propsInit.name ?? ''}
-           .value=${propsInit.value ?? ''}
-          ></md-test-checkbox>
-        </form>`);
+      return await setupTest(html` <form>
+        <md-test-checkbox
+          .checked=${propsInit.checked === true}
+          .disabled=${propsInit.disabled === true}
+          .name=${propsInit.name ?? ''}
+          .value=${propsInit.value ?? ''}></md-test-checkbox>
+      </form>`);
     }
 
     it('does not submit if not checked', async () => {
@@ -171,8 +166,11 @@ describe('checkbox', () => {
     });
 
     it('does not submit if disabled', async () => {
-      const {harness} =
-          await setupFormTest({name: 'foo', checked: true, disabled: true});
+      const {harness} = await setupFormTest({
+        name: 'foo',
+        checked: true,
+        disabled: true,
+      });
       const formData = await harness.submitForm();
       expect(formData.get('foo')).toBeNull();
     });
@@ -185,8 +183,11 @@ describe('checkbox', () => {
     });
 
     it('submits under correct conditions', async () => {
-      const {harness} =
-          await setupFormTest({name: 'foo', checked: true, value: 'bar'});
+      const {harness} = await setupFormTest({
+        name: 'foo',
+        checked: true,
+        value: 'bar',
+      });
       const formData = await harness.submitForm();
       expect(formData.get('foo')).toEqual('bar');
     });
@@ -195,17 +196,21 @@ describe('checkbox', () => {
   describe('label activation', () => {
     async function setupLabelTest() {
       const test = await setupTest(html`
-          <label>
-            <md-test-checkbox></md-test-checkbox>
-          </label>
-        `);
-      const label = (test.harness.element.getRootNode() as HTMLElement)
-                        .querySelector<HTMLLabelElement>('label')!;
+        <label>
+          <md-test-checkbox></md-test-checkbox>
+        </label>
+      `);
+      const label = (
+        test.harness.element.getRootNode() as HTMLElement
+      ).querySelector<HTMLLabelElement>('label')!;
       return {...test, label};
     }
 
     it('toggles when label is clicked', async () => {
-      const {harness: {element}, label} = await setupLabelTest();
+      const {
+        harness: {element},
+        label,
+      } = await setupLabelTest();
       label.click();
       await env.waitForStability();
       expect(element.checked).toBeTrue();
@@ -221,8 +226,8 @@ describe('checkbox', () => {
       harness.element.required = true;
 
       expect(harness.element.validity.valueMissing)
-          .withContext('checkbox.validity.valueMissing')
-          .toBeTrue();
+        .withContext('checkbox.validity.valueMissing')
+        .toBeTrue();
     });
 
     it('should not set valueMissing when required and checked', async () => {
@@ -231,8 +236,8 @@ describe('checkbox', () => {
       harness.element.checked = true;
 
       expect(harness.element.validity.valueMissing)
-          .withContext('checkbox.validity.valueMissing')
-          .toBeFalse();
+        .withContext('checkbox.validity.valueMissing')
+        .toBeFalse();
     });
 
     it('should set valueMissing when required and indeterminate', async () => {
@@ -241,8 +246,8 @@ describe('checkbox', () => {
       harness.element.indeterminate = true;
 
       expect(harness.element.validity.valueMissing)
-          .withContext('checkbox.validity.valueMissing')
-          .toBeTrue();
+        .withContext('checkbox.validity.valueMissing')
+        .toBeTrue();
     });
   });
 });
diff --git a/chips/demo/demo.ts b/chips/demo/demo.ts
index 7aee954e6..9053f62f3 100644
--- a/chips/demo/demo.ts
+++ b/chips/demo/demo.ts
@@ -4,21 +4,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Chips', [
-      new Knob('label', {defaultValue: '', ui: textInput()}),
-      new Knob('elevated', {defaultValue: false, ui: boolInput()}),
-      new Knob('disabled', {defaultValue: false, ui: boolInput()}),
-      new Knob('scrolling', {defaultValue: false, ui: boolInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Chips',
+  [
+    new Knob('label', {defaultValue: '', ui: textInput()}),
+    new Knob('elevated', {defaultValue: false, ui: boolInput()}),
+    new Knob('disabled', {defaultValue: false, ui: boolInput()}),
+    new Knob('scrolling', {defaultValue: false, ui: boolInput()}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/chips/demo/stories.ts b/chips/demo/stories.ts
index d5e522110..98e0a68fb 100644
--- a/chips/demo/stories.ts
+++ b/chips/demo/stories.ts
@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
-import '@material/web/chips/chip-set.js';
 import '@material/web/chips/assist-chip.js';
+import '@material/web/chips/chip-set.js';
 import '@material/web/chips/filter-chip.js';
 import '@material/web/chips/input-chip.js';
 import '@material/web/chips/suggestion-chip.js';
+import '@material/web/icon/icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html, svg} from 'lit';
@@ -53,13 +53,11 @@ const assist: MaterialStoryInit<StoryKnobs> = {
         <md-assist-chip
           label=${label || 'Assist chip'}
           ?disabled=${disabled}
-          ?elevated=${elevated}
-        ></md-assist-chip>
+          ?elevated=${elevated}></md-assist-chip>
         <md-assist-chip
           label=${label || 'Assist chip with icon'}
           ?disabled=${disabled}
-          ?elevated=${elevated}
-        >
+          ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
         </md-assist-chip>
         <md-assist-chip
@@ -67,16 +65,16 @@ const assist: MaterialStoryInit<StoryKnobs> = {
           ?elevated=${elevated}
           href="https://google.com"
           target="_blank"
-        >${GOOGLE_LOGO}</md-assist-chip>
+          >${GOOGLE_LOGO}</md-assist-chip
+        >
         <md-assist-chip
           label=${label || 'Disabled assist chip (focusable)'}
           disabled
           always-focusable
-          ?elevated=${elevated}
-        ></md-assist-chip>
+          ?elevated=${elevated}></md-assist-chip>
       </md-chip-set>
     `;
-  }
+  },
 };
 
 const filters: MaterialStoryInit<StoryKnobs> = {
@@ -85,36 +83,31 @@ const filters: MaterialStoryInit<StoryKnobs> = {
   render({label, elevated, disabled, scrolling}) {
     const classes = {'scrolling': scrolling};
     return html`
-      <md-chip-set class=${classMap(classes)}
-          aria-label="Filter chips">
+      <md-chip-set class=${classMap(classes)} aria-label="Filter chips">
         <md-filter-chip
           label=${label || 'Filter chip'}
           ?disabled=${disabled}
-          ?elevated=${elevated}
-        ></md-filter-chip>
+          ?elevated=${elevated}></md-filter-chip>
         <md-filter-chip
           label=${label || 'Filter chip with icon'}
           ?disabled=${disabled}
-          ?elevated=${elevated}
-        >
+          ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
         </md-filter-chip>
         <md-filter-chip
           label=${label || 'Removable filter chip'}
           ?disabled=${disabled}
           ?elevated=${elevated}
-          removable
-        ></md-filter-chip>
+          removable></md-filter-chip>
         <md-filter-chip
           label=${label || 'Disabled filter chip (focusable)'}
           disabled
           always-focusable
           ?elevated=${elevated}
-          removable
-        ></md-filter-chip>
+          removable></md-filter-chip>
       </md-chip-set>
     `;
-  }
+  },
 };
 
 const inputs: MaterialStoryInit<StoryKnobs> = {
@@ -126,39 +119,37 @@ const inputs: MaterialStoryInit<StoryKnobs> = {
       <md-chip-set class=${classMap(classes)} aria-label="Input chips">
         <md-input-chip
           label=${label || 'Input chip'}
-          ?disabled=${disabled}
-        ></md-input-chip>
+          ?disabled=${disabled}></md-input-chip>
         <md-input-chip
           label=${label || 'Input chip with icon'}
-          ?disabled=${disabled}
-        >
+          ?disabled=${disabled}>
           <md-icon slot="icon">local_laundry_service</md-icon>
         </md-input-chip>
         <md-input-chip
           label=${label || 'Input chip with avatar'}
           ?disabled=${disabled}
-          avatar
-        >
-          <img slot="icon" src="https://lh3.googleusercontent.com/a/default-user=s48">
+          avatar>
+          <img
+            slot="icon"
+            src="https://lh3.googleusercontent.com/a/default-user=s48" />
         </md-input-chip>
         <md-input-chip
           label=${label || 'Input link chip'}
           href="https://google.com"
           target="_blank"
-        >${GOOGLE_LOGO}</md-input-chip>
+          >${GOOGLE_LOGO}</md-input-chip
+        >
         <md-input-chip
           label=${label || 'Remove-only input chip'}
           ?disabled=${disabled}
-          remove-only
-        ></md-input-chip>
+          remove-only></md-input-chip>
         <md-input-chip
           label=${label || 'Disabled input chip (focusable)'}
           disabled
-          always-focusable
-        ></md-input-chip>
+          always-focusable></md-input-chip>
       </md-chip-set>
     `;
-  }
+  },
 };
 
 const suggestions: MaterialStoryInit<StoryKnobs> = {
@@ -171,13 +162,11 @@ const suggestions: MaterialStoryInit<StoryKnobs> = {
         <md-suggestion-chip
           label=${label || 'Suggestion chip'}
           ?disabled=${disabled}
-          ?elevated=${elevated}
-        ></md-suggestion-chip>
+          ?elevated=${elevated}></md-suggestion-chip>
         <md-suggestion-chip
           label=${label || 'Suggestion chip with icon'}
           ?disabled=${disabled}
-          ?elevated=${elevated}
-        >
+          ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
         </md-suggestion-chip>
         <md-suggestion-chip
@@ -185,16 +174,16 @@ const suggestions: MaterialStoryInit<StoryKnobs> = {
           ?elevated=${elevated}
           href="https://google.com"
           target="_blank"
-        >${GOOGLE_LOGO}</md-suggestion-chip>
+          >${GOOGLE_LOGO}</md-suggestion-chip
+        >
         <md-suggestion-chip
           label=${label || 'Disabled suggestion chip (focusable)'}
           disabled
           always-focusable
-          ?elevated=${elevated}
-        ></md-suggestion-chip>
+          ?elevated=${elevated}></md-suggestion-chip>
       </md-chip-set>
     `;
-  }
+  },
 };
 
 /** Chips stories. */
diff --git a/chips/filter-chip.ts b/chips/filter-chip.ts
index 600d1aaff..01820897d 100644
--- a/chips/filter-chip.ts
+++ b/chips/filter-chip.ts
@@ -28,6 +28,10 @@ declare global {
 @customElement('md-filter-chip')
 export class MdFilterChip extends FilterChip {
   static override styles = [
-    sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles
+    sharedStyles,
+    elevatedStyles,
+    trailingIconStyles,
+    selectableStyles,
+    styles,
   ];
 }
diff --git a/chips/harness.ts b/chips/harness.ts
index 4e028e96f..484afbbc6 100644
--- a/chips/harness.ts
+++ b/chips/harness.ts
@@ -12,16 +12,18 @@ import {Chip} from './internal/chip.js';
  * Test harness for chips.
  */
 export class ChipHarness extends Harness<Chip> {
-  action: 'primary'|'trailing' = 'primary';
+  action: 'primary' | 'trailing' = 'primary';
 
   protected override async getInteractiveElement() {
     await this.element.updateComplete;
     const {primaryId} = this.element as unknown as {primaryId: string};
-    const primaryAction = primaryId &&
-        this.element.renderRoot.querySelector<HTMLElement>(`#${primaryId}`);
+    const primaryAction =
+      primaryId &&
+      this.element.renderRoot.querySelector<HTMLElement>(`#${primaryId}`);
     // Retrieve MultiActionChip's trailingAction
-    const {trailingAction} =
-        this.element as {trailingAction?: HTMLElement | null};
+    const {trailingAction} = this.element as {
+      trailingAction?: HTMLElement | null;
+    };
 
     // Default to trailing action if there isn't a primary action and the user
     // didn't explicitly set `harness.action = 'trailing'` (remove-only input
@@ -29,7 +31,8 @@ export class ChipHarness extends Harness<Chip> {
     if (this.action === 'trailing' || !primaryAction) {
       if (!trailingAction) {
         throw new Error(
-            '`ChipHarness.action` is "trailing", but the chip does not have a trailing action.');
+          '`ChipHarness.action` is "trailing", but the chip does not have a trailing action.',
+        );
       }
 
       return trailingAction;
@@ -37,7 +40,8 @@ export class ChipHarness extends Harness<Chip> {
 
     if (!primaryAction) {
       throw new Error(
-          '`ChipHarness.action` is "primary", but the chip does not have a primary action.');
+        '`ChipHarness.action` is "primary", but the chip does not have a primary action.',
+      );
     }
 
     return primaryAction;
diff --git a/chips/input-chip.ts b/chips/input-chip.ts
index 3311f4cd7..32e826e21 100644
--- a/chips/input-chip.ts
+++ b/chips/input-chip.ts
@@ -26,6 +26,10 @@ declare global {
  */
 @customElement('md-input-chip')
 export class MdInputChip extends InputChip {
-  static override styles =
-      [sharedStyles, trailingIconStyles, selectableStyles, styles];
+  static override styles = [
+    sharedStyles,
+    trailingIconStyles,
+    selectableStyles,
+    styles,
+  ];
 }
diff --git a/chips/internal/assist-chip.ts b/chips/internal/assist-chip.ts
index 3892ebabb..d342ddb2a 100644
--- a/chips/internal/assist-chip.ts
+++ b/chips/internal/assist-chip.ts
@@ -19,7 +19,7 @@ import {Chip} from './chip.js';
 export class AssistChip extends Chip {
   @property({type: Boolean}) elevated = false;
   @property() href = '';
-  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
+  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
   protected get primaryId() {
     return this.href ? 'link' : 'button';
@@ -44,22 +44,26 @@ export class AssistChip extends Chip {
     const {ariaLabel} = this as ARIAMixinStrict;
     if (this.href) {
       return html`
-        <a class="primary action"
+        <a
+          class="primary action"
           id="link"
           aria-label=${ariaLabel || nothing}
           href=${this.href}
           target=${this.target || nothing}
-        >${content}</a>
+          >${content}</a
+        >
       `;
     }
 
     return html`
-      <button class="primary action"
+      <button
+        class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         type="button"
-      >${content}</button>
+        >${content}</button
+      >
     `;
   }
 
diff --git a/chips/internal/assist-chip_test.ts b/chips/internal/assist-chip_test.ts
index d91226a55..fbf15218f 100644
--- a/chips/internal/assist-chip_test.ts
+++ b/chips/internal/assist-chip_test.ts
@@ -31,8 +31,8 @@ describe('Assist chip', () => {
       await chip.updateComplete;
 
       expect(chip.renderRoot.querySelector('a'))
-          .withContext('should have a rendered <a> link')
-          .toBeTruthy();
+        .withContext('should have a rendered <a> link')
+        .toBeTruthy();
     });
 
     it('should not allow link chips to be disabled', async () => {
@@ -42,8 +42,8 @@ describe('Assist chip', () => {
       await chip.updateComplete;
 
       expect(chip.renderRoot.querySelector('.disabled,:disabled'))
-          .withContext('should not have any disabled styling or behavior')
-          .toBeNull();
+        .withContext('should not have any disabled styling or behavior')
+        .toBeNull();
     });
   });
 });
diff --git a/chips/internal/chip-set.ts b/chips/internal/chip-set.ts
index 5b33e3268..c7ac6eeb8 100644
--- a/chips/internal/chip-set.ts
+++ b/chips/internal/chip-set.ts
@@ -7,7 +7,10 @@
 import {html, isServer, LitElement} from 'lit';
 import {queryAssignedElements} from 'lit/decorators.js';
 
-import {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';
+import {
+  polyfillElementInternalsAria,
+  setupHostAria,
+} from '../../internal/aria/aria.js';
 
 import {Chip} from './chip.js';
 
@@ -21,12 +24,16 @@ export class ChipSet extends LitElement {
 
   get chips() {
     return this.childElements.filter(
-        (child): child is Chip => child instanceof Chip);
+      (child): child is Chip => child instanceof Chip,
+    );
   }
 
   @queryAssignedElements() private readonly childElements!: HTMLElement[];
   private readonly internals = polyfillElementInternalsAria(
-      this, (this as HTMLElement /* needed for closure */).attachInternals());
+    this,
+    // Cast needed for closure
+    (this as HTMLElement).attachInternals(),
+  );
 
   constructor() {
     super();
@@ -71,7 +78,7 @@ export class ChipSet extends LitElement {
     // Check if moving forwards or backwards
     const isRtl = getComputedStyle(this).direction === 'rtl';
     const forwards = isRtl ? isLeft : isRight;
-    const focusedChip = chips.find(chip => chip.matches(':focus-within'));
+    const focusedChip = chips.find((chip) => chip.matches(':focus-within'));
     if (!focusedChip) {
       // If there is not already a chip focused, select the first or last chip
       // based on the direction we're traveling.
@@ -120,7 +127,7 @@ export class ChipSet extends LitElement {
     // The chip that should be focusable is either the chip that currently has
     // focus or the first chip that can be focused.
     const {chips} = this;
-    let chipToFocus: Chip|undefined;
+    let chipToFocus: Chip | undefined;
     for (const chip of chips) {
       const isChipFocusable = chip.alwaysFocusable || !chip.disabled;
       const chipIsFocused = chip.matches(':focus-within');
@@ -147,5 +154,5 @@ export class ChipSet extends LitElement {
 }
 
 interface MaybeMultiActionChip extends Chip {
-  focus(options?: FocusOptions&{trailing?: boolean}): void;
+  focus(options?: FocusOptions & {trailing?: boolean}): void;
 }
diff --git a/chips/internal/chip-set_test.ts b/chips/internal/chip-set_test.ts
index 244c05105..69379512a 100644
--- a/chips/internal/chip-set_test.ts
+++ b/chips/internal/chip-set_test.ts
@@ -19,14 +19,11 @@ import {ChipSet} from './chip-set.js';
 import {InputChip} from './input-chip.js';
 
 @customElement('test-chip-set')
-class TestChipSet extends ChipSet {
-}
+class TestChipSet extends ChipSet {}
 @customElement('test-chip-set-assist-chip')
-class TestAssistChip extends AssistChip {
-}
+class TestAssistChip extends AssistChip {}
 @customElement('test-chip-set-input-chip')
-class TestInputChip extends InputChip {
-}
+class TestInputChip extends InputChip {}
 
 describe('Chip set', () => {
   const env = new Environment();
@@ -61,42 +58,51 @@ describe('Chip set', () => {
 
   describe('navigation', () => {
     it('should add tabindex="-1" to all chips except the first', async () => {
-      const chipSet = await setupTest(
-          [new TestAssistChip(), new TestAssistChip(), new TestAssistChip()]);
+      const chipSet = await setupTest([
+        new TestAssistChip(),
+        new TestAssistChip(),
+        new TestAssistChip(),
+      ]);
 
       expect(chipSet.chips[0].getAttribute('tabindex'))
-          .withContext('first tabindex')
-          .toBe('0');
+        .withContext('first tabindex')
+        .toBe('0');
       expect(chipSet.chips[1].getAttribute('tabindex'))
-          .withContext('second tabindex')
-          .toBe('-1');
+        .withContext('second tabindex')
+        .toBe('-1');
       expect(chipSet.chips[2].getAttribute('tabindex'))
-          .withContext('third tabindex')
-          .toBe('-1');
+        .withContext('third tabindex')
+        .toBe('-1');
     });
 
-    async function testNavigation({chipSet, ltrKey, rtlKey, current, next}: {
-      chipSet: ChipSet,
-      ltrKey: string,
-      rtlKey: string,
-      current: Chip|null,
-      next: Chip,
+    async function testNavigation({
+      chipSet,
+      ltrKey,
+      rtlKey,
+      current,
+      next,
+    }: {
+      chipSet: ChipSet;
+      ltrKey: string;
+      rtlKey: string;
+      current: Chip | null;
+      next: Chip;
     }) {
       const harness = current ? new ChipHarness(current) : new Harness(chipSet);
       // Don't use harness focusing since we need to test real focus states
       current?.focus();
       await harness.keypress(ltrKey);
       expect(next.matches(':focus-within'))
-          .withContext(`next chip is focused in LTR after ${ltrKey}`)
-          .toBeTrue();
+        .withContext(`next chip is focused in LTR after ${ltrKey}`)
+        .toBeTrue();
 
       next.blur();
       chipSet.style.direction = 'rtl';
       current?.focus();
       await harness.keypress(rtlKey);
       expect(next.matches(':focus-within'))
-          .withContext(`next chip is focused in RTL after ${rtlKey}`)
-          .toBeTrue();
+        .withContext(`next chip is focused in RTL after ${rtlKey}`)
+        .toBeTrue();
     }
 
     it('should navigate forward on horizontal arrow keys', async () => {
@@ -109,7 +115,7 @@ describe('Chip set', () => {
         ltrKey: 'ArrowRight',
         rtlKey: 'ArrowLeft',
         current: first,
-        next: second
+        next: second,
       });
     });
 
@@ -123,7 +129,7 @@ describe('Chip set', () => {
         ltrKey: 'ArrowLeft',
         rtlKey: 'ArrowRight',
         current: second,
-        next: first
+        next: first,
       });
     });
 
@@ -137,7 +143,7 @@ describe('Chip set', () => {
         ltrKey: 'Home',
         rtlKey: 'Home',
         current: second,
-        next: first
+        next: first,
       });
     });
 
@@ -151,39 +157,37 @@ describe('Chip set', () => {
         ltrKey: 'End',
         rtlKey: 'End',
         current: second,
-        next: third
+        next: third,
       });
     });
 
-    it('should navigate to first chip on forward when none focused',
-       async () => {
-         const first = new TestAssistChip();
-         const second = new TestAssistChip();
-         const third = new TestAssistChip();
-         const chipSet = await setupTest([first, second, third]);
-         await testNavigation({
-           chipSet,
-           ltrKey: 'ArrowRight',
-           rtlKey: 'ArrowLeft',
-           current: null,
-           next: first
-         });
-       });
+    it('should navigate to first chip on forward when none focused', async () => {
+      const first = new TestAssistChip();
+      const second = new TestAssistChip();
+      const third = new TestAssistChip();
+      const chipSet = await setupTest([first, second, third]);
+      await testNavigation({
+        chipSet,
+        ltrKey: 'ArrowRight',
+        rtlKey: 'ArrowLeft',
+        current: null,
+        next: first,
+      });
+    });
 
-    it('should navigate to last chip on backward when none focused',
-       async () => {
-         const first = new TestAssistChip();
-         const second = new TestAssistChip();
-         const third = new TestAssistChip();
-         const chipSet = await setupTest([first, second, third]);
-         await testNavigation({
-           chipSet,
-           ltrKey: 'ArrowLeft',
-           rtlKey: 'ArrowRight',
-           current: null,
-           next: third
-         });
-       });
+    it('should navigate to last chip on backward when none focused', async () => {
+      const first = new TestAssistChip();
+      const second = new TestAssistChip();
+      const third = new TestAssistChip();
+      const chipSet = await setupTest([first, second, third]);
+      await testNavigation({
+        chipSet,
+        ltrKey: 'ArrowLeft',
+        rtlKey: 'ArrowRight',
+        current: null,
+        next: third,
+      });
+    });
 
     it('should skip over disabled chips', async () => {
       const first = new TestAssistChip();
@@ -196,7 +200,7 @@ describe('Chip set', () => {
         ltrKey: 'ArrowRight',
         rtlKey: 'ArrowLeft',
         current: first,
-        next: third
+        next: third,
       });
     });
 
@@ -212,7 +216,7 @@ describe('Chip set', () => {
         ltrKey: 'ArrowRight',
         rtlKey: 'ArrowLeft',
         current: first,
-        next: second
+        next: second,
       });
     });
 
@@ -226,11 +230,12 @@ describe('Chip set', () => {
       // Don't use harness focusing since we need to test real focus states
       second.focus();
       await harness.keypress('ArrowLeft');
-      const {trailingAction} =
-          first as unknown as {trailingAction: HTMLElement};
+      const {trailingAction} = first as unknown as {
+        trailingAction: HTMLElement;
+      };
       expect(trailingAction.matches(':focus-within'))
-          .withContext('trailing action of first chip is focused')
-          .toBeTrue();
+        .withContext('trailing action of first chip is focused')
+        .toBeTrue();
     });
 
     it('should ignore other keyboard events', async () => {
@@ -244,8 +249,8 @@ describe('Chip set', () => {
       first.focus();
       await harness.keypress('Enter');
       expect(first.matches(':focus-within'))
-          .withContext('first chip is still focused')
-          .toBeTrue();
+        .withContext('first chip is still focused')
+        .toBeTrue();
     });
 
     it('should do nothing if there are not at least two chips', async () => {
@@ -257,8 +262,8 @@ describe('Chip set', () => {
       single.focus();
       await harness.keypress('ArrowRight');
       expect(single.matches(':focus-within'))
-          .withContext('single chip is still focused')
-          .toBeTrue();
+        .withContext('single chip is still focused')
+        .toBeTrue();
     });
   });
 });
diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts
index 0d590cbdd..5262d6489 100644
--- a/chips/internal/chip.ts
+++ b/chips/internal/chip.ts
@@ -24,7 +24,7 @@ export abstract class Chip extends LitElement {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
   };
 
   /**
@@ -93,10 +93,10 @@ export abstract class Chip extends LitElement {
   protected renderContainerContent() {
     return html`
       ${this.renderOutline()}
-      <md-focus-ring part="focus-ring"
-          for=${this.primaryId}></md-focus-ring>
-      <md-ripple for=${this.primaryId}
-          ?disabled=${this.rippleDisabled}></md-ripple>
+      <md-focus-ring part="focus-ring" for=${this.primaryId}></md-focus-ring>
+      <md-ripple
+        for=${this.primaryId}
+        ?disabled=${this.rippleDisabled}></md-ripple>
       ${this.renderPrimaryAction(this.renderPrimaryContent())}
     `;
   }
diff --git a/chips/internal/chip_test.ts b/chips/internal/chip_test.ts
index a61714f38..d5da8ca4d 100644
--- a/chips/internal/chip_test.ts
+++ b/chips/internal/chip_test.ts
@@ -33,14 +33,13 @@ describe('Chip', () => {
     return {chip, harness: new ChipHarness(chip)};
   }
 
-  it('should dispatch `update-focus` for chip set when disabled changes',
-     async () => {
-       const {chip} = await setupTest();
-       const updateFocusListener = jasmine.createSpy('updateFocusListener');
-       chip.addEventListener('update-focus', updateFocusListener);
+  it('should dispatch `update-focus` for chip set when disabled changes', async () => {
+    const {chip} = await setupTest();
+    const updateFocusListener = jasmine.createSpy('updateFocusListener');
+    chip.addEventListener('update-focus', updateFocusListener);
 
-       chip.disabled = true;
-       await env.waitForStability();
-       expect(updateFocusListener).toHaveBeenCalled();
-     });
+    chip.disabled = true;
+    await env.waitForStability();
+    expect(updateFocusListener).toHaveBeenCalled();
+  });
 });
diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts
index 027ef9dea..8014faaac 100644
--- a/chips/internal/filter-chip.ts
+++ b/chips/internal/filter-chip.ts
@@ -27,9 +27,10 @@ export class FilterChip extends MultiActionChip {
     return 'button';
   }
 
-  @query('.primary.action') protected readonly primaryAction!: HTMLElement|null;
+  @query('.primary.action')
+  protected readonly primaryAction!: HTMLElement | null;
   @query('.trailing.action')
-  protected readonly trailingAction!: HTMLElement|null;
+  protected readonly trailingAction!: HTMLElement | null;
 
   protected override getContainerClasses() {
     return {
@@ -43,13 +44,15 @@ export class FilterChip extends MultiActionChip {
   protected override renderPrimaryAction(content: unknown) {
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`
-      <button class="primary action"
+      <button
+        class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
         aria-pressed=${this.selected}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         @click=${this.handleClick}
-      >${content}</button>
+        >${content}</button
+      >
     `;
   }
 
@@ -60,7 +63,8 @@ export class FilterChip extends MultiActionChip {
 
     return html`
       <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
-        <path d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
+        <path
+          d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
       </svg>
     `;
   }
@@ -70,7 +74,7 @@ export class FilterChip extends MultiActionChip {
       return renderRemoveButton({
         focusListener,
         ariaLabel: this.ariaLabelRemove,
-        disabled: this.disabled
+        disabled: this.disabled,
       });
     }
 
diff --git a/chips/internal/input-chip.ts b/chips/internal/input-chip.ts
index d19215b11..c2b01fff9 100644
--- a/chips/internal/input-chip.ts
+++ b/chips/internal/input-chip.ts
@@ -18,7 +18,7 @@ import {renderRemoveButton} from './trailing-icons.js';
 export class InputChip extends MultiActionChip {
   @property({type: Boolean}) avatar = false;
   @property() href = '';
-  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
+  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
   @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;
   @property({type: Boolean, reflect: true}) selected = false;
 
@@ -50,7 +50,7 @@ export class InputChip extends MultiActionChip {
   }
 
   @query('.trailing.action')
-  protected readonly trailingAction!: HTMLElement|null;
+  protected readonly trailingAction!: HTMLElement | null;
 
   protected override getContainerClasses() {
     return {
@@ -68,12 +68,14 @@ export class InputChip extends MultiActionChip {
     const {ariaLabel} = this as ARIAMixinStrict;
     if (this.href) {
       return html`
-        <a class="primary action"
+        <a
+          class="primary action"
           id="link"
           aria-label=${ariaLabel || nothing}
           href=${this.href}
           target=${this.target || nothing}
-        >${content}</a>
+          >${content}</a
+        >
       `;
     }
 
@@ -86,12 +88,14 @@ export class InputChip extends MultiActionChip {
     }
 
     return html`
-      <button class="primary action"
+      <button
+        class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         type="button"
-      >${content}</button>
+        >${content}</button
+      >
     `;
   }
 
diff --git a/chips/internal/input-chip_test.ts b/chips/internal/input-chip_test.ts
index b5df03ef6..e295c071a 100644
--- a/chips/internal/input-chip_test.ts
+++ b/chips/internal/input-chip_test.ts
@@ -31,8 +31,8 @@ describe('Input chip', () => {
       await chip.updateComplete;
 
       expect(chip.renderRoot.querySelector('a'))
-          .withContext('should have a rendered <a> link')
-          .toBeTruthy();
+        .withContext('should have a rendered <a> link')
+        .toBeTruthy();
     });
 
     it('should not allow link chips to be disabled', async () => {
@@ -42,8 +42,8 @@ describe('Input chip', () => {
       await chip.updateComplete;
 
       expect(chip.renderRoot.querySelector('.disabled,:disabled'))
-          .withContext('should not have any disabled styling or behavior')
-          .toBeNull();
+        .withContext('should not have any disabled styling or behavior')
+        .toBeNull();
     });
   });
 });
diff --git a/chips/internal/multi-action-chip.ts b/chips/internal/multi-action-chip.ts
index af427b7fe..21310c82d 100644
--- a/chips/internal/multi-action-chip.ts
+++ b/chips/internal/multi-action-chip.ts
@@ -24,7 +24,7 @@ export abstract class MultiActionChip extends Chip {
     const {ariaLabel} = this as ARIAMixinStrict;
     return `Remove ${ariaLabel || this.label}`;
   }
-  set ariaLabelRemove(ariaLabel: string|null) {
+  set ariaLabelRemove(ariaLabel: string | null) {
     const prev = this.ariaLabelRemove;
     if (ariaLabel === prev) {
       return;
@@ -39,8 +39,8 @@ export abstract class MultiActionChip extends Chip {
     this.requestUpdate();
   }
 
-  protected abstract readonly primaryAction: HTMLElement|null;
-  protected abstract readonly trailingAction: HTMLElement|null;
+  protected abstract readonly primaryAction: HTMLElement | null;
+  protected abstract readonly trailingAction: HTMLElement | null;
 
   constructor() {
     super();
@@ -50,7 +50,7 @@ export abstract class MultiActionChip extends Chip {
     }
   }
 
-  override focus(options?: FocusOptions&{trailing?: boolean}) {
+  override focus(options?: FocusOptions & {trailing?: boolean}) {
     const isFocusable = this.alwaysFocusable || !this.disabled;
     if (isFocusable && options?.trailing && this.trailingAction) {
       this.trailingAction.focus(options);
@@ -67,8 +67,9 @@ export abstract class MultiActionChip extends Chip {
     `;
   }
 
-  protected abstract renderTrailingAction(focusListener: EventListener):
-      unknown;
+  protected abstract renderTrailingAction(
+    focusListener: EventListener,
+  ): unknown;
 
   private handleKeyDown(event: KeyboardEvent) {
     const isLeft = event.key === 'ArrowLeft';
@@ -112,8 +113,12 @@ export abstract class MultiActionChip extends Chip {
     // shift+tab from the trailing action to move to the previous chip rather
     // than the primary action in the same chip.
     primaryAction.tabIndex = -1;
-    trailingAction.addEventListener('focusout', () => {
-      primaryAction.tabIndex = 0;
-    }, {once: true});
+    trailingAction.addEventListener(
+      'focusout',
+      () => {
+        primaryAction.tabIndex = 0;
+      },
+      {once: true},
+    );
   }
 }
diff --git a/chips/internal/multi-action-chip_test.ts b/chips/internal/multi-action-chip_test.ts
index 04a41674b..af8413381 100644
--- a/chips/internal/multi-action-chip_test.ts
+++ b/chips/internal/multi-action-chip_test.ts
@@ -17,7 +17,11 @@ import {renderRemoveButton} from './trailing-icons.js';
 
 @customElement('test-multi-action-chip')
 class TestMultiActionChip extends MultiActionChip {
-  static override styles = css`:host { position: relative; }`;
+  static override styles = css`
+    :host {
+      position: relative;
+    }
+  `;
 
   @query('#primary') primaryAction!: HTMLElement;
   @query('.trailing.action') trailingAction!: HTMLElement;
@@ -37,7 +41,7 @@ class TestMultiActionChip extends MultiActionChip {
     return renderRemoveButton({
       focusListener,
       ariaLabel: this.ariaLabelRemove,
-      disabled: this.disabled
+      disabled: this.disabled,
     });
   }
 }
@@ -59,13 +63,13 @@ describe('Multi-action chips', () => {
 
       await primaryHarness.focusWithKeyboard();
       expect(chip.primaryAction.matches(':focus-within'))
-          .withContext('primary action is focused')
-          .toBeTrue();
+        .withContext('primary action is focused')
+        .toBeTrue();
 
       await primaryHarness.keypress('ArrowRight');
       expect(chip.trailingAction.matches(':focus-within'))
-          .withContext('trailing action is focused')
-          .toBeTrue();
+        .withContext('trailing action is focused')
+        .toBeTrue();
     });
 
     it('should move internal focus forwards in rtl', async () => {
@@ -75,13 +79,13 @@ describe('Multi-action chips', () => {
 
       await primaryHarness.focusWithKeyboard();
       expect(chip.primaryAction.matches(':focus-within'))
-          .withContext('primary action is focused')
-          .toBeTrue();
+        .withContext('primary action is focused')
+        .toBeTrue();
 
       await primaryHarness.keypress('ArrowLeft');
       expect(chip.trailingAction.matches(':focus-within'))
-          .withContext('trailing action is focused')
-          .toBeTrue();
+        .withContext('trailing action is focused')
+        .toBeTrue();
     });
 
     it('should move internal focus backwards', async () => {
@@ -91,13 +95,13 @@ describe('Multi-action chips', () => {
 
       await trailingHarness.focusWithKeyboard();
       expect(chip.trailingAction.matches(':focus-within'))
-          .withContext('trailing action is focused')
-          .toBeTrue();
+        .withContext('trailing action is focused')
+        .toBeTrue();
 
       await trailingHarness.keypress('ArrowLeft');
       expect(chip.primaryAction.matches(':focus-within'))
-          .withContext('primary action is focused')
-          .toBeTrue();
+        .withContext('primary action is focused')
+        .toBeTrue();
     });
 
     it('should move internal focus backwards in rtl', async () => {
@@ -108,13 +112,13 @@ describe('Multi-action chips', () => {
 
       await trailingHarness.focusWithKeyboard();
       expect(chip.trailingAction.matches(':focus-within'))
-          .withContext('trailing action is focused')
-          .toBeTrue();
+        .withContext('trailing action is focused')
+        .toBeTrue();
 
       await trailingHarness.keypress('ArrowRight');
       expect(chip.primaryAction.matches(':focus-within'))
-          .withContext('primary action is focused')
-          .toBeTrue();
+        .withContext('primary action is focused')
+        .toBeTrue();
     });
 
     it('should not bubble when navigating internally', async () => {
@@ -132,38 +136,36 @@ describe('Multi-action chips', () => {
       expect(keydownHandler).not.toHaveBeenCalled();
     });
 
-    it('should bubble event when navigating forward past trailing action',
-       async () => {
-         const chip = await setupTest();
-         const trailingHarness = new ChipHarness(chip);
-         trailingHarness.action = 'trailing';
-         const keydownHandler = jasmine.createSpy();
-         if (!chip.parentElement) {
-           throw new Error('Expected chip to have a parentElement for test.');
-         }
+    it('should bubble event when navigating forward past trailing action', async () => {
+      const chip = await setupTest();
+      const trailingHarness = new ChipHarness(chip);
+      trailingHarness.action = 'trailing';
+      const keydownHandler = jasmine.createSpy();
+      if (!chip.parentElement) {
+        throw new Error('Expected chip to have a parentElement for test.');
+      }
 
-         chip.parentElement.addEventListener('keydown', keydownHandler);
+      chip.parentElement.addEventListener('keydown', keydownHandler);
 
-         await trailingHarness.focusWithKeyboard();
-         await trailingHarness.keypress('ArrowRight');
-         expect(keydownHandler).toHaveBeenCalledTimes(1);
-       });
+      await trailingHarness.focusWithKeyboard();
+      await trailingHarness.keypress('ArrowRight');
+      expect(keydownHandler).toHaveBeenCalledTimes(1);
+    });
 
-    it('should bubble event when navigating backward before primary action',
-       async () => {
-         const chip = await setupTest();
-         const primaryHarness = new ChipHarness(chip);
-         const keydownHandler = jasmine.createSpy();
-         if (!chip.parentElement) {
-           throw new Error('Expected chip to have a parentElement for test.');
-         }
+    it('should bubble event when navigating backward before primary action', async () => {
+      const chip = await setupTest();
+      const primaryHarness = new ChipHarness(chip);
+      const keydownHandler = jasmine.createSpy();
+      if (!chip.parentElement) {
+        throw new Error('Expected chip to have a parentElement for test.');
+      }
 
-         chip.parentElement.addEventListener('keydown', keydownHandler);
+      chip.parentElement.addEventListener('keydown', keydownHandler);
 
-         await primaryHarness.focusWithKeyboard();
-         await primaryHarness.keypress('ArrowLeft');
-         expect(keydownHandler).toHaveBeenCalledTimes(1);
-       });
+      await primaryHarness.focusWithKeyboard();
+      await primaryHarness.keypress('ArrowLeft');
+      expect(keydownHandler).toHaveBeenCalledTimes(1);
+    });
 
     it('should do nothing if it does not have multiple actions', async () => {
       const chip = await setupTest();
@@ -174,8 +176,8 @@ describe('Multi-action chips', () => {
       await primaryHarness.focusWithKeyboard();
       await primaryHarness.keypress('ArrowLeft');
       expect(chip.primaryAction.matches(':focus-within'))
-          .withContext('primary action is still focused')
-          .toBeTrue();
+        .withContext('primary action is still focused')
+        .toBeTrue();
     });
   });
 
@@ -186,12 +188,12 @@ describe('Multi-action chips', () => {
       harness.action = 'trailing';
 
       expect(chip.parentElement)
-          .withContext('chip should be attached before removing')
-          .not.toBeNull();
+        .withContext('chip should be attached before removing')
+        .not.toBeNull();
       await harness.clickWithMouse();
       expect(chip.parentElement)
-          .withContext('chip should be detached after removing')
-          .toBeNull();
+        .withContext('chip should be detached after removing')
+        .toBeNull();
     });
 
     it('should dispatch a "remove" event when removed', async () => {
@@ -205,20 +207,19 @@ describe('Multi-action chips', () => {
       expect(handler).toHaveBeenCalledTimes(1);
     });
 
-    it('should not remove chip if "remove" event is default prevented',
-       async () => {
-         const chip = await setupTest();
-         const harness = new ChipHarness(chip);
-         harness.action = 'trailing';
-         chip.addEventListener('remove', event => {
-           event.preventDefault();
-         });
+    it('should not remove chip if "remove" event is default prevented', async () => {
+      const chip = await setupTest();
+      const harness = new ChipHarness(chip);
+      harness.action = 'trailing';
+      chip.addEventListener('remove', (event) => {
+        event.preventDefault();
+      });
 
-         await harness.clickWithMouse();
-         expect(chip.parentElement)
-             .withContext('chip should still be attached')
-             .not.toBeNull();
-       });
+      await harness.clickWithMouse();
+      expect(chip.parentElement)
+        .withContext('chip should still be attached')
+        .not.toBeNull();
+    });
 
     it('should provide a default "ariaLabelRemove" value', async () => {
       const chip = await setupTest();
@@ -227,14 +228,13 @@ describe('Multi-action chips', () => {
       expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.label}`);
     });
 
-    it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided',
-       async () => {
-         const chip = await setupTest();
-         chip.label = 'Label';
-         chip.ariaLabel = 'Descriptive label';
+    it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided', async () => {
+      const chip = await setupTest();
+      chip.label = 'Label';
+      chip.ariaLabel = 'Descriptive label';
 
-         expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.ariaLabel}`);
-       });
+      expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.ariaLabel}`);
+    });
 
     it('should allow setting a custom "ariaLabelRemove"', async () => {
       const chip = await setupTest();
diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
index f3fd6ba89..234afe851 100644
--- a/chips/internal/trailing-icons.ts
+++ b/chips/internal/trailing-icons.ts
@@ -19,20 +19,24 @@ interface RemoveButtonProperties {
 }
 
 /** @protected */
-export function renderRemoveButton(
-    {ariaLabel, disabled, focusListener, tabbable = false}:
-        RemoveButtonProperties) {
+export function renderRemoveButton({
+  ariaLabel,
+  disabled,
+  focusListener,
+  tabbable = false,
+}: RemoveButtonProperties) {
   return html`
-    <button class="trailing action"
+    <button
+      class="trailing action"
       aria-label=${ariaLabel}
       tabindex=${!tabbable ? -1 : nothing}
       @click=${handleRemoveClick}
-      @focus=${focusListener}
-    >
+      @focus=${focusListener}>
       <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple ?disabled=${disabled}></md-ripple>
       <svg class="trailing icon" viewBox="0 96 960 960" aria-hidden="true">
-        <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" />
+        <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" />
       </svg>
       <span class="touch"></span>
     </button>
@@ -45,8 +49,9 @@ function handleRemoveClick(this: Chip, event: Event) {
   }
 
   event.stopPropagation();
-  const preventDefault =
-      !this.dispatchEvent(new Event('remove', {cancelable: true}));
+  const preventDefault = !this.dispatchEvent(
+    new Event('remove', {cancelable: true}),
+  );
   if (preventDefault) {
     return;
   }
diff --git a/dialog/demo/demo.ts b/dialog/demo/demo.ts
index 355168131..4b82893e5 100644
--- a/dialog/demo/demo.ts
+++ b/dialog/demo/demo.ts
@@ -4,22 +4,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Dialog', [
-      new Knob('icon', {defaultValue: '', ui: textInput()}),
-      new Knob('headline', {defaultValue: 'Dialog', ui: textInput()}),
-      new Knob(
-          'supportingText',
-          {defaultValue: 'Just a simple dialog.', ui: textInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Dialog',
+  [
+    new Knob('icon', {defaultValue: '', ui: textInput()}),
+    new Knob('headline', {defaultValue: 'Dialog', ui: textInput()}),
+    new Knob('supportingText', {
+      defaultValue: 'Just a simple dialog.',
+      ui: textInput(),
+    }),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts
index 598947f2b..e63038f58 100644
--- a/dialog/demo/stories.ts
+++ b/dialog/demo/stories.ts
@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/radio/radio.js';
-import '@material/web/icon/icon.js';
-import '@material/web/button/filled-tonal-button.js';
 import '@material/web/button/filled-button.js';
+import '@material/web/button/filled-tonal-button.js';
 import '@material/web/button/text-button.js';
 import '@material/web/dialog/dialog.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/radio/radio.js';
+import '@material/web/textfield/filled-text-field.js';
 
 import {MdDialog} from '@material/web/dialog/dialog.js';
 import {MaterialStoryInit} from './material-collection.js';
@@ -32,8 +32,9 @@ const standard: MaterialStoryInit<StoryKnobs> = {
   name: 'Dialog',
   render({icon, headline, supportingText}) {
     return html`
-      <md-filled-button @click=${showDialog}
-          aria-label="Open a dialog">Open</md-filled-button>
+      <md-filled-button @click=${showDialog} aria-label="Open a dialog"
+        >Open</md-filled-button
+      >
 
       <md-dialog aria-label=${headline ? nothing : 'A simple dialog'}>
         ${icon ? html`<md-icon slot="icon">${icon}</md-icon>` : nothing}
@@ -47,15 +48,16 @@ const standard: MaterialStoryInit<StoryKnobs> = {
         </div>
       </md-dialog>
     `;
-  }
+  },
 };
 
 const alert: MaterialStoryInit<StoryKnobs> = {
   name: 'Alert',
   render() {
     return html`
-      <md-filled-button @click=${showDialog}
-          aria-label="Open an alert dialog">Alert</md-filled-button>
+      <md-filled-button @click=${showDialog} aria-label="Open an alert dialog"
+        >Alert</md-filled-button
+      >
 
       <md-dialog type="alert">
         <div slot="headline">Alert dialog</div>
@@ -68,15 +70,18 @@ const alert: MaterialStoryInit<StoryKnobs> = {
         </div>
       </md-dialog>
     `;
-  }
+  },
 };
 
 const confirm: MaterialStoryInit<StoryKnobs> = {
   name: 'Confirm',
   render() {
     return html`
-      <md-filled-button @click=${showDialog}
-          aria-label="Open a confirmation dialog">Confirm</md-filled-button>
+      <md-filled-button
+        @click=${showDialog}
+        aria-label="Open a confirmation dialog"
+        >Confirm</md-filled-button
+      >
 
       <md-dialog style="max-width: 320px;">
         <div slot="headline">Permanently delete?</div>
@@ -87,12 +92,13 @@ const confirm: MaterialStoryInit<StoryKnobs> = {
         </form>
         <div slot="actions">
           <md-text-button form="form" value="delete">Delete</md-text-button>
-          <md-filled-tonal-button form="form" value="cancel"
-              autofocus>Cancel</md-filled-tonal-button>
+          <md-filled-tonal-button form="form" value="cancel" autofocus
+            >Cancel</md-filled-tonal-button
+          >
         </div>
       </md-dialog>
     `;
-  }
+  },
 };
 
 const choose: MaterialStoryInit<StoryKnobs> = {
@@ -105,22 +111,36 @@ const choose: MaterialStoryInit<StoryKnobs> = {
   `,
   render() {
     return html`
-      <md-filled-button @click=${showDialog}
-          aria-label="Open a choice dialog">Choice</md-filled-button>
+      <md-filled-button @click=${showDialog} aria-label="Open a choice dialog"
+        >Choice</md-filled-button
+      >
 
       <md-dialog>
         <div slot="headline">Choose your favorite pet</div>
         <form id="form" slot="content" method="dialog">
           <label>
-            <md-radio name="pet" value="cats" aria-label="Cats" touch-target="wrapper" checked></md-radio>
+            <md-radio
+              name="pet"
+              value="cats"
+              aria-label="Cats"
+              touch-target="wrapper"
+              checked></md-radio>
             <span aria-hidden="true">Cats</span>
           </label>
           <label>
-            <md-radio name="pet" value="dogs" aria-label="Dogs" touch-target="wrapper"></md-radio>
+            <md-radio
+              name="pet"
+              value="dogs"
+              aria-label="Dogs"
+              touch-target="wrapper"></md-radio>
             <span aria-hidden="true">Dogs</span>
           </label>
           <label>
-            <md-radio name="pet" value="birds" aria-label="Birds" touch-target="wrapper"></md-radio>
+            <md-radio
+              name="pet"
+              value="birds"
+              aria-label="Birds"
+              touch-target="wrapper"></md-radio>
             <span aria-hidden="true">Birds</span>
           </label>
         </form>
@@ -130,7 +150,7 @@ const choose: MaterialStoryInit<StoryKnobs> = {
         </div>
       </md-dialog>
     `;
-  }
+  },
 };
 
 const contacts: MaterialStoryInit<StoryKnobs> = {
@@ -140,7 +160,7 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
       min-width: calc(100vw - 212px);
     }
 
-    .contacts [slot="header"] {
+    .contacts [slot='header'] {
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
@@ -150,7 +170,8 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
       flex: 1;
     }
 
-    .contact-content, .contact-row {
+    .contact-content,
+    .contact-row {
       display: flex;
       gap: 8px;
     }
@@ -165,8 +186,9 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
   `,
   render() {
     return html`
-      <md-filled-button @click=${showDialog}
-          aria-label="Open a form dialog">Form</md-filled-button>
+      <md-filled-button @click=${showDialog} aria-label="Open a form dialog"
+        >Form</md-filled-button
+      >
 
       <md-dialog class="contacts">
         <span slot="headline">
@@ -177,7 +199,9 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
         </span>
         <form id="form" slot="content" method="dialog" class="contact-content">
           <div class="contact-row">
-            <md-filled-text-field autofocus label="First Name"></md-filled-text-field>
+            <md-filled-text-field
+              autofocus
+              label="First Name"></md-filled-text-field>
             <md-filled-text-field label="Last Name"></md-filled-text-field>
           </div>
           <div class="contact-row">
@@ -188,24 +212,23 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
           <md-filled-text-field label="Phone"></md-filled-text-field>
         </form>
         <div slot="actions">
-          <md-text-button form="form" value="reset" type="reset">Reset</md-text-button>
+          <md-text-button form="form" value="reset" type="reset"
+            >Reset</md-text-button
+          >
           <div style="flex: 1"></div>
           <md-text-button form="form" value="cancel">Cancel</md-text-button>
           <md-text-button form="form" value="save">Save</md-text-button>
         </div>
       </md-dialog>
     `;
-  }
+  },
 };
 
 const floatingSheet: MaterialStoryInit<StoryKnobs> = {
   name: 'Floating sheet',
   render() {
     return html`
-      <md-filled-button
-        @click=${showDialog}
-        aria-label="Open a floating sheet"
-      >
+      <md-filled-button @click=${showDialog} aria-label="Open a floating sheet">
         Floating sheet
       </md-filled-button>
 
@@ -217,16 +240,21 @@ const floatingSheet: MaterialStoryInit<StoryKnobs> = {
           </md-icon-button>
         </span>
         <form id="form" slot="content" method="dialog">
-          This is a floating sheet with title.
-          Floating sheets offer no action buttons at the bottom,
-          but there's a close icon button at the top right.
-          They accept any HTML content.
+          This is a floating sheet with title. Floating sheets offer no action
+          buttons at the bottom, but there's a close icon button at the top
+          right. They accept any HTML content.
         </form>
       </md-dialog>
     `;
-  }
+  },
 };
 
 /** Dialog stories. */
-export const stories =
-    [standard, alert, confirm, choose, contacts, floatingSheet];
+export const stories = [
+  standard,
+  alert,
+  confirm,
+  choose,
+  contacts,
+  floatingSheet,
+];
diff --git a/dialog/dialog_test.ts b/dialog/dialog_test.ts
index 17702de4d..5dd98065b 100644
--- a/dialog/dialog_test.ts
+++ b/dialog/dialog_test.ts
@@ -20,7 +20,7 @@ describe('<md-dialog>', () => {
       <md-dialog>
         <form id="form" method="dialog" slot="content">
           Content
-          <input autofocus>
+          <input autofocus />
         </form>
         <div slot="actions">
           <button form="form" value="button">Close</button>
@@ -107,14 +107,19 @@ describe('<md-dialog>', () => {
     it('closes when element with action is clicked', async () => {
       const {harness} = await setupTest();
       await harness.element.show();
-      const closedPromise = new Promise<void>(resolve => {
-        harness.element.addEventListener('closed', () => {
-          resolve();
-        }, {once: true});
+      const closedPromise = new Promise<void>((resolve) => {
+        harness.element.addEventListener(
+          'closed',
+          () => {
+            resolve();
+          },
+          {once: true},
+        );
       });
 
-      harness.element.querySelector<HTMLButtonElement>(
-                         '[value="button"]')!.click();
+      harness.element
+        .querySelector<HTMLButtonElement>('[value="button"]')!
+        .click();
       await closedPromise;
       expect(harness.element.open).toBeFalse();
       expect(harness.element.returnValue).toBe('button');
@@ -132,19 +137,18 @@ describe('<md-dialog>', () => {
       expect(isClosing).toHaveBeenCalled();
     });
 
-    it('focuses element with autofocus when shown and previously focused element when closed',
-       async () => {
-         const {harness, focusElement} = await setupTest();
-         const button = document.createElement('button');
-         document.body.append(button);
-         button.focus();
-         expect(document.activeElement).toBe(button);
-         await harness.element.show();
-         expect(document.activeElement).toBe(focusElement);
-         await harness.element.close();
-         expect(document.activeElement).toBe(button);
-         button.remove();
-       });
+    it('focuses element with autofocus when shown and previously focused element when closed', async () => {
+      const {harness, focusElement} = await setupTest();
+      const button = document.createElement('button');
+      document.body.append(button);
+      button.focus();
+      expect(document.activeElement).toBe(button);
+      await harness.element.show();
+      expect(document.activeElement).toBe(focusElement);
+      await harness.element.close();
+      expect(document.activeElement).toBe(button);
+      button.remove();
+    });
   });
 
   it('should set returnValue during the close event', async () => {
@@ -159,14 +163,14 @@ describe('<md-dialog>', () => {
     const returnValue = 'foo';
     await harness.element.close(returnValue);
     expect(returnValueDuringClose)
-        .withContext('dialog.returnValue during close event')
-        .toBe(returnValue);
+      .withContext('dialog.returnValue during close event')
+      .toBe(returnValue);
   });
 
   it('should not change returnValue if close event is canceled', async () => {
     const {harness} = await setupTest();
 
-    harness.element.addEventListener('close', event => {
+    harness.element.addEventListener('close', (event) => {
       event.preventDefault();
     });
 
@@ -174,8 +178,8 @@ describe('<md-dialog>', () => {
     const prevReturnValue = harness.element.returnValue;
     await harness.element.close('new return value');
     expect(harness.element.returnValue)
-        .withContext('dialog.returnValue after close event canceled')
-        .toBe(prevReturnValue);
+      .withContext('dialog.returnValue after close event canceled')
+      .toBe(prevReturnValue);
   });
 
   it('should open on connected if opened before connected to DOM', async () => {
@@ -185,50 +189,49 @@ describe('<md-dialog>', () => {
     dialog.addEventListener('open', openListener);
     dialog.open = true;
     expect(openListener)
-        .withContext('should not trigger open before connected')
-        .not.toHaveBeenCalled();
+      .withContext('should not trigger open before connected')
+      .not.toHaveBeenCalled();
 
     const root = env.render(html``);
     root.appendChild(dialog);
     await env.waitForStability();
     expect(openListener)
-        .withContext('opens after connecting')
-        .toHaveBeenCalled();
+      .withContext('opens after connecting')
+      .toHaveBeenCalled();
   });
 
-  it('should not open on connected if opened, but closed before connected to DOM',
-     async () => {
-       const openListener = jasmine.createSpy('openListener');
-       const dialog = document.createElement('md-dialog');
-       disableDialogAnimations(dialog);
-       dialog.addEventListener('open', openListener);
-       dialog.open = true;
-       await env.waitForStability();
-       dialog.open = false;
-       const root = env.render(html``);
-       root.appendChild(dialog);
-       await env.waitForStability();
-       expect(openListener)
-           .withContext('should not open on connected since close was called')
-           .not.toHaveBeenCalled();
-     });
+  it('should not open on connected if opened, but closed before connected to DOM', async () => {
+    const openListener = jasmine.createSpy('openListener');
+    const dialog = document.createElement('md-dialog');
+    disableDialogAnimations(dialog);
+    dialog.addEventListener('open', openListener);
+    dialog.open = true;
+    await env.waitForStability();
+    dialog.open = false;
+    const root = env.render(html``);
+    root.appendChild(dialog);
+    await env.waitForStability();
+    expect(openListener)
+      .withContext('should not open on connected since close was called')
+      .not.toHaveBeenCalled();
+  });
 
-  it('should not open on connected if opened before connection but closed after',
-     async () => {
-       const openListener = jasmine.createSpy('openListener');
-       const dialog = document.createElement('md-dialog');
-       disableDialogAnimations(dialog);
-       dialog.addEventListener('open', openListener);
-       dialog.open = true;
-       const root = env.render(html``);
-       root.appendChild(dialog);
-       dialog.open = false;
-       await env.waitForStability();
-       expect(openListener)
-           .withContext(
-               'should not open on connected since close was called before open could complete')
-           .not.toHaveBeenCalled();
-     });
+  it('should not open on connected if opened before connection but closed after', async () => {
+    const openListener = jasmine.createSpy('openListener');
+    const dialog = document.createElement('md-dialog');
+    disableDialogAnimations(dialog);
+    dialog.addEventListener('open', openListener);
+    dialog.open = true;
+    const root = env.render(html``);
+    root.appendChild(dialog);
+    dialog.open = false;
+    await env.waitForStability();
+    expect(openListener)
+      .withContext(
+        'should not open on connected since close was called before open could complete',
+      )
+      .not.toHaveBeenCalled();
+  });
 
   it('should not dispatch close if closed while disconnected', async () => {
     const {harness, root} = await setupTest();
@@ -240,19 +243,19 @@ describe('<md-dialog>', () => {
     await env.waitForStability();
 
     expect(closeListener)
-        .withContext('should not trigger close when disconnected')
-        .not.toHaveBeenCalled();
+      .withContext('should not trigger close when disconnected')
+      .not.toHaveBeenCalled();
 
     await harness.element.close();
     expect(closeListener)
-        .withContext('should not trigger close when disconnected')
-        .not.toHaveBeenCalled();
+      .withContext('should not trigger close when disconnected')
+      .not.toHaveBeenCalled();
 
     root.appendChild(harness.element);
     await env.waitForStability();
     expect(closeListener)
-        .withContext('should not trigger close when disconnected')
-        .not.toHaveBeenCalled();
+      .withContext('should not trigger close when disconnected')
+      .not.toHaveBeenCalled();
   });
 });
 
diff --git a/dialog/harness.ts b/dialog/harness.ts
index 20a5a1a02..185614eb9 100644
--- a/dialog/harness.ts
+++ b/dialog/harness.ts
@@ -14,7 +14,8 @@ import {Dialog} from './internal/dialog.js';
 export class DialogHarness extends Harness<Dialog> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.querySelector<HTMLElement>('[autocomplete]') ??
-        this.element;
+    return (
+      this.element.querySelector<HTMLElement>('[autocomplete]') ?? this.element
+    );
   }
 }
diff --git a/dialog/internal/animations.ts b/dialog/internal/animations.ts
index 826a9187e..7c7e3add4 100644
--- a/dialog/internal/animations.ts
+++ b/dialog/internal/animations.ts
@@ -54,20 +54,21 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {
     [
       // Dialog slide down
       [{'transform': 'translateY(-50px)'}, {'transform': 'translateY(0)'}],
-      {duration: 500, easing: EASING.EMPHASIZED}
+      {duration: 500, easing: EASING.EMPHASIZED},
     ],
   ],
   scrim: [
     [
       // Scrim fade in
-      [{'opacity': 0}, {'opacity': 0.32}], {duration: 500, easing: 'linear'}
+      [{'opacity': 0}, {'opacity': 0.32}],
+      {duration: 500, easing: 'linear'},
     ],
   ],
   container: [
     [
       // Container fade in
       [{'opacity': 0}, {'opacity': 1}],
-      {duration: 50, easing: 'linear', pseudoElement: '::before'}
+      {duration: 50, easing: 'linear', pseudoElement: '::before'},
     ],
     [
       // Container grow
@@ -83,21 +84,21 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {
     [
       // Headline fade in
       [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],
-      {duration: 250, easing: 'linear', fill: 'forwards'}
+      {duration: 250, easing: 'linear', fill: 'forwards'},
     ],
   ],
   content: [
     [
       // Content fade in
       [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],
-      {duration: 250, easing: 'linear', fill: 'forwards'}
+      {duration: 250, easing: 'linear', fill: 'forwards'},
     ],
   ],
   actions: [
     [
       // Actions fade in
       [{'opacity': 0}, {'opacity': 0, offset: 0.5}, {'opacity': 1}],
-      {duration: 300, easing: 'linear', fill: 'forwards'}
+      {duration: 300, easing: 'linear', fill: 'forwards'},
     ],
   ],
 };
@@ -110,13 +111,14 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {
     [
       // Dialog slide up
       [{'transform': 'translateY(0)'}, {'transform': 'translateY(-50px)'}],
-      {duration: 150, easing: EASING.EMPHASIZED_ACCELERATE}
+      {duration: 150, easing: EASING.EMPHASIZED_ACCELERATE},
     ],
   ],
   scrim: [
     [
       // Scrim fade out
-      [{'opacity': 0.32}, {'opacity': 0}], {duration: 150, easing: 'linear'}
+      [{'opacity': 0.32}, {'opacity': 0}],
+      {duration: 150, easing: 'linear'},
     ],
   ],
   container: [
@@ -133,27 +135,27 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {
       // Container fade out
       [{'opacity': '1'}, {'opacity': '0'}],
       {delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before'},
-    ]
+    ],
   ],
   headline: [
     [
       // Headline fade out
       [{'opacity': 1}, {'opacity': 0}],
-      {duration: 100, easing: 'linear', fill: 'forwards'}
+      {duration: 100, easing: 'linear', fill: 'forwards'},
     ],
   ],
   content: [
     [
       // Content fade out
       [{'opacity': 1}, {'opacity': 0}],
-      {duration: 100, easing: 'linear', fill: 'forwards'}
+      {duration: 100, easing: 'linear', fill: 'forwards'},
     ],
   ],
   actions: [
     [
       // Actions fade out
       [{'opacity': 1}, {'opacity': 0}],
-      {duration: 100, easing: 'linear', fill: 'forwards'}
+      {duration: 100, easing: 'linear', fill: 'forwards'},
     ],
   ],
 };
diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts
index 190d0f1fa..8e8ee49ab 100644
--- a/dialog/internal/dialog.ts
+++ b/dialog/internal/dialog.ts
@@ -14,7 +14,12 @@ import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
 import {redispatchEvent} from '../../internal/controller/events.js';
 
-import {DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, DialogAnimation, DialogAnimationArgs} from './animations.js';
+import {
+  DIALOG_DEFAULT_CLOSE_ANIMATION,
+  DIALOG_DEFAULT_OPEN_ANIMATION,
+  DialogAnimation,
+  DialogAnimationArgs,
+} from './animations.js';
 
 /**
  * A dialog component.
@@ -34,7 +39,7 @@ export class Dialog extends LitElement {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
   };
 
   /**
@@ -91,17 +96,17 @@ export class Dialog extends LitElement {
   // getIsConnectedPromise() immediately sets the resolve property.
   private isConnectedPromiseResolve!: () => void;
   private isConnectedPromise = this.getIsConnectedPromise();
-  @query('dialog') private readonly dialog!: HTMLDialogElement|null;
-  @query('.scrim') private readonly scrim!: HTMLDialogElement|null;
-  @query('.container') private readonly container!: HTMLDialogElement|null;
-  @query('.headline') private readonly headline!: HTMLDialogElement|null;
-  @query('.content') private readonly content!: HTMLDialogElement|null;
-  @query('.actions') private readonly actions!: HTMLDialogElement|null;
+  @query('dialog') private readonly dialog!: HTMLDialogElement | null;
+  @query('.scrim') private readonly scrim!: HTMLDialogElement | null;
+  @query('.container') private readonly container!: HTMLDialogElement | null;
+  @query('.headline') private readonly headline!: HTMLDialogElement | null;
+  @query('.content') private readonly content!: HTMLDialogElement | null;
+  @query('.actions') private readonly actions!: HTMLDialogElement | null;
   @state() private isAtScrollTop = false;
   @state() private isAtScrollBottom = false;
-  @query('.scroller') private readonly scroller!: HTMLElement|null;
-  @query('.top.anchor') private readonly topAnchor!: HTMLElement|null;
-  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement|null;
+  @query('.scroller') private readonly scroller!: HTMLElement | null;
+  @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;
+  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;
   private nextClickIsFromContent = false;
   private intersectionObserver?: IntersectionObserver;
   // Dialogs should not be SSR'd while open, so we can just use runtime checks.
@@ -139,8 +144,9 @@ export class Dialog extends LitElement {
       return;
     }
 
-    const preventOpen =
-        !this.dispatchEvent(new Event('open', {cancelable: true}));
+    const preventOpen = !this.dispatchEvent(
+      new Event('open', {cancelable: true}),
+    );
     if (preventOpen) {
       this.open = false;
       return;
@@ -191,8 +197,9 @@ export class Dialog extends LitElement {
 
     const prevReturnValue = this.returnValue;
     this.returnValue = returnValue;
-    const preventClose =
-        !this.dispatchEvent(new Event('close', {cancelable: true}));
+    const preventClose = !this.dispatchEvent(
+      new Event('close', {cancelable: true}),
+    );
     if (preventClose) {
       this.returnValue = prevReturnValue;
       return;
@@ -216,7 +223,7 @@ export class Dialog extends LitElement {
 
   protected override render() {
     const scrollable =
-        this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
+      this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
     const classes = {
       'has-headline': this.hasHeadline,
       'has-actions': this.hasActions,
@@ -236,18 +243,16 @@ export class Dialog extends LitElement {
         role=${this.type === 'alert' ? 'alertdialog' : nothing}
         @cancel=${this.handleCancel}
         @click=${this.handleDialogClick}
-        .returnValue=${this.returnValue || nothing}
-      >
-        <div class="container"
-          @click=${this.handleContentClick}
-        >
+        .returnValue=${this.returnValue || nothing}>
+        <div class="container" @click=${this.handleContentClick}>
           <div class="headline">
             <div class="icon" aria-hidden="true">
               <slot name="icon" @slotchange=${this.handleIconChange}></slot>
             </div>
             <h2 id="headline" aria-hidden=${!this.hasHeadline || nothing}>
-              <slot name="headline"
-                  @slotchange=${this.handleHeadlineChange}></slot>
+              <slot
+                name="headline"
+                @slotchange=${this.handleHeadlineChange}></slot>
             </h2>
             <md-divider></md-divider>
           </div>
@@ -260,8 +265,7 @@ export class Dialog extends LitElement {
           </div>
           <div class="actions">
             <md-divider></md-divider>
-            <slot name="actions"
-              @slotchange=${this.handleActionsChange}></slot>
+            <slot name="actions" @slotchange=${this.handleActionsChange}></slot>
           </div>
         </div>
       </dialog>
@@ -269,11 +273,14 @@ export class Dialog extends LitElement {
   }
 
   protected override firstUpdated() {
-    this.intersectionObserver = new IntersectionObserver(entries => {
-      for (const entry of entries) {
-        this.handleAnchorIntersection(entry);
-      }
-    }, {root: this.scroller!});
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          this.handleAnchorIntersection(entry);
+        }
+      },
+      {root: this.scroller!},
+    );
 
     this.intersectionObserver.observe(this.topAnchor!);
     this.intersectionObserver.observe(this.bottomAnchor!);
@@ -289,8 +296,9 @@ export class Dialog extends LitElement {
 
     // Click originated on the backdrop. Native `<dialog>`s will not cancel,
     // but Material dialogs do.
-    const preventDefault =
-        !this.dispatchEvent(new Event('cancel', {cancelable: true}));
+    const preventDefault = !this.dispatchEvent(
+      new Event('cancel', {cancelable: true}),
+    );
     if (preventDefault) {
       return;
     }
@@ -343,13 +351,16 @@ export class Dialog extends LitElement {
       scrim: scrimAnimate,
       headline: headlineAnimate,
       content: contentAnimate,
-      actions: actionsAnimate
+      actions: actionsAnimate,
     } = animation;
 
     const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [
-      [dialog, dialogAnimate ?? []], [scrim, scrimAnimate ?? []],
-      [container, containerAnimate ?? []], [headline, headlineAnimate ?? []],
-      [content, contentAnimate ?? []], [actions, actionsAnimate ?? []]
+      [dialog, dialogAnimate ?? []],
+      [scrim, scrimAnimate ?? []],
+      [container, containerAnimate ?? []],
+      [headline, headlineAnimate ?? []],
+      [content, contentAnimate ?? []],
+      [actions, actionsAnimate ?? []],
     ];
 
     const animations: Animation[] = [];
@@ -359,7 +370,7 @@ export class Dialog extends LitElement {
       }
     }
 
-    await Promise.all(animations.map(animation => animation.finished));
+    await Promise.all(animations.map((animation) => animation.finished));
   }
 
   private handleHeadlineChange(event: Event) {
@@ -389,7 +400,7 @@ export class Dialog extends LitElement {
   }
 
   private getIsConnectedPromise() {
-    return new Promise<void>(resolve => {
+    return new Promise<void>((resolve) => {
       this.isConnectedPromiseResolve = resolve;
     });
   }
diff --git a/divider/demo/demo.ts b/divider/demo/demo.ts
index 8d15afdb4..20cb4bfdc 100644
--- a/divider/demo/demo.ts
+++ b/divider/demo/demo.ts
@@ -4,20 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Divider', [
-      new Knob('inset', {defaultValue: true, ui: boolInput()}),
-      new Knob('inset (start)', {defaultValue: false, ui: boolInput()}),
-      new Knob('inset (end)', {defaultValue: false, ui: boolInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Divider',
+  [
+    new Knob('inset', {defaultValue: true, ui: boolInput()}),
+    new Knob('inset (start)', {defaultValue: false, ui: boolInput()}),
+    new Knob('inset (end)', {defaultValue: false, ui: boolInput()}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/divider/demo/stories.ts b/divider/demo/stories.ts
index f3365567f..0e2362b3a 100644
--- a/divider/demo/stories.ts
+++ b/divider/demo/stories.ts
@@ -35,25 +35,24 @@ const standard: MaterialStoryInit<StoryKnobs> = {
   `,
   render(knobs) {
     return html`
-      <ul aria-label="A list of items with decorative and non-decorative separators">
+      <ul
+        aria-label="A list of items with decorative and non-decorative separators">
         <li>List item one</li>
         <md-divider
           ?inset=${knobs.inset}
           ?inset-start=${knobs['inset (start)']}
-          ?inset-end=${knobs['inset (end)']}
-        ></md-divider>
+          ?inset-end=${knobs['inset (end)']}></md-divider>
         <li>List item two</li>
         <md-divider role="separator"></md-divider>
         <li>List item three</li>
         <md-divider
           ?inset=${knobs.inset}
           ?inset-start=${knobs['inset (start)']}
-          ?inset-end=${knobs['inset (end)']}
-        ></md-divider>
+          ?inset-end=${knobs['inset (end)']}></md-divider>
         <li>List item four</li>
       </ul>
     `;
-  }
+  },
 };
 
 /** Divider stories. */
diff --git a/elevation/demo/demo.ts b/elevation/demo/demo.ts
index ca5ae4d46..716cf1a44 100644
--- a/elevation/demo/demo.ts
+++ b/elevation/demo/demo.ts
@@ -4,18 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {Knob, numberInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Elevation', [
-      new Knob('level', {defaultValue: 1, ui: numberInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Elevation',
+  [new Knob('level', {defaultValue: 1, ui: numberInput()})],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/fab/demo/demo.ts b/fab/demo/demo.ts
index 958a9c5b1..b66dfc12a 100644
--- a/fab/demo/demo.ts
+++ b/fab/demo/demo.ts
@@ -4,12 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
 import {FabSize} from '@material/web/fab/fab.js';
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {boolInput, Knob, selectDropdown, textInput} from './index.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {
+  boolInput,
+  Knob,
+  selectDropdown,
+  textInput,
+} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
@@ -24,8 +34,8 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('FAB', [
         {label: 'medium', value: 'medium'},
         {label: 'small', value: 'small'},
         {label: 'large', value: 'large'},
-      ]
-    })
+      ],
+    }),
   }),
 ]);
 
diff --git a/fab/demo/stories.ts b/fab/demo/stories.ts
index 3574e611a..0eabb61c1 100644
--- a/fab/demo/stories.ts
+++ b/fab/demo/stories.ts
@@ -4,12 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '@material/web/fab/branded-fab.js';
 import '@material/web/fab/fab.js';
 import '@material/web/icon/icon.js';
-import '@material/web/fab/branded-fab.js';
 
 import {FabSize} from '@material/web/fab/fab.js';
-import {labelStyles, MaterialStoryInit} from './material-collection.js';
+import {
+  labelStyles,
+  MaterialStoryInit,
+} from './material-collection.js';
 import {css, html, nothing} from 'lit';
 
 /** Knob types for fab stories. */
@@ -17,7 +20,7 @@ export interface StoryKnobs {
   icon: string;
   label: string;
   lowered: boolean;
-  size: FabSize|undefined;
+  size: FabSize | undefined;
 }
 
 const styles = css`
@@ -46,8 +49,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             variant="surface"
             .lowered=${lowered}
             .label=${label}
-            .size=${size!}
-          >
+            .size=${size!}>
             <md-icon slot="icon">${icon}</md-icon>
           </md-fab>
         </label>
@@ -59,8 +61,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             variant="primary"
             .lowered=${lowered}
             .label=${label}
-            .size=${size!}
-          >
+            .size=${size!}>
             <md-icon slot="icon">${icon}</md-icon>
           </md-fab>
         </label>
@@ -72,8 +73,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             variant="secondary"
             .lowered=${lowered}
             .label=${label}
-            .size=${size!}
-          >
+            .size=${size!}>
             <md-icon slot="icon">${icon}</md-icon>
           </md-fab>
         </label>
@@ -85,8 +85,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             variant="tertiary"
             .lowered=${lowered}
             .label=${label}
-            .size=${size!}
-          >
+            .size=${size!}>
             <md-icon slot="icon">${icon}</md-icon>
           </md-fab>
         </label>
@@ -97,8 +96,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             aria-label=${label ? nothing : 'An example branded FAB'}
             .lowered=${lowered}
             .label=${label}
-            .size=${size!}
-          >
+            .size=${size!}>
             <svg slot="icon" width="36" height="36" viewBox="0 0 36 36">
               <path fill="#34A853" d="M16 16v14h4V20z"></path>
               <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
@@ -110,7 +108,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
         </label>
       </div>
     `;
-  }
+  },
 };
 
 /** Checkbox stories. */
diff --git a/fab/fab_test.ts b/fab/fab_test.ts
index c39ce3356..c0b9ff2b6 100644
--- a/fab/fab_test.ts
+++ b/fab/fab_test.ts
@@ -156,8 +156,9 @@ describe('<md-branded-fab>', () => {
   const env = new Environment();
 
   async function setupTest() {
-    const element = env.render(html`<md-branded-fab></md-branded-fab>`)
-                        .querySelector('md-branded-fab');
+    const element = env
+      .render(html`<md-branded-fab></md-branded-fab>`)
+      .querySelector('md-branded-fab');
     if (!element) {
       throw new Error('Could not query rendered <md-branded-fab>.');
     }
diff --git a/fab/harness.ts b/fab/harness.ts
index 199964713..fab878dcd 100644
--- a/fab/harness.ts
+++ b/fab/harness.ts
@@ -14,7 +14,6 @@ import {Fab} from './internal/fab.js';
 export class FabHarness extends Harness<Fab> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.renderRoot.querySelector('.fab') as
-        HTMLButtonElement;
+    return this.element.renderRoot.querySelector('.fab') as HTMLButtonElement;
   }
 }
diff --git a/fab/internal/fab.ts b/fab/internal/fab.ts
index f4ff602e6..c68bda4ed 100644
--- a/fab/internal/fab.ts
+++ b/fab/internal/fab.ts
@@ -11,7 +11,7 @@ import {SharedFab} from './shared.js';
 /**
  * The variants available to non-branded FABs.
  */
-export type FabVariant = 'surface'|'primary'|'secondary'|'tertiary';
+export type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary';
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class Fab extends SharedFab {
diff --git a/fab/internal/shared.ts b/fab/internal/shared.ts
index ad6ffca33..dc15a4b02 100644
--- a/fab/internal/shared.ts
+++ b/fab/internal/shared.ts
@@ -18,7 +18,7 @@ import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
 /**
  * Sizes variants available to non-extended FABs.
  */
-export type FabSize = 'medium'|'small'|'large';
+export type FabSize = 'medium' | 'small' | 'large';
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export abstract class SharedFab extends LitElement {
@@ -45,7 +45,6 @@ export abstract class SharedFab extends LitElement {
    */
   @property() label = '';
 
-
   /**
    * Lowers the FAB's elevation.
    */
@@ -57,14 +56,11 @@ export abstract class SharedFab extends LitElement {
     return html`
       <button
         class="fab ${classMap(this.getRenderClasses())}"
-        aria-label=${ariaLabel || nothing}
-      >
+        aria-label=${ariaLabel || nothing}>
         <md-elevation></md-elevation>
         <md-focus-ring part="focus-ring"></md-focus-ring>
         <md-ripple class="ripple"></md-ripple>
-        ${this.renderTouchTarget()}
-        ${this.renderIcon()}
-        ${this.renderLabel()}
+        ${this.renderTouchTarget()} ${this.renderIcon()} ${this.renderLabel()}
       </button>
     `;
   }
@@ -90,12 +86,13 @@ export abstract class SharedFab extends LitElement {
   private renderIcon() {
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`<span class="icon">
-        <slot
-            name="icon"
-            aria-hidden=${
-        ariaLabel || this.label ? 'true' : nothing as unknown as 'false'}>
-          <span></span>
-        </slot>
-      </span>`;
+      <slot
+        name="icon"
+        aria-hidden=${ariaLabel || this.label
+          ? 'true'
+          : (nothing as unknown as 'false')}>
+        <span></span>
+      </slot>
+    </span>`;
   }
 }
diff --git a/field/demo/demo.ts b/field/demo/demo.ts
index 8667c515d..abec3c139 100644
--- a/field/demo/demo.ts
+++ b/field/demo/demo.ts
@@ -4,32 +4,45 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {boolInput, Knob, numberInput, textInput} from './index.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {
+  boolInput,
+  Knob,
+  numberInput,
+  textInput,
+} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Field', [
-      new Knob('label', {ui: textInput(), defaultValue: 'Label'}),
-      new Knob(
-          'Supporting text',
-          {ui: textInput(), defaultValue: 'Supporting text'}),
-      new Knob('Error text', {ui: textInput(), defaultValue: 'Error text'}),
-      new Knob('count', {ui: numberInput(), defaultValue: 0}),
-      new Knob('max', {ui: numberInput(), defaultValue: 0}),
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-      new Knob('error', {ui: boolInput(), defaultValue: false}),
-      new Knob('focused', {ui: boolInput(), defaultValue: false}),
-      new Knob('populated', {ui: boolInput(), defaultValue: false}),
-      new Knob('required', {ui: boolInput(), defaultValue: false}),
-      new Knob('Leading icon', {ui: boolInput(), defaultValue: false}),
-      new Knob('Trailing icon', {ui: boolInput(), defaultValue: false}),
-      new Knob('resizable', {ui: boolInput(), defaultValue: false}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Field',
+  [
+    new Knob('label', {ui: textInput(), defaultValue: 'Label'}),
+    new Knob('Supporting text', {
+      ui: textInput(),
+      defaultValue: 'Supporting text',
+    }),
+    new Knob('Error text', {ui: textInput(), defaultValue: 'Error text'}),
+    new Knob('count', {ui: numberInput(), defaultValue: 0}),
+    new Knob('max', {ui: numberInput(), defaultValue: 0}),
+    new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+    new Knob('error', {ui: boolInput(), defaultValue: false}),
+    new Knob('focused', {ui: boolInput(), defaultValue: false}),
+    new Knob('populated', {ui: boolInput(), defaultValue: false}),
+    new Knob('required', {ui: boolInput(), defaultValue: false}),
+    new Knob('Leading icon', {ui: boolInput(), defaultValue: false}),
+    new Knob('Trailing icon', {ui: boolInput(), defaultValue: false}),
+    new Knob('resizable', {ui: boolInput(), defaultValue: false}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/field/demo/stories.ts b/field/demo/stories.ts
index e28488e99..2871e349b 100644
--- a/field/demo/stories.ts
+++ b/field/demo/stories.ts
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
 import '@material/web/field/filled-field.js';
 import '@material/web/field/outlined-field.js';
+import '@material/web/icon/icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html, nothing} from 'lit';
@@ -52,16 +52,16 @@ const filled: MaterialStoryInit<StoryKnobs> = {
       required,
       resizable,
       count,
-      max
+      max,
     } = knobs;
     const supportingText = knobs['Supporting text'];
     const errorText = knobs['Error text'];
     const hasStart = knobs['Leading icon'];
     const hasEnd = knobs['Trailing icon'];
 
-    const content = resizable ?
-        html`<textarea rows="1" ?disabled=${disabled}></textarea>` :
-        html`<input ?disabled=${disabled}>`;
+    const content = resizable
+      ? html`<textarea rows="1" ?disabled=${disabled}></textarea>`
+      : html`<input ?disabled=${disabled} />`;
 
     const styles = {resize: resizable ? 'both' : null};
     return html`
@@ -78,14 +78,12 @@ const filled: MaterialStoryInit<StoryKnobs> = {
         supporting-text=${supportingText}
         error-text=${errorText}
         count=${count}
-        max=${max}
-      >
-        ${hasStart ? START_CONTENT : nothing}
-        ${content}
+        max=${max}>
+        ${hasStart ? START_CONTENT : nothing} ${content}
         ${hasEnd ? END_CONTENT : nothing}
       </md-filled-field>
     `;
-  }
+  },
 };
 
 const outlined: MaterialStoryInit<StoryKnobs> = {
@@ -101,16 +99,18 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
       required,
       resizable,
       count,
-      max
+      max,
     } = knobs;
     const supportingText = knobs['Supporting text'];
     const errorText = knobs['Error text'];
     const hasStart = knobs['Leading icon'];
     const hasEnd = knobs['Trailing icon'];
-    const content = resizable ?
-        html`<textarea rows="1" ?disabled=${
-            disabled} aria-describedby="description"></textarea>` :
-        html`<input ?disabled=${disabled} aria-describedby="description">`;
+    const content = resizable
+      ? html`<textarea
+          rows="1"
+          ?disabled=${disabled}
+          aria-describedby="description"></textarea>`
+      : html`<input ?disabled=${disabled} aria-describedby="description" />`;
 
     const styles = {resize: resizable ? 'both' : null};
     return html`
@@ -127,15 +127,13 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
         supporting-text=${supportingText}
         error-text=${errorText}
         count=${count}
-        max=${max}
-      >
+        max=${max}>
         <div id="description" slot="aria-describedby" hidden></div>
-        ${hasStart ? START_CONTENT : nothing}
-        ${content}
+        ${hasStart ? START_CONTENT : nothing} ${content}
         ${hasEnd ? END_CONTENT : nothing}
       </md-outlined-field>
     `;
-  }
+  },
 };
 
 /** Field stories. */
diff --git a/field/harness.ts b/field/harness.ts
index 5b6e6c773..4c661c8c5 100644
--- a/field/harness.ts
+++ b/field/harness.ts
@@ -30,6 +30,6 @@ export class FieldHarness extends Harness<Field> {
   protected override async getInteractiveElement() {
     await this.element.updateComplete;
     return (this.element.querySelector(':not([slot])') ||
-            this.element.renderRoot.querySelector('.field')) as HTMLElement;
+      this.element.renderRoot.querySelector('.field')) as HTMLElement;
   }
 }
diff --git a/field/internal/field.ts b/field/internal/field.ts
index ae262856c..1ee21e56e 100644
--- a/field/internal/field.ts
+++ b/field/internal/field.ts
@@ -4,7 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, LitElement, nothing, PropertyValues, render, TemplateResult} from 'lit';
+import {
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+  render,
+  TemplateResult,
+} from 'lit';
 import {property, query, queryAssignedElements, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
@@ -60,9 +67,10 @@ export class Field extends LitElement {
    */
   @state() private refreshErrorAlert = false;
   @state() private disableTransitions = false;
-  @query('.label.floating') private readonly floatingLabelEl!: HTMLElement|null;
-  @query('.label.resting') private readonly restingLabelEl!: HTMLElement|null;
-  @query('.container') private readonly containerEl!: HTMLElement|null;
+  @query('.label.floating')
+  private readonly floatingLabelEl!: HTMLElement | null;
+  @query('.label.resting') private readonly restingLabelEl!: HTMLElement | null;
+  @query('.container') private readonly containerEl!: HTMLElement | null;
 
   /**
    * Re-announces the field's error supporting text to screen readers.
@@ -78,7 +86,7 @@ export class Field extends LitElement {
   protected override update(props: PropertyValues<Field>) {
     // Client-side property updates
     const isDisabledChanging =
-        props.has('disabled') && props.get('disabled') !== undefined;
+      props.has('disabled') && props.get('disabled') !== undefined;
     if (isDisabledChanging) {
       this.disableTransitions = true;
     }
@@ -92,7 +100,7 @@ export class Field extends LitElement {
     // Animate if focused or populated change.
     this.animateLabelIfNeeded({
       wasFocused: props.get('focused'),
-      wasPopulated: props.get('populated')
+      wasPopulated: props.get('populated'),
     });
 
     super.update(props);
@@ -118,17 +126,14 @@ export class Field extends LitElement {
     return html`
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
-          ${this.renderBackground?.()}
-          ${this.renderIndicator?.()}
-          ${outline}
+          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}
           <div class="container">
             <div class="start">
               <slot name="start"></slot>
             </div>
             <div class="middle">
               <div class="label-wrapper">
-                ${restingLabel}
-                ${outline ? nothing : floatingLabel}
+                ${restingLabel} ${outline ? nothing : floatingLabel}
               </div>
               <div class="content">
                 <slot></slot>
@@ -145,8 +150,12 @@ export class Field extends LitElement {
   }
 
   protected override updated(changed: PropertyValues<Field>) {
-    if (changed.has('supportingText') || changed.has('errorText') ||
-        changed.has('count') || changed.has('max')) {
+    if (
+      changed.has('supportingText') ||
+      changed.has('errorText') ||
+      changed.has('count') ||
+      changed.has('max')
+    ) {
       this.updateSlottedAriaDescribedBy();
     }
 
@@ -180,21 +189,22 @@ export class Field extends LitElement {
     const start = html`<span>${supportingOrErrorText}</span>`;
     // Conditionally render counter so we don't render the extra `gap`.
     // TODO(b/244473435): add aria-label and announcements
-    const end = counterText ?
-        html`<span class="counter">${counterText}</span>` :
-        nothing;
+    const end = counterText
+      ? html`<span class="counter">${counterText}</span>`
+      : nothing;
 
     // Announce if there is an error and error text visible.
     // If refreshErrorAlert is true, do not announce. This will remove the
     // role="alert" attribute. Another render cycle will happen after an
     // animation frame to re-add the role.
     const shouldErrorAnnounce =
-        this.error && this.errorText && !this.refreshErrorAlert;
+      this.error && this.errorText && !this.refreshErrorAlert;
     const role = shouldErrorAnnounce ? 'alert' : nothing;
     return html`
       <div class="supporting-text" role=${role}>${start}${end}</div>
-      <slot name="aria-describedby" @slotchange=${
-        this.updateSlottedAriaDescribedBy}></slot>
+      <slot
+        name="aria-describedby"
+        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>
     `;
   }
 
@@ -230,15 +240,18 @@ export class Field extends LitElement {
     const labelText = `${this.label}${this.required ? '*' : ''}`;
 
     return html`
-      <span class="label ${classMap(classes)}"
-        aria-hidden=${!visible}
-      >${labelText}</span>
+      <span class="label ${classMap(classes)}" aria-hidden=${!visible}
+        >${labelText}</span
+      >
     `;
   }
 
-  private animateLabelIfNeeded({wasFocused, wasPopulated}: {
-    wasFocused?: boolean,
-    wasPopulated?: boolean
+  private animateLabelIfNeeded({
+    wasFocused,
+    wasPopulated,
+  }: {
+    wasFocused?: boolean;
+    wasPopulated?: boolean;
   }) {
     if (!this.label) {
       return;
@@ -268,7 +281,9 @@ export class Field extends LitElement {
     // from appearing.
     // TODO(b/241113345): use animation tokens
     this.labelAnimation = this.floatingLabelEl?.animate(
-        this.getLabelKeyframes(), {duration: 150, easing: EASING.STANDARD});
+      this.getLabelKeyframes(),
+      {duration: 150, easing: EASING.STANDARD},
+    );
 
     this.labelAnimation?.addEventListener('finish', () => {
       // At the end of the animation, update the visible label.
@@ -282,10 +297,16 @@ export class Field extends LitElement {
       return [];
     }
 
-    const {x: floatingX, y: floatingY, height: floatingHeight} =
-        floatingLabelEl.getBoundingClientRect();
-    const {x: restingX, y: restingY, height: restingHeight} =
-        restingLabelEl.getBoundingClientRect();
+    const {
+      x: floatingX,
+      y: floatingY,
+      height: floatingHeight,
+    } = floatingLabelEl.getBoundingClientRect();
+    const {
+      x: restingX,
+      y: restingY,
+      height: restingHeight,
+    } = restingLabelEl.getBoundingClientRect();
     const floatingScrollWidth = floatingLabelEl.scrollWidth;
     const restingScrollWidth = restingLabelEl.scrollWidth;
     // Scale by width ratio instead of font size since letter-spacing will scale
@@ -298,14 +319,15 @@ export class Field extends LitElement {
     // we move the floating label down to the resting label's position, it won't
     // exactly match because of this. We need to adjust by half of what the
     // final scaled floating label's height will be.
-    const yDelta = restingY - floatingY +
-        Math.round((restingHeight - floatingHeight * scale) / 2);
+    const yDelta =
+      restingY -
+      floatingY +
+      Math.round((restingHeight - floatingHeight * scale) / 2);
 
     // Create the two transforms: floating to resting (using the calculations
     // above), and resting to floating (re-setting the transform to initial
     // values).
-    const restTransform =
-        `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
+    const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
     const floatTransform = `translateX(0) translateY(0) scale(1)`;
 
     // Constrain the floating labels width to a scaled percentage of the
@@ -316,12 +338,14 @@ export class Field extends LitElement {
     const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';
     if (this.focused || this.populated) {
       return [
-        {transform: restTransform, width}, {transform: floatTransform, width}
+        {transform: restTransform, width},
+        {transform: floatTransform, width},
       ];
     }
 
     return [
-      {transform: floatTransform, width}, {transform: restTransform, width}
+      {transform: floatTransform, width},
+      {transform: restTransform, width},
     ];
   }
 
diff --git a/field/internal/field_test.ts b/field/internal/field_test.ts
index 31f2a44a9..5f40b4b46 100644
--- a/field/internal/field_test.ts
+++ b/field/internal/field_test.ts
@@ -31,8 +31,11 @@ class TestField extends Field {
   }
 
   didErrorAnnounce() {
-    return this.renderRoot.querySelector('.supporting-text')
-               ?.getAttribute('role') === 'alert';
+    return (
+      this.renderRoot
+        .querySelector('.supporting-text')
+        ?.getAttribute('role') === 'alert'
+    );
   }
 
   // Ensure floating/resting labels are both rendered
@@ -54,9 +57,8 @@ describe('Field', () => {
         .populated=${props.populated ?? false}
         .required=${props.required ?? false}
         .supportingText=${props.supportingText ?? ''}
-        .errorText=${props.errorText ?? ''}
-      >
-        <input>
+        .errorText=${props.errorText ?? ''}>
+        <input />
       </md-test-field>
     `;
     const root = env.render(template);
@@ -82,8 +84,8 @@ describe('Field', () => {
     await env.waitForStability();
     // Assertion.
     expect(instance.focused)
-        .withContext('focused is false after disabled is set to true')
-        .toBe(false);
+      .withContext('focused is false after disabled is set to true')
+      .toBe(false);
   });
 
   it('should not allow focus when disabled', async () => {
@@ -94,8 +96,8 @@ describe('Field', () => {
     await env.waitForStability();
     // Assertion.
     expect(instance.focused)
-        .withContext('focused set back to false when disabled')
-        .toBe(false);
+      .withContext('focused set back to false when disabled')
+      .toBe(false);
   });
 
   /*
@@ -291,9 +293,10 @@ describe('Field', () => {
       const {instance} = await setupTest({label: undefined});
       // Assertion.
       expect(instance.labelText)
-          .withContext(
-              'label text should be empty string if label is not provided')
-          .toBe('');
+        .withContext(
+          'label text should be empty string if label is not provided',
+        )
+        .toBe('');
     });
 
     it('should render label', async () => {
@@ -303,8 +306,8 @@ describe('Field', () => {
       const {instance} = await setupTest({label: labelValue});
       // Assertion.
       expect(instance.labelText)
-          .withContext('label text should equal label when not required')
-          .toBe(labelValue);
+        .withContext('label text should equal label when not required')
+        .toBe(labelValue);
     });
 
     it('should adds asterisk if required', async () => {
@@ -314,44 +317,49 @@ describe('Field', () => {
       const {instance} = await setupTest({required: true, label: labelValue});
       // Assertion.
       expect(instance.labelText)
-          .withContext(
-              'label text should equal label with asterisk when required')
-          .toBe(`${labelValue}*`);
+        .withContext(
+          'label text should equal label with asterisk when required',
+        )
+        .toBe(`${labelValue}*`);
     });
 
-    it('should not render asterisk if required when there is no label',
-       async () => {
-         // Setup.
-         // Test case.
-         const {instance} = await setupTest({required: true, label: undefined});
-         // Assertion.
-         expect(instance.labelText)
-             .withContext(
-                 'label text should be empty string if label is not provided, even when required')
-             .toBe('');
-       });
+    it('should not render asterisk if required when there is no label', async () => {
+      // Setup.
+      // Test case.
+      const {instance} = await setupTest({required: true, label: undefined});
+      // Assertion.
+      expect(instance.labelText)
+        .withContext(
+          'label text should be empty string if label is not provided, even when required',
+        )
+        .toBe('');
+    });
   });
 
   describe('supporting text', () => {
     it('should update to errorText when error is true', async () => {
       const errorText = 'Error message';
-      const {instance} = await setupTest(
-          {error: true, supportingText: 'Supporting text', errorText});
+      const {instance} = await setupTest({
+        error: true,
+        supportingText: 'Supporting text',
+        errorText,
+      });
 
       expect(instance.supportingTextContent).toEqual(errorText);
     });
   });
 
   describe('error announcement', () => {
-    it('should announce errors when both error and errorText are set',
-       async () => {
-         const {instance} =
-             await setupTest({error: true, errorText: 'Error message'});
+    it('should announce errors when both error and errorText are set', async () => {
+      const {instance} = await setupTest({
+        error: true,
+        errorText: 'Error message',
+      });
 
-         expect(instance.didErrorAnnounce())
-             .withContext('instance.didErrorAnnounce()')
-             .toBeTrue();
-       });
+      expect(instance.didErrorAnnounce())
+        .withContext('instance.didErrorAnnounce()')
+        .toBeTrue();
+    });
 
     it('should not announce supporting text', async () => {
       const {instance} = await setupTest();
@@ -360,26 +368,28 @@ describe('Field', () => {
       await env.waitForStability();
 
       expect(instance.didErrorAnnounce())
-          .withContext('instance.didErrorAnnounce()')
-          .toBeFalse();
+        .withContext('instance.didErrorAnnounce()')
+        .toBeFalse();
     });
 
     it('should re-announce when reannounceError() is called', async () => {
-      const {instance} =
-          await setupTest({error: true, errorText: 'Error message'});
+      const {instance} = await setupTest({
+        error: true,
+        errorText: 'Error message',
+      });
 
       instance.reannounceError();
       await env.waitForStability();
       // After lit update, but before re-render refresh
       expect(instance.didErrorAnnounce())
-          .withContext('didErrorAnnounce() before refresh')
-          .toBeFalse();
+        .withContext('didErrorAnnounce() before refresh')
+        .toBeFalse();
 
       // After the second lit update render refresh
       await env.waitForStability();
       expect(instance.didErrorAnnounce())
-          .withContext('didErrorAnnounce() after refresh')
-          .toBeTrue();
+        .withContext('didErrorAnnounce() after refresh')
+        .toBeTrue();
     });
   });
 });
diff --git a/focus/demo/demo.ts b/focus/demo/demo.ts
index 3b85ae95b..00c5e6447 100644
--- a/focus/demo/demo.ts
+++ b/focus/demo/demo.ts
@@ -4,18 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Focus', [
-      new Knob('inward', {ui: boolInput(), defaultValue: false}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Focus',
+  [new Knob('inward', {ui: boolInput(), defaultValue: false})],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/focus/demo/stories.ts b/focus/demo/stories.ts
index 073cbf81d..9d30932b9 100644
--- a/focus/demo/stories.ts
+++ b/focus/demo/stories.ts
@@ -55,13 +55,13 @@ const standard: MaterialStoryInit<StoryKnobs> = {
         <md-focus-ring ?inward=${inward}></md-focus-ring>
       </button>
     `;
-  }
+  },
 };
 
 const multiAction: MaterialStoryInit<StoryKnobs> = {
   name: 'Multi-action components',
   styles: css`
-    [role="list"] {
+    [role='list'] {
       align-items: center;
       appearance: none;
       background: var(--md-sys-color-surface);
@@ -76,11 +76,11 @@ const multiAction: MaterialStoryInit<StoryKnobs> = {
       position: relative;
     }
 
-    [role="list"]:focus-within {
+    [role='list']:focus-within {
       background: var(--md-sys-color-surface-variant);
     }
 
-    [role="listitem"] {
+    [role='listitem'] {
       display: flex;
       flex: 1;
     }
@@ -105,7 +105,7 @@ const multiAction: MaterialStoryInit<StoryKnobs> = {
       --md-focus-ring-shape: 32px;
     }
 
-    [role="list"]::before,
+    [role='list']::before,
     #secondary::before {
       border: 1px solid var(--md-sys-color-outline);
       border-radius: inherit;
@@ -120,20 +120,24 @@ const multiAction: MaterialStoryInit<StoryKnobs> = {
         <md-focus-ring for="primary" ?inward=${inward}></md-focus-ring>
 
         <div role="listitem">
-          <button id="primary" aria-label="The primary action for a multi-action component">
+          <button
+            id="primary"
+            aria-label="The primary action for a multi-action component">
             Action
           </button>
         </div>
 
         <div role="listitem">
-          <button id="secondary" aria-label="The secondary action for a multi-action component">
+          <button
+            id="secondary"
+            aria-label="The secondary action for a multi-action component">
             X
             <md-focus-ring ?inward=${inward}></md-focus-ring>
           </button>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 /** Focus ring stories. */
diff --git a/focus/internal/focus-ring.ts b/focus/internal/focus-ring.ts
index edea7d7b9..d54a5b7d5 100644
--- a/focus/internal/focus-ring.ts
+++ b/focus/internal/focus-ring.ts
@@ -7,7 +7,10 @@
 import {isServer, LitElement, PropertyValues} from 'lit';
 import {property} from 'lit/decorators.js';
 
-import {Attachable, AttachableController} from '../../internal/controller/attachable-controller.js';
+import {
+  Attachable,
+  AttachableController,
+} from '../../internal/controller/attachable-controller.js';
 
 /**
  * Events that the focus ring listens to.
@@ -34,19 +37,21 @@ export class FocusRing extends LitElement implements Attachable {
     return this.attachableController.htmlFor;
   }
 
-  set htmlFor(htmlFor: string|null) {
+  set htmlFor(htmlFor: string | null) {
     this.attachableController.htmlFor = htmlFor;
   }
 
   get control() {
     return this.attachableController.control;
   }
-  set control(control: HTMLElement|null) {
+  set control(control: HTMLElement | null) {
     this.attachableController.control = control;
   }
 
-  private readonly attachableController =
-      new AttachableController(this, this.onControlChange.bind(this));
+  private readonly attachableController = new AttachableController(
+    this,
+    this.onControlChange.bind(this),
+  );
 
   attach(control: HTMLElement) {
     this.attachableController.attach(control);
@@ -86,7 +91,7 @@ export class FocusRing extends LitElement implements Attachable {
     event[HANDLED_BY_FOCUS_RING] = true;
   }
 
-  private onControlChange(prev: HTMLElement|null, next: HTMLElement|null) {
+  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {
     if (isServer) return;
 
     for (const event of EVENTS) {
diff --git a/focus/internal/focus-ring_test.ts b/focus/internal/focus-ring_test.ts
index 0b51cf8ef..f252e56f2 100644
--- a/focus/internal/focus-ring_test.ts
+++ b/focus/internal/focus-ring_test.ts
@@ -64,27 +64,26 @@ describe('focus ring', () => {
       expect(focusRing.control).withContext('focusRing.control').toBe(button);
     });
 
-    it('should update a referenced element when for attribute changes',
-       async () => {
-         const {root, focusRing} = setupTest(html`
-          <button id="first"></button>
-          <button id="second"></button>
-          <test-focus-ring for="first"></test-focus-ring>
-        `);
+    it('should update a referenced element when for attribute changes', async () => {
+      const {root, focusRing} = setupTest(html`
+        <button id="first"></button>
+        <button id="second"></button>
+        <test-focus-ring for="first"></test-focus-ring>
+      `);
 
-         const secondButton = root.querySelector<HTMLElement>('#second');
-         if (!secondButton) {
-           throw new Error('Could not query rendered <button id="second">');
-         }
+      const secondButton = root.querySelector<HTMLElement>('#second');
+      if (!secondButton) {
+        throw new Error('Could not query rendered <button id="second">');
+      }
 
-         focusRing.setAttribute('for', 'second');
-         expect(focusRing.control)
-             .withContext('focusRing.control')
-             .toBe(secondButton);
-         await new Harness(secondButton).focusWithKeyboard();
+      focusRing.setAttribute('for', 'second');
+      expect(focusRing.control)
+        .withContext('focusRing.control')
+        .toBe(secondButton);
+      await new Harness(secondButton).focusWithKeyboard();
 
-         expect(focusRing.visible).withContext('focusRing.visible').toBeTrue();
-       });
+      expect(focusRing.visible).withContext('focusRing.visible').toBeTrue();
+    });
 
     it('should be able to be imperatively attached', () => {
       const {button, focusRing} = setupTest(html`
@@ -104,12 +103,12 @@ describe('focus ring', () => {
       `);
 
       expect(focusRing.control)
-          .withContext('focusRing.control before attach')
-          .toBe(button);
+        .withContext('focusRing.control before attach')
+        .toBe(button);
       focusRing.attach(button);
       expect(focusRing.control)
-          .withContext('focusRing.control after attach')
-          .toBe(button);
+        .withContext('focusRing.control after attach')
+        .toBe(button);
     });
 
     it('should detach previous control when attaching a new one', async () => {
@@ -170,8 +169,8 @@ describe('focus ring', () => {
 
     await harness.clickWithMouse();
     expect(focusRing.visible)
-        .withContext('focusRing.visible after clickWithMouse')
-        .toBeFalse();
+      .withContext('focusRing.visible after clickWithMouse')
+      .toBeFalse();
   });
 
   it('should be visible on keyboard focus', async () => {
@@ -183,8 +182,8 @@ describe('focus ring', () => {
 
     await harness.focusWithKeyboard();
     expect(focusRing.visible)
-        .withContext('focusRing.visible after focusWithKeyboard')
-        .toBeTrue();
+      .withContext('focusRing.visible after focusWithKeyboard')
+      .toBeTrue();
   });
 
   it('should hide on blur', async () => {
@@ -197,7 +196,7 @@ describe('focus ring', () => {
     focusRing.visible = true;
     await harness.blur();
     expect(focusRing.visible)
-        .withContext('focusRing.visible after blur')
-        .toBeFalse();
+      .withContext('focusRing.visible after blur')
+      .toBeFalse();
   });
 });
diff --git a/icon/icon_test.ts b/icon/icon_test.ts
index cb10d8ac1..85dda769a 100644
--- a/icon/icon_test.ts
+++ b/icon/icon_test.ts
@@ -23,8 +23,7 @@ describe('<md-icon>', () => {
 
   describe('accessiblity', () => {
     it('sets aria-hidden to true by default', async () => {
-      const root = env.render(html`
-        <md-icon>check</md-icon>`);
+      const root = env.render(html` <md-icon>check</md-icon>`);
       const icon = root.querySelector('md-icon')!;
 
       await env.waitForStability();
@@ -33,8 +32,9 @@ describe('<md-icon>', () => {
     });
 
     it('sets aria-hidden is removed when initalized as false', async () => {
-      const root = env.render(html`
-        <md-icon aria-hidden="false">check</md-icon>`);
+      const root = env.render(html` <md-icon aria-hidden="false"
+        >check</md-icon
+      >`);
       const icon = root.querySelector('md-icon')!;
 
       await env.waitForStability();
@@ -43,8 +43,7 @@ describe('<md-icon>', () => {
     });
 
     it('allows overriding aria-hidden after first render', async () => {
-      const root = env.render(html`
-        <md-icon>check</md-icon>`);
+      const root = env.render(html` <md-icon>check</md-icon>`);
       const icon = root.querySelector('md-icon')!;
 
       await env.waitForStability();
@@ -58,9 +57,9 @@ describe('<md-icon>', () => {
     });
 
     it('overrides invalid aria-hidden values to true', async () => {
-      const root = env.render(html`
-        <!-- @ts-ignore:disable-next-line:no-incompatible-type-binding -->
-        <md-icon aria-hidden="foo">check</md-icon>`);
+      const root =
+        env.render(html` <!-- @ts-ignore:disable-next-line:no-incompatible-type-binding -->
+          <md-icon aria-hidden="foo">check</md-icon>`);
       const icon = root.querySelector('md-icon')!;
 
       await env.waitForStability();
diff --git a/iconbutton/demo/demo.ts b/iconbutton/demo/demo.ts
index 1cc2b3f30..80aa39370 100644
--- a/iconbutton/demo/demo.ts
+++ b/iconbutton/demo/demo.ts
@@ -4,20 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Icon Button', [
-      new Knob('icon', {ui: textInput(), defaultValue: 'check'}),
-      new Knob('selectedIcon', {ui: textInput(), defaultValue: 'close'}),
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Icon Button',
+  [
+    new Knob('icon', {ui: textInput(), defaultValue: 'check'}),
+    new Knob('selectedIcon', {ui: textInput(), defaultValue: 'close'}),
+    new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/iconbutton/demo/stories.ts b/iconbutton/demo/stories.ts
index 1053a9def..da2d1b2f8 100644
--- a/iconbutton/demo/stories.ts
+++ b/iconbutton/demo/stories.ts
@@ -7,8 +7,8 @@
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/filled-icon-button.js';
 import '@material/web/iconbutton/filled-tonal-icon-button.js';
-import '@material/web/iconbutton/outlined-icon-button.js';
 import '@material/web/iconbutton/icon-button.js';
+import '@material/web/iconbutton/outlined-icon-button.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html} from 'lit';
@@ -40,10 +40,7 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
     return html`
       <div class="column">
         <div class="row">
-          <md-icon-button
-            aria-label="Standard icon"
-            ?disabled=${disabled}
-          >
+          <md-icon-button aria-label="Standard icon" ?disabled=${disabled}>
             <md-icon>${icon}</md-icon>
           </md-icon-button>
 
@@ -53,10 +50,7 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
             <md-icon>${icon}</md-icon>
           </md-outlined-icon-button>
 
-          <md-filled-icon-button
-            aria-label="Filled icon"
-            ?disabled=${disabled}
-          >
+          <md-filled-icon-button aria-label="Filled icon" ?disabled=${disabled}>
             <md-icon>${icon}</md-icon>
           </md-filled-icon-button>
 
@@ -68,7 +62,7 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
         </div>
       </div>
     `;
-  }
+  },
 };
 
 const toggles: MaterialStoryInit<StoryKnobs> = {
@@ -81,8 +75,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
           <md-icon-button
             aria-label="Standard icon"
             toggle
-            ?disabled=${disabled}
-          >
+            ?disabled=${disabled}>
             <md-icon>${icon}</md-icon>
             <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-icon-button>
@@ -90,8 +83,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
           <md-outlined-icon-button
             aria-label="Outlined icon"
             toggle
-            ?disabled=${disabled}
-          >
+            ?disabled=${disabled}>
             <md-icon>${icon}</md-icon>
             <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-outlined-icon-button>
@@ -99,8 +91,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
           <md-filled-icon-button
             aria-label="Filled icon"
             toggle
-            ?disabled=${disabled}
-          >
+            ?disabled=${disabled}>
             <md-icon>${icon}</md-icon>
             <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-filled-icon-button>
@@ -108,15 +99,14 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
           <md-filled-tonal-icon-button
             aria-label="Filled tonal icon"
             toggle
-            ?disabled=${disabled}
-          >
+            ?disabled=${disabled}>
             <md-icon>${icon}</md-icon>
             <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-filled-tonal-icon-button>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 const links: MaterialStoryInit<StoryKnobs> = {
@@ -129,38 +119,34 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-icon-button
             aria-label="Standard icon"
             href="https://google.com"
-            target="_blank"
-          >
+            target="_blank">
             <md-icon>${icon}</md-icon>
           </md-icon-button>
 
           <md-outlined-icon-button
             aria-label="Outlined icon"
             href="https://google.com"
-            target="_blank"
-          >
+            target="_blank">
             <md-icon>${icon}</md-icon>
           </md-outlined-icon-button>
 
           <md-filled-icon-button
             aria-label="Filled icon"
             href="https://google.com"
-            target="_blank"
-          >
+            target="_blank">
             <md-icon>${icon}</md-icon>
           </md-filled-icon-button>
 
           <md-filled-tonal-icon-button
             aria-label="Filled tonal icon"
             href="https://google.com"
-            target="_blank"
-          >
+            target="_blank">
             <md-icon>${icon}</md-icon>
           </md-filled-tonal-icon-button>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 /** Icon button stories. */
diff --git a/iconbutton/filled-icon-button_test.ts b/iconbutton/filled-icon-button_test.ts
index 837dfc784..7ec5d9b2d 100644
--- a/iconbutton/filled-icon-button_test.ts
+++ b/iconbutton/filled-icon-button_test.ts
@@ -14,4 +14,4 @@ describe('<md-filled-icon-button>', () => {
   describe('.styles', () => {
     createTokenTests(MdFilledIconButton.styles);
   });
-});
\ No newline at end of file
+});
diff --git a/iconbutton/filled-tonal-icon-button_test.ts b/iconbutton/filled-tonal-icon-button_test.ts
index 971f56e04..b8fc9958e 100644
--- a/iconbutton/filled-tonal-icon-button_test.ts
+++ b/iconbutton/filled-tonal-icon-button_test.ts
@@ -14,4 +14,4 @@ describe('<md-filled-tonal-icon-button', () => {
   describe('.styles', () => {
     createTokenTests(MdFilledTonalIconButton.styles);
   });
-});
\ No newline at end of file
+});
diff --git a/iconbutton/icon-button_test.ts b/iconbutton/icon-button_test.ts
index ef517e9f7..ffd4a81e8 100644
--- a/iconbutton/icon-button_test.ts
+++ b/iconbutton/icon-button_test.ts
@@ -44,73 +44,83 @@ describe('icon button tests', () => {
   });
 
   describe('md-icon-button', () => {
-    it('setting `disabled` updates the disabled attribute on the native ' +
-           'button element',
-       async () => {
-         const {element} = await setUpTest('button');
-         const button = element.shadowRoot!.querySelector('button')!;
+    it(
+      'setting `disabled` updates the disabled attribute on the native ' +
+        'button element',
+      async () => {
+        const {element} = await setUpTest('button');
+        const button = element.shadowRoot!.querySelector('button')!;
 
-         element.disabled = true;
-         await element.updateComplete;
-         expect(button.hasAttribute('disabled')).toBeTrue();
+        element.disabled = true;
+        await element.updateComplete;
+        expect(button.hasAttribute('disabled')).toBeTrue();
 
-         element.disabled = false;
-         await element.updateComplete;
-         expect(button.hasAttribute('disabled')).toBeFalse();
-       });
+        element.disabled = false;
+        await element.updateComplete;
+        expect(button.hasAttribute('disabled')).toBeFalse();
+      },
+    );
 
-    it('setting `ariaLabel` updates the aria-label attribute on the native ' +
-           'button element',
-       async () => {
-         const {element} = await setUpTest('button');
-         const button = element.shadowRoot!.querySelector('button')!;
+    it(
+      'setting `ariaLabel` updates the aria-label attribute on the native ' +
+        'button element',
+      async () => {
+        const {element} = await setUpTest('button');
+        const button = element.shadowRoot!.querySelector('button')!;
 
-         element.ariaLabel = 'test';
-         await element.updateComplete;
-         expect(button.getAttribute('aria-label')).toBe('test');
-       });
+        element.ariaLabel = 'test';
+        await element.updateComplete;
+        expect(button.getAttribute('aria-label')).toBe('test');
+      },
+    );
   });
 
   describe('md-icon-button link', () => {
-    it('setting `ariaLabel` updates the aria-label attribute on the anchor' +
-           'tag',
-       async () => {
-         const {element} = await setUpTest('link');
-         const anchor = element.shadowRoot!.querySelector('a')!;
-         expect(anchor).not.toBeNull();
+    it(
+      'setting `ariaLabel` updates the aria-label attribute on the anchor' +
+        'tag',
+      async () => {
+        const {element} = await setUpTest('link');
+        const anchor = element.shadowRoot!.querySelector('a')!;
+        expect(anchor).not.toBeNull();
 
-         element.ariaLabel = 'test';
-         await element.updateComplete;
-         expect(anchor.getAttribute('aria-label')).toBe('test');
-       });
+        element.ariaLabel = 'test';
+        await element.updateComplete;
+        expect(anchor.getAttribute('aria-label')).toBe('test');
+      },
+    );
   });
 
   describe('md-icon-button toggle', () => {
-    it('setting `disabled` updates the disabled attribute on the native ' +
-           'button element',
-       async () => {
-         const {element} = await setUpTest('toggle');
-         const button = element.shadowRoot!.querySelector('button')!;
+    it(
+      'setting `disabled` updates the disabled attribute on the native ' +
+        'button element',
+      async () => {
+        const {element} = await setUpTest('toggle');
+        const button = element.shadowRoot!.querySelector('button')!;
 
-         element.disabled = true;
-         await element.updateComplete;
-         expect(button.hasAttribute('disabled')).toBeTrue();
+        element.disabled = true;
+        await element.updateComplete;
+        expect(button.hasAttribute('disabled')).toBeTrue();
 
-         element.disabled = false;
-         await element.updateComplete;
-         expect(button.hasAttribute('disabled')).toBeFalse();
-       });
+        element.disabled = false;
+        await element.updateComplete;
+        expect(button.hasAttribute('disabled')).toBeFalse();
+      },
+    );
 
-    it('setting `ariaLabel` updates the aria-label attribute on the native ' +
-           'button element',
-       async () => {
-         const {element} = await setUpTest('toggle');
-         const button = element.shadowRoot!.querySelector('button')!;
+    it(
+      'setting `ariaLabel` updates the aria-label attribute on the native ' +
+        'button element',
+      async () => {
+        const {element} = await setUpTest('toggle');
+        const button = element.shadowRoot!.querySelector('button')!;
 
-         element.ariaLabel = 'test';
-         await element.updateComplete;
-         expect(button.getAttribute('aria-label')).toBe('test');
-       });
+        element.ariaLabel = 'test';
+        await element.updateComplete;
+        expect(button.getAttribute('aria-label')).toBe('test');
+      },
+    );
 
     it('toggles the `selected` state when button is clicked', async () => {
       const {element, harness} = await setUpTest('toggle');
@@ -126,8 +136,8 @@ describe('icon button tests', () => {
       const {element, harness} = await setUpTest('toggle');
       let changeEvent = false;
       let inputEvent = false;
-      element.addEventListener('input', () => inputEvent = true);
-      element.addEventListener('change', () => changeEvent = true);
+      element.addEventListener('input', () => (inputEvent = true));
+      element.addEventListener('change', () => (changeEvent = true));
       expect(element.selected).toBeFalse();
       await harness.clickWithMouse();
       expect(element.selected).toBeTrue();
@@ -135,19 +145,18 @@ describe('icon button tests', () => {
       expect(changeEvent).toBeTrue();
     });
 
-    it('setting `selected` updates the aria-pressed attribute on the native button element',
-       async () => {
-         const {element} = await setUpTest('toggle');
+    it('setting `selected` updates the aria-pressed attribute on the native button element', async () => {
+      const {element} = await setUpTest('toggle');
 
-         element.selected = true;
-         await element.updateComplete;
-         const button = element.shadowRoot!.querySelector('button')!;
-         expect(button.getAttribute('aria-pressed')).toEqual('true');
+      element.selected = true;
+      await element.updateComplete;
+      const button = element.shadowRoot!.querySelector('button')!;
+      expect(button.getAttribute('aria-pressed')).toEqual('true');
 
-         element.selected = false;
-         await element.updateComplete;
-         expect(button.getAttribute('aria-pressed')).toEqual('false');
-       });
+      element.selected = false;
+      await element.updateComplete;
+      expect(button.getAttribute('aria-pressed')).toEqual('false');
+    });
 
     it('button with toggled aria label toggles aria label', async () => {
       const {element, harness} = await setUpTest('toggle');
@@ -167,45 +176,41 @@ describe('icon button tests', () => {
     });
 
     it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => {
-      const template = html`
-          <div dir="rtl">
-            <md-icon-button aria-label="Star" .flipIconInRtl="${true}">
-                star
-            </md-icon-button>
-          </div>`;
+      const template = html` <div dir="rtl">
+        <md-icon-button aria-label="Star" .flipIconInRtl="${true}">
+          star
+        </md-icon-button>
+      </div>`;
       const element = env.render(template).querySelector('md-icon-button')!;
       await env.waitForStability();
 
       expect((element as unknown as IconButtonInternals).flipIcon).toBeTrue();
     });
 
-    it('if `flipsIconInRtl=true`, does not flip icon in an LTR context',
-       async () => {
-         const template = html`
-            <div dir="ltr">
-              <md-icon-button aria-label="Star" .flipIconInRtl="${true}">
-                  star
-              </md-icon-button>
-            </div>`;
-         const element = env.render(template).querySelector('md-icon-button')!;
-         await env.waitForStability();
+    it('if `flipsIconInRtl=true`, does not flip icon in an LTR context', async () => {
+      const template = html` <div dir="ltr">
+        <md-icon-button aria-label="Star" .flipIconInRtl="${true}">
+          star
+        </md-icon-button>
+      </div>`;
+      const element = env.render(template).querySelector('md-icon-button')!;
+      await env.waitForStability();
 
-         expect((element as unknown as IconButtonInternals).flipIcon)
-             .toBeFalse();
-       });
+      expect((element as unknown as IconButtonInternals).flipIcon).toBeFalse();
+    });
 
     it('should allow preventing toggle click event', async () => {
       const {element, harness} = await setUpTest('toggle');
 
-      element.addEventListener('click', event => {
+      element.addEventListener('click', (event) => {
         event.preventDefault();
       });
 
       expect(element.selected).withContext('selected before click').toBeFalse();
       await harness.clickWithMouse();
       expect(element.selected)
-          .withContext('selected after prevent default click')
-          .toBeFalse();
+        .withContext('selected after prevent default click')
+        .toBeFalse();
     });
   });
 
diff --git a/iconbutton/internal/icon-button.ts b/iconbutton/internal/icon-button.ts
index 03d01d73e..9162480c7 100644
--- a/iconbutton/internal/icon-button.ts
+++ b/iconbutton/internal/icon-button.ts
@@ -10,15 +10,19 @@ import '../../ripple/ripple.js';
 import {html, LitElement, nothing} from 'lit';
 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 {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
 import {internals} from '../../internal/controller/element-internals.js';
-import {FormSubmitter, FormSubmitterType, setupFormSubmitter} from '../../internal/controller/form-submitter.js';
+import {
+  FormSubmitter,
+  FormSubmitterType,
+  setupFormSubmitter,
+} from '../../internal/controller/form-submitter.js';
 import {isRtl} from '../../internal/controller/is-rtl.js';
 
-type LinkTarget = '_blank'|'_parent'|'_self'|'_top';
+type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class IconButton extends LitElement implements FormSubmitter {
@@ -31,8 +35,10 @@ export class IconButton extends LitElement implements FormSubmitter {
   static readonly formAssociated = true;
 
   /** @nocollapse */
-  static override shadowRootOptions:
-      ShadowRootInit = {mode: 'open', delegatesFocus: true};
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
 
   /**
    * Disables the icon button and makes it non-interactive.
@@ -53,7 +59,7 @@ export class IconButton extends LitElement implements FormSubmitter {
   /**
    * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
    */
-  @property() target: LinkTarget|'' = '';
+  @property() target: LinkTarget | '' = '';
 
   /**
    * The `aria-label` of the button when the button is toggleable and selected.
@@ -101,8 +107,8 @@ export class IconButton extends LitElement implements FormSubmitter {
   @state() private flipIcon = isRtl(this, this.flipIconInRtl);
 
   /** @private */
-  [internals] =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  [internals] = (this as HTMLElement) /* needed for closure */
+    .attachInternals();
 
   /**
    * Link buttons cannot be disabled.
@@ -119,18 +125,19 @@ export class IconButton extends LitElement implements FormSubmitter {
     const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
     const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;
     const ariaPressedValue = !this.toggle ? nothing : this.selected;
-    let ariaLabelValue: string|null|typeof nothing = nothing;
+    let ariaLabelValue: string | null | typeof nothing = nothing;
     if (!this.href) {
-      ariaLabelValue = (hasToggledAriaLabel && this.selected) ?
-          this.ariaLabelSelected :
-          ariaLabel;
+      ariaLabelValue =
+        hasToggledAriaLabel && this.selected
+          ? this.ariaLabelSelected
+          : ariaLabel;
     }
     return staticHtml`<${tag}
         class="icon-button ${classMap(this.getRenderClasses())}"
         id="button"
         aria-label="${ariaLabelValue || nothing}"
-        aria-haspopup="${!this.href && ariaHasPopup || nothing}"
-        aria-expanded="${!this.href && ariaExpanded || nothing}"
+        aria-haspopup="${(!this.href && ariaHasPopup) || nothing}"
+        aria-expanded="${(!this.href && ariaExpanded) || nothing}"
         aria-pressed="${ariaPressedValue}"
         ?disabled="${!this.href && this.disabled}"
         @click="${this.handleClick}">
@@ -147,12 +154,12 @@ export class IconButton extends LitElement implements FormSubmitter {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`
-      <a class="link"
+      <a
+        class="link"
         id="link"
         href="${this.href}"
         target="${this.target || nothing}"
-        aria-label="${ariaLabel || nothing}"
-      ></a>
+        aria-label="${ariaLabel || nothing}"></a>
     `;
   }
 
@@ -169,7 +176,9 @@ export class IconButton extends LitElement implements FormSubmitter {
 
   private renderSelectedIcon() {
     // Use default slot as fallback to not require specifying multiple icons
-    return html`<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`;
+    return html`<span class="icon icon--selected"
+      ><slot name="selected"><slot></slot></slot
+    ></span>`;
   }
 
   private renderTouchTarget() {
@@ -177,15 +186,15 @@ export class IconButton extends LitElement implements FormSubmitter {
   }
 
   private renderFocusRing() {
-    return html`<md-focus-ring part="focus-ring" for=${
-        this.href ? 'link' : 'button'}></md-focus-ring>`;
+    return html`<md-focus-ring
+      part="focus-ring"
+      for=${this.href ? 'link' : 'button'}></md-focus-ring>`;
   }
 
   private renderRipple() {
     return html`<md-ripple
       for=${this.href ? 'link' : nothing}
-      ?disabled="${!this.href && this.disabled}"
-    ></md-ripple>`;
+      ?disabled="${!this.href && this.disabled}"></md-ripple>`;
   }
 
   override connectedCallback() {
@@ -202,7 +211,8 @@ export class IconButton extends LitElement implements FormSubmitter {
 
     this.selected = !this.selected;
     this.dispatchEvent(
-        new InputEvent('input', {bubbles: true, composed: true}));
+      new InputEvent('input', {bubbles: true, composed: true}),
+    );
     // Bubbles but does not compose to mimic native browser <input> & <select>
     // Additionally, native change event is not an InputEvent.
     this.dispatchEvent(new Event('change', {bubbles: true}));
diff --git a/iconbutton/outlined-icon-button_test.ts b/iconbutton/outlined-icon-button_test.ts
index b29b9768f..9883e9725 100644
--- a/iconbutton/outlined-icon-button_test.ts
+++ b/iconbutton/outlined-icon-button_test.ts
@@ -14,4 +14,4 @@ describe('<md-outlined-icon-button>', () => {
   describe('.styles', () => {
     createTokenTests(MdOutlinedIconButton.styles);
   });
-});
\ No newline at end of file
+});
diff --git a/internal/aria/aria.ts b/internal/aria/aria.ts
index b15206537..64828cb69 100644
--- a/internal/aria/aria.ts
+++ b/internal/aria/aria.ts
@@ -86,20 +86,25 @@ export function isAriaAttribute(attribute: string): attribute is ARIAAttribute {
  * @param property The aria property.
  * @return The aria attribute.
  */
-export function ariaPropertyToAttribute<K extends ARIAProperty|'role'>(
-    property: K) {
-  return property
-             .replace('aria', 'aria-')
-             // IDREF attributes also include an "Element" or "Elements" suffix
-             .replace(/Elements?/g, '')
-             .toLowerCase() as ARIAPropertyToAttribute<K>;
+export function ariaPropertyToAttribute<K extends ARIAProperty | 'role'>(
+  property: K,
+) {
+  return (
+    property
+      .replace('aria', 'aria-')
+      // IDREF attributes also include an "Element" or "Elements" suffix
+      .replace(/Elements?/g, '')
+      .toLowerCase() as ARIAPropertyToAttribute<K>
+  );
 }
 
 // Converts an `ariaFoo` string type to an `aria-foo` string type.
 type ARIAPropertyToAttribute<K extends string> =
-    K extends `aria${infer Suffix}Element${infer OptS}` ?
-    `aria-${Lowercase < Suffix >}` :
-    K extends `aria${infer Suffix}` ? `aria-${Lowercase < Suffix >}` : K;
+  K extends `aria${infer Suffix}Element${infer OptS}`
+    ? `aria-${Lowercase<Suffix>}`
+    : K extends `aria${infer Suffix}`
+    ? `aria-${Lowercase<Suffix>}`
+    : K;
 
 /**
  * An extension of `ARIAMixin` that enforces strict value types for aria
@@ -118,68 +123,176 @@ type ARIAPropertyToAttribute<K extends string> =
  * }
  */
 export interface ARIAMixinStrict extends ARIAMixin {
-  ariaAtomic: 'true'|'false'|null;
-  ariaAutoComplete: 'none'|'inline'|'list'|'both'|null;
-  ariaBusy: 'true'|'false'|null;
-  ariaChecked: 'true'|'false'|null;
-  ariaColCount: `${number}`|null;
-  ariaColIndex: `${number}`|null;
-  ariaColSpan: `${number}`|null;
-  ariaCurrent: 'page'|'step'|'location'|'date'|'time'|'true'|'false'|null;
-  ariaDisabled: 'true'|'false'|null;
-  ariaExpanded: 'true'|'false'|null;
-  ariaHasPopup: 'false'|'true'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null;
-  ariaHidden: 'true'|'false'|null;
-  ariaInvalid: 'true'|'false'|null;
-  ariaKeyShortcuts: string|null;
-  ariaLabel: string|null;
-  ariaLevel: `${number}`|null;
-  ariaLive: 'assertive'|'off'|'polite'|null;
-  ariaModal: 'true'|'false'|null;
-  ariaMultiLine: 'true'|'false'|null;
-  ariaMultiSelectable: 'true'|'false'|null;
-  ariaOrientation: 'horizontal'|'vertical'|'undefined'|null;
-  ariaPlaceholder: string|null;
-  ariaPosInSet: `${number}`|null;
-  ariaPressed: 'true'|'false'|null;
-  ariaReadOnly: 'true'|'false'|null;
-  ariaRequired: 'true'|'false'|null;
-  ariaRoleDescription: string|null;
-  ariaRowCount: `${number}`|null;
-  ariaRowIndex: `${number}`|null;
-  ariaRowSpan: `${number}`|null;
-  ariaSelected: 'true'|'false'|null;
-  ariaSetSize: `${number}`|null;
-  ariaSort: 'ascending'|'descending'|'none'|'other'|null;
-  ariaValueMax: `${number}`|null;
-  ariaValueMin: `${number}`|null;
-  ariaValueNow: `${number}`|null;
-  ariaValueText: string|null;
-  role: ARIARole|null;
+  ariaAtomic: 'true' | 'false' | null;
+  ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;
+  ariaBusy: 'true' | 'false' | null;
+  ariaChecked: 'true' | 'false' | null;
+  ariaColCount: `${number}` | null;
+  ariaColIndex: `${number}` | null;
+  ariaColSpan: `${number}` | null;
+  ariaCurrent:
+    | 'page'
+    | 'step'
+    | 'location'
+    | 'date'
+    | 'time'
+    | 'true'
+    | 'false'
+    | null;
+  ariaDisabled: 'true' | 'false' | null;
+  ariaExpanded: 'true' | 'false' | null;
+  ariaHasPopup:
+    | 'false'
+    | 'true'
+    | 'menu'
+    | 'listbox'
+    | 'tree'
+    | 'grid'
+    | 'dialog'
+    | null;
+  ariaHidden: 'true' | 'false' | null;
+  ariaInvalid: 'true' | 'false' | null;
+  ariaKeyShortcuts: string | null;
+  ariaLabel: string | null;
+  ariaLevel: `${number}` | null;
+  ariaLive: 'assertive' | 'off' | 'polite' | null;
+  ariaModal: 'true' | 'false' | null;
+  ariaMultiLine: 'true' | 'false' | null;
+  ariaMultiSelectable: 'true' | 'false' | null;
+  ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;
+  ariaPlaceholder: string | null;
+  ariaPosInSet: `${number}` | null;
+  ariaPressed: 'true' | 'false' | null;
+  ariaReadOnly: 'true' | 'false' | null;
+  ariaRequired: 'true' | 'false' | null;
+  ariaRoleDescription: string | null;
+  ariaRowCount: `${number}` | null;
+  ariaRowIndex: `${number}` | null;
+  ariaRowSpan: `${number}` | null;
+  ariaSelected: 'true' | 'false' | null;
+  ariaSetSize: `${number}` | null;
+  ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;
+  ariaValueMax: `${number}` | null;
+  ariaValueMin: `${number}` | null;
+  ariaValueNow: `${number}` | null;
+  ariaValueText: string | null;
+  role: ARIARole | null;
 }
 
 /**
  * Valid values for `role`.
  */
 export type ARIARole =
-    'alert'|'alertdialog'|'button'|'checkbox'|'dialog'|'gridcell'|'link'|'log'|
-    'marquee'|'menuitem'|'menuitemcheckbox'|'menuitemradio'|'option'|
-    'progressbar'|'radio'|'scrollbar'|'searchbox'|'slider'|'spinbutton'|
-    'status'|'switch'|'tab'|'tabpanel'|'textbox'|'timer'|'tooltip'|'treeitem'|
-    'combobox'|'grid'|'listbox'|'menu'|'menubar'|'radiogroup'|'tablist'|'tree'|
-    'treegrid'|'application'|'article'|'cell'|'columnheader'|'definition'|
-    'directory'|'document'|'feed'|'figure'|'group'|'heading'|'img'|'list'|
-    'listitem'|'math'|'none'|'note'|'presentation'|'region'|'row'|'rowgroup'|
-    'rowheader'|'separator'|'table'|'term'|'text'|'toolbar'|'banner'|
-    'complementary'|'contentinfo'|'form'|'main'|'navigation'|'region'|'search'|
-    'doc-abstract'|'doc-acknowledgments'|'doc-afterword'|'doc-appendix'|
-    'doc-backlink'|'doc-biblioentry'|'doc-bibliography'|'doc-biblioref'|
-    'doc-chapter'|'doc-colophon'|'doc-conclusion'|'doc-cover'|'doc-credit'|
-    'doc-credits'|'doc-dedication'|'doc-endnote'|'doc-endnotes'|'doc-epigraph'|
-    'doc-epilogue'|'doc-errata'|'doc-example'|'doc-footnote'|'doc-foreword'|
-    'doc-glossary'|'doc-glossref'|'doc-index'|'doc-introduction'|'doc-noteref'|
-    'doc-notice'|'doc-pagebreak'|'doc-pagelist'|'doc-part'|'doc-preface'|
-    'doc-prologue'|'doc-pullquote'|'doc-qna'|'doc-subtitle'|'doc-tip'|'doc-toc';
+  | 'alert'
+  | 'alertdialog'
+  | 'button'
+  | 'checkbox'
+  | 'dialog'
+  | 'gridcell'
+  | 'link'
+  | 'log'
+  | 'marquee'
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'option'
+  | 'progressbar'
+  | 'radio'
+  | 'scrollbar'
+  | 'searchbox'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'switch'
+  | 'tab'
+  | 'tabpanel'
+  | 'textbox'
+  | 'timer'
+  | 'tooltip'
+  | 'treeitem'
+  | 'combobox'
+  | 'grid'
+  | 'listbox'
+  | 'menu'
+  | 'menubar'
+  | 'radiogroup'
+  | 'tablist'
+  | 'tree'
+  | 'treegrid'
+  | 'application'
+  | 'article'
+  | 'cell'
+  | 'columnheader'
+  | 'definition'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'list'
+  | 'listitem'
+  | 'math'
+  | 'none'
+  | 'note'
+  | 'presentation'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'separator'
+  | 'table'
+  | 'term'
+  | 'text'
+  | 'toolbar'
+  | 'banner'
+  | 'complementary'
+  | 'contentinfo'
+  | 'form'
+  | 'main'
+  | 'navigation'
+  | 'region'
+  | 'search'
+  | 'doc-abstract'
+  | 'doc-acknowledgments'
+  | 'doc-afterword'
+  | 'doc-appendix'
+  | 'doc-backlink'
+  | 'doc-biblioentry'
+  | 'doc-bibliography'
+  | 'doc-biblioref'
+  | 'doc-chapter'
+  | 'doc-colophon'
+  | 'doc-conclusion'
+  | 'doc-cover'
+  | 'doc-credit'
+  | 'doc-credits'
+  | 'doc-dedication'
+  | 'doc-endnote'
+  | 'doc-endnotes'
+  | 'doc-epigraph'
+  | 'doc-epilogue'
+  | 'doc-errata'
+  | 'doc-example'
+  | 'doc-footnote'
+  | 'doc-foreword'
+  | 'doc-glossary'
+  | 'doc-glossref'
+  | 'doc-index'
+  | 'doc-introduction'
+  | 'doc-noteref'
+  | 'doc-notice'
+  | 'doc-pagebreak'
+  | 'doc-pagelist'
+  | 'doc-part'
+  | 'doc-preface'
+  | 'doc-prologue'
+  | 'doc-pullquote'
+  | 'doc-qna'
+  | 'doc-subtitle'
+  | 'doc-tip'
+  | 'doc-toc';
 
 /**
  * Enables a host custom element to be the target for aria roles and attributes.
@@ -196,9 +309,11 @@ export type ARIARole =
  * @param options Options to configure the element's host aria.
  */
 export function setupHostAria(
-    ctor: typeof ReactiveElement, {focusable}: SetupHostAriaOptions = {}) {
+  ctor: typeof ReactiveElement,
+  {focusable}: SetupHostAriaOptions = {},
+) {
   if (focusable !== false) {
-    ctor.addInitializer(host => {
+    ctor.addInitializer((host) => {
       host.addController({
         hostConnected() {
           if (host.hasAttribute('tabindex')) {
@@ -206,7 +321,7 @@ export function setupHostAria(
           }
 
           host.tabIndex = 0;
-        }
+        },
       });
     });
   }
@@ -262,7 +377,9 @@ export interface SetupHostAriaOptions {
  * }
  */
 export function polyfillElementInternalsAria(
-    host: ReactiveElement, internals: ElementInternals) {
+  host: ReactiveElement,
+  internals: ElementInternals,
+) {
   if (checkIfElementInternalsSupportsAria(internals)) {
     return internals;
   }
@@ -271,25 +388,29 @@ export function polyfillElementInternalsAria(
     throw new Error('Missing setupHostAria()');
   }
 
-  let firstConnectedCallbacks:
-      Array<{property: ARIAProperty | 'role', callback: () => void}> = [];
+  let firstConnectedCallbacks: Array<{
+    property: ARIAProperty | 'role';
+    callback: () => void;
+  }> = [];
   let hasBeenConnected = false;
 
   // Add support for Firefox, which has not yet implement ElementInternals aria
   for (const ariaProperty of ARIA_PROPERTIES) {
-    let internalAriaValue: string|null = null;
+    let internalAriaValue: string | null = null;
     Object.defineProperty(internals, ariaProperty, {
       enumerable: true,
       configurable: true,
       get() {
         return internalAriaValue;
       },
-      set(value: string|null) {
+      set(value: string | null) {
         const setValue = () => {
           internalAriaValue = value;
           if (!hasBeenConnected) {
-            firstConnectedCallbacks.push(
-                {property: ariaProperty, callback: setValue});
+            firstConnectedCallbacks.push({
+              property: ariaProperty,
+              callback: setValue,
+            });
             return;
           }
 
@@ -303,14 +424,14 @@ export function polyfillElementInternalsAria(
     });
   }
 
-  let internalRoleValue: string|null = null;
+  let internalRoleValue: string | null = null;
   Object.defineProperty(internals, 'role', {
     enumerable: true,
     configurable: true,
     get() {
       return internalRoleValue;
     },
-    set(value: string|null) {
+    set(value: string | null) {
       const setRole = () => {
         internalRoleValue = value;
 
@@ -341,17 +462,17 @@ export function polyfillElementInternalsAria(
 
       hasBeenConnected = true;
 
-      const propertiesSetByUser = new Set<ARIAProperty|'role'>();
+      const propertiesSetByUser = new Set<ARIAProperty | 'role'>();
 
       // See which properties were set by the user on host before we apply
       // internals values as attributes to host. Needs to be done in another
       // for loop because the callbacks set these attributes on host.
       for (const {property} of firstConnectedCallbacks) {
         const wasSetByUser =
-            host.getAttribute(ariaPropertyToAttribute(property)) !== null ||
-            // Dynamic lookup rather than hardcoding all properties.
-            // tslint:disable-next-line:no-dict-access-on-struct-type
-            host[property] !== undefined;
+          host.getAttribute(ariaPropertyToAttribute(property)) !== null ||
+          // Dynamic lookup rather than hardcoding all properties.
+          // tslint:disable-next-line:no-dict-access-on-struct-type
+          host[property] !== undefined;
 
         if (wasSetByUser) {
           propertiesSetByUser.add(property);
@@ -370,13 +491,12 @@ export function polyfillElementInternalsAria(
 
       // Remove strong callback references
       firstConnectedCallbacks = [];
-    }
+    },
   });
 
   return internals;
 }
 
-
 // Separate function so that typescript doesn't complain about internals being
 // "never".
 function checkIfElementInternalsSupportsAria(internals: ElementInternals) {
diff --git a/internal/aria/aria_test.ts b/internal/aria/aria_test.ts
index 431352362..6a40249c4 100644
--- a/internal/aria/aria_test.ts
+++ b/internal/aria/aria_test.ts
@@ -9,20 +9,26 @@
 import {html, LitElement} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {ARIAProperty, ariaPropertyToAttribute, isAriaAttribute, polyfillElementInternalsAria, setupHostAria} from './aria.js';
+import {
+  ARIAProperty,
+  ariaPropertyToAttribute,
+  isAriaAttribute,
+  polyfillElementInternalsAria,
+  setupHostAria,
+} from './aria.js';
 
 describe('aria', () => {
   describe('isAriaAttribute()', () => {
     it('should return true for aria value attributes', () => {
       expect(isAriaAttribute('aria-label'))
-          .withContext('aria-label input')
-          .toBeTrue();
+        .withContext('aria-label input')
+        .toBeTrue();
     });
 
     it('should return true for aria idref attributes', () => {
       expect(isAriaAttribute('aria-labelledby'))
-          .withContext('aria-labelledby input')
-          .toBeTrue();
+        .withContext('aria-labelledby input')
+        .toBeTrue();
     });
 
     it('should return false for role', () => {
@@ -40,8 +46,9 @@ describe('aria', () => {
     });
 
     it('should convert aria idref properties', () => {
-      expect(ariaPropertyToAttribute('ariaLabelledByElements' as ARIAProperty))
-          .toBe('aria-labelledby');
+      expect(
+        ariaPropertyToAttribute('ariaLabelledByElements' as ARIAProperty),
+      ).toBe('aria-labelledby');
     });
   });
 
@@ -60,16 +67,16 @@ describe('aria', () => {
     it('should not hydrate tabindex attribute on creation', () => {
       const element = new TestElement();
       expect(element.hasAttribute('tabindex'))
-          .withContext('has tabindex attribute')
-          .toBeFalse();
+        .withContext('has tabindex attribute')
+        .toBeFalse();
     });
 
     it('should set tabindex="0" on element once connected', () => {
       const element = new TestElement();
       document.body.appendChild(element);
       expect(element.getAttribute('tabindex'))
-          .withContext('tabindex attribute value')
-          .toEqual('0');
+        .withContext('tabindex attribute value')
+        .toEqual('0');
 
       element.remove();
     });
@@ -79,8 +86,8 @@ describe('aria', () => {
       element.tabIndex = -1;
       document.body.appendChild(element);
       expect(element.getAttribute('tabindex'))
-          .withContext('tabindex attribute value')
-          .toEqual('-1');
+        .withContext('tabindex attribute value')
+        .toEqual('-1');
 
       element.remove();
     });
@@ -92,24 +99,23 @@ describe('aria', () => {
       element.remove();
       document.body.appendChild(element);
       expect(element.getAttribute('tabindex'))
-          .withContext('tabindex attribute value')
-          .toEqual('-1');
+        .withContext('tabindex attribute value')
+        .toEqual('-1');
     });
 
     if (!('role' in Element.prototype)) {
       describe('polyfill', () => {
-        it('should hydrate aria attributes when ARIAMixin is not supported',
-           async () => {
-             const element = new TestElement();
-             document.body.appendChild(element);
-             element.role = 'button';
-             await element.updateComplete;
-             expect(element.getAttribute('role'))
-                 .withContext('role attribute value')
-                 .toEqual('button');
+        it('should hydrate aria attributes when ARIAMixin is not supported', async () => {
+          const element = new TestElement();
+          document.body.appendChild(element);
+          element.role = 'button';
+          await element.updateComplete;
+          expect(element.getAttribute('role'))
+            .withContext('role attribute value')
+            .toEqual('button');
 
-             element.remove();
-           });
+          element.remove();
+        });
       });
     }
   });
@@ -138,8 +144,8 @@ describe('aria', () => {
         const element = new TestElement();
         document.body.appendChild(element);
         expect(element.hasAttribute('role'))
-            .withContext('has role attribute')
-            .toBeFalse();
+          .withContext('has role attribute')
+          .toBeFalse();
 
         element.remove();
       });
@@ -148,43 +154,41 @@ describe('aria', () => {
         const element = new TestElement();
         // TestElement() sets role in constructor
         expect(element.internals.role)
-            .withContext('ElementInternals.role')
-            .toEqual('button');
+          .withContext('ElementInternals.role')
+          .toEqual('button');
       });
 
       it('should preserve aria values when set before connected', () => {
         const element = new TestElement();
         element.internals.ariaLabel = 'Foo';
         expect(element.internals.ariaLabel)
-            .withContext('ElementInternals.ariaLabel')
-            .toEqual('Foo');
+          .withContext('ElementInternals.ariaLabel')
+          .toEqual('Foo');
       });
 
-      it('should hydrate role attributes when set before connection',
-         async () => {
-           const element = new TestElement();
-           // TestElement() sets role in constructor
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.getAttribute('role'))
-               .withContext('role attribute value')
-               .toEqual('button');
+      it('should hydrate role attributes when set before connection', async () => {
+        const element = new TestElement();
+        // TestElement() sets role in constructor
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.getAttribute('role'))
+          .withContext('role attribute value')
+          .toEqual('button');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should hydrate aria attributes when set before connection',
-         async () => {
-           const element = new TestElement();
-           element.internals.ariaLabel = 'Foo';
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.getAttribute('aria-label'))
-               .withContext('aria-label attribute value')
-               .toEqual('Foo');
+      it('should hydrate aria attributes when set before connection', async () => {
+        const element = new TestElement();
+        element.internals.ariaLabel = 'Foo';
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.getAttribute('aria-label'))
+          .withContext('aria-label attribute value')
+          .toEqual('Foo');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
       it('should set aria attributes when set after connection', async () => {
         const element = new TestElement();
@@ -192,180 +196,171 @@ describe('aria', () => {
         element.internals.ariaLabel = 'Value after construction';
         await element.updateComplete;
         expect(element.getAttribute('aria-label'))
-            .withContext('aria-label attribute value')
-            .toEqual('Value after construction');
+          .withContext('aria-label attribute value')
+          .toEqual('Value after construction');
 
         element.remove();
       });
 
-      it('should not override aria attributes on host when set before connection',
-         async () => {
-           const element = new TestElement();
-           element.setAttribute('aria-label', 'Value set by user');
-           element.internals.ariaLabel = 'Value set on internals';
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.getAttribute('aria-label'))
-               .withContext('aria-label attribute value on host')
-               .toEqual('Value set by user');
-           expect(element.internals.ariaLabel)
-               .withContext('ariaLabel internals property still the same')
-               .toEqual('Value set on internals');
+      it('should not override aria attributes on host when set before connection', async () => {
+        const element = new TestElement();
+        element.setAttribute('aria-label', 'Value set by user');
+        element.internals.ariaLabel = 'Value set on internals';
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.getAttribute('aria-label'))
+          .withContext('aria-label attribute value on host')
+          .toEqual('Value set by user');
+        expect(element.internals.ariaLabel)
+          .withContext('ariaLabel internals property still the same')
+          .toEqual('Value set on internals');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should not override aria properties on host when set before connection',
-         async () => {
-           const element = new TestElement();
-           element.ariaLabel = 'Value set by user';
-           element.internals.ariaLabel = 'Value set on internals';
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.getAttribute('aria-label'))
-               .withContext('aria-label attribute value on host')
-               .toEqual('Value set by user');
-           expect(element.ariaLabel)
-               .withContext('ariaLabel property value on host')
-               .toEqual('Value set by user');
-           expect(element.internals.ariaLabel)
-               .withContext('ariaLabel internals property still the same')
-               .toEqual('Value set on internals');
+      it('should not override aria properties on host when set before connection', async () => {
+        const element = new TestElement();
+        element.ariaLabel = 'Value set by user';
+        element.internals.ariaLabel = 'Value set on internals';
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.getAttribute('aria-label'))
+          .withContext('aria-label attribute value on host')
+          .toEqual('Value set by user');
+        expect(element.ariaLabel)
+          .withContext('ariaLabel property value on host')
+          .toEqual('Value set by user');
+        expect(element.internals.ariaLabel)
+          .withContext('ariaLabel internals property still the same')
+          .toEqual('Value set on internals');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should not override role attribute on host when set before connection',
-         async () => {
-           const element = new TestElement();
-           element.setAttribute('role', 'Value set by user');
-           element.internals.role = 'Value set on internals';
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.getAttribute('role'))
-               .withContext('role attribute value on host')
-               .toEqual('Value set by user');
-           expect(element.internals.role)
-               .withContext('role internals property still the same')
-               .toEqual('Value set on internals');
+      it('should not override role attribute on host when set before connection', async () => {
+        const element = new TestElement();
+        element.setAttribute('role', 'Value set by user');
+        element.internals.role = 'Value set on internals';
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.getAttribute('role'))
+          .withContext('role attribute value on host')
+          .toEqual('Value set by user');
+        expect(element.internals.role)
+          .withContext('role internals property still the same')
+          .toEqual('Value set on internals');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should not override role property on host when set before connection',
-         async () => {
-           const element = new TestElement();
-           element.role = 'Value set by user';
-           element.internals.role = 'Value set on internals';
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.getAttribute('role'))
-               .withContext('role attribute value on host')
-               .toEqual('Value set by user');
-           expect(element.role)
-               .withContext('role property value on host')
-               .toEqual('Value set by user');
-           expect(element.internals.role)
-               .withContext('role internals property still the same')
-               .toEqual('Value set on internals');
+      it('should not override role property on host when set before connection', async () => {
+        const element = new TestElement();
+        element.role = 'Value set by user';
+        element.internals.role = 'Value set on internals';
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.getAttribute('role'))
+          .withContext('role attribute value on host')
+          .toEqual('Value set by user');
+        expect(element.role)
+          .withContext('role property value on host')
+          .toEqual('Value set by user');
+        expect(element.internals.role)
+          .withContext('role internals property still the same')
+          .toEqual('Value set on internals');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should handle setting role multiple times before connection',
-         async () => {
-           const element = new TestElement();
-           element.internals.role = 'button';
-           element.internals.role = 'checkbox';
+      it('should handle setting role multiple times before connection', async () => {
+        const element = new TestElement();
+        element.internals.role = 'button';
+        element.internals.role = 'checkbox';
 
-           expect(element.internals.role)
-               .withContext('internals.role before connection')
-               .toEqual('checkbox');
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.internals.role)
-               .withContext('internals.role after connection')
-               .toEqual('checkbox');
+        expect(element.internals.role)
+          .withContext('internals.role before connection')
+          .toEqual('checkbox');
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.internals.role)
+          .withContext('internals.role after connection')
+          .toEqual('checkbox');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should handle setting role multiple times before connection when property is set on host',
-         async () => {
-           const element = new TestElement();
-           element.role = 'radio';
-           element.internals.role = 'button';
-           element.internals.role = 'checkbox';
+      it('should handle setting role multiple times before connection when property is set on host', async () => {
+        const element = new TestElement();
+        element.role = 'radio';
+        element.internals.role = 'button';
+        element.internals.role = 'checkbox';
 
-           expect(element.internals.role)
-               .withContext('internals.role before connection')
-               .toEqual('checkbox');
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.internals.role)
-               .withContext('internals.role after connection')
-               .toEqual('checkbox');
+        expect(element.internals.role)
+          .withContext('internals.role before connection')
+          .toEqual('checkbox');
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.internals.role)
+          .withContext('internals.role after connection')
+          .toEqual('checkbox');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should handle setting aria properties multiple times before connection',
-         async () => {
-           const element = new TestElement();
-           element.internals.ariaLabel = 'First';
-           element.internals.ariaLabel = 'Second';
+      it('should handle setting aria properties multiple times before connection', async () => {
+        const element = new TestElement();
+        element.internals.ariaLabel = 'First';
+        element.internals.ariaLabel = 'Second';
 
-           expect(element.internals.ariaLabel)
-               .withContext('internals.ariaLabel before connection')
-               .toEqual('Second');
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.internals.ariaLabel)
-               .withContext('internals.ariaLabel after connection')
-               .toEqual('Second');
+        expect(element.internals.ariaLabel)
+          .withContext('internals.ariaLabel before connection')
+          .toEqual('Second');
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.internals.ariaLabel)
+          .withContext('internals.ariaLabel after connection')
+          .toEqual('Second');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should handle setting aria properties multiple times before connection when property is set on host',
-         async () => {
-           const element = new TestElement();
-           element.ariaLabel = 'First';
-           element.internals.ariaLabel = 'First';
-           element.internals.ariaLabel = 'Second';
+      it('should handle setting aria properties multiple times before connection when property is set on host', async () => {
+        const element = new TestElement();
+        element.ariaLabel = 'First';
+        element.internals.ariaLabel = 'First';
+        element.internals.ariaLabel = 'Second';
 
-           expect(element.internals.ariaLabel)
-               .withContext('internals.ariaLabel before connection')
-               .toEqual('Second');
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.internals.ariaLabel)
-               .withContext('internals.ariaLabel after connection')
-               .toEqual('Second');
+        expect(element.internals.ariaLabel)
+          .withContext('internals.ariaLabel before connection')
+          .toEqual('Second');
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.internals.ariaLabel)
+          .withContext('internals.ariaLabel after connection')
+          .toEqual('Second');
 
-           element.remove();
-         });
+        element.remove();
+      });
 
-      it('should handle setting role after first connection while disconnected',
-         async () => {
-           const element = new TestElement();
-           element.internals.role = 'button';
-           document.body.appendChild(element);
-           await element.updateComplete;
+      it('should handle setting role after first connection while disconnected', async () => {
+        const element = new TestElement();
+        element.internals.role = 'button';
+        document.body.appendChild(element);
+        await element.updateComplete;
 
-           element.remove();
-           element.internals.role = 'checkbox';
-           expect(element.internals.role)
-               .withContext('internals.role after connected and disconnected')
-               .toEqual('checkbox');
-           document.body.appendChild(element);
-           await element.updateComplete;
-           expect(element.internals.role)
-               .withContext('internals.role after reconnected')
-               .toEqual('checkbox');
+        element.remove();
+        element.internals.role = 'checkbox';
+        expect(element.internals.role)
+          .withContext('internals.role after connected and disconnected')
+          .toEqual('checkbox');
+        document.body.appendChild(element);
+        await element.updateComplete;
+        expect(element.internals.role)
+          .withContext('internals.role after reconnected')
+          .toEqual('checkbox');
 
-           element.remove();
-         });
+        element.remove();
+      });
     }
   });
 });
diff --git a/internal/aria/delegate.ts b/internal/aria/delegate.ts
index 204bed59a..577dc5a78 100644
--- a/internal/aria/delegate.ts
+++ b/internal/aria/delegate.ts
@@ -46,11 +46,11 @@ export function requestUpdateOnAriaChange(ctor: typeof ReactiveElement) {
     });
   }
 
-  ctor.addInitializer(element => {
+  ctor.addInitializer((element) => {
     const controller = {
       hostConnected() {
         element.setAttribute('role', 'presentation');
-      }
+      },
     };
 
     element.addController(controller);
diff --git a/internal/aria/delegate_test.ts b/internal/aria/delegate_test.ts
index d61ebb9bd..6da068562 100644
--- a/internal/aria/delegate_test.ts
+++ b/internal/aria/delegate_test.ts
@@ -25,7 +25,7 @@ class AriaDelegateElement extends LitElement {
     requestUpdateOnAriaChange(AriaDelegateElement);
   }
 
-  @queryAsync('button') readonly button!: Promise<HTMLButtonElement|null>;
+  @queryAsync('button') readonly button!: Promise<HTMLButtonElement | null>;
 
   protected override render() {
     return html`<button aria-label=${this.ariaLabel || nothing}>Label</button>`;
@@ -37,8 +37,8 @@ describe('aria', () => {
 
   async function setupTest({ariaLabel}: {ariaLabel?: string} = {}) {
     const root = env.render(html`
-      <test-aria-delegate aria-label=${
-        ariaLabel || nothing}></test-aria-delegate>
+      <test-aria-delegate
+        aria-label=${ariaLabel || nothing}></test-aria-delegate>
     `);
 
     const host = root.querySelector('test-aria-delegate');
@@ -60,8 +60,8 @@ describe('aria', () => {
       const {host} = await setupTest();
 
       expect(host.getAttribute('role'))
-          .withContext('host role')
-          .toEqual('presentation');
+        .withContext('host role')
+        .toEqual('presentation');
     });
 
     it('should not change or remove host aria attributes', async () => {
@@ -69,8 +69,8 @@ describe('aria', () => {
       const {host} = await setupTest({ariaLabel});
 
       expect(host.getAttribute('aria-label'))
-          .withContext('host aria-label')
-          .toEqual(ariaLabel);
+        .withContext('host aria-label')
+        .toEqual(ariaLabel);
     });
 
     it('should delegate aria attributes to child element', async () => {
@@ -78,30 +78,28 @@ describe('aria', () => {
       const {child} = await setupTest({ariaLabel});
 
       expect(child.getAttribute('aria-label'))
-          .withContext('child aria-label')
-          .toEqual(ariaLabel);
+        .withContext('child aria-label')
+        .toEqual(ariaLabel);
     });
 
-    it('should update delegated aria attributes when host attribute changes',
-       async () => {
-         const {host, child} = await setupTest({ariaLabel: 'First aria label'});
+    it('should update delegated aria attributes when host attribute changes', async () => {
+      const {host, child} = await setupTest({ariaLabel: 'First aria label'});
 
-         host.setAttribute('aria-label', 'Second aria label');
-         await env.waitForStability();
-         expect(child.getAttribute('aria-label'))
-             .withContext('child aria-label')
-             .toEqual('Second aria label');
-       });
+      host.setAttribute('aria-label', 'Second aria label');
+      await env.waitForStability();
+      expect(child.getAttribute('aria-label'))
+        .withContext('child aria-label')
+        .toEqual('Second aria label');
+    });
 
-    it('should remove delegated aria attributes when host attribute is removed',
-       async () => {
-         const {host, child} = await setupTest({ariaLabel: 'First aria label'});
+    it('should remove delegated aria attributes when host attribute is removed', async () => {
+      const {host, child} = await setupTest({ariaLabel: 'First aria label'});
 
-         host.removeAttribute('aria-label');
-         await env.waitForStability();
-         expect(child.hasAttribute('aria-label'))
-             .withContext('child has aria-label')
-             .toBeFalse();
-       });
+      host.removeAttribute('aria-label');
+      await env.waitForStability();
+      expect(child.hasAttribute('aria-label'))
+        .withContext('child has aria-label')
+        .toBeFalse();
+    });
   });
 });
diff --git a/internal/controller/attachable-controller.ts b/internal/controller/attachable-controller.ts
index aeccacdd8..bff7ac688 100644
--- a/internal/controller/attachable-controller.ts
+++ b/internal/controller/attachable-controller.ts
@@ -33,7 +33,7 @@ export interface Attachable {
    * </button>
    * ```
    */
-  htmlFor: string|null;
+  htmlFor: string | null;
 
   /**
    * Gets or sets the element that controls the visibility of the attachable
@@ -44,7 +44,7 @@ export interface Attachable {
    * - The element's parent.
    * - `null` if the element is not controlled.
    */
-  control: HTMLElement|null;
+  control: HTMLElement | null;
 
   /**
    * Attaches the element to an interactive control.
@@ -73,7 +73,7 @@ interface AttachableControllerHost extends ReactiveControllerHost, HTMLElement {
   [ATTACHABLE_CONTROLLER]?: AttachableController;
 }
 
-let FOR_ATTRIBUTE_OBSERVER: MutationObserver|undefined;
+let FOR_ATTRIBUTE_OBSERVER: MutationObserver | undefined;
 
 if (!isServer) {
   /**
@@ -81,12 +81,13 @@ if (!isServer) {
    * `Attachable` elements. If the `for` attribute changes, the controller will
    * re-attach to the new referenced element.
    */
-  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
+  FOR_ATTRIBUTE_OBSERVER = new MutationObserver((records) => {
     for (const record of records) {
       // When a control's `for` attribute changes, inform its
       // `AttachableController` to update to a new control.
-      (record.target as AttachableControllerHost)[ATTACHABLE_CONTROLLER]
-          ?.hostConnected();
+      (record.target as AttachableControllerHost)[
+        ATTACHABLE_CONTROLLER
+      ]?.hostConnected();
     }
   });
 }
@@ -117,7 +118,7 @@ export class AttachableController implements ReactiveController, Attachable {
     return this.host.getAttribute('for');
   }
 
-  set htmlFor(htmlFor: string|null) {
+  set htmlFor(htmlFor: string | null) {
     if (htmlFor === null) {
       this.host.removeAttribute('for');
     } else {
@@ -131,13 +132,14 @@ export class AttachableController implements ReactiveController, Attachable {
         return null;
       }
 
-      return (this.host.getRootNode() as Document | ShadowRoot)
-          .querySelector<HTMLElement>(`#${this.htmlFor}`);
+      return (
+        this.host.getRootNode() as Document | ShadowRoot
+      ).querySelector<HTMLElement>(`#${this.htmlFor}`);
     }
 
     return this.currentControl || this.host.parentElement;
   }
-  set control(control: HTMLElement|null) {
+  set control(control: HTMLElement | null) {
     if (control) {
       this.attach(control);
     } else {
@@ -145,7 +147,7 @@ export class AttachableController implements ReactiveController, Attachable {
     }
   }
 
-  private currentControl: HTMLElement|null = null;
+  private currentControl: HTMLElement | null = null;
 
   /**
    * Creates a new controller for an `Attachable` element.
@@ -156,9 +158,12 @@ export class AttachableController implements ReactiveController, Attachable {
    *     logic whenever the control changes.
    */
   constructor(
-      private readonly host: AttachableControllerHost,
-      private readonly onControlChange:
-          (prev: HTMLElement|null, next: HTMLElement|null) => void) {
+    private readonly host: AttachableControllerHost,
+    private readonly onControlChange: (
+      prev: HTMLElement | null,
+      next: HTMLElement | null,
+    ) => void,
+  ) {
     host.addController(this);
     host[ATTACHABLE_CONTROLLER] = this;
     FOR_ATTRIBUTE_OBSERVER?.observe(host, {attributeFilter: ['for']});
@@ -192,7 +197,7 @@ export class AttachableController implements ReactiveController, Attachable {
     this.setCurrentControl(null);
   }
 
-  private setCurrentControl(control: HTMLElement|null) {
+  private setCurrentControl(control: HTMLElement | null) {
     this.onControlChange(this.currentControl, control);
     this.currentControl = control;
   }
diff --git a/internal/controller/events_test.ts b/internal/controller/events_test.ts
index 18505ef78..e1f26ab78 100644
--- a/internal/controller/events_test.ts
+++ b/internal/controller/events_test.ts
@@ -6,15 +6,20 @@
 
 // import 'jasmine'; (google3-only)
 
-import {dispatchActivationClick, isActivationClick, redispatchEvent} from './events.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+  redispatchEvent,
+} from './events.js';
 
 describe('events', () => {
   let instance: HTMLDivElement;
 
   beforeEach(() => {
     instance = document.createElement('div');
-    instance.attachShadow({mode: 'open'})
-        .append(document.createElement('slot'));
+    instance
+      .attachShadow({mode: 'open'})
+      .append(document.createElement('slot'));
     // To have event.target set correctly, the EventTarget instance must be
     // attached to the DOM.
     document.body.appendChild(instance);
@@ -34,21 +39,22 @@ describe('events', () => {
       expect(fooHandler).toHaveBeenCalled();
       const redispatchedEvent = fooHandler.calls.first().args[0] as Event;
       expect(redispatchedEvent)
-          .withContext('redispatched event should be a new instance')
-          .not.toBe(event);
+        .withContext('redispatched event should be a new instance')
+        .not.toBe(event);
       expect(redispatchedEvent.target)
-          .withContext(
-              'target should be the instance that redispatched the event')
-          .toBe(instance);
+        .withContext(
+          'target should be the instance that redispatched the event',
+        )
+        .toBe(instance);
       expect(redispatchedEvent.type)
-          .withContext('should be the same event type')
-          .toBe(event.type);
+        .withContext('should be the same event type')
+        .toBe(event.type);
       expect(redispatchedEvent.composed)
-          .withContext('should not be composed')
-          .toBeFalse();
+        .withContext('should not be composed')
+        .toBeFalse();
       expect(redispatchedEvent.bubbles)
-          .withContext('should keep other flags set to true')
-          .toBeTrue();
+        .withContext('should keep other flags set to true')
+        .toBeTrue();
     });
 
     it('should not dispatch multiple events if bubbling and composed', () => {
@@ -77,23 +83,24 @@ describe('events', () => {
 
     it('should preventDefault() on the original event if canceled', () => {
       const event = new Event('foo', {cancelable: true});
-      const fooHandler =
-          jasmine.createSpy('fooHandler').and.callFake((event: Event) => {
-            event.preventDefault();
-          });
+      const fooHandler = jasmine
+        .createSpy('fooHandler')
+        .and.callFake((event: Event) => {
+          event.preventDefault();
+        });
       instance.addEventListener('foo', fooHandler);
       const result = redispatchEvent(instance, event);
       expect(result)
-          .withContext('should return false since event was canceled')
-          .toBeFalse();
+        .withContext('should return false since event was canceled')
+        .toBeFalse();
       expect(fooHandler).toHaveBeenCalled();
       const redispatchedEvent = fooHandler.calls.first().args[0] as Event;
       expect(redispatchedEvent.defaultPrevented)
-          .withContext('redispatched event should be canceled by handler')
-          .toBeTrue();
+        .withContext('redispatched event should be canceled by handler')
+        .toBeTrue();
       expect(event.defaultPrevented)
-          .withContext('original event should be canceled')
-          .toBeTrue();
+        .withContext('original event should be canceled')
+        .toBeTrue();
     });
 
     it('should preserve event instance types', () => {
@@ -105,11 +112,11 @@ describe('events', () => {
       expect(fooHandler).toHaveBeenCalled();
       const redispatchedEvent = fooHandler.calls.first().args[0] as CustomEvent;
       expect(redispatchedEvent)
-          .withContext('should create the same instance type')
-          .toBeInstanceOf(CustomEvent);
+        .withContext('should create the same instance type')
+        .toBeInstanceOf(CustomEvent);
       expect(redispatchedEvent.detail)
-          .withContext('should copy event type-specific properties')
-          .toBe('bar');
+        .withContext('should copy event type-specific properties')
+        .toBe('bar');
     });
   });
 
@@ -119,7 +126,8 @@ describe('events', () => {
       listener.and.callThrough();
       instance.addEventListener('click', listener);
       instance.dispatchEvent(
-          new MouseEvent('click', {bubbles: true, composed: true}));
+        new MouseEvent('click', {bubbles: true, composed: true}),
+      );
       expect(listener).toHaveBeenCalledTimes(1);
       expect(listener.calls.mostRecent().returnValue).toBe(true);
     });
@@ -131,7 +139,8 @@ describe('events', () => {
       const innerEl = document.createElement('div');
       instance.shadowRoot!.append(innerEl);
       innerEl.dispatchEvent(
-          new MouseEvent('click', {bubbles: true, composed: true}));
+        new MouseEvent('click', {bubbles: true, composed: true}),
+      );
       expect(listener).toHaveBeenCalledTimes(1);
       expect(listener.calls.mostRecent().returnValue).toBe(false);
     });
@@ -144,7 +153,8 @@ describe('events', () => {
       instance.append(slottedEl);
 
       slottedEl.dispatchEvent(
-          new MouseEvent('click', {bubbles: true, composed: true}));
+        new MouseEvent('click', {bubbles: true, composed: true}),
+      );
       expect(listener).toHaveBeenCalledTimes(1);
       expect(listener.calls.mostRecent().returnValue).toBe(false);
     });
@@ -162,14 +172,13 @@ describe('events', () => {
       expect(listener).toHaveBeenCalledTimes(2);
     });
 
-    it('dispatches an event that cannot be heard outside dispatching scope',
-       () => {
-         const innerEl = document.createElement('div');
-         instance.shadowRoot!.append(innerEl);
-         const listener = jasmine.createSpy('listener');
-         instance.addEventListener('click', listener);
-         dispatchActivationClick(innerEl);
-         expect(listener).toHaveBeenCalledTimes(0);
-       });
+    it('dispatches an event that cannot be heard outside dispatching scope', () => {
+      const innerEl = document.createElement('div');
+      instance.shadowRoot!.append(innerEl);
+      const listener = jasmine.createSpy('listener');
+      instance.addEventListener('click', listener);
+      dispatchActivationClick(innerEl);
+      expect(listener).toHaveBeenCalledTimes(0);
+    });
   });
-});
\ No newline at end of file
+});
diff --git a/internal/controller/form-submitter.ts b/internal/controller/form-submitter.ts
index 02cd4a460..221c64d28 100644
--- a/internal/controller/form-submitter.ts
+++ b/internal/controller/form-submitter.ts
@@ -17,7 +17,7 @@ import {internals, WithInternals} from './element-internals.js';
  * - reset: The element resets the form.
  * - button: The element does nothing.
  */
-export type FormSubmitterType = 'button'|'submit'|'reset';
+export type FormSubmitterType = 'button' | 'submit' | 'reset';
 
 /**
  * An element that can submit or reset a `<form>`, similar to
@@ -51,7 +51,8 @@ export interface FormSubmitter extends ReactiveElement, WithInternals {
 }
 
 type FormSubmitterConstructor =
-    (new () => FormSubmitter)|(abstract new () => FormSubmitter);
+  | (new () => FormSubmitter)
+  | (abstract new () => FormSubmitter);
 
 /**
  * Sets up an element's constructor to enable form submission. The element
@@ -82,9 +83,9 @@ export function setupFormSubmitter(ctor: FormSubmitterConstructor) {
     return;
   }
 
-  (ctor as unknown as typeof ReactiveElement).addInitializer(instance => {
+  (ctor as unknown as typeof ReactiveElement).addInitializer((instance) => {
     const submitter = instance as FormSubmitter;
-    submitter.addEventListener('click', async event => {
+    submitter.addEventListener('click', async (event) => {
       const {type, [internals]: elementInternals} = submitter;
       const {form} = elementInternals;
       if (!form || type === 'button') {
@@ -92,7 +93,7 @@ export function setupFormSubmitter(ctor: FormSubmitterConstructor) {
       }
 
       // Wait a microtask for event bubbling to complete.
-      await new Promise<void>(resolve => {
+      await new Promise<void>((resolve) => {
         resolve();
       });
 
@@ -109,13 +110,17 @@ export function setupFormSubmitter(ctor: FormSubmitterConstructor) {
       // elements. This patches the dispatched submit event to add the correct
       // `submitter`.
       // See https://github.com/WICG/webcomponents/issues/814
-      form.addEventListener('submit', submitEvent => {
-        Object.defineProperty(submitEvent, 'submitter', {
-          configurable: true,
-          enumerable: true,
-          get: () => submitter,
-        });
-      }, {capture: true, once: true});
+      form.addEventListener(
+        'submit',
+        (submitEvent) => {
+          Object.defineProperty(submitEvent, 'submitter', {
+            configurable: true,
+            enumerable: true,
+            get: () => submitter,
+          });
+        },
+        {capture: true, once: true},
+      );
 
       elementInternals.setFormValue(submitter.value);
       form.requestSubmit();
diff --git a/internal/controller/form-submitter_test.ts b/internal/controller/form-submitter_test.ts
index 25f813ab9..14aa439f1 100644
--- a/internal/controller/form-submitter_test.ts
+++ b/internal/controller/form-submitter_test.ts
@@ -36,13 +36,15 @@ class FormSubmitterButton extends LitElement {
   [internals] = this.attachInternals();
 }
 
-
 describe('setupFormSubmitter()', () => {
   const env = new Environment();
 
   async function setupTest() {
     const root = env.render(
-        html`<form><test-form-submitter-button></test-form-submitter-button></form>`);
+      html`<form
+        ><test-form-submitter-button></test-form-submitter-button
+      ></form>`,
+    );
     const submitter = root.querySelector('test-form-submitter-button');
     if (!submitter) {
       throw new Error(`Could not query rendered <test-form-submitter-button>`);
@@ -92,9 +94,13 @@ describe('setupFormSubmitter()', () => {
 
     spyOn(form, 'requestSubmit');
 
-    harness.element.addEventListener('click', (event: Event) => {
-      event.preventDefault();
-    }, {once: true});
+    harness.element.addEventListener(
+      'click',
+      (event: Event) => {
+        event.preventDefault();
+      },
+      {once: true},
+    );
 
     await harness.clickWithMouse();
 
@@ -103,10 +109,11 @@ describe('setupFormSubmitter()', () => {
 
   it('should set the button as the SubmitEvent submitter', async () => {
     const {harness, form} = await setupTest();
-    const submitListener =
-        jasmine.createSpy('submitListener').and.callFake((event: Event) => {
-          event.preventDefault();
-        });
+    const submitListener = jasmine
+      .createSpy('submitListener')
+      .and.callFake((event: Event) => {
+        event.preventDefault();
+      });
 
     form.addEventListener('submit', submitListener);
 
@@ -115,13 +122,13 @@ describe('setupFormSubmitter()', () => {
     expect(submitListener).toHaveBeenCalled();
     const event = submitListener.calls.argsFor(0)[0] as SubmitEvent;
     expect(event.submitter)
-        .withContext('event.submitter')
-        .toBe(harness.element);
+      .withContext('event.submitter')
+      .toBe(harness.element);
   });
 
   it('should add name/value to form data when present', async () => {
     const {harness, form} = await setupTest();
-    form.addEventListener('submit', event => {
+    form.addEventListener('submit', (event) => {
       event.preventDefault();
     });
 
diff --git a/internal/controller/is-rtl.ts b/internal/controller/is-rtl.ts
index 4c7e2fced..02df8a475 100644
--- a/internal/controller/is-rtl.ts
+++ b/internal/controller/is-rtl.ts
@@ -13,6 +13,8 @@
  *     this parameter can be used as a conditional guard. Defaults to `true`.
  */
 export function isRtl(el: HTMLElement, shouldCheck = true) {
-  return shouldCheck &&
-      getComputedStyle(el).getPropertyValue('direction').trim() === 'rtl';
-}
\ No newline at end of file
+  return (
+    shouldCheck &&
+    getComputedStyle(el).getPropertyValue('direction').trim() === 'rtl'
+  );
+}
diff --git a/internal/controller/string-converter.ts b/internal/controller/string-converter.ts
index 06ea147ec..6dcb3c825 100644
--- a/internal/controller/string-converter.ts
+++ b/internal/controller/string-converter.ts
@@ -5,10 +5,10 @@
  */
 
 export const stringConverter = {
-  fromAttribute(value: string|null): string {
+  fromAttribute(value: string | null): string {
     return value ?? '';
   },
-  toAttribute(value: string): string|null {
+  toAttribute(value: string): string | null {
     return value || null;
-  }
+  },
 };
diff --git a/internal/motion/animation.ts b/internal/motion/animation.ts
index 480593688..4de730c38 100644
--- a/internal/motion/animation.ts
+++ b/internal/motion/animation.ts
@@ -72,7 +72,7 @@ export interface AnimationSignal {
  */
 export function createAnimationSignal(): AnimationSignal {
   // The current animation's AbortController
-  let animationAbortController: AbortController|null = null;
+  let animationAbortController: AbortController | null = null;
 
   return {
     start() {
@@ -98,10 +98,12 @@ export function createAnimationSignal(): AnimationSignal {
 export function createThrottle() {
   const stack = new Set();
   return async (
-             key = '', cb: (...args: unknown[]) => unknown,
-             timeout = async () => {
-               await new Promise(requestAnimationFrame);
-             }) => {
+    key = '',
+    cb: (...args: unknown[]) => unknown,
+    timeout = async () => {
+      await new Promise(requestAnimationFrame);
+    },
+  ) => {
     if (!stack.has(key)) {
       stack.add(key);
       await timeout();
diff --git a/internal/motion/animation_test.ts b/internal/motion/animation_test.ts
index a4185bf71..c67c2b872 100644
--- a/internal/motion/animation_test.ts
+++ b/internal/motion/animation_test.ts
@@ -5,7 +5,12 @@
  */
 
 // import 'jasmine'; (google3-only)
-import {AnimationSignal, createAnimationSignal, createThrottle, msFromTimeCSSValue} from './animation.js';
+import {
+  AnimationSignal,
+  createAnimationSignal,
+  createThrottle,
+  msFromTimeCSSValue,
+} from './animation.js';
 
 describe('createAnimationSignal()', () => {
   let task: AnimationSignal;
@@ -23,15 +28,15 @@ describe('createAnimationSignal()', () => {
     it('should abort previous signal on subsequent calls', () => {
       const firstSignal = task.start();
       expect(firstSignal.aborted)
-          .withContext('first signal should not be aborted by default')
-          .toBeFalse();
+        .withContext('first signal should not be aborted by default')
+        .toBeFalse();
       const secondSignal = task.start();
       expect(firstSignal.aborted)
-          .withContext('first signal should abort after start is called again')
-          .toBeTrue();
+        .withContext('first signal should abort after start is called again')
+        .toBeTrue();
       expect(secondSignal.aborted)
-          .withContext('second signal should not be aborted by default')
-          .toBeFalse();
+        .withContext('second signal should not be aborted by default')
+        .toBeFalse();
     });
   });
 
@@ -40,8 +45,8 @@ describe('createAnimationSignal()', () => {
       const signal = task.start();
       task.finish();
       expect(signal.aborted)
-          .withContext('finishing a task should not signal an abort')
-          .toBeFalse();
+        .withContext('finishing a task should not signal an abort')
+        .toBeFalse();
     });
 
     it('should not abort previous tasks when starting after finishing', () => {
@@ -49,20 +54,19 @@ describe('createAnimationSignal()', () => {
       task.finish();
       task.start();
       expect(firstSignal.aborted)
-          .withContext('starting a new task should not finished tasks')
-          .toBeFalse();
+        .withContext('starting a new task should not finished tasks')
+        .toBeFalse();
     });
   });
 });
 
-
 describe('createThrottle()', () => {
   it('throttles calls', async () => {
     const throttle = createThrottle();
     const key = 'foo';
     const fn = jasmine.createSpy();
-    let timeoutResolver: Function|null = null;
-    const timeout = new Promise(r => {
+    let timeoutResolver: Function | null = null;
+    const timeout = new Promise((r) => {
       timeoutResolver = r;
     });
     const timeoutFn = async () => {
@@ -88,4 +92,4 @@ describe('msFromTimeCSSValue()', () => {
     const n = msFromTimeCSSValue('1.23s');
     expect(n).toBe(1230);
   });
-});
\ No newline at end of file
+});
diff --git a/labs/behaviors/focusable.ts b/labs/behaviors/focusable.ts
index f85d8b1fb..d7de9bf0b 100644
--- a/labs/behaviors/focusable.ts
+++ b/labs/behaviors/focusable.ts
@@ -47,16 +47,17 @@ const updateTabIndex = Symbol('updateTabIndex');
  * @param base The class to mix functionality into.
  * @return The provided class with `Focusable` mixed in.
  */
-export function mixinFocusable<T extends MixinBase<LitElement>>(base: T):
-    MixinReturn<T, Focusable> {
+export function mixinFocusable<T extends MixinBase<LitElement>>(
+  base: T,
+): MixinReturn<T, Focusable> {
   abstract class FocusableElement extends base implements Focusable {
     @property({reflect: true}) declare tabIndex: number;
 
-    get[isFocusable]() {
+    get [isFocusable]() {
       return this[privateIsFocusable];
     }
 
-    set[isFocusable](value: boolean) {
+    set [isFocusable](value: boolean) {
       if (this[isFocusable] === value) {
         return;
       }
@@ -66,7 +67,7 @@ export function mixinFocusable<T extends MixinBase<LitElement>>(base: T):
     }
 
     [privateIsFocusable] = false;
-    [externalTabIndex]: number|null = null;
+    [externalTabIndex]: number | null = null;
     [isUpdatingTabIndex] = false;
 
     // tslint:disable-next-line:no-any
@@ -76,7 +77,10 @@ export function mixinFocusable<T extends MixinBase<LitElement>>(base: T):
     }
 
     override attributeChangedCallback(
-        name: string, old: string|null, value: string|null) {
+      name: string,
+      old: string | null,
+      value: string | null,
+    ) {
       super.attributeChangedCallback(name, old, value);
       if (name !== 'tabindex' || this[isUpdatingTabIndex]) {
         return;
@@ -92,7 +96,7 @@ export function mixinFocusable<T extends MixinBase<LitElement>>(base: T):
       this[externalTabIndex] = this.tabIndex;
     }
 
-    async[updateTabIndex]() {
+    async [updateTabIndex]() {
       const internalTabIndex = this[isFocusable] ? 0 : -1;
       const computedTabIndex = this[externalTabIndex] ?? internalTabIndex;
 
diff --git a/labs/behaviors/focusable_test.ts b/labs/behaviors/focusable_test.ts
index 6c8634fa7..d4beb2d8b 100644
--- a/labs/behaviors/focusable_test.ts
+++ b/labs/behaviors/focusable_test.ts
@@ -17,8 +17,7 @@ describe('mixinFocusable()', () => {
   // tslint:disable-next-line:enforce-name-casing MixinClassCase
   const FocusableLitElement = mixinFocusable(LitElement);
   @customElement('test-focusable')
-  class TestFocusable extends FocusableLitElement {
-  }
+  class TestFocusable extends FocusableLitElement {}
 
   const env = new Environment();
 
@@ -53,28 +52,25 @@ describe('mixinFocusable()', () => {
     expect(element.requestUpdate).toHaveBeenCalled();
   });
 
-  it('should not override user-set tabindex="0" when isFocusable is false',
-     async () => {
-       const element = await setupTest();
-       element[isFocusable] = false;
-       element.tabIndex = 0;
-       expect(element[isFocusable]).withContext('isFocusable').toBeFalse();
-       expect(element.tabIndex).withContext('tabIndex').toBe(0);
-     });
+  it('should not override user-set tabindex="0" when isFocusable is false', async () => {
+    const element = await setupTest();
+    element[isFocusable] = false;
+    element.tabIndex = 0;
+    expect(element[isFocusable]).withContext('isFocusable').toBeFalse();
+    expect(element.tabIndex).withContext('tabIndex').toBe(0);
+  });
 
-  it('should not override user-set tabindex="-1" when isFocusable is true',
-     async () => {
-       const element = await setupTest();
-       element.tabIndex = -1;
-       expect(element[isFocusable]).withContext('isFocusable').toBeTrue();
-       expect(element.tabIndex).withContext('tabIndex').toBe(-1);
-     });
+  it('should not override user-set tabindex="-1" when isFocusable is true', async () => {
+    const element = await setupTest();
+    element.tabIndex = -1;
+    expect(element[isFocusable]).withContext('isFocusable').toBeTrue();
+    expect(element.tabIndex).withContext('tabIndex').toBe(-1);
+  });
 
-  it('should restore default tabindex when user-set tabindex attribute is removed',
-     async () => {
-       const element = await setupTest();
-       element.tabIndex = -1;
-       element.removeAttribute('tabindex');
-       expect(element.tabIndex).withContext('tabIndex').toBe(0);
-     });
+  it('should restore default tabindex when user-set tabindex attribute is removed', async () => {
+    const element = await setupTest();
+    element.tabIndex = -1;
+    element.removeAttribute('tabindex');
+    expect(element.tabIndex).withContext('tabIndex').toBe(0);
+  });
 });
diff --git a/labs/behaviors/mixin.ts b/labs/behaviors/mixin.ts
index 98b144e47..14a5de04a 100644
--- a/labs/behaviors/mixin.ts
+++ b/labs/behaviors/mixin.ts
@@ -26,10 +26,11 @@
  * }
  * ```
  */
-// Mixins must have a constructor with `...args: any[]`
-// tslint:disable-next-line:no-any
-export type MixinBase<ExpectedBase = object> = abstract new (...args: any[]) =>
-    ExpectedBase;
+export type MixinBase<ExpectedBase = object> = abstract new (
+  // Mixins must have a constructor with `...args: any[]`
+  // tslint:disable-next-line:no-any
+  ...args: any[]
+) => ExpectedBase;
 
 /**
  * The return value of a mixin.
@@ -57,9 +58,7 @@ export type MixinBase<ExpectedBase = object> = abstract new (...args: any[]) =>
  * ```
  *
  */
-// Mixins must have a constructor with `...args: any[]`
-// tslint:disable-next-line:no-any
 export type MixinReturn<MixinBase, MixinClass = object> =
-    // Mixins must have a constructor with `...args: any[]`
-    // tslint:disable-next-line:no-any
-    (abstract new (...args: any[]) => MixinClass)&MixinBase;
+  // Mixins must have a constructor with `...args: any[]`
+  // tslint:disable-next-line:no-any
+  (abstract new (...args: any[]) => MixinClass) & MixinBase;
diff --git a/labs/item/demo/demo.ts b/labs/item/demo/demo.ts
index d6a6541cb..654f02e09 100644
--- a/labs/item/demo/demo.ts
+++ b/labs/item/demo/demo.ts
@@ -4,21 +4,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Item', [
-      new Knob('overline', {ui: textInput()}),
-      new Knob('trailingSupportingText', {ui: textInput()}),
-      new Knob('leadingIcon', {ui: boolInput()}),
-      new Knob('trailingIcon', {ui: boolInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Item',
+  [
+    new Knob('overline', {ui: textInput()}),
+    new Knob('trailingSupportingText', {ui: textInput()}),
+    new Knob('leadingIcon', {ui: boolInput()}),
+    new Knob('trailingIcon', {ui: boolInput()}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/labs/item/demo/stories.ts b/labs/item/demo/stories.ts
index 927cfcd75..67aacc780 100644
--- a/labs/item/demo/stories.ts
+++ b/labs/item/demo/stories.ts
@@ -56,7 +56,7 @@ const styles = css`
 `;
 
 const LOREM_IPSUM =
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum rhoncus est volutpat venenatis.';
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum rhoncus est volutpat venenatis.';
 
 const items: MaterialStoryInit<StoryKnobs> = {
   name: 'Items',
@@ -64,10 +64,7 @@ const items: MaterialStoryInit<StoryKnobs> = {
   render(knobs) {
     return html`
       <div class="container">
-        <md-item>
-          Single line item
-          ${getKnobContent(knobs)}
-        </md-item>
+        <md-item> Single line item ${getKnobContent(knobs)} </md-item>
 
         <md-item>
           Two line item
@@ -85,7 +82,7 @@ const items: MaterialStoryInit<StoryKnobs> = {
         </md-item>
       </div>
     `;
-  }
+  },
 };
 
 const longText: MaterialStoryInit<StoryKnobs> = {
@@ -96,9 +93,7 @@ const longText: MaterialStoryInit<StoryKnobs> = {
       <div class="container">
         <md-item class="nowrap">
           Item with a truncated headline and supporting text.
-          <div slot="supporting-text">
-            Supporting text. ${LOREM_IPSUM}
-          </div>
+          <div slot="supporting-text"> Supporting text. ${LOREM_IPSUM} </div>
           ${getKnobContent(knobs)}
         </md-item>
 
@@ -112,37 +107,36 @@ const longText: MaterialStoryInit<StoryKnobs> = {
 
         <md-item>
           Item that always shows long wrapping text.
-          <div slot="supporting-text">
-            Supporting text. ${LOREM_IPSUM}
-          </div>
+          <div slot="supporting-text"> Supporting text. ${LOREM_IPSUM} </div>
           ${getKnobContent(knobs, /* threeLines */ true)}
         </md-item>
       </div>
     `;
-  }
+  },
 };
 
 function getKnobContent(knobs: StoryKnobs, threeLines = false) {
-  const overline = knobs.overline ?
-      html`<div slot="overline">${knobs.overline}</div>` :
-      nothing;
+  const overline = knobs.overline
+    ? html`<div slot="overline">${knobs.overline}</div>`
+    : nothing;
 
   const classes = {
     'align-start': threeLines,
   };
 
-  const trailingText = knobs.trailingSupportingText ?
-      html`<div class=${classMap(classes)} slot="trailing-supporting-text">${
-          knobs.trailingSupportingText}</div>` :
-      nothing;
+  const trailingText = knobs.trailingSupportingText
+    ? html`<div class=${classMap(classes)} slot="trailing-supporting-text"
+        >${knobs.trailingSupportingText}</div
+      >`
+    : nothing;
 
-  const leadingIcon = knobs.leadingIcon ?
-      html`<md-icon class=${classMap(classes)} slot="start">event</md-icon>` :
-      nothing;
+  const leadingIcon = knobs.leadingIcon
+    ? html`<md-icon class=${classMap(classes)} slot="start">event</md-icon>`
+    : nothing;
 
-  const trailingIcon = knobs.trailingIcon ?
-      html`<md-icon class=${classMap(classes)} slot="end">star</md-icon>` :
-      nothing;
+  const trailingIcon = knobs.trailingIcon
+    ? html`<md-icon class=${classMap(classes)} slot="end">star</md-icon>`
+    : nothing;
 
   return [overline, trailingText, leadingIcon, trailingIcon];
 }
diff --git a/labs/item/internal/item.ts b/labs/item/internal/item.ts
index bf30e3313..bb31fa62a 100644
--- a/labs/item/internal/item.ts
+++ b/labs/item/internal/item.ts
@@ -27,14 +27,14 @@ export class Item extends LitElement {
       <slot name="container"></slot>
       <slot class="non-text" name="start"></slot>
       <div class="text">
-        <slot name="overline"
-            @slotchange=${this.handleTextSlotChange}></slot>
-        <slot class="default-slot"
-            @slotchange=${this.handleTextSlotChange}></slot>
-        <slot name="headline"
-            @slotchange=${this.handleTextSlotChange}></slot>
-        <slot name="supporting-text"
-            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          class="default-slot"
+          @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          name="supporting-text"
+          @slotchange=${this.handleTextSlotChange}></slot>
       </div>
       <slot class="non-text" name="trailing-supporting-text"></slot>
       <slot class="non-text" name="end"></slot>
@@ -68,7 +68,7 @@ function slotHasContent(slot: HTMLSlotElement) {
     // If there's only text nodes for the default slot, check if there's
     // non-whitespace.
     const isTextWithContent =
-        node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/);
+      node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/);
     if (isElement || isTextWithContent) {
       return true;
     }
diff --git a/labs/navigationbar/demo/demo.ts b/labs/navigationbar/demo/demo.ts
index 950ba4db0..54d63310b 100644
--- a/labs/navigationbar/demo/demo.ts
+++ b/labs/navigationbar/demo/demo.ts
@@ -4,23 +4,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Navigation Bar', [
-      new Knob('hideInactiveLabels', {ui: boolInput(), defaultValue: false}),
-      new Knob('label', {ui: textInput(), defaultValue: 'Label'}),
-      new Knob('showBadge', {ui: boolInput(), defaultValue: false}),
-      new Knob('badgeValue', {ui: textInput(), defaultValue: ''}),
-      new Knob('active icon', {ui: textInput(), defaultValue: 'star'}),
-      new Knob('inactive icon', {ui: textInput(), defaultValue: 'star_border'}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Navigation Bar',
+  [
+    new Knob('hideInactiveLabels', {ui: boolInput(), defaultValue: false}),
+    new Knob('label', {ui: textInput(), defaultValue: 'Label'}),
+    new Knob('showBadge', {ui: boolInput(), defaultValue: false}),
+    new Knob('badgeValue', {ui: textInput(), defaultValue: ''}),
+    new Knob('active icon', {ui: textInput(), defaultValue: 'star'}),
+    new Knob('inactive icon', {ui: textInput(), defaultValue: 'star_border'}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/labs/navigationbar/demo/stories.ts b/labs/navigationbar/demo/stories.ts
index 7c1f40210..b98e65d59 100644
--- a/labs/navigationbar/demo/stories.ts
+++ b/labs/navigationbar/demo/stories.ts
@@ -9,7 +9,7 @@ import '@material/web/labs/navigationbar/navigation-bar.js';
 import '@material/web/labs/navigationtab/navigation-tab.js';
 
 import {MaterialStoryInit} from './material-collection.js';
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 /** Knob types for nav bar stories. */
 export interface StoryKnobs {
@@ -27,48 +27,48 @@ const standard: MaterialStoryInit<StoryKnobs> = {
     :host {
       /* Material Symbols does not include filled star. */
       --md-icon-font: 'Material Icons';
-    }`,
+    }
+  `,
   render(knobs) {
     const {hideInactiveLabels, label, showBadge, badgeValue} = knobs;
-    return html`
-      <div style="width:400px">
-        <md-navigation-bar
-            activeIndex="1"
-            .hideInactiveLabels=${hideInactiveLabels}>
-          <md-navigation-tab
-              .label=${label}
-              .showBadge=${showBadge}
-              .badgeValue=${badgeValue}>
-            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
-          </md-navigation-tab>
+    return html` <div style="width:400px">
+      <md-navigation-bar
+        activeIndex="1"
+        .hideInactiveLabels=${hideInactiveLabels}>
+        <md-navigation-tab
+          .label=${label}
+          .showBadge=${showBadge}
+          .badgeValue=${badgeValue}>
+          <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+          <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
+        </md-navigation-tab>
 
-          <md-navigation-tab
-              .label=${label}
-              .showBadge=${showBadge}
-              .badgeValue=${badgeValue}>
-            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
-          </md-navigation-tab>
+        <md-navigation-tab
+          .label=${label}
+          .showBadge=${showBadge}
+          .badgeValue=${badgeValue}>
+          <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+          <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
+        </md-navigation-tab>
 
-          <md-navigation-tab
-              .label=${label}
-              .showBadge=${showBadge}
-              .badgeValue=${badgeValue}>
-            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
-          </md-navigation-tab>
+        <md-navigation-tab
+          .label=${label}
+          .showBadge=${showBadge}
+          .badgeValue=${badgeValue}>
+          <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+          <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
+        </md-navigation-tab>
 
-          <md-navigation-tab
-              .label=${label}
-              .showBadge=${showBadge}
-              .badgeValue=${badgeValue}>
-            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
-          </md-navigation-tab>
-        </md-navigation-bar>
-      </div>`;
-  }
+        <md-navigation-tab
+          .label=${label}
+          .showBadge=${showBadge}
+          .badgeValue=${badgeValue}>
+          <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+          <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
+        </md-navigation-tab>
+      </md-navigation-bar>
+    </div>`;
+  },
 };
 
 /** Nav Bar stories. */
diff --git a/labs/navigationbar/internal/constants.ts b/labs/navigationbar/internal/constants.ts
index 3e5c2aad8..5cdb24144 100644
--- a/labs/navigationbar/internal/constants.ts
+++ b/labs/navigationbar/internal/constants.ts
@@ -18,4 +18,4 @@ export interface MDCNavigationTabInteractionEventDetail {
  * NavigationTabInteractionEvent is the custom event for the interaction event.
  */
 export type NavigationTabInteractionEvent =
-    CustomEvent<MDCNavigationTabInteractionEventDetail>;
+  CustomEvent<MDCNavigationTabInteractionEventDetail>;
diff --git a/labs/navigationbar/internal/navigation-bar.ts b/labs/navigationbar/internal/navigation-bar.ts
index 6540877aa..d4794e0d2 100644
--- a/labs/navigationbar/internal/navigation-bar.ts
+++ b/labs/navigationbar/internal/navigation-bar.ts
@@ -38,26 +38,31 @@ export class NavigationBar extends LitElement implements NavigationBarState {
   protected override render() {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
-    return html`<div class="md3-navigation-bar"
-            role="tablist"
-            aria-label=${ariaLabel || nothing}
-            @keydown="${this.handleKeydown}"
-            @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
-            @navigation-tab-rendered=${this.handleNavigationTabConnected}
-          ><md-elevation></md-elevation
-          ><div class="md3-navigation-bar__tabs-slot-container"
-        ><slot></slot></div></div>`;
+    return html`<div
+      class="md3-navigation-bar"
+      role="tablist"
+      aria-label=${ariaLabel || nothing}
+      @keydown="${this.handleKeydown}"
+      @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
+      @navigation-tab-rendered=${this.handleNavigationTabConnected}
+      ><md-elevation></md-elevation
+      ><div class="md3-navigation-bar__tabs-slot-container"><slot></slot></div
+    ></div>`;
   }
 
   protected override updated(changedProperties: PropertyValues<NavigationBar>) {
     if (changedProperties.has('activeIndex')) {
       this.onActiveIndexChange(this.activeIndex);
-      this.dispatchEvent(new CustomEvent('navigation-bar-activated', {
-        detail:
-            {tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex},
-        bubbles: true,
-        composed: true
-      }));
+      this.dispatchEvent(
+        new CustomEvent('navigation-bar-activated', {
+          detail: {
+            tab: this.tabs[this.activeIndex],
+            activeIndex: this.activeIndex,
+          },
+          bubbles: true,
+          composed: true,
+        }),
+      );
     }
 
     if (changedProperties.has('hideInactiveLabels')) {
@@ -119,7 +124,7 @@ export class NavigationBar extends LitElement implements NavigationBarState {
     }
 
     const toNextTab =
-        (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);
+      (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);
     if (toNextTab && focusedTabIndex === maxIndex) {
       this.tabs[0].focus();
       return;
@@ -130,7 +135,7 @@ export class NavigationBar extends LitElement implements NavigationBarState {
     }
 
     const toPreviousTab =
-        (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);
+      (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);
     if (toPreviousTab && focusedTabIndex === 0) {
       this.tabs[maxIndex].focus();
       return;
diff --git a/labs/navigationbar/md-navigation-bar_test.ts b/labs/navigationbar/md-navigation-bar_test.ts
index 8f2862e22..e723b4e50 100644
--- a/labs/navigationbar/md-navigation-bar_test.ts
+++ b/labs/navigationbar/md-navigation-bar_test.ts
@@ -16,11 +16,9 @@ import {NavigationBarHarness} from './harness.js';
 import {MdNavigationBar} from './navigation-bar.js';
 
 @customElement('md-test-navigation-bar')
-class TestMdNavigationBar extends MdNavigationBar {
-}
+class TestMdNavigationBar extends MdNavigationBar {}
 @customElement('md-test-navigation-bar-tab')
-class TestMdNavigationTab extends MdNavigationTab {
-}
+class TestMdNavigationTab extends MdNavigationTab {}
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -43,29 +41,32 @@ const defaultNavBar = html`
 
 const navBarWithNavTabsElement = (propsInit: Partial<NavigationBarProps>) => {
   return html`
-      <md-test-navigation-bar
-          .activeIndex="${propsInit.activeIndex ?? 0}"
-          .hideInactiveLabels="${propsInit.hideInactiveLabels === true}"
-          aria-label="${ifDefined(propsInit.ariaLabel)}">
-        <md-test-navigation-bar-tab label="One"></md-test-navigation-bar-tab>
-        <md-test-navigation-bar-tab label="Two"></md-test-navigation-bar-tab>
-      </md-test-navigation-bar>
+    <md-test-navigation-bar
+      .activeIndex="${propsInit.activeIndex ?? 0}"
+      .hideInactiveLabels="${propsInit.hideInactiveLabels === true}"
+      aria-label="${ifDefined(propsInit.ariaLabel)}">
+      <md-test-navigation-bar-tab label="One"></md-test-navigation-bar-tab>
+      <md-test-navigation-bar-tab label="Two"></md-test-navigation-bar-tab>
+    </md-test-navigation-bar>
   `;
 };
 
 // The following is a Navbar with the tabs being out of sync with the bar.
-const navBarWithIncorrectTabsElement = html`
-    <md-test-navigation-bar activeIndex="0">
-      <md-test-navigation-bar-tab label="One" hideInactiveLabel></md-test-navigation-bar-tab>
-      <md-test-navigation-bar-tab label="One" active></md-test-navigation-bar-tab>
-    </md-test-navigation-bar>`;
+const navBarWithIncorrectTabsElement = html` <md-test-navigation-bar
+  activeIndex="0">
+  <md-test-navigation-bar-tab
+    label="One"
+    hideInactiveLabel></md-test-navigation-bar-tab>
+  <md-test-navigation-bar-tab label="One" active></md-test-navigation-bar-tab>
+</md-test-navigation-bar>`;
 
 describe('md-navigation-bar', () => {
   const env = new Environment();
 
   async function setupTest(template = defaultNavBar) {
-    const element =
-        env.render(template).querySelector('md-test-navigation-bar');
+    const element = env
+      .render(template)
+      .querySelector('md-test-navigation-bar');
     if (!element) {
       throw new Error('Could not query rendered <md-test-navigation-bar>.');
     }
@@ -80,8 +81,9 @@ describe('md-navigation-bar', () => {
   describe('basic', () => {
     it('initializes as a md-navigation-bar', async () => {
       const {harness} = await setupTest();
-      const navBarBase =
-          harness.element.shadowRoot!.querySelector('.md3-navigation-bar')!;
+      const navBarBase = harness.element.shadowRoot!.querySelector(
+        '.md3-navigation-bar',
+      )!;
       expect(harness.element).toBeInstanceOf(MdNavigationBar);
       expect(harness.element.activeIndex).toEqual(0);
       expect(harness.element.hideInactiveLabels).toBeFalse();
@@ -91,52 +93,62 @@ describe('md-navigation-bar', () => {
 
   describe('activeIndex', () => {
     it('on change emits activated event', async () => {
-      const {harness} =
-          await setupTest(navBarWithNavTabsElement({activeIndex: 1}));
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({activeIndex: 1}),
+      );
       const activatedHandler = jasmine.createSpy();
       harness.element.addEventListener(
-          'navigation-bar-activated', activatedHandler);
+        'navigation-bar-activated',
+        activatedHandler,
+      );
       harness.element.activeIndex = 0;
       await env.waitForStability();
       expect(activatedHandler).toHaveBeenCalled();
     });
 
     it('activated event detail contains the tab and activeIndex', async () => {
-      const {harness} =
-          await setupTest(navBarWithNavTabsElement({activeIndex: 1}));
-      const navigationBarActivatedSpy =
-          jasmine.createSpy('navigationBarActivated');
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({activeIndex: 1}),
+      );
+      const navigationBarActivatedSpy = jasmine.createSpy(
+        'navigationBarActivated',
+      );
       harness.element.addEventListener(
-          'navigation-bar-activated', navigationBarActivatedSpy);
+        'navigation-bar-activated',
+        navigationBarActivatedSpy,
+      );
 
       const tab = harness.element.tabs[0];
       harness.element.activeIndex = 0;
 
       await env.waitForStability();
-      expect(navigationBarActivatedSpy)
-          .toHaveBeenCalledWith(jasmine.any(CustomEvent));
-      expect(navigationBarActivatedSpy)
-          .toHaveBeenCalledWith(jasmine.objectContaining({
-            detail: jasmine.objectContaining({tab, activeIndex: 0}),
-          }));
+      expect(navigationBarActivatedSpy).toHaveBeenCalledWith(
+        jasmine.any(CustomEvent),
+      );
+      expect(navigationBarActivatedSpy).toHaveBeenCalledWith(
+        jasmine.objectContaining({
+          detail: jasmine.objectContaining({tab, activeIndex: 0}),
+        }),
+      );
     });
 
-    it('#handleNavigationTabInteraction () updates on navigation tab click',
-       async () => {
-         const {harness} =
-             await setupTest(navBarWithNavTabsElement({activeIndex: 1}));
-         const tab1Harness = new NavigationTabHarness(harness.element.tabs[0]);
-         const tab2Harness = new NavigationTabHarness(harness.element.tabs[1]);
+    it('#handleNavigationTabInteraction () updates on navigation tab click', async () => {
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({activeIndex: 1}),
+      );
+      const tab1Harness = new NavigationTabHarness(harness.element.tabs[0]);
+      const tab2Harness = new NavigationTabHarness(harness.element.tabs[1]);
 
-         await tab1Harness.clickWithMouse();
-         expect(harness.element.activeIndex).toEqual(0);
-         await tab2Harness.clickWithMouse();
-         expect(harness.element.activeIndex).toEqual(1);
-       });
+      await tab1Harness.clickWithMouse();
+      expect(harness.element.activeIndex).toEqual(0);
+      await tab2Harness.clickWithMouse();
+      expect(harness.element.activeIndex).toEqual(1);
+    });
 
     it('#onActiveIndexChange() sets tab at activeIndex to active', async () => {
-      const {harness} =
-          await setupTest(navBarWithNavTabsElement({activeIndex: 1}));
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({activeIndex: 1}),
+      );
       const tab = harness.element.tabs[0];
       expect(tab.active).toBeFalse();
       harness.element.activeIndex = 0;
@@ -145,67 +157,70 @@ describe('md-navigation-bar', () => {
       expect(tab.active).toBeTrue();
     });
 
-    it('#onActiveIndexChange() sets previously active tab to inactive',
-       async () => {
-         const {harness} =
-             await setupTest(navBarWithNavTabsElement({activeIndex: 1}));
-         const tab = harness.element.tabs[1];
-         expect(tab.active).toBeTrue();
-         harness.element.activeIndex = 0;
-         harness.element.requestUpdate();
-         await env.waitForStability();
-         expect(tab.active).toBeFalse();
-       });
+    it('#onActiveIndexChange() sets previously active tab to inactive', async () => {
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({activeIndex: 1}),
+      );
+      const tab = harness.element.tabs[1];
+      expect(tab.active).toBeTrue();
+      harness.element.activeIndex = 0;
+      harness.element.requestUpdate();
+      await env.waitForStability();
+      expect(tab.active).toBeFalse();
+    });
   });
 
   describe('hideInactiveLabels', () => {
-    it('#onHideInactiveLabelsChange() affects navigation tabs hideInactiveLabel state',
-       async () => {
-         const {harness} = await setupTest(
-             navBarWithNavTabsElement({hideInactiveLabels: true}));
-         const tab1 = harness.element.tabs[0];
-         const tab2 = harness.element.tabs[1];
-         expect(tab1.hideInactiveLabel).toBeTrue();
-         expect(tab2.hideInactiveLabel).toBeTrue();
-         harness.element.hideInactiveLabels = false;
-         harness.element.requestUpdate();
-         await env.waitForStability();
-         expect(tab1.hideInactiveLabel).toBeFalse();
-         expect(tab2.hideInactiveLabel).toBeFalse();
-       });
+    it('#onHideInactiveLabelsChange() affects navigation tabs hideInactiveLabel state', async () => {
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({hideInactiveLabels: true}),
+      );
+      const tab1 = harness.element.tabs[0];
+      const tab2 = harness.element.tabs[1];
+      expect(tab1.hideInactiveLabel).toBeTrue();
+      expect(tab2.hideInactiveLabel).toBeTrue();
+      harness.element.hideInactiveLabels = false;
+      harness.element.requestUpdate();
+      await env.waitForStability();
+      expect(tab1.hideInactiveLabel).toBeFalse();
+      expect(tab2.hideInactiveLabel).toBeFalse();
+    });
   });
 
   describe('aria-label', () => {
     it('sets the root aria-label property', async () => {
-      const {harness} =
-          await setupTest(navBarWithNavTabsElement({ariaLabel: 'foo'}));
-      const navBarBase =
-          harness.element.shadowRoot!.querySelector('.md3-navigation-bar')!;
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({ariaLabel: 'foo'}),
+      );
+      const navBarBase = harness.element.shadowRoot!.querySelector(
+        '.md3-navigation-bar',
+      )!;
       expect(navBarBase.getAttribute('aria-label')).toEqual('foo');
     });
   });
 
   describe('#onTabsChange()', () => {
-    it('syncs tabs\' hideInactiveLabel state with the navigation bar\'s ' +
-           'hideInactiveLabels state',
-       async () => {
-         const {harness} = await setupTest(navBarWithIncorrectTabsElement);
-         const tab1 = harness.element.tabs[0];
-         const tab2 = harness.element.tabs[1];
-         expect(harness.element.hideInactiveLabels).toBeFalse();
-         expect(tab1.hideInactiveLabel).toBeFalse();
-         expect(tab2.hideInactiveLabel).toBeFalse();
-       });
+    it(
+      "syncs tabs' hideInactiveLabel state with the navigation bar's " +
+        'hideInactiveLabels state',
+      async () => {
+        const {harness} = await setupTest(navBarWithIncorrectTabsElement);
+        const tab1 = harness.element.tabs[0];
+        const tab2 = harness.element.tabs[1];
+        expect(harness.element.hideInactiveLabels).toBeFalse();
+        expect(tab1.hideInactiveLabel).toBeFalse();
+        expect(tab2.hideInactiveLabel).toBeFalse();
+      },
+    );
 
-    it('syncs tabs\' active state with the navigation bar\'s activeIndex state',
-       async () => {
-         const {harness} = await setupTest(navBarWithIncorrectTabsElement);
-         const tab1 = harness.element.tabs[0];
-         const tab2 = harness.element.tabs[1];
-         expect(harness.element.activeIndex).toBe(0);
-         expect(tab1.active).toBeTrue();
-         expect(tab2.active).toBeFalse();
-       });
+    it("syncs tabs' active state with the navigation bar's activeIndex state", async () => {
+      const {harness} = await setupTest(navBarWithIncorrectTabsElement);
+      const tab1 = harness.element.tabs[0];
+      const tab2 = harness.element.tabs[1];
+      expect(harness.element.activeIndex).toBe(0);
+      expect(tab1.active).toBeTrue();
+      expect(tab2.active).toBeFalse();
+    });
   });
 
   describe('#handleKeydown', () => {
@@ -215,8 +230,9 @@ describe('md-navigation-bar', () => {
     let tab2: HTMLElement;
 
     beforeEach(async () => {
-      const {harness} =
-          await setupTest(navBarWithNavTabsElement({activeIndex: 0}));
+      const {harness} = await setupTest(
+        navBarWithNavTabsElement({activeIndex: 0}),
+      );
       element = harness.element;
       bar = harness.element.shadowRoot!.querySelector('.md3-navigation-bar')!;
       tab1 = harness.element.children[0] as HTMLElement;
@@ -224,10 +240,14 @@ describe('md-navigation-bar', () => {
     });
 
     it('(Enter) activates the focused tab', async () => {
-      const eventRight =
-          new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true});
-      const eventEnter =
-          new KeyboardEvent('keydown', {key: 'Enter', bubbles: true});
+      const eventRight = new KeyboardEvent('keydown', {
+        key: 'ArrowRight',
+        bubbles: true,
+      });
+      const eventEnter = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        bubbles: true,
+      });
       tab1.focus();
       expect(element.activeIndex).toBe(0);
       bar.dispatchEvent(eventRight);
@@ -238,10 +258,14 @@ describe('md-navigation-bar', () => {
     });
 
     it('(Spacebar) activates the focused tab', async () => {
-      const eventRight =
-          new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true});
-      const eventSpacebar =
-          new KeyboardEvent('keydown', {key: ' ', bubbles: true});
+      const eventRight = new KeyboardEvent('keydown', {
+        key: 'ArrowRight',
+        bubbles: true,
+      });
+      const eventSpacebar = new KeyboardEvent('keydown', {
+        key: ' ',
+        bubbles: true,
+      });
       tab1.focus();
       expect(element.activeIndex).toBe(0);
       bar.dispatchEvent(eventRight);
diff --git a/labs/navigationdrawer/internal/navigation-drawer-modal.ts b/labs/navigationdrawer/internal/navigation-drawer-modal.ts
index 6ef33178e..efb51a333 100644
--- a/labs/navigationdrawer/internal/navigation-drawer-modal.ts
+++ b/labs/navigationdrawer/internal/navigation-drawer-modal.ts
@@ -20,7 +20,7 @@ export class NavigationDrawerModal extends LitElement {
   }
 
   @property({type: Boolean}) opened = false;
-  @property() pivot: 'start'|'end' = 'end';
+  @property() pivot: 'start' | 'end' = 'end';
 
   protected override render() {
     const ariaExpanded = this.opened ? 'true' : 'false';
@@ -39,8 +39,8 @@ export class NavigationDrawerModal extends LitElement {
         aria-modal=${ariaModal || nothing}
         class="md3-navigation-drawer-modal ${this.getRenderClasses()}"
         @keydown="${this.handleKeyDown}"
-        role="dialog"><div class="md3-elevation-overlay"
-        ></div>
+        role="dialog"
+        ><div class="md3-elevation-overlay"></div>
         <div class="md3-navigation-drawer-modal__slot-content">
           <slot></slot>
         </div>
@@ -61,13 +61,18 @@ export class NavigationDrawerModal extends LitElement {
     });
   }
 
-  protected override updated(changedProperties:
-                                 PropertyValues<NavigationDrawerModal>) {
+  protected override updated(
+    changedProperties: PropertyValues<NavigationDrawerModal>,
+  ) {
     if (changedProperties.has('opened')) {
       setTimeout(() => {
-        this.dispatchEvent(new CustomEvent(
-            'navigation-drawer-changed',
-            {detail: {opened: this.opened}, bubbles: true, composed: true}));
+        this.dispatchEvent(
+          new CustomEvent('navigation-drawer-changed', {
+            detail: {opened: this.opened},
+            bubbles: true,
+            composed: true,
+          }),
+        );
       }, 250);
     }
   }
diff --git a/labs/navigationdrawer/internal/navigation-drawer.ts b/labs/navigationdrawer/internal/navigation-drawer.ts
index 1870bf77d..aa4d23a0d 100644
--- a/labs/navigationdrawer/internal/navigation-drawer.ts
+++ b/labs/navigationdrawer/internal/navigation-drawer.ts
@@ -22,7 +22,7 @@ export class NavigationDrawer extends LitElement {
   }
 
   @property({type: Boolean}) opened = false;
-  @property() pivot: 'start'|'end' = 'end';
+  @property() pivot: 'start' | 'end' = 'end';
 
   protected override render() {
     const ariaExpanded = this.opened ? 'true' : 'false';
@@ -52,13 +52,18 @@ export class NavigationDrawer extends LitElement {
     });
   }
 
-  protected override updated(changedProperties:
-                                 PropertyValues<NavigationDrawer>) {
+  protected override updated(
+    changedProperties: PropertyValues<NavigationDrawer>,
+  ) {
     if (changedProperties.has('opened')) {
       setTimeout(() => {
-        this.dispatchEvent(new CustomEvent(
-            'navigation-drawer-changed',
-            {detail: {opened: this.opened}, bubbles: true, composed: true}));
+        this.dispatchEvent(
+          new CustomEvent('navigation-drawer-changed', {
+            detail: {opened: this.opened},
+            bubbles: true,
+            composed: true,
+          }),
+        );
       }, 250);
     }
   }
diff --git a/labs/navigationtab/harness.ts b/labs/navigationtab/harness.ts
index dad5e8a31..1eea72ee8 100644
--- a/labs/navigationtab/harness.ts
+++ b/labs/navigationtab/harness.ts
@@ -14,7 +14,8 @@ import {NavigationTab} from './internal/navigation-tab.js';
 export class NavigationTabHarness extends Harness<NavigationTab> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.renderRoot.querySelector('.md3-navigation-tab') as
-        HTMLElement;
+    return this.element.renderRoot.querySelector(
+      '.md3-navigation-tab',
+    ) as HTMLElement;
   }
 }
diff --git a/labs/navigationtab/internal/navigation-tab.ts b/labs/navigationtab/internal/navigation-tab.ts
index 9743070b2..fffd36e3a 100644
--- a/labs/navigationtab/internal/navigation-tab.ts
+++ b/labs/navigationtab/internal/navigation-tab.ts
@@ -33,33 +33,32 @@ export class NavigationTab extends LitElement implements NavigationTabState {
   @property({attribute: 'badge-value'}) badgeValue = '';
   @property({type: Boolean, attribute: 'show-badge'}) showBadge = false;
 
-  @query('button') buttonElement!: HTMLElement|null;
+  @query('button') buttonElement!: HTMLElement | null;
 
   protected override render() {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
-    return html`
-      <button
-        class="md3-navigation-tab ${classMap(this.getRenderClasses())}"
-        role="tab"
-        aria-selected="${this.active}"
-        aria-label=${ariaLabel || nothing}
-        tabindex="${this.active ? 0 : -1}"
-        @click="${this.handleClick}"
-      >
-        <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"
-          ><span class="md3-navigation-tab__active-indicator"
-            ></span><span class="md3-navigation-tab__icon"
+    return html` <button
+      class="md3-navigation-tab ${classMap(this.getRenderClasses())}"
+      role="tab"
+      aria-selected="${this.active}"
+      aria-label=${ariaLabel || nothing}
+      tabindex="${this.active ? 0 : -1}"
+      @click="${this.handleClick}">
+      <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"
+        ><span class="md3-navigation-tab__active-indicator"></span
+        ><span class="md3-navigation-tab__icon"
           ><slot name="inactive-icon"></slot
         ></span>
         <span class="md3-navigation-tab__icon md3-navigation-tab__icon--active"
-          ><slot name="active-icon"></slot
-        ></span>${this.renderBadge()}</span
-        >${this.renderLabel()}
-      </button>`;
+          ><slot name="active-icon"></slot></span
+        >${this.renderBadge()}</span
+      >${this.renderLabel()}
+    </button>`;
   }
 
   private getRenderClasses() {
@@ -70,27 +69,30 @@ export class NavigationTab extends LitElement implements NavigationTabState {
   }
 
   private renderBadge() {
-    return this.showBadge ?
-        html`<md-badge .value="${this.badgeValue}"></md-badge>` :
-        nothing;
+    return this.showBadge
+      ? html`<md-badge .value="${this.badgeValue}"></md-badge>`
+      : nothing;
   }
 
   private renderLabel() {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     const ariaHidden = ariaLabel ? 'true' : 'false';
-    return !this.label ?
-        nothing :
-        html`
-        <span aria-hidden="${
-            ariaHidden}" class="md3-navigation-tab__label-text">${
-            this.label}</span>`;
+    return !this.label
+      ? nothing
+      : html` <span
+          aria-hidden="${ariaHidden}"
+          class="md3-navigation-tab__label-text"
+          >${this.label}</span
+        >`;
   }
 
   override firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
-    const event =
-        new Event('navigation-tab-rendered', {bubbles: true, composed: true});
+    const event = new Event('navigation-tab-rendered', {
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(event);
   }
 
@@ -110,8 +112,12 @@ export class NavigationTab extends LitElement implements NavigationTabState {
 
   handleClick() {
     // TODO(b/269772145): connect to ripple
-    this.dispatchEvent(new CustomEvent(
-        'navigation-tab-interaction',
-        {detail: {state: this}, bubbles: true, composed: true}));
+    this.dispatchEvent(
+      new CustomEvent('navigation-tab-interaction', {
+        detail: {state: this},
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
 }
diff --git a/labs/navigationtab/internal/state.ts b/labs/navigationtab/internal/state.ts
index da563d30a..46cbb7e25 100644
--- a/labs/navigationtab/internal/state.ts
+++ b/labs/navigationtab/internal/state.ts
@@ -22,5 +22,5 @@ export interface NavigationTabState {
    * TODO(b/229015424): Remove this when the jscompiler rename issue is
    * understood.
    */
-  buttonElement: HTMLElement|null;
+  buttonElement: HTMLElement | null;
 }
diff --git a/labs/navigationtab/md-navigation-tab_test.ts b/labs/navigationtab/md-navigation-tab_test.ts
index 98fe92f47..56228a39e 100644
--- a/labs/navigationtab/md-navigation-tab_test.ts
+++ b/labs/navigationtab/md-navigation-tab_test.ts
@@ -13,8 +13,7 @@ import {NavigationTabHarness} from './harness.js';
 import {MdNavigationTab} from './navigation-tab.js';
 
 @customElement('md-test-navigation-tab')
-class TestNavigationTab extends MdNavigationTab {
-}
+class TestNavigationTab extends MdNavigationTab {}
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,9 +26,9 @@ describe('mwc-navigation-tab', () => {
 
   async function setupTest() {
     // Variant type does not matter for shared tests
-    const element =
-        env.render(html`<md-test-navigation-tab></md-test-navigation-tab>`)
-            .querySelector('md-test-navigation-tab');
+    const element = env
+      .render(html`<md-test-navigation-tab></md-test-navigation-tab>`)
+      .querySelector('md-test-navigation-tab');
     if (!element) {
       throw new Error('Could not query rendered <md-test-navigation-tab>.');
     }
@@ -67,7 +66,9 @@ describe('mwc-navigation-tab', () => {
       const {harness} = await setupTest();
       const interactionHandler = jasmine.createSpy();
       harness.element.addEventListener(
-          'navigation-tab-interaction', interactionHandler);
+        'navigation-tab-interaction',
+        interactionHandler,
+      );
       await harness.clickWithMouse();
       expect(interactionHandler).toHaveBeenCalled();
     });
@@ -118,8 +119,9 @@ describe('mwc-navigation-tab', () => {
       harness.element.active = true;
       await env.waitForStability();
 
-      expect(navTab.classList.contains('md3-navigation-tab--active'))
-          .toBeTrue();
+      expect(
+        navTab.classList.contains('md3-navigation-tab--active'),
+      ).toBeTrue();
     });
   });
 
@@ -130,8 +132,8 @@ describe('mwc-navigation-tab', () => {
       await env.waitForStability();
 
       expect(
-          navTab.classList.contains('md3-navigation-tab--hide-inactive-label'))
-          .toBeTrue();
+        navTab.classList.contains('md3-navigation-tab--hide-inactive-label'),
+      ).toBeTrue();
     });
   });
 
@@ -142,7 +144,8 @@ describe('mwc-navigation-tab', () => {
       await env.waitForStability();
 
       const content = harness.element.shadowRoot!.querySelector(
-          '.md3-navigation-tab__label-text')!;
+        '.md3-navigation-tab__label-text',
+      )!;
       expect(content.textContent!.trim()).toEqual('foo');
     });
   });
@@ -191,32 +194,32 @@ describe('mwc-navigation-tab', () => {
   });
 
   describe('icons', () => {
-    it('nodes with `slot=active-icon` will serve as the active icon',
-       async () => {
-         const {harness} = await setupTest();
-         const icons = html`
-           <i slot="active-icon" class="material-icons">star</i>
-           <i slot="inactive-icon" class="material-icons">star_border</i>
-         `;
-         render(icons, harness.element);
+    it('nodes with `slot=active-icon` will serve as the active icon', async () => {
+      const {harness} = await setupTest();
+      const icons = html`
+        <i slot="active-icon" class="material-icons">star</i>
+        <i slot="inactive-icon" class="material-icons">star_border</i>
+      `;
+      render(icons, harness.element);
 
-         const icon = harness.element.querySelector<HTMLElement>(
-             '[slot="active-icon"]')!;
-         expect(icon.textContent!.trim()).toEqual('star');
-       });
+      const icon = harness.element.querySelector<HTMLElement>(
+        '[slot="active-icon"]',
+      )!;
+      expect(icon.textContent!.trim()).toEqual('star');
+    });
 
-    it('nodes with `slot=inactive-icon` will serve as the inactive icon',
-       async () => {
-         const {harness} = await setupTest();
-         const icons = html`
-           <i slot="active-icon" class="material-icons">star</i>
-           <i slot="inactive-icon" class="material-icons">star_border</i>
-         `;
-         render(icons, harness.element);
+    it('nodes with `slot=inactive-icon` will serve as the inactive icon', async () => {
+      const {harness} = await setupTest();
+      const icons = html`
+        <i slot="active-icon" class="material-icons">star</i>
+        <i slot="inactive-icon" class="material-icons">star_border</i>
+      `;
+      render(icons, harness.element);
 
-         const icon = harness.element.querySelector<HTMLElement>(
-             '[slot="inactive-icon"]')!;
-         expect(icon.textContent!.trim()).toEqual('star_border');
-       });
+      const icon = harness.element.querySelector<HTMLElement>(
+        '[slot="inactive-icon"]',
+      )!;
+      expect(icon.textContent!.trim()).toEqual('star_border');
+    });
   });
 });
diff --git a/labs/segmentedbutton/internal/segmented-button.ts b/labs/segmentedbutton/internal/segmented-button.ts
index c7ac1f484..681616937 100644
--- a/labs/segmentedbutton/internal/segmented-button.ts
+++ b/labs/segmentedbutton/internal/segmented-button.ts
@@ -43,8 +43,9 @@ export class SegmentedButton extends LitElement {
     this.hasIcon = this.iconElement.length > 0;
   }
 
-  private nextAnimationState(changedProps: PropertyValues<SegmentedButton>):
-      string {
+  private nextAnimationState(
+    changedProps: PropertyValues<SegmentedButton>,
+  ): string {
     const prevSelected = changedProps.get('selected');
     // Early exit for first update.
     if (prevSelected === undefined) return '';
@@ -61,8 +62,10 @@ export class SegmentedButton extends LitElement {
   }
 
   private handleClick() {
-    const event = new Event(
-        'segmented-button-interaction', {bubbles: true, composed: true});
+    const event = new Event('segmented-button-interaction', {
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(event);
   }
 
@@ -76,14 +79,14 @@ export class SegmentedButton extends LitElement {
         aria-pressed=${this.selected}
         ?disabled=${this.disabled}
         @click="${this.handleClick}"
-        class="md3-segmented-button ${classMap(this.getRenderClasses())}"
-      >
-        <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()}
-        ${this.renderLeading()}
-        ${this.renderLabel()}
+        class="md3-segmented-button ${classMap(this.getRenderClasses())}">
+        <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()} ${this.renderLeading()} ${this.renderLabel()}
         ${this.renderTouchTarget()}
       </button>
     `;
@@ -103,13 +106,14 @@ export class SegmentedButton extends LitElement {
     };
   }
 
-  protected renderOutline(): TemplateResult|typeof nothing {
+  protected renderOutline(): TemplateResult | typeof nothing {
     return nothing;
   }
 
   private renderLeading() {
-    return this.label === '' ? this.renderLeadingWithoutLabel() :
-                               this.renderLeadingWithLabel();
+    return this.label === ''
+      ? this.renderLeadingWithoutLabel()
+      : this.renderLeadingWithLabel();
   }
 
   private renderLeadingWithoutLabel() {
@@ -117,7 +121,10 @@ export class SegmentedButton extends LitElement {
       <span class="md3-segmented-button__leading" aria-hidden="true">
         <span class="md3-segmented-button__graphic">
           <svg class="md3-segmented-button__checkmark" viewBox="0 0 24 24">
-            <path class="md3-segmented-button__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+            <path
+              class="md3-segmented-button__checkmark-path"
+              fill="none"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
           </svg>
         </span>
         <span class="md3-segmented-button__icon" aria-hidden="true">
@@ -132,7 +139,10 @@ export class SegmentedButton extends LitElement {
       <span class="md3-segmented-button__leading" aria-hidden="true">
         <span class="md3-segmented-button__graphic">
           <svg class="md3-segmented-button__checkmark" viewBox="0 0 24 24">
-            <path class="md3-segmented-button__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+            <path
+              class="md3-segmented-button__checkmark-path"
+              fill="none"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
           </svg>
           <span class="md3-segmented-button__icon" aria-hidden="true">
             <slot name="icon"></slot>
diff --git a/labs/segmentedbuttonset/demo/demo.ts b/labs/segmentedbuttonset/demo/demo.ts
index 9dc6d33c6..ef2ce361a 100644
--- a/labs/segmentedbuttonset/demo/demo.ts
+++ b/labs/segmentedbuttonset/demo/demo.ts
@@ -4,15 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
 const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
-    'Segmented Button Set', []);
+  'Segmented Button Set',
+  [],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/labs/segmentedbuttonset/demo/stories.ts b/labs/segmentedbuttonset/demo/stories.ts
index c4d38cc41..c5d95b39a 100644
--- a/labs/segmentedbuttonset/demo/stories.ts
+++ b/labs/segmentedbuttonset/demo/stories.ts
@@ -17,159 +17,156 @@ export interface StoryKnobs {}
 const standard: MaterialStoryInit<StoryKnobs> = {
   name: '<md-outlined-segmented-button-set> labels and icons',
   render() {
-    return html`
-      <div style="width:325px">
-        <md-outlined-segmented-button-set>
-          <md-outlined-segmented-button label="Enabled">
-            <md-icon slot="icon">grade</md-icon>
-          </md-outlined-segmented-button>
+    return html` <div style="width:325px">
+      <md-outlined-segmented-button-set>
+        <md-outlined-segmented-button label="Enabled">
+          <md-icon slot="icon">grade</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button selected label="Selected">
-            <md-icon slot="icon">favorite</md-icon>
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button selected label="Selected">
+          <md-icon slot="icon">favorite</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button label="Enabled">
-            <md-icon slot="icon">change_history</md-icon>
-          </md-outlined-segmented-button>
-
-        </md-outlined-segmented-button-set>
-      </div>`;
-  }
+        <md-outlined-segmented-button label="Enabled">
+          <md-icon slot="icon">change_history</md-icon>
+        </md-outlined-segmented-button>
+      </md-outlined-segmented-button-set>
+    </div>`;
+  },
 };
 
 const withoutIcons: MaterialStoryInit<StoryKnobs> = {
   name: '<md-outlined-segmented-button-set> without icons',
   render() {
-    return html`
-      <div style="width:325px">
-        <md-outlined-segmented-button-set>
-          <md-outlined-segmented-button selected label="Selected">
-          </md-outlined-segmented-button>
-          
-          <md-outlined-segmented-button label="Enabled">
-          </md-outlined-segmented-button>
-          
-          <md-outlined-segmented-button label="Enabled">
-          </md-outlined-segmented-button>
-        </md-outlined-segmented-button-set>
-      </div>`;
-  }
+    return html` <div style="width:325px">
+      <md-outlined-segmented-button-set>
+        <md-outlined-segmented-button selected label="Selected">
+        </md-outlined-segmented-button>
+
+        <md-outlined-segmented-button label="Enabled">
+        </md-outlined-segmented-button>
+
+        <md-outlined-segmented-button label="Enabled">
+        </md-outlined-segmented-button>
+      </md-outlined-segmented-button-set>
+    </div>`;
+  },
 };
 
 const multiselect: MaterialStoryInit<StoryKnobs> = {
   name: '<md-outlined-segmented-button-set> Multiselect',
   render() {
-    return html`
-      <div style="width:325px">
-        <md-outlined-segmented-button-set multiselect>
-          <md-outlined-segmented-button selected label="$">
-          </md-outlined-segmented-button>
+    return html` <div style="width:325px">
+      <md-outlined-segmented-button-set multiselect>
+        <md-outlined-segmented-button selected label="$">
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button selected label="$$">
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button selected label="$$">
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button label="$$$">
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button label="$$$">
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button label="$$$">
-          </md-outlined-segmented-button>
-        </md-outlined-segmented-button-set>
-      </div>`;
-  }
+        <md-outlined-segmented-button label="$$$">
+        </md-outlined-segmented-button>
+      </md-outlined-segmented-button-set>
+    </div>`;
+  },
 };
 
 const transportationModes: MaterialStoryInit<StoryKnobs> = {
   name: 'Transportaton modes',
   render() {
-    return html`
-      <div style="width:202px">
-        <md-outlined-segmented-button-set>
-          <md-outlined-segmented-button>
-            <md-icon slot="icon">directions_walk</md-icon>
-          </md-outlined-segmented-button>
+    return html` <div style="width:202px">
+      <md-outlined-segmented-button-set>
+        <md-outlined-segmented-button>
+          <md-icon slot="icon">directions_walk</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button>
-            <md-icon slot="icon">directions_subway</md-icon>
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button>
+          <md-icon slot="icon">directions_subway</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button selected>
-            <md-icon slot="icon">directions_car</md-icon>
-          </md-outlined-segmented-button>
-        </md-outlined-segmented-button-set>
-      </div>`;
-  }
+        <md-outlined-segmented-button selected>
+          <md-icon slot="icon">directions_car</md-icon>
+        </md-outlined-segmented-button>
+      </md-outlined-segmented-button-set>
+    </div>`;
+  },
 };
 
 const iconOnly: MaterialStoryInit<StoryKnobs> = {
   name: 'Icon only (no checkmark)',
   render() {
-    return html`
-      <div style="width:202px;">
-        <md-outlined-segmented-button-set>
-          <md-outlined-segmented-button noCheckmark selected>
-            <md-icon slot="icon">format_align_left</md-icon>
-          </md-outlined-segmented-button>
+    return html` <div style="width:202px;">
+      <md-outlined-segmented-button-set>
+        <md-outlined-segmented-button noCheckmark selected>
+          <md-icon slot="icon">format_align_left</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button noCheckmark>
-            <md-icon slot="icon">format_align_center</md-icon>
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button noCheckmark>
+          <md-icon slot="icon">format_align_center</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button noCheckmark>
-            <md-icon slot="icon">format_align_right</md-icon>
-          </md-outlined-segmented-button>
-        </md-outlined-segmented-button-set>
-      </div>`;
-  }
+        <md-outlined-segmented-button noCheckmark>
+          <md-icon slot="icon">format_align_right</md-icon>
+        </md-outlined-segmented-button>
+      </md-outlined-segmented-button-set>
+    </div>`;
+  },
 };
 
 const singleSelect: MaterialStoryInit<StoryKnobs> = {
   name: 'Single select',
   render() {
-    return html`
-      <div style="width:400px">
-        <md-outlined-segmented-button-set>
-          <md-outlined-segmented-button label="Label">
-            <md-icon slot="icon">star</md-icon>
-          </md-outlined-segmented-button>
+    return html` <div style="width:400px">
+      <md-outlined-segmented-button-set>
+        <md-outlined-segmented-button label="Label">
+          <md-icon slot="icon">star</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button disabled label="Label">
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button disabled label="Label">
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button>
-            <md-icon slot="icon">directions_bus</md-icon>
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button>
+          <md-icon slot="icon">directions_bus</md-icon>
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button label="Label">
-          </md-outlined-segmented-button>
-        </md-outlined-segmented-button-set>
-      </div>`;
-  }
+        <md-outlined-segmented-button label="Label">
+        </md-outlined-segmented-button>
+      </md-outlined-segmented-button-set>
+    </div>`;
+  },
 };
 
 const multiSelect2: MaterialStoryInit<StoryKnobs> = {
   name: 'Multi select',
   render() {
-    return html`
-      <div style="width:400px">
-        <md-outlined-segmented-button-set multiselect>
-          <md-outlined-segmented-button label="Label">
-          </md-outlined-segmented-button>
+    return html` <div style="width:400px">
+      <md-outlined-segmented-button-set multiselect>
+        <md-outlined-segmented-button label="Label">
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button disabled selected label="Label">
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button disabled selected label="Label">
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button label="Label">
-          </md-outlined-segmented-button>
+        <md-outlined-segmented-button label="Label">
+        </md-outlined-segmented-button>
 
-          <md-outlined-segmented-button label="Label">
-          </md-outlined-segmented-button>
-        </md-outlined-segmented-button-set>
-      </div>`;
-  }
+        <md-outlined-segmented-button label="Label">
+        </md-outlined-segmented-button>
+      </md-outlined-segmented-button-set>
+    </div>`;
+  },
 };
 
 /** Segmented Button Set stories. */
 export const stories = [
-  standard, withoutIcons, multiselect, transportationModes, iconOnly,
-  singleSelect, multiSelect2
+  standard,
+  withoutIcons,
+  multiselect,
+  transportationModes,
+  iconOnly,
+  singleSelect,
+  multiSelect2,
 ];
diff --git a/labs/segmentedbuttonset/internal/segmented-button-set.ts b/labs/segmentedbuttonset/internal/segmented-button-set.ts
index c17646bed..617da840f 100644
--- a/labs/segmentedbuttonset/internal/segmented-button-set.ts
+++ b/labs/segmentedbuttonset/internal/segmented-button-set.ts
@@ -79,29 +79,31 @@ export class SegmentedButtonSet extends LitElement {
   }
 
   private emitSelectionEvent(index: number) {
-    this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {
-      detail: {
-        button: this.buttons[index],
-        selected: this.buttons[index].selected,
-        index,
-      },
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent('segmented-button-set-selection', {
+        detail: {
+          button: this.buttons[index],
+          selected: this.buttons[index].selected,
+          index,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
 
   protected override render() {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`
-     <span
-       role="group"
-       @segmented-button-interaction="${this.handleSegmentedButtonInteraction}"
-       aria-label=${ariaLabel || nothing}
-       class="md3-segmented-button-set">
-       <slot></slot>
-     </span>
-     `;
+      <span
+        role="group"
+        @segmented-button-interaction="${this.handleSegmentedButtonInteraction}"
+        aria-label=${ariaLabel || nothing}
+        class="md3-segmented-button-set">
+        <slot></slot>
+      </span>
+    `;
   }
 
   protected getRenderClasses() {
diff --git a/list/demo/demo.ts b/list/demo/demo.ts
index c2d85efff..411b2cb57 100644
--- a/list/demo/demo.ts
+++ b/list/demo/demo.ts
@@ -4,22 +4,29 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('List', [
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-      new Knob('overline', {ui: textInput()}),
-      new Knob('trailingSupportingText', {ui: textInput()}),
-      new Knob('leadingIcon', {ui: boolInput()}),
-      new Knob('trailingIcon', {ui: boolInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'List',
+  [
+    new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+    new Knob('overline', {ui: textInput()}),
+    new Knob('trailingSupportingText', {ui: textInput()}),
+    new Knob('leadingIcon', {ui: boolInput()}),
+    new Knob('trailingIcon', {ui: boolInput()}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/list/demo/stories.ts b/list/demo/stories.ts
index 694d13c1b..ef3a7cdbd 100644
--- a/list/demo/stories.ts
+++ b/list/demo/stories.ts
@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/list/list-item.js';
 import '@material/web/divider/divider.js';
-import '@material/web/list/list.js';
 import '@material/web/icon/icon.js';
+import '@material/web/list/list.js';
+import '@material/web/list/list-item.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html, nothing} from 'lit';
@@ -39,8 +39,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
     return html`
       <md-list aria-label="Static example">
         <md-list-item ?disabled=${knobs.disabled}>
-          Single line item
-          ${getKnobContent(knobs)}
+          Single line item ${getKnobContent(knobs)}
         </md-list-item>
 
         <md-list-item ?disabled=${knobs.disabled}>
@@ -58,7 +57,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
           ${getKnobContent(knobs, /* threeLines */ true)}
         </md-list-item>
       </md-list>
-  `;
+    `;
   },
 };
 
@@ -69,24 +68,22 @@ const interactive: MaterialStoryInit<StoryKnobs> = {
     const knobsNoTrailing = {...knobs, trailingIcon: false};
     return html`
       <md-list aria-label="Interactive example">
-        <md-list-item ?disabled=${knobs.disabled}
+        <md-list-item
+          ?disabled=${knobs.disabled}
           type="link"
           href="https://google.com"
-          target="_blank"
-        >
+          target="_blank">
           Link item
           <md-icon slot="end">link</md-icon>
           ${getKnobContent(knobsNoTrailing)}
         </md-list-item>
 
         <md-list-item type="button" ?disabled=${knobs.disabled}>
-          Button item
-          ${getKnobContent(knobs)}
+          Button item ${getKnobContent(knobs)}
         </md-list-item>
 
         <md-list-item ?disabled=${knobs.disabled}>
-          Non-interactive item
-          ${getKnobContent(knobs)}
+          Non-interactive item ${getKnobContent(knobs)}
         </md-list-item>
       </md-list>
     `;
@@ -94,26 +91,27 @@ const interactive: MaterialStoryInit<StoryKnobs> = {
 };
 
 function getKnobContent(knobs: StoryKnobs, threeLines = false) {
-  const overline = knobs.overline ?
-      html`<div slot="overline">${knobs.overline}</div>` :
-      nothing;
+  const overline = knobs.overline
+    ? html`<div slot="overline">${knobs.overline}</div>`
+    : nothing;
 
   const classes = {
     'align-start': threeLines,
   };
 
-  const trailingText = knobs.trailingSupportingText ?
-      html`<div class=${classMap(classes)} slot="trailing-supporting-text">${
-          knobs.trailingSupportingText}</div>` :
-      nothing;
+  const trailingText = knobs.trailingSupportingText
+    ? html`<div class=${classMap(classes)} slot="trailing-supporting-text"
+        >${knobs.trailingSupportingText}</div
+      >`
+    : nothing;
 
-  const leadingIcon = knobs.leadingIcon ?
-      html`<md-icon class=${classMap(classes)} slot="start">event</md-icon>` :
-      nothing;
+  const leadingIcon = knobs.leadingIcon
+    ? html`<md-icon class=${classMap(classes)} slot="start">event</md-icon>`
+    : nothing;
 
-  const trailingIcon = knobs.trailingIcon ?
-      html`<md-icon class=${classMap(classes)} slot="end">star</md-icon>` :
-      nothing;
+  const trailingIcon = knobs.trailingIcon
+    ? html`<md-icon class=${classMap(classes)} slot="end">star</md-icon>`
+    : nothing;
 
   return [overline, trailingText, leadingIcon, trailingIcon];
 }
diff --git a/list/harness.ts b/list/harness.ts
index 8bc500bd7..c180d8479 100644
--- a/list/harness.ts
+++ b/list/harness.ts
@@ -24,7 +24,7 @@ const NAVIGABLE_KEYS = {
  * MdList and should be dispatched by yourself.
  */
 export type HandledListKeys =
-    typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];
+  (typeof NAVIGABLE_KEYS)[keyof typeof NAVIGABLE_KEYS];
 
 /**
  * Test harness for list.
@@ -41,7 +41,8 @@ export class ListHarness extends Harness<List> {
   /** @return List item harnesses. */
   getItems() {
     return this.element.items.map(
-        (item) => new ListItemHarness(item as ListItemEl));
+      (item) => new ListItemHarness(item as ListItemEl),
+    );
   }
 
   /**
diff --git a/list/internal/list-controller.ts b/list/internal/list-controller.ts
index 0842ea57d..fe1dc8265 100644
--- a/list/internal/list-controller.ts
+++ b/list/internal/list-controller.ts
@@ -4,7 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {activateFirstItem, activateLastItem, activateNextItem, activatePreviousItem, getActiveItem, getFirstActivatableItem, ListItem} from './list-navigation-helpers.js';
+import {
+  activateFirstItem,
+  activateLastItem,
+  activateNextItem,
+  activatePreviousItem,
+  getActiveItem,
+  getFirstActivatableItem,
+  ListItem,
+} from './list-navigation-helpers.js';
 
 // TODO: move this file to List and make List use this
 
@@ -25,7 +33,7 @@ export const NavigableKeys = {
 /**
  * Default set of navigable keys.
  */
-export type NavigableKeys = typeof NavigableKeys[keyof typeof NavigableKeys];
+export type NavigableKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];
 
 /**
  * The configuration object to customize the behavior of the List Controller
@@ -148,10 +156,12 @@ export class ListController<Item extends ListItem> {
     event.preventDefault();
 
     const isRtl = this.isRtl();
-    const inlinePrevious =
-        isRtl ? NavigableKeys.ArrowRight : NavigableKeys.ArrowLeft;
-    const inlineNext =
-        isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;
+    const inlinePrevious = isRtl
+      ? NavigableKeys.ArrowRight
+      : NavigableKeys.ArrowLeft;
+    const inlineNext = isRtl
+      ? NavigableKeys.ArrowLeft
+      : NavigableKeys.ArrowRight;
 
     switch (key) {
       // Activate the next item
@@ -187,7 +197,7 @@ export class ListController<Item extends ListItem> {
    *
    * @return The activated list item or `null` if there are no items.
    */
-  activateNextItem(): Item|null {
+  activateNextItem(): Item | null {
     const items = this.items;
     const activeItemRecord = getActiveItem(items, this.isActivatable);
     if (activeItemRecord) {
@@ -202,7 +212,7 @@ export class ListController<Item extends ListItem> {
    *
    * @return The activated list item or `null` if there are no items.
    */
-  activatePreviousItem(): Item|null {
+  activatePreviousItem(): Item | null {
     const items = this.items;
     const activeItemRecord = getActiveItem(items, this.isActivatable);
     if (activeItemRecord) {
@@ -258,8 +268,10 @@ export class ListController<Item extends ListItem> {
       return;
     }
 
-    const firstActivatableItem =
-        getFirstActivatableItem(items, this.isActivatable);
+    const firstActivatableItem = getFirstActivatableItem(
+      items,
+      this.isActivatable,
+    );
 
     if (!firstActivatableItem) {
       return;
diff --git a/list/internal/list-navigation-helpers.ts b/list/internal/list-navigation-helpers.ts
index deccb516e..bed2a5532 100644
--- a/list/internal/list-navigation-helpers.ts
+++ b/list/internal/list-navigation-helpers.ts
@@ -26,7 +26,9 @@ export interface ItemRecord<Item extends ListItem> {
  *     Defaults to non-disabled items.
  */
 export function activateFirstItem<Item extends ListItem>(
-    items: Item[], isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  isActivatable = isItemNotDisabled<Item>,
+) {
   // NOTE: These selector functions are static and not on the instance such
   // that multiple operations can be chained and we do not have to re-query
   // the DOM
@@ -48,7 +50,9 @@ export function activateFirstItem<Item extends ListItem>(
  * @nocollapse
  */
 export function activateLastItem<Item extends ListItem>(
-    items: Item[], isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  isActivatable = isItemNotDisabled<Item>,
+) {
   const lastItem = getLastActivatableItem(items, isActivatable);
   if (lastItem) {
     lastItem.tabIndex = 0;
@@ -69,7 +73,9 @@ export function activateLastItem<Item extends ListItem>(
  * @nocollapse
  */
 export function deactivateActiveItem<Item extends ListItem>(
-    items: Item[], isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  isActivatable = isItemNotDisabled<Item>,
+) {
   const activeItem = getActiveItem(items, isActivatable);
   if (activeItem) {
     activeItem.item.tabIndex = -1;
@@ -88,7 +94,9 @@ export function deactivateActiveItem<Item extends ListItem>(
  * @nocollapse
  */
 export function getActiveItem<Item extends ListItem>(
-    items: Item[], isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  isActivatable = isItemNotDisabled<Item>,
+) {
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     if (item.tabIndex === 0 && isActivatable(item)) {
@@ -112,7 +120,9 @@ export function getActiveItem<Item extends ListItem>(
  * @nocollapse
  */
 export function getFirstActivatableItem<Item extends ListItem>(
-    items: Item[], isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  isActivatable = isItemNotDisabled<Item>,
+) {
   for (const item of items) {
     if (isActivatable(item)) {
       return item;
@@ -132,7 +142,9 @@ export function getFirstActivatableItem<Item extends ListItem>(
  * @nocollapse
  */
 export function getLastActivatableItem<Item extends ListItem>(
-    items: Item[], isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  isActivatable = isItemNotDisabled<Item>,
+) {
   for (let i = items.length - 1; i >= 0; i--) {
     const item = items[i];
     if (isActivatable(item)) {
@@ -153,7 +165,10 @@ export function getLastActivatableItem<Item extends ListItem>(
  * @return The next activatable item or `null` if none are activatable.
  */
 export function getNextItem<Item extends ListItem>(
-    items: Item[], index: number, isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  index: number,
+  isActivatable = isItemNotDisabled<Item>,
+) {
   for (let i = 1; i < items.length; i++) {
     const nextIndex = (i + index) % items.length;
     const item = items[nextIndex];
@@ -175,7 +190,10 @@ export function getNextItem<Item extends ListItem>(
  * @return The previous activatable item or `null` if none are activatable.
  */
 export function getPrevItem<Item extends ListItem>(
-    items: Item[], index: number, isActivatable = isItemNotDisabled<Item>) {
+  items: Item[],
+  index: number,
+  isActivatable = isItemNotDisabled<Item>,
+) {
   for (let i = 1; i < items.length; i++) {
     const prevIndex = (index - i + items.length) % items.length;
     const item = items[prevIndex];
@@ -193,8 +211,10 @@ export function getPrevItem<Item extends ListItem>(
  * activates the first item.
  */
 export function activateNextItem<Item extends ListItem>(
-    items: Item[], activeItemRecord: null|ItemRecord<Item>,
-    isActivatable = isItemNotDisabled<Item>): Item|null {
+  items: Item[],
+  activeItemRecord: null | ItemRecord<Item>,
+  isActivatable = isItemNotDisabled<Item>,
+): Item | null {
   if (activeItemRecord) {
     const next = getNextItem(items, activeItemRecord.index, isActivatable);
 
@@ -214,8 +234,10 @@ export function activateNextItem<Item extends ListItem>(
  * activated, activates the last item.
  */
 export function activatePreviousItem<Item extends ListItem>(
-    items: Item[], activeItemRecord: null|ItemRecord<Item>,
-    isActivatable = isItemNotDisabled<Item>): Item|null {
+  items: Item[],
+  activeItemRecord: null | ItemRecord<Item>,
+  isActivatable = isItemNotDisabled<Item>,
+): Item | null {
   if (activeItemRecord) {
     const prev = getPrevItem(items, activeItemRecord.index, isActivatable);
     if (prev) {
@@ -240,8 +262,9 @@ export function createDeactivateItemsEvent() {
  * The type of the event that requests the parent md-list to deactivate all
  * other items.
  */
-export type DeactivateItemsEvent =
-    ReturnType<typeof createDeactivateItemsEvent>;
+export type DeactivateItemsEvent = ReturnType<
+  typeof createDeactivateItemsEvent
+>;
 
 /**
  * Creates an event that requests the menu to set `tabindex=0` on the item and
@@ -258,8 +281,9 @@ export function createRequestActivationEvent() {
 /**
  * The type of the event that requests the list activates and focuses the item.
  */
-export type RequestActivationEvent =
-    ReturnType<typeof createRequestActivationEvent>;
+export type RequestActivationEvent = ReturnType<
+  typeof createRequestActivationEvent
+>;
 
 /**
  * The default `isActivatable` function, which checks if an item is not
diff --git a/list/internal/list.ts b/list/internal/list.ts
index 137e2e1ef..06338d105 100644
--- a/list/internal/list.ts
+++ b/list/internal/list.ts
@@ -7,7 +7,10 @@
 import {html, isServer, LitElement} from 'lit';
 import {queryAssignedElements} from 'lit/decorators.js';
 
-import {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';
+import {
+  polyfillElementInternalsAria,
+  setupHostAria,
+} from '../../internal/aria/aria.js';
 
 import {ListController, NavigableKeys} from './list-controller.js';
 import {ListItem as SharedListItem} from './list-navigation-helpers.js';
@@ -15,7 +18,7 @@ import {ListItem as SharedListItem} from './list-navigation-helpers.js';
 const NAVIGABLE_KEY_SET = new Set<string>(Object.values(NavigableKeys));
 
 interface ListItem extends SharedListItem {
-  type: 'text'|'button'|'link';
+  type: 'text' | 'button' | 'link';
 }
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
@@ -33,7 +36,7 @@ export class List extends LitElement {
    * children / directly slotted elements.
    */
   @queryAssignedElements({flatten: true})
-  protected slotItems!: Array<ListItem|HTMLElement&{item?: ListItem}>;
+  protected slotItems!: Array<ListItem | (HTMLElement & {item?: ListItem})>;
 
   /** @export */
   get items() {
@@ -42,23 +45,24 @@ export class List extends LitElement {
 
   private readonly listController = new ListController<ListItem>({
     isItem: (item: HTMLElement): item is ListItem =>
-        item.hasAttribute('md-list-item'),
+      item.hasAttribute('md-list-item'),
     getPossibleItems: () => this.slotItems,
     isRtl: () => getComputedStyle(this).direction === 'rtl',
-    deactivateItem:
-        (item) => {
-          item.tabIndex = -1;
-        },
-    activateItem:
-        (item) => {
-          item.tabIndex = 0;
-        },
+    deactivateItem: (item) => {
+      item.tabIndex = -1;
+    },
+    activateItem: (item) => {
+      item.tabIndex = 0;
+    },
     isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),
     isActivatable: (item) => !item.disabled && item.type !== 'text',
   });
 
   private readonly internals = polyfillElementInternalsAria(
-      this, (this as HTMLElement /* needed for closure */).attachInternals());
+    this,
+    // Cast needed for closure
+    (this as HTMLElement).attachInternals(),
+  );
 
   constructor() {
     super();
@@ -71,9 +75,9 @@ export class List extends LitElement {
   protected override render() {
     return html`
       <slot
-          @deactivate-items=${this.listController.onDeactivateItems}
-          @request-activation=${this.listController.onRequestActivation}
-          @slotchange=${this.listController.onSlotchange}>
+        @deactivate-items=${this.listController.onDeactivateItems}
+        @request-activation=${this.listController.onRequestActivation}
+        @slotchange=${this.listController.onSlotchange}>
       </slot>
     `;
   }
@@ -84,7 +88,7 @@ export class List extends LitElement {
    *
    * @return The activated list item or `null` if there are no items.
    */
-  activateNextItem(): ListItem|null {
+  activateNextItem(): ListItem | null {
     return this.listController.activateNextItem();
   }
 
@@ -94,7 +98,7 @@ export class List extends LitElement {
    *
    * @return The activated list item or `null` if there are no items.
    */
-  activatePreviousItem(): ListItem|null {
+  activatePreviousItem(): ListItem | null {
     return this.listController.activatePreviousItem();
   }
 }
diff --git a/list/internal/listitem/harness.ts b/list/internal/listitem/harness.ts
index cbb4e1758..5385c2db1 100644
--- a/list/internal/listitem/harness.ts
+++ b/list/internal/listitem/harness.ts
@@ -14,13 +14,15 @@ import {ListItem} from '../list-navigation-helpers.js';
  * Keys that are handled by MdList. Keys not included in this are not handled by
  * MdList and should be dispatched by yourself.
  */
-export type HandledListKeys = typeof NavigableKeys[keyof typeof NavigableKeys];
+export type HandledListKeys =
+  (typeof NavigableKeys)[keyof typeof NavigableKeys];
 
 /**
  * Test harness for list item.
  */
-export class ListItemHarness<T extends LitElement = ListItem &
-                                 LitElement> extends Harness<T> {
+export class ListItemHarness<
+  T extends LitElement = ListItem & LitElement,
+> extends Harness<T> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
     return this.element.renderRoot.querySelector('.list-item') as HTMLElement;
diff --git a/list/internal/listitem/list-item.ts b/list/internal/listitem/list-item.ts
index 55ac40043..34f154d36 100644
--- a/list/internal/listitem/list-item.ts
+++ b/list/internal/listitem/list-item.ts
@@ -4,23 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../../ripple/ripple.js';
 import '../../../focus/md-focus-ring.js';
 import '../../../labs/item/item.js';
+import '../../../ripple/ripple.js';
 
 import {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
-import {html as staticHtml, literal, StaticValue} from 'lit/static-html.js';
+import {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';
-import {createRequestActivationEvent, ListItem} from '../list-navigation-helpers.js';
+import {
+  createRequestActivationEvent,
+  ListItem,
+} from '../list-navigation-helpers.js';
 
 /**
  * Supported behaviors for a list item.
  */
-export type ListItemType = 'text'|'button'|'link';
+export type ListItemType = 'text' | 'button' | 'link';
 
 /**
  * @fires request-activation
@@ -33,7 +36,7 @@ export class ListItemEl extends LitElement implements ListItem {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
   };
 
   /**
@@ -62,9 +65,9 @@ export class ListItemEl extends LitElement implements ListItem {
    * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
    * set.
    */
-  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
+  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
-  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;
+  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;
 
   private get isDisabled() {
     return this.disabled && this.type !== 'link';
@@ -82,8 +85,7 @@ export class ListItemEl extends LitElement implements ListItem {
     return this.renderListItem(html`
       <md-item>
         <div slot="container">
-          ${this.renderRipple()}
-          ${this.renderFocusRing()}
+          ${this.renderRipple()} ${this.renderFocusRing()}
         </div>
         <slot name="start" slot="start"></slot>
         <slot name="end" slot="end"></slot>
@@ -138,32 +140,30 @@ export class ListItemEl extends LitElement implements ListItem {
   /**
    * Handles rendering of the ripple element.
    */
-  protected renderRipple(): TemplateResult|typeof nothing {
+  protected renderRipple(): TemplateResult | typeof nothing {
     if (this.type === 'text') {
       return nothing;
     }
 
-    return html`
-      <md-ripple
-          part="ripple"
-          for="item"
-          ?disabled=${this.isDisabled}></md-ripple>`;
+    return html` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.isDisabled}></md-ripple>`;
   }
 
   /**
    * Handles rendering of the focus ring.
    */
-  protected renderFocusRing(): TemplateResult|typeof nothing {
+  protected renderFocusRing(): TemplateResult | typeof nothing {
     if (this.type === 'text') {
       return nothing;
     }
 
-    return html`
-      <md-focus-ring
-          @visibility-changed=${this.onFocusRingVisibilityChanged}
-          part="focus-ring"
-          for="item"
-          inward></md-focus-ring>`;
+    return html` <md-focus-ring
+      @visibility-changed=${this.onFocusRingVisibilityChanged}
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`;
   }
 
   protected onFocusRingVisibilityChanged(e: Event) {}
@@ -184,8 +184,9 @@ export class ListItemEl extends LitElement implements ListItem {
       <slot name="overline" slot="overline"></slot>
       <slot name="headline" slot="headline"></slot>
       <slot name="supporting-text" slot="supporting-text"></slot>
-      <slot name="trailing-supporting-text"
-          slot="trailing-supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
     `;
   }
 
diff --git a/list/list_test.ts b/list/list_test.ts
index a7087057e..bd6981ac4 100644
--- a/list/list_test.ts
+++ b/list/list_test.ts
@@ -26,17 +26,17 @@ describe('<md-list>', () => {
 
   describe('keyboard navigation', () => {
     it('non-nagivable key does nothing', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
 
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -53,17 +53,17 @@ describe('<md-list>', () => {
     });
 
     it('ArrowDown activates the next item', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
 
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -80,17 +80,17 @@ describe('<md-list>', () => {
     });
 
     it('ArrowRight in LTR activates the next item', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
 
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -107,17 +107,17 @@ describe('<md-list>', () => {
     });
 
     it('ArrowLeft in RTL activates the next item', async () => {
-      const root = env.render(html`
-        <md-list dir="rtl">
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list dir="rtl">
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
 
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -134,16 +134,16 @@ describe('<md-list>', () => {
     });
 
     it('ArrowDown will loop around', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -160,11 +160,10 @@ describe('<md-list>', () => {
     });
 
     it('ArrowDown will do nothing if nothing is selectable', async () => {
-      const root = env.render(html`
-          <md-list>
-            <md-list-item type="button" disabled></md-list-item>
-            <md-list-item type="button" disabled></md-list-item>
-          </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button" disabled></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
       const [first, second] = Array.from(root.querySelectorAll('md-list-item'));
@@ -182,16 +181,16 @@ describe('<md-list>', () => {
     });
 
     it('ArrowDown does not activate disabled items', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button" disabled></md-list-item>
-          <md-list-item type="button"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -209,10 +208,9 @@ describe('<md-list>', () => {
     });
 
     it('ArrowDown will select itself if its the only activatable', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
       const first = root.querySelector('md-list-item')!;
@@ -229,16 +227,16 @@ describe('<md-list>', () => {
     });
 
     it('ArrowUp activates the previous item', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -256,16 +254,16 @@ describe('<md-list>', () => {
     });
 
     it('ArrowLeft in LTR activates the previous item', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -282,16 +280,16 @@ describe('<md-list>', () => {
     });
 
     it('ArrowRight in RTL activates the previous item', async () => {
-      const root = env.render(html`
-        <md-list dir="rtl">
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list dir="rtl">
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -308,16 +306,16 @@ describe('<md-list>', () => {
     });
 
     it('activatePreviousItem will loop around', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -335,11 +333,10 @@ describe('<md-list>', () => {
     });
 
     it('ArrowUp will return null if nothing is selectable', async () => {
-      const root = env.render(html`
-          <md-list>
-            <md-list-item type="button" disabled></md-list-item>
-            <md-list-item type="button" disabled></md-list-item>
-          </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button" disabled></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
       const [first, second] = Array.from(root.querySelectorAll('md-list-item'));
@@ -357,16 +354,16 @@ describe('<md-list>', () => {
     });
 
     it('ArrowUp does not activate disabled items', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" disabled></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -384,10 +381,9 @@ describe('<md-list>', () => {
     });
 
     it('ArrowUp will select itself if its the only activatable', async () => {
-      const root = env.render(html`
-          <md-list>
-            <md-list-item type="button"></md-list-item>
-          </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
       const first = root.querySelector('md-list-item')!;
@@ -403,157 +399,152 @@ describe('<md-list>', () => {
       expect(document.activeElement).toEqual(first);
     });
 
-    it('Home will select the first item if something is already selected',
-       async () => {
-         const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-        </md-list>`);
-         const listEl = root.querySelector('md-list')!;
-         const listHarness = new ListHarness(listEl);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
-
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(0);
-         expect(third.tabIndex).toEqual(-1);
-
-         await listHarness.pressHandledKey('Home');
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(0);
-         expect(second.tabIndex).toEqual(-1);
-         expect(third.tabIndex).toEqual(-1);
-         expect(document.activeElement).toEqual(first);
-       });
-
-    it('Home will select the first activatable item if first is non-activatable',
-       async () => {
-         const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" disabled></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-        </md-list>`);
-         const listEl = root.querySelector('md-list')!;
-         const listHarness = new ListHarness(listEl);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
-
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(-1);
-         expect(third.tabIndex).toEqual(0);
-
-         await listHarness.pressHandledKey('Home');
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(0);
-         expect(third.tabIndex).toEqual(-1);
-         expect(document.activeElement).toEqual(second);
-       });
-
-    it('Home will select the first item if it is already selected',
-       async () => {
-         const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
-         const listEl = root.querySelector('md-list')!;
-         const listHarness = new ListHarness(listEl);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
-
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(0);
-         expect(second.tabIndex).toEqual(-1);
-         expect(third.tabIndex).toEqual(-1);
-
-         await listHarness.pressHandledKey('Home');
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(0);
-         expect(second.tabIndex).toEqual(-1);
-         expect(third.tabIndex).toEqual(-1);
-         expect(document.activeElement).toEqual(first);
-       });
-
-    it('End will select the last item if something is already selected',
-       async () => {
-         const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
-         const listEl = root.querySelector('md-list')!;
-         const listHarness = new ListHarness(listEl);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
-
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(0);
-         expect(third.tabIndex).toEqual(-1);
-
-         await listHarness.pressHandledKey('End');
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(-1);
-         expect(third.tabIndex).toEqual(0);
-         expect(document.activeElement).toEqual(third);
-       });
-
-    it('End will select the last activatable item if last is non-activatable',
-       async () => {
-         const root = env.render(html`
-        <md-list>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button" disabled></md-list-item>
-        </md-list>`);
-         const listEl = root.querySelector('md-list')!;
-         const listHarness = new ListHarness(listEl);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
-
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(0);
-         expect(second.tabIndex).toEqual(-1);
-         expect(third.tabIndex).toEqual(-1);
-
-         await listHarness.pressHandledKey('End');
-         await env.waitForStability();
-
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(0);
-         expect(third.tabIndex).toEqual(-1);
-         expect(document.activeElement).toEqual(second);
-       });
-
-    it('End will select the last item if it is already selected', async () => {
-      const root = env.render(html`
-          <md-list>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-            <md-list-item type="button" tabindex="0"></md-list-item>
-          </md-list>`);
+    it('Home will select the first item if something is already selected', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
       const listHarness = new ListHarness(listEl);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
+
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(0);
+      expect(third.tabIndex).toEqual(-1);
+
+      await listHarness.pressHandledKey('Home');
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(0);
+      expect(second.tabIndex).toEqual(-1);
+      expect(third.tabIndex).toEqual(-1);
+      expect(document.activeElement).toEqual(first);
+    });
+
+    it('Home will select the first activatable item if first is non-activatable', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
+      const listEl = root.querySelector('md-list')!;
+      const listHarness = new ListHarness(listEl);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
+
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(-1);
+      expect(third.tabIndex).toEqual(0);
+
+      await listHarness.pressHandledKey('Home');
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(0);
+      expect(third.tabIndex).toEqual(-1);
+      expect(document.activeElement).toEqual(second);
+    });
+
+    it('Home will select the first item if it is already selected', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
+      const listEl = root.querySelector('md-list')!;
+      const listHarness = new ListHarness(listEl);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
+
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(0);
+      expect(second.tabIndex).toEqual(-1);
+      expect(third.tabIndex).toEqual(-1);
+
+      await listHarness.pressHandledKey('Home');
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(0);
+      expect(second.tabIndex).toEqual(-1);
+      expect(third.tabIndex).toEqual(-1);
+      expect(document.activeElement).toEqual(first);
+    });
+
+    it('End will select the last item if something is already selected', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
+      const listEl = root.querySelector('md-list')!;
+      const listHarness = new ListHarness(listEl);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
+
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(0);
+      expect(third.tabIndex).toEqual(-1);
+
+      await listHarness.pressHandledKey('End');
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(-1);
+      expect(third.tabIndex).toEqual(0);
+      expect(document.activeElement).toEqual(third);
+    });
+
+    it('End will select the last activatable item if last is non-activatable', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button" disabled></md-list-item>
+      </md-list>`);
+      const listEl = root.querySelector('md-list')!;
+      const listHarness = new ListHarness(listEl);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
+
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(0);
+      expect(second.tabIndex).toEqual(-1);
+      expect(third.tabIndex).toEqual(-1);
+
+      await listHarness.pressHandledKey('End');
+      await env.waitForStability();
+
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(0);
+      expect(third.tabIndex).toEqual(-1);
+      expect(document.activeElement).toEqual(second);
+    });
+
+    it('End will select the last item if it is already selected', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
+      const listEl = root.querySelector('md-list')!;
+      const listHarness = new ListHarness(listEl);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -571,14 +562,14 @@ describe('<md-list>', () => {
     });
 
     it('Clicking on an item will activate it', async () => {
-      const root = env.render(html`
-          <md-list>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-            <md-list-item type="button" tabindex="0"></md-list-item>
-          </md-list>`);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -599,14 +590,14 @@ describe('<md-list>', () => {
 
   describe('activate items methods', () => {
     it('List will activate only first item by default', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-        </md-list>`);
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -616,73 +607,70 @@ describe('<md-list>', () => {
       expect(document.activeElement).toEqual(document.body);
     });
 
-    it('List will activate only first activatable item by default',
-       async () => {
-         const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" disabled></md-list-item>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-        </md-list>`);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
+    it('List will activate only first activatable item by default', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
-         await env.waitForStability();
+      await env.waitForStability();
 
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(0);
-         expect(third.tabIndex).toEqual(-1);
-         expect(document.activeElement).toEqual(document.body);
-       });
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(0);
+      expect(third.tabIndex).toEqual(-1);
+      expect(document.activeElement).toEqual(document.body);
+    });
 
-    it('List will activate first activatable item if all are tabindex -1',
-       async () => {
-         const root = env.render(html`
-          <md-list>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-          </md-list>`);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
+    it('List will activate first activatable item if all are tabindex -1', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
-         await env.waitForStability();
+      await env.waitForStability();
 
-         expect(first.tabIndex).toEqual(0);
-         expect(second.tabIndex).toEqual(-1);
-         expect(third.tabIndex).toEqual(-1);
-         expect(document.activeElement).toEqual(document.body);
-       });
+      expect(first.tabIndex).toEqual(0);
+      expect(second.tabIndex).toEqual(-1);
+      expect(third.tabIndex).toEqual(-1);
+      expect(document.activeElement).toEqual(document.body);
+    });
 
-    it('List will activate first activatable item if defined by user',
-       async () => {
-         const root = env.render(html`
-          <md-list>
-            <md-list-item type="button" tabindex="-1"></md-list-item>
-            <md-list-item type="button" tabindex="2"></md-list-item>
-            <md-list-item type="button" tabindex="1"></md-list-item>
-          </md-list>`);
-         const [first, second, third] =
-             Array.from(root.querySelectorAll('md-list-item'));
+    it('List will activate first activatable item if defined by user', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="2"></md-list-item>
+        <md-list-item type="button" tabindex="1"></md-list-item>
+      </md-list>`);
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
-         await env.waitForStability();
+      await env.waitForStability();
 
-         expect(first.tabIndex).toEqual(-1);
-         expect(second.tabIndex).toEqual(0);
-         expect(third.tabIndex).toEqual(-1);
-         expect(document.activeElement).toEqual(document.body);
-       });
+      expect(first.tabIndex).toEqual(-1);
+      expect(second.tabIndex).toEqual(0);
+      expect(third.tabIndex).toEqual(-1);
+      expect(document.activeElement).toEqual(document.body);
+    });
 
     it('activateNextItem activates the next item', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -701,15 +689,15 @@ describe('<md-list>', () => {
     });
 
     it('activateNextItem will loop around', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -727,31 +715,28 @@ describe('<md-list>', () => {
       expect(document.activeElement).toEqual(first);
     });
 
-    it('activateNextItem will return null if nothing is selectable',
-       async () => {
-         const root = env.render(html`
-          <md-list>
-          </md-list>`);
-         const listEl = root.querySelector('md-list')!;
+    it('activateNextItem will return null if nothing is selectable', async () => {
+      const root = env.render(html` <md-list> </md-list>`);
+      const listEl = root.querySelector('md-list')!;
 
-         await env.waitForStability();
+      await env.waitForStability();
 
-         const nextItem = listEl.activateNextItem();
-         await env.waitForStability();
+      const nextItem = listEl.activateNextItem();
+      await env.waitForStability();
 
-         expect(nextItem).toBeNull();
-       });
+      expect(nextItem).toBeNull();
+    });
 
     it('activateNextItem does not activate disabled items', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button" disabled></md-list-item>
-          <md-list-item type="button"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -769,37 +754,35 @@ describe('<md-list>', () => {
       expect(document.activeElement).toEqual(third);
     });
 
-    it('activateNextItem will return itself if it is the only activatable item',
-       async () => {
-         const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-        </md-list>`);
-         const listEl = root.querySelector('md-list')!;
-         const first = root.querySelector('md-list-item')!;
+    it('activateNextItem will return itself if it is the only activatable item', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
+      const listEl = root.querySelector('md-list')!;
+      const first = root.querySelector('md-list-item')!;
 
-         await env.waitForStability();
+      await env.waitForStability();
 
-         expect(first.tabIndex).toEqual(0);
+      expect(first.tabIndex).toEqual(0);
 
-         const nextItem = listEl.activateNextItem();
-         await env.waitForStability();
+      const nextItem = listEl.activateNextItem();
+      await env.waitForStability();
 
-         expect(first.tabIndex).toEqual(0);
-         expect(nextItem).toEqual(first);
-         expect(document.activeElement).toEqual(first);
-       });
+      expect(first.tabIndex).toEqual(0);
+      expect(nextItem).toEqual(first);
+      expect(document.activeElement).toEqual(first);
+    });
 
     it('activatePreviousItem activates the previous item', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -818,15 +801,15 @@ describe('<md-list>', () => {
     });
 
     it('activatePreviousItem will loop around', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-          <md-list-item type="button"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -844,32 +827,29 @@ describe('<md-list>', () => {
       expect(document.activeElement).toEqual(third);
     });
 
-    it('activatePreviousItem will return null if nothing is selectable',
-       async () => {
-         const root = env.render(html`
-          <md-list>
-          </md-list>`);
-         const listEl = root.querySelector('md-list')!;
+    it('activatePreviousItem will return null if nothing is selectable', async () => {
+      const root = env.render(html` <md-list> </md-list>`);
+      const listEl = root.querySelector('md-list')!;
 
-         await env.waitForStability();
+      await env.waitForStability();
 
-         const nextItem = listEl.activatePreviousItem();
-         await env.waitForStability();
+      const nextItem = listEl.activatePreviousItem();
+      await env.waitForStability();
 
-         expect(nextItem).toBeNull();
-         expect(document.activeElement).toEqual(document.body);
-       });
+      expect(nextItem).toBeNull();
+      expect(document.activeElement).toEqual(document.body);
+    });
 
     it('activatePreviousItem does not activate disabled items', async () => {
-      const root = env.render(html`
-        <md-list>
-          <md-list-item type="button" tabindex="-1"></md-list-item>
-          <md-list-item type="button" disabled></md-list-item>
-          <md-list-item type="button" tabindex="0"></md-list-item>
-        </md-list>`);
+      const root = env.render(html` <md-list>
+        <md-list-item type="button" tabindex="-1"></md-list-item>
+        <md-list-item type="button" disabled></md-list-item>
+        <md-list-item type="button" tabindex="0"></md-list-item>
+      </md-list>`);
       const listEl = root.querySelector('md-list')!;
-      const [first, second, third] =
-          Array.from(root.querySelectorAll('md-list-item'));
+      const [first, second, third] = Array.from(
+        root.querySelectorAll('md-list-item'),
+      );
 
       await env.waitForStability();
 
@@ -887,26 +867,24 @@ describe('<md-list>', () => {
       expect(document.activeElement).toEqual(first);
     });
 
-    it('activatePreviousItem will return itself if its activatable',
-       async () => {
-         const root = env.render(html`
-          <md-list>
-            <md-list-item type="button"></md-list-item>
-          </md-list>`);
-         const listEl = root.querySelector('md-list')!;
-         const first = root.querySelector('md-list-item')!;
+    it('activatePreviousItem will return itself if its activatable', async () => {
+      const root = env.render(html` <md-list>
+        <md-list-item type="button"></md-list-item>
+      </md-list>`);
+      const listEl = root.querySelector('md-list')!;
+      const first = root.querySelector('md-list-item')!;
 
-         await env.waitForStability();
+      await env.waitForStability();
 
-         expect(first.tabIndex).toEqual(0);
+      expect(first.tabIndex).toEqual(0);
 
-         const nextItem = listEl.activatePreviousItem();
-         await env.waitForStability();
+      const nextItem = listEl.activatePreviousItem();
+      await env.waitForStability();
 
-         expect(first.tabIndex).toEqual(0);
-         expect(nextItem).toEqual(first);
-         expect(document.activeElement).toEqual(first);
-       });
+      expect(first.tabIndex).toEqual(0);
+      expect(nextItem).toEqual(first);
+      expect(document.activeElement).toEqual(first);
+    });
   });
 
   describe('aria', () => {
@@ -914,8 +892,9 @@ describe('<md-list>', () => {
       const root = env.render(html`<md-list></md-list>`);
       const listEl = root.querySelector('md-list')!;
       await env.waitForStability();
-      const internals =
-          (listEl as unknown as {internals: {role: string | null}}).internals;
+      const internals = (
+        listEl as unknown as {internals: {role: string | null}}
+      ).internals;
 
       expect(internals.role).toEqual('list');
     });
@@ -947,9 +926,7 @@ describe('<md-list-item>', () => {
 
   describe('rendering', () => {
     it('self-describes as a list-item', async () => {
-      const root = env.render(html`
-          <md-list-item>
-          </md-list-item>`);
+      const root = env.render(html` <md-list-item> </md-list-item>`);
 
       const listItemEl = root.querySelector('md-list-item')!;
 
@@ -966,8 +943,9 @@ describe('<md-list-item>', () => {
 
     await env.waitForStability();
 
-    const internalRoot =
-        listItem.renderRoot.querySelector('#item') as HTMLElement;
+    const internalRoot = listItem.renderRoot.querySelector(
+      '#item',
+    ) as HTMLElement;
 
     expect(internalRoot.tabIndex).toBe(0);
 
@@ -1013,28 +991,32 @@ describe('<md-list-item> link', () => {
 
   it('setting href renders an anchor tag', async () => {
     const root = env.render(
-        html`<md-list-item href="https://google.com"></md-list-item>`);
+      html`<md-list-item href="https://google.com"></md-list-item>`,
+    );
 
     const listItem = root.querySelector('md-list-item')!;
 
     await env.waitForStability();
 
-    const internalRoot =
-        listItem.renderRoot.querySelector('#item') as HTMLElement;
+    const internalRoot = listItem.renderRoot.querySelector(
+      '#item',
+    ) as HTMLElement;
 
     expect(internalRoot.tagName).toBe('A');
   });
 
   it('setting target without href renders nothing', async () => {
-    const root =
-        env.render(html`<md-list-item target="_blank"></md-list-item>`);
+    const root = env.render(
+      html`<md-list-item target="_blank"></md-list-item>`,
+    );
 
     const listItem = root.querySelector('md-list-item')!;
 
     await env.waitForStability();
 
-    const internalRoot =
-        listItem.renderRoot.querySelector('#item') as HTMLElement;
+    const internalRoot = listItem.renderRoot.querySelector(
+      '#item',
+    ) as HTMLElement;
 
     expect(internalRoot.hasAttribute('target')).toBe(false);
   });
diff --git a/list/test/assets.ts b/list/test/assets.ts
index dd3cf824e..6de3726ee 100644
--- a/list/test/assets.ts
+++ b/list/test/assets.ts
@@ -4,13 +4,13 @@
  * User avatar as a dataurl.
  */
 export const AVATAR_URL =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=';
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=';
 
 /**
  * Example image as a dataurl.
  */
 export const IMAGE_URL =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAYAAADG4PRLAAAK4GlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUk8kWgOf/00NCgNClhN6RTgApoYciSAdRCUkgoYSYEBDEzuIKrgoiIqCu4EpTcHUpshbEggVRbNgXRBTUdbFgQ2V/4BF295333nn3nPnnO/e/c+fee2bOuQMA2Z8lFKbBcgCkCzJFYX6etJjYOBruKcABWUAFENBnscVCRmhoEEBkdv67vL+N2CFyw2LK17///6+iwOGK2QBA8QgncsTsdIQ7kfGcLRRlAoA6iOj1sjOFU3wNYUUREiDCT6Y4eYY/TnHiNKNJ0zYRYV4I0wDAk1gsUTIAJHNET8tiJyN+SFM5WAk4fAHCeQi7sXksDsLHETZPT8+Y4hGEjRF7IQBkpDqAnvgXn8l/858o9c9iJUt5Jq9pwXvzxcI0Vs7/WZr/Lelpktk9DJFB4on8w6ZqitTvTmpGoJQFiQtDZpnPman7FPMk/pGzzBZ7xc0yh+UdKF2btjBolpP4vkypn0xmxCxzxT7hsyzKCJPulSTyYswySzS3ryQ1UqrncZlS/7m8iOhZzuJHLZxlcWp44JyNl1QvkoRJ4+cK/Dzn9vWV5p4u/ku+fKZ0bSYvwl+aO2sufq6AMedTHCONjcP19pmziZTaCzM9pXsJ00Kl9tw0P6lenBUuXZuJHM65taHSGqawAkJnGQQBP0AD/sAbhCGzHUCyz+SuyJxKxCtDmCPiJ/MyaQzktnFpTAHb0pxmY2VjA8DU3Z05Dm/Dpu8kpHxyTpexHznG75H7UjynSywFoK0AANV7czr9PQBQ8gFo7WJLRFkzOvTUBwOIgAIUgRrQAnrAGFgAG+AAXIAH8AEBIAREgFiwFLABD6QDEcgGeWAdKABFYBvYASrAXlAD6sAhcAS0gePgNDgPLoNr4Ba4DwbAMHgBxsB7MAFBEA4iQ1RIDdKGDCAzyAaiQ26QDxQEhUGxUAKUDAkgCZQHbYCKoBKoAtoH1UM/Q8eg09BFqA+6Cw1Co9Ab6DOMgkmwIqwJG8LzYTrMgAPhCHgJnAwvh3PhfHgLXA5XwwfhVvg0fBm+BQ/AL+BxFEDJoJRROigLFB3lhQpBxaGSUCLUalQhqgxVjWpCdaC6UTdQA6iXqE9oLJqKpqEt0C5of3Qkmo1ejl6N3oyuQNehW9Fn0TfQg+gx9DcMGaOBMcM4Y5iYGEwyJhtTgCnDHMC0YM5hbmGGMe+xWKwy1gjriPXHxmJTsCuxm7G7sc3YTmwfdgg7jsPh1HBmOFdcCI6Fy8QV4HbhDuJO4a7jhnEf8TJ4bbwN3hcfhxfg1+PL8A34k/jr+Gf4CYIcwYDgTAghcAg5hK2E/YQOwlXCMGGCKE80IroSI4gpxHXEcmIT8RzxAfGtjIyMroyTzCIZvsxamXKZwzIXZAZlPpEUSKYkL1I8SULaQqoldZLukt6SyWRDsgc5jpxJ3kKuJ58hPyJ/lKXKWsoyZTmya2QrZVtlr8u+ohAoBhQGZSkll1JGOUq5SnkpR5AzlPOSY8mtlquUOybXLzcuT5W3lg+RT5ffLN8gf1F+RAGnYKjgo8BRyFeoUTijMERFUfWoXlQ2dQN1P/UcdVgRq2ikyFRMUSxSPKTYqzimpKBkpxSltEKpUumE0oAyStlQmamcprxV+YjybeXPKpoqDBWuyiaVJpXrKh9U56l6qHJVC1WbVW+pflajqfmopaoVq7WpPVRHq5uqL1LPVt+jfk795TzFeS7z2PMK5x2Zd08D1jDVCNNYqVGj0aMxrqml6acp1NyleUbzpZaylodWilap1kmtUW2qtps2X7tU+5T2c5oSjUFLo5XTztLGdDR0/HUkOvt0enUmdI10I3XX6zbrPtQj6tH1kvRK9br0xvS19YP18/Qb9e8ZEAzoBjyDnQbdBh8MjQyjDTcathmOGKkaMY1yjRqNHhiTjd2NlxtXG980wZrQTVJNdptcM4VN7U15ppWmV81gMwczvtlusz5zjLmTucC82rzfgmTBsMiyaLQYtFS2DLJcb9lm+Wq+/vy4+cXzu+d/s7K3SrPab3XfWsE6wHq9dYf1GxtTG7ZNpc1NW7Ktr+0a23bb13Zmdly7PXZ37Kn2wfYb7bvsvzo4OogcmhxGHfUdExyrHPvpivRQ+mb6BSeMk6fTGqfjTp+cHZwznY84/+Fi4ZLq0uAyssBoAXfB/gVDrrquLNd9rgNuNLcEtx/dBtx13Fnu1e6PPfQ8OB4HPJ4xTBgpjIOMV55WniLPFs8PXs5eq7w6vVHeft6F3r0+Cj6RPhU+j3x1fZN9G33H/Oz9Vvp1+mP8A/2L/fuZmkw2s545FuAYsCrgbCApMDywIvBxkGmQKKgjGA4OCN4e/GChwULBwrYQEMIM2R7yMNQodHnor4uwi0IXVS56GmYdlhfWHU4NXxbeEP4+wjNia8T9SONISWRXFCUqPqo+6kO0d3RJ9EDM/JhVMZdj1WP5se1xuLiouANx44t9Fu9YPBxvH18Qf3uJ0ZIVSy4uVV+atvTEMsoy1rKjCZiE6ISGhC+sEFY1azyRmViVOMb2Yu9kv+B4cEo5o1xXbgn3WZJrUknSSLJr8vbkUZ47r4z3ku/Fr+C/TvFP2ZvyITUktTZ1Mi06rTkdn56QfkygIEgVnM3QyliR0Sc0ExYIB5Y7L9+xfEwUKDoghsRLxO2ZikiT1CMxlnwnGcxyy6rM+pgdlX10hfwKwYqeHNOcTTnPcn1zf1qJXsle2ZWnk7cub3AVY9W+1dDqxNVda/TW5K8ZXuu3tm4dcV3quivrrdaXrH+3IXpDR75m/tr8oe/8vmsskC0QFfRvdNm493v09/zvezfZbtq16Vshp/BSkVVRWdGXzezNl36w/qH8h8ktSVt6tzps3bMNu02w7Xaxe3FdiXxJbsnQ9uDtraW00sLSdzuW7bhYZle2dydxp2TnQHlQefsu/V3bdn2p4FXcqvSsbK7SqNpU9WE3Z/f1PR57mvZq7i3a+/lH/o939vnta602rC6rwdZk1TzdH7W/+yf6T/UH1A8UHfhaK6gdqAurO1vvWF/foNGwtRFulDSOHow/eO2Q96H2Joumfc3KzUWHwWHJ4ec/J/x8+0jgka6j9KNNvxj8UtVCbSlshVpzWsfaeG0D7bHtfccCjnV1uHS0/Gr5a+1xneOVJ5RObD1JPJl/cvJU7qnxTmHny9PJp4e6lnXdPxNz5ubZRWd7zwWeu3De9/yZbkb3qQuuF45fdL547BL9Uttlh8utPfY9LVfsr7T0OvS2XnW82n7N6VpH34K+k9fdr5++4X3j/E3mzcu3Ft7qux15+05/fP/AHc6dkbtpd1/fy7o3cX/tA8yDwodyD8seaTyq/s3kt+YBh4ETg96DPY/DH98fYg+9eCJ+8mU4/yn5adkz7Wf1IzYjx0d9R689X/x8+IXwxcTLgt/lf696Zfzqlz88/ugZixkbfi16Pflm81u1t7Xv7N51jYeOP3qf/n7iQ+FHtY91n+ifuj9Hf342kf0F96X8q8nXjm+B3x5Mpk9OClki1nQrgEIGnJQEwJtapDeOBYCK9OXExTO99bRAM++BaQL/iWf672lxAKCmH4CIlQAEXQFgVwXSziL+KcibIJSC6F0AbGsrHf8ScZKtzYwvkjvSmjycnHxrDACuGICvxZOTEzWTk19rkGDvA9CZM9PTT4kW8r7IxgH8xif38ne/Av+QmX7/Lzn+cwZTEdiBf85/AsPlG21SePNzAAAAXGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAACoAIABAAAAAEAAABwoAMABAAAAAEAAABwAAAAAAzs/hgAAAK2aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTEyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjExMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqSz/U6AAAH10lEQVR4Ae2d+0/bSBDHJ0+SAAmEV4uOQum1V+lOp7v74f7/P+GkU6WWKyWEvENCQkLeCTdft0EgIDj22t61dyWUYK93x/PxrHd3Zjehk6+5W9JJVQ3MwqpKruX+rgENUPEnQQPUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiRxWX/0nxOzc9+nLyH4XDYfrz998oFAo9mc8PB33XhN7e3lK5UqHuzQ1ddzpUu7wkHPNr8h3Aq1abavXGHa98oUjD4ejuf7998RXA6XRKF8UiTSbjO0433JyWq1XfWqGvAJarNWq1O3fw5l9KlSq1rx8fn59X+dM3AEejERVLZba02SMe4/GYCnxuOn187lFmxQ74BmChVKL+YPCs+lttvBvrz55X9YQvAHa4t1mq1BYymEwmVK7VCNbop6Q8QDSL+UKJOy6TF7l0Ol0qlisv5lMpg/IA640GXTabpnSO8SB6qYuaWlMFSZRJaYAY3xWKpaWGCLDYs/M8zWb+6NAoDbBYLhszLssaRLN5RVfcqfFDUhZgr9c3hgZWIEx4wJ9jKzTz3rRSvpvXKAkQzR/eZXaawU73hqo+GFYoCbDVvubpscXDBjNWkDu/oMGCsaOZMrzOoxzAwWBIufyFEL2NeegBS1bZW6EUQCga7qFOtysEIAopV+vsdhJXnjDBTBakFMBef0DVWl2oxRjvU3Y5qTpPqhTAfKFAN72eyWfTfDZMBNTZslVMygBsXrWo0TA342IFBLwVKnZolACId18uz+M2Hr85lRCCUeJQjNlMrfALJQAiTMKNjobRoemq5fiVHiDcP99y504Z3oNyUVfJcAqrY4VSA/zuPShZmu98QGaJfy55nrQiYJJgiSptZZUaIGZcMO5zM2FYkefBPQKkVEjSAkRnAp0KzLy4nfo83qzweFOFDo20AOGohQV6lS6MeFL3H55l71dKgGjGihyk5GX8ymA45PCLsi2Px7IwrOSXEiAmq+Hu8TpVOAiqfe1dK2Dm/qUDCKuDq0gGD8FkMuWAqSK3BC8HTJlRthN5pAOICWuZPOUjhjedygtQuuVl6fU1+vXjL9JAjK/EaWVlxQnjEVKmdACxlm97Kyvk5oJQiHRNaBCULvIeNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqpZuJEXlzIsvC5PqQN1KAg3k8Ht0FAkeiEYrHYpTg6bZ4PO76rlAa4ALKgNbv96nO8agNjpXByt4Zh1rM+PjcWxIKhRkaUSQcoUQiTq/39mgjk6FkMuEKTGEA4XJxc9Y+EolSLCZM/AcYAQeWhoUvlwxvtGBjBGxrwtkNx++4O2Y/5jdKJZPGfO7+qz2GmnhQtuh/QicCfj8QPrx//v3kSNj7czecSqXo77/+eO605eOA0eBQ+5PTb4S9Z+wkyHh8eMAwt+wUs+haMb8fiIUhTqxZWCR5z4E1EnDgnuZy9OnzF9vwIDtk/PT5hE7Pco4FSDnTBi3SvKTnAA8BxAijmL/fRIiKsrC1CdxkR2/e8BaYYre+1MMIpgQl5y4uDHh2lm0/BxxlYvHMOdch8uFAfRogK+GSQxirHIfjBLw5VJRdYku8arXmh4R8Bh4g3t+nZ+eE5dZOJ9SBukQ+KIEGiB4nmjXEgLqV0NlDpJuopjTQAAfDgetrL/CgYHsTu0OU+QMXaIBYd+jV2ov2tZiNFQILEAtXMMviVWpdt4U0o4EFiH21vVwTj0G+iI5TYAEi4nrRHKfTltmHV2Nkf/PZwAKcztirwGMzrxLmj0UsIg0swFuG5yVA1D17YoP2ZR+owAJcVlGy5g8sQPyuEv68SrFolCKRiO3qvbsD26LbKyDGYRBRAQq0KkWEAYp4gIILMBrjZWNxq/q3fV0iwTE0Mfv1BxZglIOR1tfWbIOwWkCa64YMdlNgAUJxCHXw6rcFs5sbQuoONMBMep3W1lbtGsHS129ns8KsP9AA0Qs82N9fGoDdC37afy2kBwo5Ag0QCsBy7s0NMc0ZynspbWU3KZNJv5TN9PnAA0RX/t3RoSs9UgT7vj9+K+TdNycceIBQBN6DRwcH3Ct0LkgPY87jw0Phgb4a4I9H+dXeLn14d+zI4B7wPn54Tzvb4gN8nXvk5jbu0KcT3f/dnW2W9pbOeKsv7FgoIiVTSfr48zvKpMW99+7LJQRgJBKmvd0dV/cVy6yv378PYd93tncovZ6mk6+nxg9kWQ0+wrqN7MYmHXFofdLB9RFC1kYI055EBQEcYjhz+YLxe/RmRUPLkN3cpP1Xu8anEy3FPVlmQizwXoG++ToHgSEG9m9rXjWNjdcRFoiIMoTiI2E6LLGSoNXVFA/OV2k7u8UdFfe25tIAX3jkAHKV32Op5L7hAP7uiOX1gT+8+VgfiPUOYe6ohDmvwxb3SFoN8JFKnj4AMJi5EeHDe7oGa0f1MMKa3qS5SgOUBoU1QTRAa3qT5ioNUBoU1gTRAK3pTZqrNEBpUFgTRAO0pjdprtIApUFhTRAN0JrepLlKA5QGhTVBNEBrepPmKg1QGhTWBNEArelNmqs0QGlQWBNEA7SmN2mugj/Qu3XGzqhB7G5yzsgorNT/AQI1K7I2zvkPAAAAAElFTkSuQmCC';
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAYAAADG4PRLAAAK4GlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUk8kWgOf/00NCgNClhN6RTgApoYciSAdRCUkgoYSYEBDEzuIKrgoiIqCu4EpTcHUpshbEggVRbNgXRBTUdbFgQ2V/4BF295333nn3nPnnO/e/c+fee2bOuQMA2Z8lFKbBcgCkCzJFYX6etJjYOBruKcABWUAFENBnscVCRmhoEEBkdv67vL+N2CFyw2LK17///6+iwOGK2QBA8QgncsTsdIQ7kfGcLRRlAoA6iOj1sjOFU3wNYUUREiDCT6Y4eYY/TnHiNKNJ0zYRYV4I0wDAk1gsUTIAJHNET8tiJyN+SFM5WAk4fAHCeQi7sXksDsLHETZPT8+Y4hGEjRF7IQBkpDqAnvgXn8l/858o9c9iJUt5Jq9pwXvzxcI0Vs7/WZr/Lelpktk9DJFB4on8w6ZqitTvTmpGoJQFiQtDZpnPman7FPMk/pGzzBZ7xc0yh+UdKF2btjBolpP4vkypn0xmxCxzxT7hsyzKCJPulSTyYswySzS3ryQ1UqrncZlS/7m8iOhZzuJHLZxlcWp44JyNl1QvkoRJ4+cK/Dzn9vWV5p4u/ku+fKZ0bSYvwl+aO2sufq6AMedTHCONjcP19pmziZTaCzM9pXsJ00Kl9tw0P6lenBUuXZuJHM65taHSGqawAkJnGQQBP0AD/sAbhCGzHUCyz+SuyJxKxCtDmCPiJ/MyaQzktnFpTAHb0pxmY2VjA8DU3Z05Dm/Dpu8kpHxyTpexHznG75H7UjynSywFoK0AANV7czr9PQBQ8gFo7WJLRFkzOvTUBwOIgAIUgRrQAnrAGFgAG+AAXIAH8AEBIAREgFiwFLABD6QDEcgGeWAdKABFYBvYASrAXlAD6sAhcAS0gePgNDgPLoNr4Ba4DwbAMHgBxsB7MAFBEA4iQ1RIDdKGDCAzyAaiQ26QDxQEhUGxUAKUDAkgCZQHbYCKoBKoAtoH1UM/Q8eg09BFqA+6Cw1Co9Ab6DOMgkmwIqwJG8LzYTrMgAPhCHgJnAwvh3PhfHgLXA5XwwfhVvg0fBm+BQ/AL+BxFEDJoJRROigLFB3lhQpBxaGSUCLUalQhqgxVjWpCdaC6UTdQA6iXqE9oLJqKpqEt0C5of3Qkmo1ejl6N3oyuQNehW9Fn0TfQg+gx9DcMGaOBMcM4Y5iYGEwyJhtTgCnDHMC0YM5hbmGGMe+xWKwy1gjriPXHxmJTsCuxm7G7sc3YTmwfdgg7jsPh1HBmOFdcCI6Fy8QV4HbhDuJO4a7jhnEf8TJ4bbwN3hcfhxfg1+PL8A34k/jr+Gf4CYIcwYDgTAghcAg5hK2E/YQOwlXCMGGCKE80IroSI4gpxHXEcmIT8RzxAfGtjIyMroyTzCIZvsxamXKZwzIXZAZlPpEUSKYkL1I8SULaQqoldZLukt6SyWRDsgc5jpxJ3kKuJ58hPyJ/lKXKWsoyZTmya2QrZVtlr8u+ohAoBhQGZSkll1JGOUq5SnkpR5AzlPOSY8mtlquUOybXLzcuT5W3lg+RT5ffLN8gf1F+RAGnYKjgo8BRyFeoUTijMERFUfWoXlQ2dQN1P/UcdVgRq2ikyFRMUSxSPKTYqzimpKBkpxSltEKpUumE0oAyStlQmamcprxV+YjybeXPKpoqDBWuyiaVJpXrKh9U56l6qHJVC1WbVW+pflajqfmopaoVq7WpPVRHq5uqL1LPVt+jfk795TzFeS7z2PMK5x2Zd08D1jDVCNNYqVGj0aMxrqml6acp1NyleUbzpZaylodWilap1kmtUW2qtps2X7tU+5T2c5oSjUFLo5XTztLGdDR0/HUkOvt0enUmdI10I3XX6zbrPtQj6tH1kvRK9br0xvS19YP18/Qb9e8ZEAzoBjyDnQbdBh8MjQyjDTcathmOGKkaMY1yjRqNHhiTjd2NlxtXG980wZrQTVJNdptcM4VN7U15ppWmV81gMwczvtlusz5zjLmTucC82rzfgmTBsMiyaLQYtFS2DLJcb9lm+Wq+/vy4+cXzu+d/s7K3SrPab3XfWsE6wHq9dYf1GxtTG7ZNpc1NW7Ktr+0a23bb13Zmdly7PXZ37Kn2wfYb7bvsvzo4OogcmhxGHfUdExyrHPvpivRQ+mb6BSeMk6fTGqfjTp+cHZwznY84/+Fi4ZLq0uAyssBoAXfB/gVDrrquLNd9rgNuNLcEtx/dBtx13Fnu1e6PPfQ8OB4HPJ4xTBgpjIOMV55WniLPFs8PXs5eq7w6vVHeft6F3r0+Cj6RPhU+j3x1fZN9G33H/Oz9Vvp1+mP8A/2L/fuZmkw2s545FuAYsCrgbCApMDywIvBxkGmQKKgjGA4OCN4e/GChwULBwrYQEMIM2R7yMNQodHnor4uwi0IXVS56GmYdlhfWHU4NXxbeEP4+wjNia8T9SONISWRXFCUqPqo+6kO0d3RJ9EDM/JhVMZdj1WP5se1xuLiouANx44t9Fu9YPBxvH18Qf3uJ0ZIVSy4uVV+atvTEMsoy1rKjCZiE6ISGhC+sEFY1azyRmViVOMb2Yu9kv+B4cEo5o1xXbgn3WZJrUknSSLJr8vbkUZ47r4z3ku/Fr+C/TvFP2ZvyITUktTZ1Mi06rTkdn56QfkygIEgVnM3QyliR0Sc0ExYIB5Y7L9+xfEwUKDoghsRLxO2ZikiT1CMxlnwnGcxyy6rM+pgdlX10hfwKwYqeHNOcTTnPcn1zf1qJXsle2ZWnk7cub3AVY9W+1dDqxNVda/TW5K8ZXuu3tm4dcV3quivrrdaXrH+3IXpDR75m/tr8oe/8vmsskC0QFfRvdNm493v09/zvezfZbtq16Vshp/BSkVVRWdGXzezNl36w/qH8h8ktSVt6tzps3bMNu02w7Xaxe3FdiXxJbsnQ9uDtraW00sLSdzuW7bhYZle2dydxp2TnQHlQefsu/V3bdn2p4FXcqvSsbK7SqNpU9WE3Z/f1PR57mvZq7i3a+/lH/o939vnta602rC6rwdZk1TzdH7W/+yf6T/UH1A8UHfhaK6gdqAurO1vvWF/foNGwtRFulDSOHow/eO2Q96H2Joumfc3KzUWHwWHJ4ec/J/x8+0jgka6j9KNNvxj8UtVCbSlshVpzWsfaeG0D7bHtfccCjnV1uHS0/Gr5a+1xneOVJ5RObD1JPJl/cvJU7qnxTmHny9PJp4e6lnXdPxNz5ubZRWd7zwWeu3De9/yZbkb3qQuuF45fdL547BL9Uttlh8utPfY9LVfsr7T0OvS2XnW82n7N6VpH34K+k9fdr5++4X3j/E3mzcu3Ft7qux15+05/fP/AHc6dkbtpd1/fy7o3cX/tA8yDwodyD8seaTyq/s3kt+YBh4ETg96DPY/DH98fYg+9eCJ+8mU4/yn5adkz7Wf1IzYjx0d9R689X/x8+IXwxcTLgt/lf696Zfzqlz88/ugZixkbfi16Pflm81u1t7Xv7N51jYeOP3qf/n7iQ+FHtY91n+ifuj9Hf342kf0F96X8q8nXjm+B3x5Mpk9OClki1nQrgEIGnJQEwJtapDeOBYCK9OXExTO99bRAM++BaQL/iWf672lxAKCmH4CIlQAEXQFgVwXSziL+KcibIJSC6F0AbGsrHf8ScZKtzYwvkjvSmjycnHxrDACuGICvxZOTEzWTk19rkGDvA9CZM9PTT4kW8r7IxgH8xif38ne/Av+QmX7/Lzn+cwZTEdiBf85/AsPlG21SePNzAAAAXGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAACoAIABAAAAAEAAABwoAMABAAAAAEAAABwAAAAAAzs/hgAAAK2aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTEyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjExMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqSz/U6AAAH10lEQVR4Ae2d+0/bSBDHJ0+SAAmEV4uOQum1V+lOp7v74f7/P+GkU6WWKyWEvENCQkLeCTdft0EgIDj22t61dyWUYK93x/PxrHd3Zjehk6+5W9JJVQ3MwqpKruX+rgENUPEnQQPUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiRxWX/0nxOzc9+nLyH4XDYfrz998oFAo9mc8PB33XhN7e3lK5UqHuzQ1ddzpUu7wkHPNr8h3Aq1abavXGHa98oUjD4ejuf7998RXA6XRKF8UiTSbjO0433JyWq1XfWqGvAJarNWq1O3fw5l9KlSq1rx8fn59X+dM3AEejERVLZba02SMe4/GYCnxuOn187lFmxQ74BmChVKL+YPCs+lttvBvrz55X9YQvAHa4t1mq1BYymEwmVK7VCNbop6Q8QDSL+UKJOy6TF7l0Ol0qlisv5lMpg/IA640GXTabpnSO8SB6qYuaWlMFSZRJaYAY3xWKpaWGCLDYs/M8zWb+6NAoDbBYLhszLssaRLN5RVfcqfFDUhZgr9c3hgZWIEx4wJ9jKzTz3rRSvpvXKAkQzR/eZXaawU73hqo+GFYoCbDVvubpscXDBjNWkDu/oMGCsaOZMrzOoxzAwWBIufyFEL2NeegBS1bZW6EUQCga7qFOtysEIAopV+vsdhJXnjDBTBakFMBef0DVWl2oxRjvU3Y5qTpPqhTAfKFAN72eyWfTfDZMBNTZslVMygBsXrWo0TA342IFBLwVKnZolACId18uz+M2Hr85lRCCUeJQjNlMrfALJQAiTMKNjobRoemq5fiVHiDcP99y504Z3oNyUVfJcAqrY4VSA/zuPShZmu98QGaJfy55nrQiYJJgiSptZZUaIGZcMO5zM2FYkefBPQKkVEjSAkRnAp0KzLy4nfo83qzweFOFDo20AOGohQV6lS6MeFL3H55l71dKgGjGihyk5GX8ymA45PCLsi2Px7IwrOSXEiAmq+Hu8TpVOAiqfe1dK2Dm/qUDCKuDq0gGD8FkMuWAqSK3BC8HTJlRthN5pAOICWuZPOUjhjedygtQuuVl6fU1+vXjL9JAjK/EaWVlxQnjEVKmdACxlm97Kyvk5oJQiHRNaBCULvIeNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqpZuJEXlzIsvC5PqQN1KAg3k8Ht0FAkeiEYrHYpTg6bZ4PO76rlAa4ALKgNbv96nO8agNjpXByt4Zh1rM+PjcWxIKhRkaUSQcoUQiTq/39mgjk6FkMuEKTGEA4XJxc9Y+EolSLCZM/AcYAQeWhoUvlwxvtGBjBGxrwtkNx++4O2Y/5jdKJZPGfO7+qz2GmnhQtuh/QicCfj8QPrx//v3kSNj7czecSqXo77/+eO605eOA0eBQ+5PTb4S9Z+wkyHh8eMAwt+wUs+haMb8fiIUhTqxZWCR5z4E1EnDgnuZy9OnzF9vwIDtk/PT5hE7Pco4FSDnTBi3SvKTnAA8BxAijmL/fRIiKsrC1CdxkR2/e8BaYYre+1MMIpgQl5y4uDHh2lm0/BxxlYvHMOdch8uFAfRogK+GSQxirHIfjBLw5VJRdYku8arXmh4R8Bh4g3t+nZ+eE5dZOJ9SBukQ+KIEGiB4nmjXEgLqV0NlDpJuopjTQAAfDgetrL/CgYHsTu0OU+QMXaIBYd+jV2ov2tZiNFQILEAtXMMviVWpdt4U0o4EFiH21vVwTj0G+iI5TYAEi4nrRHKfTltmHV2Nkf/PZwAKcztirwGMzrxLmj0UsIg0swFuG5yVA1D17YoP2ZR+owAJcVlGy5g8sQPyuEv68SrFolCKRiO3qvbsD26LbKyDGYRBRAQq0KkWEAYp4gIILMBrjZWNxq/q3fV0iwTE0Mfv1BxZglIOR1tfWbIOwWkCa64YMdlNgAUJxCHXw6rcFs5sbQuoONMBMep3W1lbtGsHS129ns8KsP9AA0Qs82N9fGoDdC37afy2kBwo5Ag0QCsBy7s0NMc0ZynspbWU3KZNJv5TN9PnAA0RX/t3RoSs9UgT7vj9+K+TdNycceIBQBN6DRwcH3Ct0LkgPY87jw0Phgb4a4I9H+dXeLn14d+zI4B7wPn54Tzvb4gN8nXvk5jbu0KcT3f/dnW2W9pbOeKsv7FgoIiVTSfr48zvKpMW99+7LJQRgJBKmvd0dV/cVy6yv378PYd93tncovZ6mk6+nxg9kWQ0+wrqN7MYmHXFofdLB9RFC1kYI055EBQEcYjhz+YLxe/RmRUPLkN3cpP1Xu8anEy3FPVlmQizwXoG++ToHgSEG9m9rXjWNjdcRFoiIMoTiI2E6LLGSoNXVFA/OV2k7u8UdFfe25tIAX3jkAHKV32Op5L7hAP7uiOX1gT+8+VgfiPUOYe6ohDmvwxb3SFoN8JFKnj4AMJi5EeHDe7oGa0f1MMKa3qS5SgOUBoU1QTRAa3qT5ioNUBoU1gTRAK3pTZqrNEBpUFgTRAO0pjdprtIApUFhTRAN0JrepLlKA5QGhTVBNEBrepPmKg1QGhTWBNEArelNmqs0QGlQWBNEA7SmN2mugj/Qu3XGzqhB7G5yzsgorNT/AQI1K7I2zvkPAAAAAElFTkSuQmCC';
 
 /**
  * One frame of the color blue in webm as a dataurl.
@@ -20,4 +20,4 @@ export const IMAGE_URL =
  * cat ~/out.webm | base64 | tr -d '\n'
  */
 export const VIDEO_URL =
-    'data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAJrEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHYTbuMU6uEElTDZ1OsggEgTbuMU6uEHFO7a1OsggJV7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmsirXsYMPQkBNgI1MYXZmNTkuMjcuMTAwV0GNTGF2ZjU5LjI3LjEwMESJiEBEAAAAAAAAFlSua8OuAQAAAAAAADrXgQFzxYjFaDr5zFhASZyBACK1nIN1bmSIgQCGhVZfVlA5g4EBI+ODhAJiWgDgi7CCBQC6ggLQmoECElTDZ0CBc3OgY8CAZ8iaRaOHRU5DT0RFUkSHjUxhdmY1OS4yNy4xMDBzc9tjwItjxYjFaDr5zFhASWfIpUWjh0VOQ09ERVJEh5hMYXZjNTkuMzcuMTAwIGxpYnZweC12cDlnyKJFo4hEVVJBVElPTkSHlDAwOjAwOjAwLjA0MDAwMDAwMAAAH0O2dUCo54EAo0CigQAAgIJJg0IAT/As9gA4JBwYShgAQGIMw/o6+kdo6+kAuaP9KgAAAAAcZw5Vl/m2cRY6ymCqlMFVJYKqSwVSleqUBBBCAAAAABxnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAAAAAHGcOVZf5tnEWOspgqpTBVSWCqksFUpXqlAQQQgBnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAHFO7a5G7j7OBALeK94EB8YIBp/CBAw==';
\ No newline at end of file
+  'data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAJrEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHYTbuMU6uEElTDZ1OsggEgTbuMU6uEHFO7a1OsggJV7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmsirXsYMPQkBNgI1MYXZmNTkuMjcuMTAwV0GNTGF2ZjU5LjI3LjEwMESJiEBEAAAAAAAAFlSua8OuAQAAAAAAADrXgQFzxYjFaDr5zFhASZyBACK1nIN1bmSIgQCGhVZfVlA5g4EBI+ODhAJiWgDgi7CCBQC6ggLQmoECElTDZ0CBc3OgY8CAZ8iaRaOHRU5DT0RFUkSHjUxhdmY1OS4yNy4xMDBzc9tjwItjxYjFaDr5zFhASWfIpUWjh0VOQ09ERVJEh5hMYXZjNTkuMzcuMTAwIGxpYnZweC12cDlnyKJFo4hEVVJBVElPTkSHlDAwOjAwOjAwLjA0MDAwMDAwMAAAH0O2dUCo54EAo0CigQAAgIJJg0IAT/As9gA4JBwYShgAQGIMw/o6+kdo6+kAuaP9KgAAAAAcZw5Vl/m2cRY6ymCqlMFVJYKqSwVSleqUBBBCAAAAABxnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAAAAAHGcOVZf5tnEWOspgqpTBVSWCqksFUpXqlAQQQgBnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAHFO7a5G7j7OBALeK94EB8YIBp/CBAw==';
diff --git a/menu/demo/demo.ts b/menu/demo/demo.ts
index 617d3eb20..fb861ad64 100644
--- a/menu/demo/demo.ts
+++ b/menu/demo/demo.ts
@@ -4,162 +4,175 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo, title} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+  title,
+} from './material-collection.js';
 import {Corner, FocusState} from '@material/web/menu/menu.js';
-import {boolInput, Knob, numberInput, selectDropdown, textInput} from './index.js';
+import {
+  boolInput,
+  Knob,
+  numberInput,
+  selectDropdown,
+  textInput,
+} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Menu', [
-      new Knob('menu', {ui: title()}),
-      new Knob('anchorCorner', {
-        defaultValue: Corner.END_START as Corner,
-        ui: selectDropdown<Corner>({
-          options: [
-            {label: Corner.START_START, value: Corner.START_START},
-            {label: Corner.START_END, value: Corner.START_END},
-            {label: Corner.END_START, value: Corner.END_START},
-            {label: Corner.END_END, value: Corner.END_END},
-          ]
-        }),
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Menu',
+  [
+    new Knob('menu', {ui: title()}),
+    new Knob('anchorCorner', {
+      defaultValue: Corner.END_START as Corner,
+      ui: selectDropdown<Corner>({
+        options: [
+          {label: Corner.START_START, value: Corner.START_START},
+          {label: Corner.START_END, value: Corner.START_END},
+          {label: Corner.END_START, value: Corner.END_START},
+          {label: Corner.END_END, value: Corner.END_END},
+        ],
       }),
-      new Knob('menuCorner', {
-        defaultValue: Corner.START_START as Corner,
-        ui: selectDropdown<Corner>({
-          options: [
-            {label: Corner.START_START, value: Corner.START_START},
-            {label: Corner.START_END, value: Corner.START_END},
-            {label: Corner.END_START, value: Corner.END_START},
-            {label: Corner.END_END, value: Corner.END_END},
-          ]
-        }),
+    }),
+    new Knob('menuCorner', {
+      defaultValue: Corner.START_START as Corner,
+      ui: selectDropdown<Corner>({
+        options: [
+          {label: Corner.START_START, value: Corner.START_START},
+          {label: Corner.START_END, value: Corner.START_END},
+          {label: Corner.END_START, value: Corner.END_START},
+          {label: Corner.END_END, value: Corner.END_END},
+        ],
       }),
-      new Knob('defaultFocus', {
-        defaultValue: FocusState.FIRST_ITEM as FocusState,
-        ui: selectDropdown<FocusState>({
-          options: [
-            {label: FocusState.FIRST_ITEM, value: FocusState.FIRST_ITEM},
-            {label: FocusState.LAST_ITEM, value: FocusState.LAST_ITEM},
-            {label: FocusState.LIST_ROOT, value: FocusState.LIST_ROOT},
-            {label: FocusState.NONE, value: FocusState.NONE},
-          ]
-        }),
+    }),
+    new Knob('defaultFocus', {
+      defaultValue: FocusState.FIRST_ITEM as FocusState,
+      ui: selectDropdown<FocusState>({
+        options: [
+          {label: FocusState.FIRST_ITEM, value: FocusState.FIRST_ITEM},
+          {label: FocusState.LAST_ITEM, value: FocusState.LAST_ITEM},
+          {label: FocusState.LIST_ROOT, value: FocusState.LIST_ROOT},
+          {label: FocusState.NONE, value: FocusState.NONE},
+        ],
       }),
-      new Knob('positioning', {
-        defaultValue: 'absolute' as const,
-        ui: selectDropdown<'absolute'|'fixed'>({
-          options: [
-            {label: 'absolute', value: 'absolute'},
-            {label: 'fixed', value: 'fixed'},
-          ]
-        })
-      }),
-      new Knob('open', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('quick', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('hasOverflow', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('stayOpenOnOutsideClick', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('stayOpenOnFocusout', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('skipRestoreFocus', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('xOffset', {
-        defaultValue: 0,
-        ui: numberInput(),
-      }),
-      new Knob('yOffset', {
-        defaultValue: 0,
-        ui: numberInput(),
-      }),
-      new Knob('typeaheadDelay', {
-        defaultValue: 200,
-        ui: numberInput(),
-      }),
-      new Knob('listTabIndex', {
-        defaultValue: -1,
-        ui: numberInput(),
+    }),
+    new Knob('positioning', {
+      defaultValue: 'absolute' as const,
+      ui: selectDropdown<'absolute' | 'fixed'>({
+        options: [
+          {label: 'absolute', value: 'absolute'},
+          {label: 'fixed', value: 'fixed'},
+        ],
       }),
+    }),
+    new Knob('open', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('quick', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('hasOverflow', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('stayOpenOnOutsideClick', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('stayOpenOnFocusout', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('skipRestoreFocus', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('xOffset', {
+      defaultValue: 0,
+      ui: numberInput(),
+    }),
+    new Knob('yOffset', {
+      defaultValue: 0,
+      ui: numberInput(),
+    }),
+    new Knob('typeaheadDelay', {
+      defaultValue: 200,
+      ui: numberInput(),
+    }),
+    new Knob('listTabIndex', {
+      defaultValue: -1,
+      ui: numberInput(),
+    }),
 
-      // menu-item knobs
-      new Knob('menu-item', {ui: title()}),
-      new Knob('keepOpen', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('disabled', {
-        defaultValue: false,
-        ui: boolInput(),
-      }),
-      new Knob('href', {
-        defaultValue: 'https://google.com',
-        ui: textInput(),
-      }),
-      new Knob('target', {
-        defaultValue: '',
-        ui: textInput(),
-      }),
-      new Knob('link icon', {
-        defaultValue: 'open_in_new',
-        ui: textInput(),
-      }),
+    // menu-item knobs
+    new Knob('menu-item', {ui: title()}),
+    new Knob('keepOpen', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('disabled', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('href', {
+      defaultValue: 'https://google.com',
+      ui: textInput(),
+    }),
+    new Knob('target', {
+      defaultValue: '',
+      ui: textInput(),
+    }),
+    new Knob('link icon', {
+      defaultValue: 'open_in_new',
+      ui: textInput(),
+    }),
 
-
-      // sub-menu knobs
-      new Knob('sub-menu', {ui: title()}),
-      new Knob('submenu.anchorCorner', {
-        defaultValue: Corner.START_END as Corner,
-        ui: selectDropdown<Corner>({
-          options: [
-            {label: Corner.START_START, value: Corner.START_START},
-            {label: Corner.START_END, value: Corner.START_END},
-            {label: Corner.END_START, value: Corner.END_START},
-            {label: Corner.END_END, value: Corner.END_END},
-          ]
-        }),
+    // sub-menu knobs
+    new Knob('sub-menu', {ui: title()}),
+    new Knob('submenu.anchorCorner', {
+      defaultValue: Corner.START_END as Corner,
+      ui: selectDropdown<Corner>({
+        options: [
+          {label: Corner.START_START, value: Corner.START_START},
+          {label: Corner.START_END, value: Corner.START_END},
+          {label: Corner.END_START, value: Corner.END_START},
+          {label: Corner.END_END, value: Corner.END_END},
+        ],
       }),
-      new Knob('submenu.menuCorner', {
-        defaultValue: Corner.START_START as Corner,
-        ui: selectDropdown<Corner>({
-          options: [
-            {label: Corner.START_START, value: Corner.START_START},
-            {label: Corner.START_END, value: Corner.START_END},
-            {label: Corner.END_START, value: Corner.END_START},
-            {label: Corner.END_END, value: Corner.END_END},
-          ]
-        }),
+    }),
+    new Knob('submenu.menuCorner', {
+      defaultValue: Corner.START_START as Corner,
+      ui: selectDropdown<Corner>({
+        options: [
+          {label: Corner.START_START, value: Corner.START_START},
+          {label: Corner.START_END, value: Corner.START_END},
+          {label: Corner.END_START, value: Corner.END_START},
+          {label: Corner.END_END, value: Corner.END_END},
+        ],
       }),
-      new Knob('hoverOpenDelay', {
-        defaultValue: 400,
-        ui: numberInput(),
-      }),
-      new Knob('hoverCloseDelay', {
-        defaultValue: 400,
-        ui: numberInput(),
-      }),
-      new Knob('submenu item icon', {
-        defaultValue: 'navigate_next',
-        ui: textInput(),
-      }),
-    ]);
+    }),
+    new Knob('hoverOpenDelay', {
+      defaultValue: 400,
+      ui: numberInput(),
+    }),
+    new Knob('hoverCloseDelay', {
+      defaultValue: 400,
+      ui: numberInput(),
+    }),
+    new Knob('submenu item icon', {
+      defaultValue: 'navigate_next',
+      ui: textInput(),
+    }),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/menu/demo/stories.ts b/menu/demo/stories.ts
index 03589ae0c..7d2f7eb2e 100644
--- a/menu/demo/stories.ts
+++ b/menu/demo/stories.ts
@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/menu/menu-item.js';
-import '@material/web/menu/sub-menu.js';
-import '@material/web/menu/menu.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/divider/divider.js';
 import '@material/web/icon/icon.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/menu/sub-menu.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {CloseMenuEvent} from '@material/web/menu/internal/controllers/shared.js';
@@ -19,10 +19,10 @@ import {css, html} from 'lit';
 /** Knob types for Menu stories. */
 export interface StoryKnobs {
   menu: void;
-  anchorCorner: Corner|undefined;
-  menuCorner: Corner|undefined;
-  defaultFocus: FocusState|undefined;
-  positioning: 'absolute'|'fixed'|undefined;
+  anchorCorner: Corner | undefined;
+  menuCorner: Corner | undefined;
+  defaultFocus: FocusState | undefined;
+  positioning: 'absolute' | 'fixed' | undefined;
   open: boolean;
   quick: boolean;
   hasOverflow: boolean;
@@ -42,8 +42,8 @@ export interface StoryKnobs {
   'link icon': string;
 
   'sub-menu': void;
-  'submenu.anchorCorner': Corner|undefined;
-  'submenu.menuCorner': Corner|undefined;
+  'submenu.anchorCorner': Corner | undefined;
+  'submenu.menuCorner': Corner | undefined;
   hoverOpenDelay: number;
   hoverCloseDelay: number;
   'submenu item icon': string;
@@ -71,7 +71,7 @@ const sharedStyle = css`
   .md-stories-bg-override {
     display: flex;
     justify-content: center;
-    width: min(700px, 80vw)
+    width: min(700px, 80vw);
   }
   .root {
     display: flex;
@@ -84,10 +84,10 @@ const sharedStyle = css`
     margin-top: 4px;
     font-family: sans-serif;
   }
-  [dir=rtl] md-icon {
+  [dir='rtl'] md-icon {
     transform: scaleX(-1);
   }
-  [slot="headline"] {
+  [slot='headline'] {
     white-space: nowrap;
   }
 `;
@@ -100,41 +100,42 @@ const standard: MaterialStoryInit<StoryKnobs> = {
       <div class="root">
         <div style="position:relative;">
           <md-filled-button
-              @click=${toggleMenu}
-              @keydown=${toggleMenu}
-              aria-haspopup="true"
-              aria-controls="menu"
-              aria-expanded="false"
-              id="button">
+            @click=${toggleMenu}
+            @keydown=${toggleMenu}
+            aria-haspopup="true"
+            aria-controls="menu"
+            aria-expanded="false"
+            id="button">
             Open Menu
           </md-filled-button>
           <md-menu
-              id="menu"
-              anchor="button"
-              tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}
-              style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}
-              .quick=${knobs.quick}
-              .hasOverflow=${knobs.hasOverflow}
-              aria-label="Menu of fruit"
-              .anchorCorner="${knobs.anchorCorner!}"
-              .menuCorner="${knobs.menuCorner!}"
-              .xOffset=${knobs.xOffset}
-              .yOffset=${knobs.yOffset}
-              .positioning=${knobs.positioning!}
-              .defaultFocus=${knobs.defaultFocus!}
-              .skipRestoreFocus=${knobs.skipRestoreFocus}
-              .typeaheadDelay=${knobs.typeaheadDelay}
-              .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
-              .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
-              @close-menu=${displayCloseEvent}
-              @closed=${setButtonAriaExpandedFalse}>
-            ${fruitNames.map((name, index) => html`
-            <md-menu-item
+            id="menu"
+            anchor="button"
+            tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}
+            style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}
+            .quick=${knobs.quick}
+            .hasOverflow=${knobs.hasOverflow}
+            aria-label="Menu of fruit"
+            .anchorCorner="${knobs.anchorCorner!}"
+            .menuCorner="${knobs.menuCorner!}"
+            .xOffset=${knobs.xOffset}
+            .yOffset=${knobs.yOffset}
+            .positioning=${knobs.positioning!}
+            .defaultFocus=${knobs.defaultFocus!}
+            .skipRestoreFocus=${knobs.skipRestoreFocus}
+            .typeaheadDelay=${knobs.typeaheadDelay}
+            .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
+            .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
+            @close-menu=${displayCloseEvent}
+            @closed=${setButtonAriaExpandedFalse}>
+            ${fruitNames.map(
+              (name, index) => html` <md-menu-item
                 id=${index}
                 .keepOpen=${knobs.keepOpen}
                 .disabled=${knobs.disabled}>
-              <div slot="headline">${name}</div>
-            </md-menu-item>`)}
+                <div slot="headline">${name}</div>
+              </md-menu-item>`,
+            )}
           </md-menu>
         </div>
         <pre class="output"></pre>
@@ -148,56 +149,56 @@ const linkable: MaterialStoryInit<StoryKnobs> = {
   styles: sharedStyle,
   render(knobs) {
     const items = fruitNames.map((name, index) => {
-      return html`
-        <md-menu-item
-            id=${index}
-            .disabled=${knobs.disabled}
-            .target=${
-          knobs.target as '' | '_blank' | '_parent' | '_self' | '_top'}
-            .href=${knobs.href}>
+      return html` <md-menu-item
+          id=${index}
+          .disabled=${knobs.disabled}
+          .target=${knobs.target as
+            | ''
+            | '_blank'
+            | '_parent'
+            | '_self'
+            | '_top'}
+          .href=${knobs.href}>
           <div slot="headline">${name}</div>
-          <md-icon slot="end">
-            ${knobs['link icon']}
-          </md-icon>
+          <md-icon slot="end"> ${knobs['link icon']} </md-icon>
         </md-menu-item>
-        ${
-          index === 2 ?
-              html`<md-divider role="separator" tabindex="-1"></md-divider>` :
-              ''}`;
+        ${index === 2
+          ? html`<md-divider role="separator" tabindex="-1"></md-divider>`
+          : ''}`;
     });
 
     return html`
       <div class="root">
         <div style="position:relative;">
           <md-filled-button
-              @click=${toggleMenu}
-              @keydown=${toggleMenu}
-              aria-haspopup="true"
-              aria-controls="menu"
-              aria-expanded="false"
-              id="button">
+            @click=${toggleMenu}
+            @keydown=${toggleMenu}
+            aria-haspopup="true"
+            aria-controls="menu"
+            aria-expanded="false"
+            id="button">
             Open Menu
           </md-filled-button>
           <md-menu
-              id="menu"
-              anchor="button"
-              tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}
-              style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}
-              .quick=${knobs.quick}
-              .hasOverflow=${knobs.hasOverflow}
-              aria-label="Menu with links"
-              .anchorCorner="${knobs.anchorCorner!}"
-              .menuCorner="${knobs.menuCorner!}"
-              .xOffset=${knobs.xOffset}
-              .yOffset=${knobs.yOffset}
-              .positioning=${knobs.positioning!}
-              .defaultFocus=${knobs.defaultFocus!}
-              .skipRestoreFocus=${knobs.skipRestoreFocus}
-              .typeaheadDelay=${knobs.typeaheadDelay}
-              .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
-              .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
-              @close-menu=${displayCloseEvent}
-              @closed=${setButtonAriaExpandedFalse}>
+            id="menu"
+            anchor="button"
+            tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}
+            style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}
+            .quick=${knobs.quick}
+            .hasOverflow=${knobs.hasOverflow}
+            aria-label="Menu with links"
+            .anchorCorner="${knobs.anchorCorner!}"
+            .menuCorner="${knobs.menuCorner!}"
+            .xOffset=${knobs.xOffset}
+            .yOffset=${knobs.yOffset}
+            .positioning=${knobs.positioning!}
+            .defaultFocus=${knobs.defaultFocus!}
+            .skipRestoreFocus=${knobs.skipRestoreFocus}
+            .typeaheadDelay=${knobs.typeaheadDelay}
+            .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
+            .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
+            @close-menu=${displayCloseEvent}
+            @closed=${setButtonAriaExpandedFalse}>
             ${items}
           </md-menu>
         </div>
@@ -214,131 +215,123 @@ const submenu: MaterialStoryInit<StoryKnobs> = {
     let currentIndex = -1;
 
     // This is the third layer with all menu items which close on selection
-    const layer2 = fruitNames.slice(4).map(name => {
+    const layer2 = fruitNames.slice(4).map((name) => {
       currentIndex++;
 
-      return html`
-        <md-menu-item
-            .keepOpen=${knobs.keepOpen}
-            .disabled=${knobs.disabled}>
-          <div slot="headline">${name}</div>
-        </md-menu-item>`;
+      return html` <md-menu-item
+        .keepOpen=${knobs.keepOpen}
+        .disabled=${knobs.disabled}>
+        <div slot="headline">${name}</div>
+      </md-menu-item>`;
     });
 
     // This is the second layer with a mix of submenu items and menu items
     const layer1 = [
-      ...fruitNames.slice(0, 2).map(name => {
+      ...fruitNames.slice(0, 2).map((name) => {
         currentIndex++;
 
-        return html`
-          <md-sub-menu
-              id=${currentIndex}
-              .anchorCorner=${knobs['submenu.anchorCorner']!}
-              .menuCorner=${knobs['submenu.menuCorner']!}
-              .hoverOpenDelay=${knobs.hoverOpenDelay}
-              .hoverCloseDelay=${knobs.hoverCloseDelay}>
-            <md-menu-item
-                slot="item"
-                id=${++currentIndex}
-                .disabled=${knobs.disabled}>
-              <div slot="headline">${name}</div>
-              <md-icon slot="end">
-                ${knobs['submenu item icon']}
-              </md-icon>
-            </md-menu-item>
-            <!-- NOTE: slot=submenu -->
-            <md-menu
-                slot="menu"
-                aria-label="Second sub-menu of fruit"
-                .xOffset=${knobs.xOffset}
-                .yOffset=${knobs.yOffset}
-                .positioning=${knobs.positioning!}
-                .defaultFocus=${knobs.defaultFocus!}
-                .typeaheadDelay=${knobs.typeaheadDelay}>
-              ${layer2}
-            </md-menu>
-          </md-sub-menu>`;
-      }),
-      ...fruitNames.slice(2, 5).map(name => {
-        currentIndex++;
-
-        return html`
+        return html` <md-sub-menu
+          id=${currentIndex}
+          .anchorCorner=${knobs['submenu.anchorCorner']!}
+          .menuCorner=${knobs['submenu.menuCorner']!}
+          .hoverOpenDelay=${knobs.hoverOpenDelay}
+          .hoverCloseDelay=${knobs.hoverCloseDelay}>
           <md-menu-item
-              id=${currentIndex}
-              .keepOpen=${knobs.keepOpen}
-              .disabled=${knobs.disabled}>
+            slot="item"
+            id=${++currentIndex}
+            .disabled=${knobs.disabled}>
             <div slot="headline">${name}</div>
-          </md-menu-item>`;
+            <md-icon slot="end"> ${knobs['submenu item icon']} </md-icon>
+          </md-menu-item>
+          <!-- NOTE: slot=submenu -->
+          <md-menu
+            slot="menu"
+            aria-label="Second sub-menu of fruit"
+            .xOffset=${knobs.xOffset}
+            .yOffset=${knobs.yOffset}
+            .positioning=${knobs.positioning!}
+            .defaultFocus=${knobs.defaultFocus!}
+            .typeaheadDelay=${knobs.typeaheadDelay}>
+            ${layer2}
+          </md-menu>
+        </md-sub-menu>`;
+      }),
+      ...fruitNames.slice(2, 5).map((name) => {
+        currentIndex++;
+
+        return html` <md-menu-item
+          id=${currentIndex}
+          .keepOpen=${knobs.keepOpen}
+          .disabled=${knobs.disabled}>
+          <div slot="headline">${name}</div>
+        </md-menu-item>`;
       }),
     ];
 
     // This is the first layer with all sub menu items
-    const layer0 = fruitNames.map(name => {
+    const layer0 = fruitNames.map((name) => {
       currentIndex++;
 
-      return html`
-        <md-sub-menu
-              id=${currentIndex}
-              .anchorCorner=${knobs['submenu.anchorCorner']!}
-              .menuCorner=${knobs['submenu.menuCorner']!}
-              .hoverOpenDelay=${knobs.hoverOpenDelay}
-              .hoverCloseDelay=${knobs.hoverCloseDelay}>
-          <md-menu-item
-              slot="item"
-              id=${++currentIndex}
-              .disabled=${knobs.disabled}>
-            <div slot="headline">${name}</div>
-            <md-icon slot="end">
-              ${knobs['submenu item icon']}
-            </md-icon>
-          </md-menu-item>
-          <!-- NOTE: slot=submenu -->
-          <md-menu
-              slot="menu"
-              aria-label="Sub-menu of fruit"
-              .xOffset=${knobs.xOffset}
-              .yOffset=${knobs.yOffset}
-              .positioning=${knobs.positioning!}
-              .defaultFocus=${knobs.defaultFocus!}
-              .typeaheadDelay=${knobs.typeaheadDelay}>
-            ${layer1}
-          </md-menu>
-        </md-sub-menu>`;
+      return html` <md-sub-menu
+        id=${currentIndex}
+        .anchorCorner=${knobs['submenu.anchorCorner']!}
+        .menuCorner=${knobs['submenu.menuCorner']!}
+        .hoverOpenDelay=${knobs.hoverOpenDelay}
+        .hoverCloseDelay=${knobs.hoverCloseDelay}>
+        <md-menu-item
+          slot="item"
+          id=${++currentIndex}
+          .disabled=${knobs.disabled}>
+          <div slot="headline">${name}</div>
+          <md-icon slot="end"> ${knobs['submenu item icon']} </md-icon>
+        </md-menu-item>
+        <!-- NOTE: slot=submenu -->
+        <md-menu
+          slot="menu"
+          aria-label="Sub-menu of fruit"
+          .xOffset=${knobs.xOffset}
+          .yOffset=${knobs.yOffset}
+          .positioning=${knobs.positioning!}
+          .defaultFocus=${knobs.defaultFocus!}
+          .typeaheadDelay=${knobs.typeaheadDelay}>
+          ${layer1}
+        </md-menu>
+      </md-sub-menu>`;
     });
 
     return html`
       <div class="root">
         <div style="position:relative;">
           <md-filled-button
-              @click=${toggleMenu}
-              @keydown=${toggleMenu}
-              aria-haspopup="true"
-              aria-controls="menu"
-              aria-expanded="false"
-              id="button">
+            @click=${toggleMenu}
+            @keydown=${toggleMenu}
+            aria-haspopup="true"
+            aria-controls="menu"
+            aria-expanded="false"
+            id="button">
             Open Menu
           </md-filled-button>
           <!-- NOTE: has-overflow -->
           <md-menu
-              anchor="button"
-              id="menu"
-              tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}
-              style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}
-              has-overflow
-              .quick=${knobs.quick}
-              aria-label="Menu of fruit"
-              .anchorCorner="${knobs.anchorCorner!}"
-              .menuCorner="${knobs.menuCorner!}"
-              .xOffset=${knobs.xOffset}
-              .yOffset=${knobs.yOffset}
-              .positioning=${knobs.positioning!}
-              .defaultFocus=${knobs.defaultFocus!}
-              .skipRestoreFocus=${knobs.skipRestoreFocus}
-              .typeaheadDelay=${knobs.typeaheadDelay}
-              .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
-              .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
-              @close-menu=${displayCloseEvent}
-              @closed=${setButtonAriaExpandedFalse}>
+            anchor="button"
+            id="menu"
+            tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}
+            style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}
+            has-overflow
+            .quick=${knobs.quick}
+            aria-label="Menu of fruit"
+            .anchorCorner="${knobs.anchorCorner!}"
+            .menuCorner="${knobs.menuCorner!}"
+            .xOffset=${knobs.xOffset}
+            .yOffset=${knobs.yOffset}
+            .positioning=${knobs.positioning!}
+            .defaultFocus=${knobs.defaultFocus!}
+            .skipRestoreFocus=${knobs.skipRestoreFocus}
+            .typeaheadDelay=${knobs.typeaheadDelay}
+            .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
+            .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
+            @close-menu=${displayCloseEvent}
+            @closed=${setButtonAriaExpandedFalse}>
             ${layer0}
           </md-menu>
         </div>
@@ -351,7 +344,8 @@ const submenu: MaterialStoryInit<StoryKnobs> = {
 const menuWithoutButton: MaterialStoryInit<StoryKnobs> = {
   name: 'Menu without button',
   styles: [
-    sharedStyle, css`
+    sharedStyle,
+    css`
       #anchor {
         display: block;
         border: 1px solid var(--md-sys-color-on-background);
@@ -361,41 +355,42 @@ const menuWithoutButton: MaterialStoryInit<StoryKnobs> = {
       #storyWrapper {
         display: flex;
         justify-content: center;
-        width: min(700px, 80vw)
+        width: min(700px, 80vw);
       }
-    `
+    `,
   ],
   render(knobs) {
     return html`
       <div class="root" style="position:relative;">
-        <div id="anchor">
-          This is the anchor (use the "open" knob)
-        </div>
-        <md-menu slot="menu"
-            anchor="anchor"
-            .open=${knobs.open}
-            .quick=${knobs.quick}
-            .hasOverflow=${knobs.hasOverflow}
-            aria-label="Menu of fruit"
-            .anchorCorner="${knobs.anchorCorner!}"
-            .menuCorner="${knobs.menuCorner!}"
-            .xOffset=${knobs.xOffset}
-            .yOffset=${knobs.yOffset}
-            .positioning=${knobs.positioning!}
-            .defaultFocus=${knobs.defaultFocus!}
-            .skipRestoreFocus=${knobs.skipRestoreFocus}
-            .typeaheadDelay=${knobs.typeaheadDelay}
-            .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
-            .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
-            @close-menu=${displayCloseEvent}>
-          ${fruitNames.map((name, index) => html`
-            <md-menu-item
+        <div id="anchor"> This is the anchor (use the "open" knob) </div>
+        <md-menu
+          slot="menu"
+          anchor="anchor"
+          .open=${knobs.open}
+          .quick=${knobs.quick}
+          .hasOverflow=${knobs.hasOverflow}
+          aria-label="Menu of fruit"
+          .anchorCorner="${knobs.anchorCorner!}"
+          .menuCorner="${knobs.menuCorner!}"
+          .xOffset=${knobs.xOffset}
+          .yOffset=${knobs.yOffset}
+          .positioning=${knobs.positioning!}
+          .defaultFocus=${knobs.defaultFocus!}
+          .skipRestoreFocus=${knobs.skipRestoreFocus}
+          .typeaheadDelay=${knobs.typeaheadDelay}
+          .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}
+          .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}
+          @close-menu=${displayCloseEvent}>
+          ${fruitNames.map(
+            (name, index) => html`
+              <md-menu-item
                 id=${index}
                 .keepOpen=${knobs.keepOpen}
                 .disabled=${knobs.disabled}>
-              <div slot="headline">${name}</div>
-            </md-menu-item>
-            `)}
+                <div slot="headline">${name}</div>
+              </md-menu-item>
+            `,
+          )}
         </md-menu>
         <pre class="output"></pre>
       </div>
@@ -410,16 +405,17 @@ const menuWithoutButton: MaterialStoryInit<StoryKnobs> = {
  * attempts to find a menu button with `#button` set on it and sets
  * aria-expanded=true.
  */
-function toggleMenu(event: Event|KeyboardEvent) {
+function toggleMenu(event: Event | KeyboardEvent) {
   // get the menu from the event
-  const root = ((event.target as HTMLElement).getRootNode() as ShadowRoot);
+  const root = (event.target as HTMLElement).getRootNode() as ShadowRoot;
   const menu = root.querySelector('#menu') as MdMenu;
 
   // determine if is keyboard event
-  const isKeyboardEvent =
-      (event: KeyboardEvent|Event): event is KeyboardEvent => {
-        return (event as KeyboardEvent).key !== undefined;
-      };
+  const isKeyboardEvent = (
+    event: KeyboardEvent | Event,
+  ): event is KeyboardEvent => {
+    return (event as KeyboardEvent).key !== undefined;
+  };
   const isKeyboard = isKeyboardEvent(event);
 
   // if is a click, open the menu
@@ -444,12 +440,12 @@ function displayCloseEvent(event: CloseMenuEvent) {
   const root = (event.target as HTMLElement).getRootNode() as ShadowRoot;
   const outputEl = root.querySelector('.output') as HTMLElement;
 
-  const stringifyItem = (menuItem: MenuItem&HTMLElement) => {
+  const stringifyItem = (menuItem: MenuItem & HTMLElement) => {
     const tagName = menuItem.tagName.toLowerCase();
     const headline = menuItem.typeaheadText;
     return `${tagName}${
-        menuItem.id ? `[id="${menuItem.id}"]` :
-                      ''} > [slot="headline"] > ${headline}`;
+      menuItem.id ? `[id="${menuItem.id}"]` : ''
+    } > [slot="headline"] > ${headline}`;
   };
 
   // display the event's details in the inner text of that output element
@@ -459,7 +455,7 @@ function displayCloseEvent(event: CloseMenuEvent) {
   detail: {
     initiator: ${stringifyItem(event.detail.initiator)},
     itemPath: [
-      ${event.detail.itemPath.map(item => stringifyItem(item)).join(`,
+      ${event.detail.itemPath.map((item) => stringifyItem(item)).join(`,
       `)}
     ],
   },
diff --git a/menu/harness.ts b/menu/harness.ts
index 30f5ec085..d817e9a7c 100644
--- a/menu/harness.ts
+++ b/menu/harness.ts
@@ -28,7 +28,8 @@ export class MenuHarness extends Harness<Menu> {
   /** @return ListItem harnesses for the menu's items. */
   getItems() {
     return this.element.items.map(
-        (item) => new MenuItemHarness(item as typeof item&LitElement));
+      (item) => new MenuItemHarness(item as typeof item & LitElement),
+    );
   }
 
   async show() {
@@ -38,9 +39,13 @@ export class MenuHarness extends Harness<Menu> {
     }
 
     const opened = new Promise((resolve) => {
-      menu.addEventListener('opened', () => {
-        resolve(true);
-      }, {once: true});
+      menu.addEventListener(
+        'opened',
+        () => {
+          resolve(true);
+        },
+        {once: true},
+      );
     });
 
     menu.show();
diff --git a/menu/internal/controllers/menuItemController.ts b/menu/internal/controllers/menuItemController.ts
index 9449c2f59..900b521df 100644
--- a/menu/internal/controllers/menuItemController.ts
+++ b/menu/internal/controllers/menuItemController.ts
@@ -6,7 +6,11 @@
 
 import {ReactiveController, ReactiveControllerHost} from 'lit';
 
-import {CloseReason, createDefaultCloseMenuEvent, isClosableKey} from './shared.js';
+import {
+  CloseReason,
+  createDefaultCloseMenuEvent,
+  isClosableKey,
+} from './shared.js';
 
 /**
  * Interface specific to menu item and not HTMLElement.
@@ -52,12 +56,12 @@ interface MenuItemAdditions {
  *
  * NOTE, the required properties are recommended to be reactive properties.
  */
-export type MenuItem = MenuItemAdditions&HTMLElement;
+export type MenuItem = MenuItemAdditions & HTMLElement;
 
 /**
  * Supported behaviors for a menu item.
  */
-export type MenuItemType = 'menuitem'|'option'|'button'|'link';
+export type MenuItemType = 'menuitem' | 'option' | 'button' | 'link';
 
 /**
  * The options used to inialize MenuItemController.
@@ -81,23 +85,19 @@ export interface MenuItemControllerConfig {
  * the MenuItem interface.
  */
 export class MenuItemController implements ReactiveController {
-  private internalTypeaheadText: string|null = null;
-  private readonly getHeadlineElements:
-      MenuItemControllerConfig['getHeadlineElements'];
-  private readonly getInteractiveElement:
-      MenuItemControllerConfig['getInteractiveElement'];
+  private internalTypeaheadText: string | null = null;
+  private readonly getHeadlineElements: MenuItemControllerConfig['getHeadlineElements'];
+  private readonly getInteractiveElement: MenuItemControllerConfig['getInteractiveElement'];
 
   /**
    * @param host The MenuItem in which to attach this controller to.
    * @param config The object that configures this controller's behavior.
    */
   constructor(
-      private readonly host: ReactiveControllerHost&MenuItem,
-      config: MenuItemControllerConfig) {
-    const {
-      getHeadlineElements,
-      getInteractiveElement,
-    } = config;
+    private readonly host: ReactiveControllerHost & MenuItem,
+    config: MenuItemControllerConfig,
+  ) {
+    const {getHeadlineElements, getInteractiveElement} = config;
     this.getHeadlineElements = getHeadlineElements;
     this.getInteractiveElement = getInteractiveElement;
     this.host.addController(this);
@@ -166,8 +166,11 @@ export class MenuItemController implements ReactiveController {
   onClick = () => {
     if (this.host.keepOpen) return;
 
-    this.host.dispatchEvent(createDefaultCloseMenuEvent(
-        this.host, {kind: CloseReason.CLICK_SELECTION}));
+    this.host.dispatchEvent(
+      createDefaultCloseMenuEvent(this.host, {
+        kind: CloseReason.CLICK_SELECTION,
+      }),
+    );
   };
 
   /**
@@ -188,8 +191,12 @@ export class MenuItemController implements ReactiveController {
 
     if (!event.defaultPrevented && isClosableKey(keyCode)) {
       event.preventDefault();
-      this.host.dispatchEvent(createDefaultCloseMenuEvent(
-          this.host, {kind: CloseReason.KEYDOWN, key: keyCode}));
+      this.host.dispatchEvent(
+        createDefaultCloseMenuEvent(this.host, {
+          kind: CloseReason.KEYDOWN,
+          key: keyCode,
+        }),
+      );
     }
   };
 
@@ -199,4 +206,4 @@ export class MenuItemController implements ReactiveController {
   setTypeaheadText(text: string) {
     this.internalTypeaheadText = text;
   }
-}
\ No newline at end of file
+}
diff --git a/menu/internal/controllers/shared.ts b/menu/internal/controllers/shared.ts
index d67be3089..9bbe93163 100644
--- a/menu/internal/controllers/shared.ts
+++ b/menu/internal/controllers/shared.ts
@@ -50,7 +50,7 @@ export interface MenuSelf {
   /**
    * The element the menu should anchor to.
    */
-  anchorElement: (HTMLElement&Partial<SurfacePositionTarget>)|null;
+  anchorElement: (HTMLElement & Partial<SurfacePositionTarget>) | null;
   /**
    * What the menu should focus by default when opened.
    */
@@ -73,7 +73,7 @@ export interface MenuSelf {
  * The interface needed for a Menu to work with other md-menu elements. Useful
  * for keeping your types safe when wrapping `md-menu`.
  */
-export type Menu = MenuSelf&LitElement;
+export type Menu = MenuSelf & LitElement;
 
 /**
  * The reason the `close-menu` event was dispatched.
@@ -103,18 +103,23 @@ export interface KeydownReason extends Reason {
 /**
  * The default menu closing reasons for the material md-menu package.
  */
-export type DefaultReasons = ClickReason|KeydownReason;
+export type DefaultReasons = ClickReason | KeydownReason;
 
 /**
  * Creates an event that closes any parent menus.
  */
 export function createCloseMenuEvent<T extends Reason = DefaultReasons>(
-    initiator: MenuItem, reason: T) {
-  return new CustomEvent<
-      {initiator: MenuItem, itemPath: MenuItem[], reason: T}>('close-menu', {
+  initiator: MenuItem,
+  reason: T,
+) {
+  return new CustomEvent<{
+    initiator: MenuItem;
+    itemPath: MenuItem[];
+    reason: T;
+  }>('close-menu', {
     bubbles: true,
     composed: true,
-    detail: {initiator, reason, itemPath: [initiator]}
+    detail: {initiator, reason, itemPath: [initiator]},
   });
 }
 
@@ -143,8 +148,9 @@ export const createDefaultCloseMenuEvent = createCloseMenuEvent<DefaultReasons>;
  * The type of the default close menu event used by md-menu.
  */
 // tslint:disable-next-line
-export type CloseMenuEvent<T extends Reason = DefaultReasons> =
-    ReturnType<typeof createCloseMenuEvent<T>>;
+export type CloseMenuEvent<T extends Reason = DefaultReasons> = ReturnType<
+  typeof createCloseMenuEvent<T>
+>;
 
 /**
  * Creates an event that requests the given item be selected.
@@ -157,8 +163,9 @@ export function createDeactivateTypeaheadEvent() {
  * The type of the event that requests the typeahead functionality of containing
  * menu be deactivated.
  */
-export type DeactivateTypeaheadEvent =
-    ReturnType<typeof createDeactivateTypeaheadEvent>;
+export type DeactivateTypeaheadEvent = ReturnType<
+  typeof createDeactivateTypeaheadEvent
+>;
 
 /**
  * Creates an event that requests the typeahead functionality of containing menu
@@ -172,8 +179,9 @@ export function createActivateTypeaheadEvent() {
  * The type of the event that requests the typeahead functionality of containing
  * menu be activated.
  */
-export type ActivateTypeaheadEvent =
-    ReturnType<typeof createActivateTypeaheadEvent>;
+export type ActivateTypeaheadEvent = ReturnType<
+  typeof createActivateTypeaheadEvent
+>;
 
 /**
  * Keys that are used to navigate menus.
@@ -224,9 +232,10 @@ type Values<T> = T[keyof T];
  * @return Whether or not the key code is in the predetermined list to close the
  * menu.
  */
-export function isClosableKey(code: string):
-    code is Values<typeof KeydownCloseKey> {
-  return Object.values(KeydownCloseKey).some(value => (value === code));
+export function isClosableKey(
+  code: string,
+): code is Values<typeof KeydownCloseKey> {
+  return Object.values(KeydownCloseKey).some((value) => value === code);
 }
 
 /**
@@ -237,9 +246,10 @@ export function isClosableKey(code: string):
  * @return Whether or not the key code is in the predetermined list to select a
  * menu item.
  */
-export function isSelectableKey(code: string):
-    code is Values<typeof SelectionKey> {
-  return Object.values(SelectionKey).some(value => (value === code));
+export function isSelectableKey(
+  code: string,
+): code is Values<typeof SelectionKey> {
+  return Object.values(SelectionKey).some((value) => value === code);
 }
 
 /**
@@ -252,7 +262,9 @@ export function isSelectableKey(code: string):
  * composed subtree
  */
 export function isElementInSubtree(
-    target: EventTarget, container: EventTarget) {
+  target: EventTarget,
+  container: EventTarget,
+) {
   // Dispatch a composed, bubbling event to check its path to see if the
   // newly-focused element is contained in container's subtree
   const focusEv = new Event('md-contains', {bubbles: true, composed: true});
@@ -277,10 +289,10 @@ export const FocusState = {
   NONE: 'none',
   LIST_ROOT: 'list-root',
   FIRST_ITEM: 'first-item',
-  LAST_ITEM: 'last-item'
+  LAST_ITEM: 'last-item',
 } as const;
 
 /**
  * Element to focus on when menu is first opened.
  */
-export type FocusState = typeof FocusState[keyof typeof FocusState];
\ No newline at end of file
+export type FocusState = (typeof FocusState)[keyof typeof FocusState];
diff --git a/menu/internal/controllers/surfacePositionController.ts b/menu/internal/controllers/surfacePositionController.ts
index ff4675534..96d00c2b8 100644
--- a/menu/internal/controllers/surfacePositionController.ts
+++ b/menu/internal/controllers/surfacePositionController.ts
@@ -21,7 +21,7 @@ export const Corner = {
 /**
  * A corner of a box in the standard logical property style of <block>_<inline>
  */
-export type Corner = typeof Corner[keyof typeof Corner];
+export type Corner = (typeof Corner)[keyof typeof Corner];
 
 /**
  * An interface that provides a method to customize the rect from which to
@@ -47,11 +47,11 @@ export interface SurfacePositionControllerProperties {
   /**
    * The HTMLElement reference of the surface to be positioned.
    */
-  surfaceEl: SurfacePositionTarget|null;
+  surfaceEl: SurfacePositionTarget | null;
   /**
    * The HTMLElement reference of the anchor to align to.
    */
-  anchorEl: SurfacePositionTarget|null;
+  anchorEl: SurfacePositionTarget | null;
   /**
    * Whether the positioning algorithim should calculate relative to the parent
    * of the anchor element (absolute) or relative to the window (fixed).
@@ -65,7 +65,7 @@ export interface SurfacePositionControllerProperties {
    * - The anchor and the surface do not share a common `position:relative`
    *   ancestor
    */
-  positioning: 'absolute'|'fixed';
+  positioning: 'absolute' | 'fixed';
   /**
    * Whether or not the surface should be "open" and visible
    */
@@ -90,7 +90,7 @@ export interface SurfacePositionControllerProperties {
    *
    * Both strategies will still attempt to flip the anchor and surface corners.
    */
-  repositionStrategy: 'move'|'resize';
+  repositionStrategy: 'move' | 'resize';
   /**
    * A function to call after the surface has been positioned.
    */
@@ -119,8 +119,9 @@ export class SurfacePositionController implements ReactiveController {
   };
   // Previous values stored for change detection. Open change detection is
   // calculated separately so initialize it here.
-  private lastValues: SurfacePositionControllerProperties = {isOpen: false} as
-      SurfacePositionControllerProperties;
+  private lastValues: SurfacePositionControllerProperties = {
+    isOpen: false,
+  } as SurfacePositionControllerProperties;
 
   /**
    * @param host The host to connect the controller to.
@@ -128,8 +129,8 @@ export class SurfacePositionController implements ReactiveController {
    * controller.
    */
   constructor(
-      private readonly host: ReactiveControllerHost,
-      private readonly getProperties: () => SurfacePositionControllerProperties,
+    private readonly host: ReactiveControllerHost,
+    private readonly getProperties: () => SurfacePositionControllerProperties,
   ) {
     this.host.addController(this);
   }
@@ -181,20 +182,22 @@ export class SurfacePositionController implements ReactiveController {
     this.host.requestUpdate();
     await this.host.updateComplete;
 
-    const surfaceRect = surfaceEl.getSurfacePositionClientRect ?
-        surfaceEl.getSurfacePositionClientRect() :
-        surfaceEl.getBoundingClientRect();
-    const anchorRect = anchorEl.getSurfacePositionClientRect ?
-        anchorEl.getSurfacePositionClientRect() :
-        anchorEl.getBoundingClientRect();
-    const [surfaceBlock, surfaceInline] =
-        surfaceCorner.split('-') as Array<'start'|'end'>;
-    const [anchorBlock, anchorInline] =
-        anchorCorner.split('-') as Array<'start'|'end'>;
+    const surfaceRect = surfaceEl.getSurfacePositionClientRect
+      ? surfaceEl.getSurfacePositionClientRect()
+      : surfaceEl.getBoundingClientRect();
+    const anchorRect = anchorEl.getSurfacePositionClientRect
+      ? anchorEl.getSurfacePositionClientRect()
+      : anchorEl.getBoundingClientRect();
+    const [surfaceBlock, surfaceInline] = surfaceCorner.split('-') as Array<
+      'start' | 'end'
+    >;
+    const [anchorBlock, anchorInline] = anchorCorner.split('-') as Array<
+      'start' | 'end'
+    >;
 
     // LTR depends on the direction of the SURFACE not the anchor.
     const isLTR =
-        getComputedStyle(surfaceEl as HTMLElement).direction === 'ltr';
+      getComputedStyle(surfaceEl as HTMLElement).direction === 'ltr';
 
     /*
      * A diagram that helps describe some of the variables used in the following
@@ -230,15 +233,15 @@ export class SurfacePositionController implements ReactiveController {
 
     // Calculate the block positioning properties
     let {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty} =
-        this.calculateBlock({
-          surfaceRect,
-          anchorRect,
-          anchorBlock,
-          surfaceBlock,
-          yOffset,
-          positioning,
-          windowInnerHeight,
-        });
+      this.calculateBlock({
+        surfaceRect,
+        anchorRect,
+        anchorBlock,
+        surfaceBlock,
+        yOffset,
+        positioning,
+        windowInnerHeight,
+      });
 
     // If the surface should be out of bounds in the block direction, flip the
     // surface and anchor corner block values and recalculate
@@ -258,8 +261,9 @@ export class SurfacePositionController implements ReactiveController {
 
       // In the case that the flipped verion would require less out of bounds
       // correcting, use the flipped corner block values
-      if (blockOutOfBoundsCorrection >
-          flippedBlock.blockOutOfBoundsCorrection) {
+      if (
+        blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection
+      ) {
         blockInset = flippedBlock.blockInset;
         blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection;
         surfaceBlockProperty = flippedBlock.surfaceBlockProperty;
@@ -268,16 +272,16 @@ export class SurfacePositionController implements ReactiveController {
 
     // Calculate the inline positioning properties
     let {inlineInset, inlineOutOfBoundsCorrection, surfaceInlineProperty} =
-        this.calculateInline({
-          surfaceRect,
-          anchorRect,
-          anchorInline,
-          surfaceInline,
-          xOffset,
-          positioning,
-          isLTR,
-          windowInnerWidth,
-        });
+      this.calculateInline({
+        surfaceRect,
+        anchorRect,
+        anchorInline,
+        surfaceInline,
+        xOffset,
+        positioning,
+        isLTR,
+        windowInnerWidth,
+      });
 
     // If the surface should be out of bounds in the inline direction, flip the
     // surface and anchor corner inline values and recalculate
@@ -298,8 +302,10 @@ export class SurfacePositionController implements ReactiveController {
 
       // In the case that the flipped verion would require less out of bounds
       // correcting, use the flipped corner inline values
-      if (Math.abs(inlineOutOfBoundsCorrection) >
-          Math.abs(flippedInline.inlineOutOfBoundsCorrection)) {
+      if (
+        Math.abs(inlineOutOfBoundsCorrection) >
+        Math.abs(flippedInline.inlineOutOfBoundsCorrection)
+      ) {
         inlineInset = flippedInline.inlineInset;
         inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection;
         surfaceInlineProperty = flippedInline.surfaceInlineProperty;
@@ -325,14 +331,16 @@ export class SurfacePositionController implements ReactiveController {
     if (repositionStrategy === 'resize') {
       // Add a height property to the styles if there is block height correction
       if (blockOutOfBoundsCorrection) {
-        this.surfaceStylesInternal['height'] =
-            `${surfaceRect.height - blockOutOfBoundsCorrection}px`;
+        this.surfaceStylesInternal['height'] = `${
+          surfaceRect.height - blockOutOfBoundsCorrection
+        }px`;
       }
 
       // Add a width property to the styles if there is block height correction
       if (inlineOutOfBoundsCorrection) {
-        this.surfaceStylesInternal['width'] =
-            `${surfaceRect.width - inlineOutOfBoundsCorrection}px`;
+        this.surfaceStylesInternal['width'] = `${
+          surfaceRect.width - inlineOutOfBoundsCorrection
+        }px`;
       }
     }
 
@@ -344,13 +352,13 @@ export class SurfacePositionController implements ReactiveController {
    * for the surface in the block direction.
    */
   private calculateBlock(config: {
-    surfaceRect: DOMRect,
-    anchorRect: DOMRect,
-    anchorBlock: 'start'|'end',
-    surfaceBlock: 'start'|'end',
-    yOffset: number,
-    positioning: 'absolute'|'fixed',
-    windowInnerHeight: number,
+    surfaceRect: DOMRect;
+    anchorRect: DOMRect;
+    anchorBlock: 'start' | 'end';
+    surfaceBlock: 'start' | 'end';
+    yOffset: number;
+    positioning: 'absolute' | 'fixed';
+    windowInnerHeight: number;
   }) {
     const {
       surfaceRect,
@@ -371,22 +379,27 @@ export class SurfacePositionController implements ReactiveController {
     // Whether or not to apply the height of the anchor
     const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset;
     // The absolute block position of the anchor relative to window
-    const blockTopLayerOffset = isSurfaceBlockStart * anchorRect.top +
-        isSurfaceBlockEnd * (windowInnerHeight - anchorRect.bottom);
+    const blockTopLayerOffset =
+      isSurfaceBlockStart * anchorRect.top +
+      isSurfaceBlockEnd * (windowInnerHeight - anchorRect.bottom);
     // If the surface's block would be out of bounds of the window, move it back
     // in
-    const blockOutOfBoundsCorrection = Math.abs(Math.min(
+    const blockOutOfBoundsCorrection = Math.abs(
+      Math.min(
         0,
-        windowInnerHeight - blockTopLayerOffset - blockAnchorOffset -
-            surfaceRect.height));
-
+        windowInnerHeight -
+          blockTopLayerOffset -
+          blockAnchorOffset -
+          surfaceRect.height,
+      ),
+    );
 
     // The block logical value of the surface
     const blockInset =
-        relativeToWindow * blockTopLayerOffset + blockAnchorOffset;
+      relativeToWindow * blockTopLayerOffset + blockAnchorOffset;
 
     const surfaceBlockProperty =
-        surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';
+      surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';
 
     return {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty};
   }
@@ -396,14 +409,14 @@ export class SurfacePositionController implements ReactiveController {
    * for the surface in the inline direction.
    */
   private calculateInline(config: {
-    isLTR: boolean,
-    surfaceInline: 'start'|'end',
-    anchorInline: 'start'|'end',
-    anchorRect: DOMRect,
-    surfaceRect: DOMRect,
-    xOffset: number,
-    positioning: 'absolute'|'fixed',
-    windowInnerWidth: number,
+    isLTR: boolean;
+    surfaceInline: 'start' | 'end';
+    anchorInline: 'start' | 'end';
+    anchorRect: DOMRect;
+    surfaceRect: DOMRect;
+    xOffset: number;
+    positioning: 'absolute' | 'fixed';
+    windowInnerWidth: number;
   }) {
     const {
       isLTR: isLTRBool,
@@ -427,30 +440,35 @@ export class SurfacePositionController implements ReactiveController {
     // Whether or not to apply the width of the anchor
     const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset;
     // The inline position of the anchor relative to window in LTR
-    const inlineTopLayerOffsetLTR = isSurfaceInlineStart * anchorRect.left +
-        isSurfaceInlineEnd * (windowInnerWidth - anchorRect.right);
+    const inlineTopLayerOffsetLTR =
+      isSurfaceInlineStart * anchorRect.left +
+      isSurfaceInlineEnd * (windowInnerWidth - anchorRect.right);
     // The inline position of the anchor relative to window in RTL
     const inlineTopLayerOffsetRTL =
-        isSurfaceInlineStart * (windowInnerWidth - anchorRect.right) +
-        isSurfaceInlineEnd * anchorRect.left;
+      isSurfaceInlineStart * (windowInnerWidth - anchorRect.right) +
+      isSurfaceInlineEnd * anchorRect.left;
     // The inline position of the anchor relative to window
     const inlineTopLayerOffset =
-        isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;
+      isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;
 
     // If the surface's inline would be out of bounds of the window, move it
     // back in
-    const inlineOutOfBoundsCorrection = Math.abs(Math.min(
+    const inlineOutOfBoundsCorrection = Math.abs(
+      Math.min(
         0,
-        windowInnerWidth - inlineTopLayerOffset - inlineAnchorOffset -
-            surfaceRect.width));
-
+        windowInnerWidth -
+          inlineTopLayerOffset -
+          inlineAnchorOffset -
+          surfaceRect.width,
+      ),
+    );
 
     // The inline logical value of the surface
     const inlineInset =
-        relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset;
+      relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset;
 
     const surfaceInlineProperty =
-        surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';
+      surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';
 
     return {
       inlineInset,
@@ -477,7 +495,7 @@ export class SurfacePositionController implements ReactiveController {
     let hasChanged = false;
     for (const [key, value] of Object.entries(props)) {
       // tslint:disable-next-line
-      hasChanged = hasChanged || (value !== (this.lastValues as any)[key]);
+      hasChanged = hasChanged || value !== (this.lastValues as any)[key];
       if (hasChanged) break;
     }
 
diff --git a/menu/internal/controllers/typeaheadController.ts b/menu/internal/controllers/typeaheadController.ts
index 09d87d958..046de48b0 100644
--- a/menu/internal/controllers/typeaheadController.ts
+++ b/menu/internal/controllers/typeaheadController.ts
@@ -90,7 +90,7 @@ export class TypeaheadController {
   /**
    * The record of the last active item.
    */
-  lastActiveRecord: TypeaheadRecord|null = null;
+  lastActiveRecord: TypeaheadRecord | null = null;
 
   /**
    * @param getProperties A function that returns the options of the typeahead
@@ -103,7 +103,7 @@ export class TypeaheadController {
    * }
    */
   constructor(
-      private readonly getProperties: () => TypeaheadControllerProperties,
+    private readonly getProperties: () => TypeaheadControllerProperties,
   ) {}
 
   private get items() {
@@ -139,20 +139,27 @@ export class TypeaheadController {
     // We don't want to typeahead if the _beginning_ of the typeahead is a menu
     // navigation, or a selection. We will handle "Space" only if it's in the
     // middle of a typeahead
-    if (event.code === 'Space' || event.code === 'Enter' ||
-        event.code.startsWith('Arrow') || event.code === 'Escape') {
+    if (
+      event.code === 'Space' ||
+      event.code === 'Enter' ||
+      event.code.startsWith('Arrow') ||
+      event.code === 'Escape'
+    ) {
       return;
     }
 
     this.isTypingAhead = true;
     // Generates the record array data structure which is the index, the element
     // and a normalized header.
-    this.typeaheadRecords = this.items.map(
-        (el, index) => [index, el, el.typeaheadText.trim().toLowerCase()]);
+    this.typeaheadRecords = this.items.map((el, index) => [
+      index,
+      el,
+      el.typeaheadText.trim().toLowerCase(),
+    ]);
     this.lastActiveRecord =
-        this.typeaheadRecords.find(
-            record => (record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0)) ??
-        null;
+      this.typeaheadRecords.find(
+        (record) => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0,
+      ) ?? null;
     if (this.lastActiveRecord) {
       this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
     }
@@ -200,8 +207,11 @@ export class TypeaheadController {
     clearTimeout(this.cancelTypeaheadTimeout);
     // Stop typingahead if one of the navigation or selection keys (except for
     // Space) are pressed
-    if (event.code === 'Enter' || event.code.startsWith('Arrow') ||
-        event.code === 'Escape') {
+    if (
+      event.code === 'Enter' ||
+      event.code.startsWith('Arrow') ||
+      event.code === 'Escape'
+    ) {
       this.endTypeahead();
       if (this.lastActiveRecord) {
         this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
@@ -215,14 +225,16 @@ export class TypeaheadController {
     }
 
     // Start up a new keystroke buffer timeout
-    this.cancelTypeaheadTimeout =
-        setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
+    this.cancelTypeaheadTimeout = setTimeout(
+      this.endTypeahead,
+      this.getProperties().typeaheadBufferTime,
+    );
 
     this.typaheadBuffer += event.key.toLowerCase();
 
-    const lastActiveIndex = this.lastActiveRecord ?
-        this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :
-        -1;
+    const lastActiveIndex = this.lastActiveRecord
+      ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]
+      : -1;
     const numRecords = this.typeaheadRecords.length;
 
     /**
@@ -248,18 +260,20 @@ export class TypeaheadController {
      * 5: [2, <reference>, 'banana']
      */
     const rebaseIndexOnActive = (record: TypeaheadRecord) => {
-      return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
-          numRecords;
+      return (
+        (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
+        numRecords
+      );
     };
 
     // records filtered and sorted / rebased around the last active index
-    const matchingRecords =
-        this.typeaheadRecords
-            .filter(
-                record => !record[TYPEAHEAD_RECORD.ITEM].disabled &&
-                    record[TYPEAHEAD_RECORD.TEXT].startsWith(
-                        this.typaheadBuffer))
-            .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));
+    const matchingRecords = this.typeaheadRecords
+      .filter(
+        (record) =>
+          !record[TYPEAHEAD_RECORD.ITEM].disabled &&
+          record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer),
+      )
+      .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));
 
     // Just leave if there's nothing that matches. Native select will just
     // choose the first thing that starts with the next letter in the alphabet
diff --git a/menu/internal/menu.ts b/menu/internal/menu.ts
index 49ea2de9e..a50015f4d 100644
--- a/menu/internal/menu.ts
+++ b/menu/internal/menu.ts
@@ -4,22 +4,42 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../focus/md-focus-ring.js';
 import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
 
 import {html, isServer, LitElement, PropertyValues} from 'lit';
 import {property, query, queryAssignedElements, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
 
-import {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';
+import {
+  polyfillElementInternalsAria,
+  setupHostAria,
+} from '../../internal/aria/aria.js';
 import {createAnimationSignal, EASING} from '../../internal/motion/animation.js';
-import {ListController, NavigableKeys} from '../../list/internal/list-controller.js';
-import {getActiveItem, getFirstActivatableItem, getLastActivatableItem} from '../../list/internal/list-navigation-helpers.js';
+import {
+  ListController,
+  NavigableKeys,
+} from '../../list/internal/list-controller.js';
+import {
+  getActiveItem,
+  getFirstActivatableItem,
+  getLastActivatableItem,
+} from '../../list/internal/list-navigation-helpers.js';
 
 import {MenuItem} from './controllers/menuItemController.js';
-import {ActivateTypeaheadEvent, DeactivateTypeaheadEvent, FocusState, isClosableKey, isElementInSubtree} from './controllers/shared.js';
-import {Corner, SurfacePositionController, SurfacePositionTarget} from './controllers/surfacePositionController.js';
+import {
+  ActivateTypeaheadEvent,
+  DeactivateTypeaheadEvent,
+  FocusState,
+  isClosableKey,
+  isElementInSubtree,
+} from './controllers/shared.js';
+import {
+  Corner,
+  SurfacePositionController,
+  SurfacePositionTarget,
+} from './controllers/surfacePositionController.js';
 import {TypeaheadController} from './controllers/typeaheadController.js';
 
 export {Corner} from './controllers/surfacePositionController.js';
@@ -49,8 +69,9 @@ const menuNavKeys = new Set<string>([
  *    Defaults to `window.document`
  * @return Returns the currently deeply focused element or `null` if none.
  */
-function getFocusedElement(activeDoc: Document|ShadowRoot = document):
-    HTMLElement|null {
+function getFocusedElement(
+  activeDoc: Document | ShadowRoot = document,
+): HTMLElement | null {
   let activeEl = activeDoc.activeElement as HTMLElement | null;
 
   // Check for activeElement in the case that an element with a shadow root host
@@ -74,8 +95,8 @@ export abstract class Menu extends LitElement {
     setupHostAria(Menu, {focusable: false});
   }
 
-  @query('.menu') private readonly surfaceEl!: HTMLElement|null;
-  @query('slot') private readonly slotEl!: HTMLSlotElement|null;
+  @query('.menu') private readonly surfaceEl!: HTMLElement | null;
+  @query('slot') private readonly slotEl!: HTMLSlotElement | null;
 
   /**
    * The ID of the element in the same root node in which the menu should align
@@ -105,7 +126,7 @@ export abstract class Menu extends LitElement {
    * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
    * the window instead.
    */
-  @property() positioning: 'absolute'|'fixed' = 'absolute';
+  @property() positioning: 'absolute' | 'fixed' = 'absolute';
   /**
    * Skips the opening and closing animations.
    */
@@ -216,44 +237,42 @@ export abstract class Menu extends LitElement {
       return maybeItem.hasAttribute('md-menu-item');
     },
     getPossibleItems: () => this.slotItems,
-    isRtl: () => (getComputedStyle(this).direction === 'rtl'),
-    deactivateItem:
-        (item: MenuItem) => {
-          item.selected = false;
-          item.tabIndex = -1;
-        },
-    activateItem:
-        (item: MenuItem) => {
-          item.selected = true;
-          item.tabIndex = 0;
-        },
-    isNavigableKey:
-        (key: string) => {
-          if (!this.isSubmenu) {
-            return menuNavKeys.has(key);
-          }
+    isRtl: () => getComputedStyle(this).direction === 'rtl',
+    deactivateItem: (item: MenuItem) => {
+      item.selected = false;
+      item.tabIndex = -1;
+    },
+    activateItem: (item: MenuItem) => {
+      item.selected = true;
+      item.tabIndex = 0;
+    },
+    isNavigableKey: (key: string) => {
+      if (!this.isSubmenu) {
+        return menuNavKeys.has(key);
+      }
 
-          const isRtl = getComputedStyle(this).direction === 'rtl';
-          // we want md-submenu to handle the submenu's left/right arrow exit
-          // key so it can close the menu instead of navigate the list.
-          // Therefore we need to include all keys but left/right arrow close
-          // key
-          const arrowOpen =
-              isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;
+      const isRtl = getComputedStyle(this).direction === 'rtl';
+      // we want md-submenu to handle the submenu's left/right arrow exit
+      // key so it can close the menu instead of navigate the list.
+      // Therefore we need to include all keys but left/right arrow close
+      // key
+      const arrowOpen = isRtl
+        ? NavigableKeys.ArrowLeft
+        : NavigableKeys.ArrowRight;
 
-          if (key === arrowOpen) {
-            return true;
-          }
+      if (key === arrowOpen) {
+        return true;
+      }
 
-          return submenuNavKeys.has(key);
-        },
+      return submenuNavKeys.has(key);
+    },
   });
 
   /**
    * Whether the menu is animating upwards or downwards when opening. This is
    * helpful for calculating some animation calculations.
    */
-  private get openDirection(): 'UP'|'DOWN' {
+  private get openDirection(): 'UP' | 'DOWN' {
     const menuCornerBlock = this.menuCorner.split('-')[0];
     return menuCornerBlock === 'start' ? 'DOWN' : 'UP';
   }
@@ -261,7 +280,7 @@ export abstract class Menu extends LitElement {
   /**
    * The element that was focused before the menu opened.
    */
-  private lastFocusedElement: HTMLElement|null = null;
+  private lastFocusedElement: HTMLElement | null = null;
 
   /**
    * Handles typeahead navigation through the menu.
@@ -270,33 +289,39 @@ export abstract class Menu extends LitElement {
     return {
       getItems: () => this.items,
       typeaheadBufferTime: this.typeaheadDelay,
-      active: this.typeaheadActive
+      active: this.typeaheadActive,
     };
   });
 
-  private currentAnchorElement: HTMLElement|null = null;
+  private currentAnchorElement: HTMLElement | null = null;
 
   /**
    * The element which the menu should align to. If `anchor` is set to a
    * non-empty idref string, then `anchorEl` will resolve to the element with
    * the given id in the same root node. Otherwise, `null`.
    */
-  get anchorElement(): HTMLElement&Partial<SurfacePositionTarget>|null {
+  get anchorElement(): (HTMLElement & Partial<SurfacePositionTarget>) | null {
     if (this.anchor) {
-      return (this.getRootNode() as Document | ShadowRoot)
-          .querySelector(`#${this.anchor}`);
+      return (this.getRootNode() as Document | ShadowRoot).querySelector(
+        `#${this.anchor}`,
+      );
     }
 
     return this.currentAnchorElement;
   }
 
-  set anchorElement(element: HTMLElement&Partial<SurfacePositionTarget>|null) {
+  set anchorElement(
+    element: (HTMLElement & Partial<SurfacePositionTarget>) | null,
+  ) {
     this.currentAnchorElement = element;
     this.requestUpdate('anchorElement');
   }
 
   private readonly internals = polyfillElementInternalsAria(
-      this, (this as HTMLElement /* needed for closure */).attachInternals());
+    this,
+    // Cast needed for closure
+    (this as HTMLElement).attachInternals(),
+  );
 
   constructor() {
     super();
@@ -315,26 +340,28 @@ export abstract class Menu extends LitElement {
    * Handles positioning the surface and aligning it to the anchor as well as
    * keeping it in the viewport.
    */
-  private readonly menuPositionController =
-      new SurfacePositionController(this, () => {
-        return {
-          anchorCorner: this.anchorCorner,
-          surfaceCorner: this.menuCorner,
-          surfaceEl: this.surfaceEl,
-          anchorEl: this.anchorElement,
-          positioning: this.positioning,
-          isOpen: this.open,
-          xOffset: this.xOffset,
-          yOffset: this.yOffset,
-          onOpen: this.onOpened,
-          beforeClose: this.beforeClose,
-          onClose: this.onClosed,
-          // We can't resize components that have overflow like menus with
-          // submenus because the overflow-y will show menu items / content
-          // outside the bounds of the menu. (to be fixed w/ popover API)
-          repositionStrategy: this.hasOverflow ? 'move' : 'resize',
-        };
-      });
+  private readonly menuPositionController = new SurfacePositionController(
+    this,
+    () => {
+      return {
+        anchorCorner: this.anchorCorner,
+        surfaceCorner: this.menuCorner,
+        surfaceEl: this.surfaceEl,
+        anchorEl: this.anchorElement,
+        positioning: this.positioning,
+        isOpen: this.open,
+        xOffset: this.xOffset,
+        yOffset: this.yOffset,
+        onOpen: this.onOpened,
+        beforeClose: this.beforeClose,
+        onClose: this.onClosed,
+        // We can't resize components that have overflow like menus with
+        // submenus because the overflow-y will show menu items / content
+        // outside the bounds of the menu. (to be fixed w/ popover API)
+        repositionStrategy: this.hasOverflow ? 'move' : 'resize',
+      };
+    },
+  );
 
   /**
    * The menu items associated with this menu. The items must be `MenuItem`s and
@@ -390,17 +417,15 @@ export abstract class Menu extends LitElement {
    */
   private renderSurface() {
     return html`
-       <div
-          class="menu ${classMap(this.getSurfaceClasses())}"
-          style=${styleMap(this.menuPositionController.surfaceStyles)}>
+      <div
+        class="menu ${classMap(this.getSurfaceClasses())}"
+        style=${styleMap(this.menuPositionController.surfaceStyles)}>
         ${this.renderElevation()}
         <div class="items">
-          <div class="item-padding">
-            ${this.renderMenuItems()}
-          </div>
+          <div class="item-padding"> ${this.renderMenuItems()} </div>
         </div>
-       </div>
-     `;
+      </div>
+    `;
   }
 
   /**
@@ -408,14 +433,14 @@ export abstract class Menu extends LitElement {
    */
   private renderMenuItems() {
     return html`<slot
-        @close-menu=${this.onCloseMenu}
-        @deactivate-items=${this.onDeactivateItems}
-        @request-activation=${this.onRequestActivation}
-        @deactivate-typeahead=${this.handleDeactivateTypeahead}
-        @activate-typeahead=${this.handleActivateTypeahead}
-        @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
-        @close-on-focusout=${this.handleCloseOnFocusout}
-        @slotchange=${this.listController.onSlotchange}></slot>`;
+      @close-menu=${this.onCloseMenu}
+      @deactivate-items=${this.onDeactivateItems}
+      @request-activation=${this.onRequestActivation}
+      @deactivate-typeahead=${this.handleDeactivateTypeahead}
+      @activate-typeahead=${this.handleActivateTypeahead}
+      @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
+      @close-on-focusout=${this.handleCloseOnFocusout}
+      @slotchange=${this.listController.onSlotchange}></slot>`;
   }
 
   /**
@@ -438,16 +463,21 @@ export abstract class Menu extends LitElement {
     // Do not close if we focused out by clicking on the anchor element. We
     // can't assume anchor buttons can be the related target because of iOS does
     // not focus buttons.
-    if (this.stayOpenOnFocusout || !this.open ||
-        this.pointerPath.includes(anchorEl)) {
+    if (
+      this.stayOpenOnFocusout ||
+      !this.open ||
+      this.pointerPath.includes(anchorEl)
+    ) {
       return;
     }
 
     if (event.relatedTarget) {
       // Don't close the menu if we are switching focus between menu,
       // md-menu-item, and md-list or if the anchor was click focused.
-      if (isElementInSubtree(event.relatedTarget, this) ||
-          isElementInSubtree(event.relatedTarget, anchorEl)) {
+      if (
+        isElementInSubtree(event.relatedTarget, this) ||
+        isElementInSubtree(event.relatedTarget, anchorEl)
+      ) {
         return;
       }
     } else if (this.pointerPath.includes(this)) {
@@ -467,8 +497,11 @@ export abstract class Menu extends LitElement {
   };
 
   private captureKeydown(event: KeyboardEvent) {
-    if (event.target === this && !event.defaultPrevented &&
-        isClosableKey(event.code)) {
+    if (
+      event.target === this &&
+      !event.defaultPrevented &&
+      isClosableKey(event.code)
+    ) {
       event.preventDefault();
       this.close();
     }
@@ -495,7 +528,7 @@ export abstract class Menu extends LitElement {
     if (this.quick) {
       this.dispatchEvent(new Event('opening'));
     } else {
-      animationAborted = !!await this.animateOpen();
+      animationAborted = !!(await this.animateOpen());
     }
 
     // This must come after the opening animation or else it may focus one of
@@ -587,25 +620,30 @@ export abstract class Menu extends LitElement {
     // We want to fit every child fade-in animation within the full duration of
     // the animation.
     const DELAY_BETWEEN_ITEMS =
-        (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length;
+      (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length;
 
-    const surfaceHeightAnimation =
-        surfaceEl.animate([{height: '0px'}, {height: `${height}px`}], {
-          duration: FULL_DURATION,
-          easing: EASING.EMPHASIZED,
-        });
+    const surfaceHeightAnimation = surfaceEl.animate(
+      [{height: '0px'}, {height: `${height}px`}],
+      {
+        duration: FULL_DURATION,
+        easing: EASING.EMPHASIZED,
+      },
+    );
     // When we are opening upwards, we want to make sure the last item is always
     // in view, so we need to translate it upwards the opposite direction of the
     // height animation
     const upPositionCorrectionAnimation = slotEl.animate(
-        [
-          {transform: openingUpwards ? `translateY(-${height}px)` : ''},
-          {transform: ''}
-        ],
-        {duration: FULL_DURATION, easing: EASING.EMPHASIZED});
+      [
+        {transform: openingUpwards ? `translateY(-${height}px)` : ''},
+        {transform: ''},
+      ],
+      {duration: FULL_DURATION, easing: EASING.EMPHASIZED},
+    );
 
     const surfaceOpacityAnimation = surfaceEl.animate(
-        [{opacity: 0}, {opacity: 1}], SURFACE_OPACITY_DURATION);
+      [{opacity: 0}, {opacity: 1}],
+      SURFACE_OPACITY_DURATION,
+    );
 
     const childrenAnimations: Array<[HTMLElement, Animation]> = [];
 
@@ -693,41 +731,45 @@ export abstract class Menu extends LitElement {
     const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION;
     const ITEM_OPACITY_DURATION = 50;
     const ITEM_OPACITY_INITIAL_DELAY = 50;
-    const END_HEIGHT_PERCENTAGE = .35;
+    const END_HEIGHT_PERCENTAGE = 0.35;
 
     // We want to fit every child fade-out animation within the full duration of
     // the animation.
     const DELAY_BETWEEN_ITEMS =
-        (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
-        children.length;
+      (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
+      children.length;
 
     // The mock has the animation shrink to 35%
     const surfaceHeightAnimation = surfaceEl.animate(
-        [
-          {height: `${height}px`},
-          {height: `${height * END_HEIGHT_PERCENTAGE}px`}
-        ],
-        {
-          duration: FULL_DURATION,
-          easing: EASING.EMPHASIZED_ACCELERATE,
-        });
+      [
+        {height: `${height}px`},
+        {height: `${height * END_HEIGHT_PERCENTAGE}px`},
+      ],
+      {
+        duration: FULL_DURATION,
+        easing: EASING.EMPHASIZED_ACCELERATE,
+      },
+    );
 
     // When we are closing downwards, we want to make sure the last item is
     // always in view, so we need to translate it upwards the opposite direction
     // of the height animation
     const downPositionCorrectionAnimation = slotEl.animate(
-        [
-          {transform: ''}, {
-            transform: closingDownwards ?
-                `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)` :
-                ''
-          }
-        ],
-        {duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE});
+      [
+        {transform: ''},
+        {
+          transform: closingDownwards
+            ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`
+            : '',
+        },
+      ],
+      {duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE},
+    );
 
     const surfaceOpacityAnimation = surfaceEl.animate(
-        [{opacity: 1}, {opacity: 0}],
-        {duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY});
+      [{opacity: 1}, {opacity: 0}],
+      {duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY},
+    );
 
     const childrenAnimations: Array<[HTMLElement, Animation]> = [];
 
@@ -787,8 +829,9 @@ export abstract class Menu extends LitElement {
   }
 
   private cleanUpGlobalEventListeners() {
-    document.removeEventListener(
-        'click', this.onDocumentClick, {capture: true});
+    document.removeEventListener('click', this.onDocumentClick, {
+      capture: true,
+    });
     window.removeEventListener('pointerdown', this.onWindowPointerdown);
   }
 
@@ -808,8 +851,11 @@ export abstract class Menu extends LitElement {
 
     const path = event.composedPath();
 
-    if (!this.stayOpenOnOutsideClick && !path.includes(this) &&
-        !path.includes(this.anchorElement!)) {
+    if (
+      !this.stayOpenOnOutsideClick &&
+      !path.includes(this) &&
+      !path.includes(this.anchorElement!)
+    ) {
       this.open = false;
     }
   };
@@ -854,9 +900,10 @@ export abstract class Menu extends LitElement {
 
   close() {
     this.open = false;
-    const maybeSubmenu =
-        this.slotItems as Array<HTMLElement&{close?: () => void}>;
-    maybeSubmenu.forEach(item => {
+    const maybeSubmenu = this.slotItems as Array<
+      HTMLElement & {close?: () => void}
+    >;
+    maybeSubmenu.forEach((item) => {
       item.close?.();
     });
   }
diff --git a/menu/internal/menuitem/harness.ts b/menu/internal/menuitem/harness.ts
index 825220542..266e38ad7 100644
--- a/menu/internal/menuitem/harness.ts
+++ b/menu/internal/menuitem/harness.ts
@@ -12,4 +12,4 @@ import {MenuItem} from '../controllers/menuItemController.js';
 /**
  * Test harness for menu item.
  */
-export class MenuItemHarness extends ListItemHarness<MenuItem&LitElement> {}
+export class MenuItemHarness extends ListItemHarness<MenuItem & LitElement> {}
diff --git a/menu/internal/menuitem/menu-item.ts b/menu/internal/menuitem/menu-item.ts
index 6c5e49702..b17209bc6 100644
--- a/menu/internal/menuitem/menu-item.ts
+++ b/menu/internal/menuitem/menu-item.ts
@@ -4,18 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../../ripple/ripple.js';
 import '../../../focus/md-focus-ring.js';
 import '../../../labs/item/item.js';
+import '../../../ripple/ripple.js';
 
 import {html, LitElement, nothing, TemplateResult} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
-import {html as staticHtml, literal, StaticValue} from 'lit/static-html.js';
+import {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';
-import {MenuItem, MenuItemController, MenuItemType} from '../controllers/menuItemController.js';
+import {
+  MenuItem,
+  MenuItemController,
+  MenuItemType,
+} from '../controllers/menuItemController.js';
 
 /**
  * @fires close-menu {CloseMenuEvent}
@@ -28,7 +32,7 @@ export class MenuItemEl extends LitElement implements MenuItem {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
   };
 
   /**
@@ -50,7 +54,7 @@ export class MenuItemEl extends LitElement implements MenuItem {
    * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
    * set.
    */
-  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
+  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
   /**
    * Keeps the menu open if clicked or keyboard selected.
@@ -62,7 +66,7 @@ export class MenuItemEl extends LitElement implements MenuItem {
    */
   @property({type: Boolean}) selected = false;
 
-  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;
+  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;
 
   @queryAssignedElements({slot: 'headline'})
   protected readonly headlineElements!: HTMLElement[];
@@ -91,8 +95,7 @@ export class MenuItemEl extends LitElement implements MenuItem {
     return this.renderListItem(html`
       <md-item>
         <div slot="container">
-          ${this.renderRipple()}
-          ${this.renderFocusRing()}
+          ${this.renderRipple()} ${this.renderFocusRing()}
         </div>
         <slot name="start" slot="start"></slot>
         <slot name="end" slot="end"></slot>
@@ -147,23 +150,21 @@ export class MenuItemEl extends LitElement implements MenuItem {
   /**
    * Handles rendering of the ripple element.
    */
-  protected renderRipple(): TemplateResult|typeof nothing {
-    return html`
-      <md-ripple
-          part="ripple"
-          for="item"
-          ?disabled=${this.disabled}></md-ripple>`;
+  protected renderRipple(): TemplateResult | typeof nothing {
+    return html` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}></md-ripple>`;
   }
 
   /**
    * Handles rendering of the focus ring.
    */
-  protected renderFocusRing(): TemplateResult|typeof nothing {
-    return html`
-      <md-focus-ring
-          part="focus-ring"
-          for="item"
-          inward></md-focus-ring>`;
+  protected renderFocusRing(): TemplateResult | typeof nothing {
+    return html` <md-focus-ring
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`;
   }
 
   /**
@@ -185,8 +186,9 @@ export class MenuItemEl extends LitElement implements MenuItem {
       <slot name="overline" slot="overline"></slot>
       <slot name="headline" slot="headline"></slot>
       <slot name="supporting-text" slot="supporting-text"></slot>
-      <slot name="trailing-supporting-text"
-          slot="trailing-supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
     `;
   }
 
diff --git a/menu/internal/submenu/sub-menu.ts b/menu/internal/submenu/sub-menu.ts
index 4540234b4..6b818d5bc 100644
--- a/menu/internal/submenu/sub-menu.ts
+++ b/menu/internal/submenu/sub-menu.ts
@@ -7,9 +7,23 @@
 import {html, isServer, LitElement} from 'lit';
 import {property, queryAssignedElements} from 'lit/decorators.js';
 
-import {createDeactivateItemsEvent, createRequestActivationEvent, deactivateActiveItem, getFirstActivatableItem} from '../../../list/internal/list-navigation-helpers.js';
+import {
+  createDeactivateItemsEvent,
+  createRequestActivationEvent,
+  deactivateActiveItem,
+  getFirstActivatableItem,
+} from '../../../list/internal/list-navigation-helpers.js';
 import {MenuItem} from '../controllers/menuItemController.js';
-import {CloseMenuEvent, CloseReason, createActivateTypeaheadEvent, createDeactivateTypeaheadEvent, KeydownCloseKey, Menu, NavigableKey, SelectionKey} from '../controllers/shared.js';
+import {
+  CloseMenuEvent,
+  CloseReason,
+  createActivateTypeaheadEvent,
+  createDeactivateTypeaheadEvent,
+  KeydownCloseKey,
+  Menu,
+  NavigableKey,
+  SelectionKey,
+} from '../controllers/shared.js';
 import {Corner} from '../menu.js';
 
 /**
@@ -76,18 +90,18 @@ export class SubMenu extends LitElement {
 
   override render() {
     return html`
-        <slot
-            name="item"
-            @click=${this.onClick}
-            @keydown=${this.onKeydown}
-            @slotchange=${this.onSlotchange}
-        >
-        </slot>
-        <slot name="menu"
-            @keydown=${this.onSubMenuKeydown}
-            @close-menu=${this.onCloseSubmenu}
-            @slotchange=${this.onSlotchange}>
-        </slot>
+      <slot
+        name="item"
+        @click=${this.onClick}
+        @keydown=${this.onKeydown}
+        @slotchange=${this.onSlotchange}>
+      </slot>
+      <slot
+        name="menu"
+        @keydown=${this.onSubMenuKeydown}
+        @close-menu=${this.onCloseSubmenu}
+        @slotchange=${this.onSlotchange}>
+      </slot>
     `;
   }
 
@@ -111,13 +125,17 @@ export class SubMenu extends LitElement {
     // means Additionally, this cannot happen in onCloseSubmenu because
     // `close-menu` may not be called via focusout of outside click and not
     // triggered by an item
-    menu.addEventListener('closed', () => {
-      this.item.ariaExpanded = 'false';
-      this.dispatchEvent(createActivateTypeaheadEvent());
-      this.dispatchEvent(createDeactivateItemsEvent());
-      // aria-hidden required so ChromeVox doesn't announce the closed menu
-      menu.ariaHidden = 'true';
-    }, {once: true});
+    menu.addEventListener(
+      'closed',
+      () => {
+        this.item.ariaExpanded = 'false';
+        this.dispatchEvent(createActivateTypeaheadEvent());
+        this.dispatchEvent(createDeactivateItemsEvent());
+        // aria-hidden required so ChromeVox doesn't announce the closed menu
+        menu.ariaHidden = 'true';
+      },
+      {once: true},
+    );
     menu.quick = true;
     // Submenus are in overflow when not fixed. Can remove once we have native
     // popup support
@@ -266,8 +284,9 @@ export class SubMenu extends LitElement {
 
     if (event.defaultPrevented) return;
 
-    const openedWithLR = shouldOpenSubmenu &&
-        (NavigableKey.LEFT === event.code || NavigableKey.RIGHT === event.code);
+    const openedWithLR =
+      shouldOpenSubmenu &&
+      (NavigableKey.LEFT === event.code || NavigableKey.RIGHT === event.code);
 
     if (event.code === SelectionKey.SPACE || openedWithLR) {
       // prevent space from scrolling and Left + Right from selecting previous /
@@ -306,8 +325,10 @@ export class SubMenu extends LitElement {
     this.dispatchEvent(createActivateTypeaheadEvent());
     // Escape should only close one menu not all of the menus unlike space or
     // click selection which should close all menus.
-    if (reason.kind === CloseReason.KEYDOWN &&
-        reason.key === KeydownCloseKey.ESCAPE) {
+    if (
+      reason.kind === CloseReason.KEYDOWN &&
+      reason.key === KeydownCloseKey.ESCAPE
+    ) {
       event.stopPropagation();
       this.item.dispatchEvent(createRequestActivationEvent());
       return;
diff --git a/menu/internal/types.ts b/menu/internal/types.ts
index 15bc46461..ff68a3bf7 100644
--- a/menu/internal/types.ts
+++ b/menu/internal/types.ts
@@ -14,8 +14,8 @@ export interface MDCMenuItemEventDetail {
 /**
  * Event properties specific to the default component implementation.
  */
-export interface MDCMenuItemComponentEventDetail extends
-    MDCMenuItemEventDetail {
+export interface MDCMenuItemComponentEventDetail
+  extends MDCMenuItemEventDetail {
   item: Element;
 }
 
diff --git a/menu/menu_test.ts b/menu/menu_test.ts
index 9843db7f7..0b01c73e1 100644
--- a/menu/menu_test.ts
+++ b/menu/menu_test.ts
@@ -32,11 +32,12 @@ describe('<md-menu>', () => {
 
   it('escape on list root closes menu', async () => {
     render(
-        html`
-      <button>OpenMenu</button>
-      <md-menu quick></md-menu>
-    `,
-        root);
+      html`
+        <button>OpenMenu</button>
+        <md-menu quick></md-menu>
+      `,
+      root,
+    );
 
     const button = root.querySelector('button')!;
     const menu = root.querySelector('md-menu')!;
@@ -50,7 +51,7 @@ describe('<md-menu>', () => {
       code: 'Escape',
       bubbles: true,
       composed: true,
-      cancelable: true
+      cancelable: true,
     });
     menu.dispatchEvent(escapeKeydownEvent);
 
diff --git a/progress/demo/demo.ts b/progress/demo/demo.ts
index 027280022..aca1bb595 100644
--- a/progress/demo/demo.ts
+++ b/progress/demo/demo.ts
@@ -4,48 +4,64 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {boolInput, colorPicker, Knob, numberInput} from './index.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {
+  boolInput,
+  colorPicker,
+  Knob,
+  numberInput,
+} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
 function cssWire<T = string>(prop: string, unit = '') {
   return (knob: Knob<T>) => {
     const value =
-        knob.latestValue === undefined ? knob.defaultValue : knob.latestValue;
+      knob.latestValue === undefined ? knob.defaultValue : knob.latestValue;
     document.body.style.setProperty(prop, `${value}${unit}`);
   };
 }
 
 const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
-    'Progress indicators', [
-      new Knob('value', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
-      new Knob('max', {ui: numberInput(), defaultValue: 1}),
-      new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
-      new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
-      new Knob(
-          'buffer (linear)', {ui: numberInput({step: 0.1}), defaultValue: 0.8}),
-      new Knob('track color (linear)', {
-        ui: colorPicker(),
-        defaultValue: '',
-        wiring: cssWire('--md-linear-progress-track-color')
-      }),
-      new Knob('track height (linear)', {
-        ui: numberInput(),
-        defaultValue: 4,
-        wiring: cssWire<number>('--md-linear-progress-track-height', 'px')
-      }),
-      new Knob('indicator height (linear)', {
-        ui: numberInput(),
-        defaultValue: 4,
-        wiring: cssWire<number>(
-            '--md-linear-progress-active-indicator-height', 'px')
-      }),
-      new Knob('custom theme (linear)', {ui: boolInput()}),
-    ]);
+  'Progress indicators',
+  [
+    new Knob('value', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
+    new Knob('max', {ui: numberInput(), defaultValue: 1}),
+    new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
+    new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
+    new Knob('buffer (linear)', {
+      ui: numberInput({step: 0.1}),
+      defaultValue: 0.8,
+    }),
+    new Knob('track color (linear)', {
+      ui: colorPicker(),
+      defaultValue: '',
+      wiring: cssWire('--md-linear-progress-track-color'),
+    }),
+    new Knob('track height (linear)', {
+      ui: numberInput(),
+      defaultValue: 4,
+      wiring: cssWire<number>('--md-linear-progress-track-height', 'px'),
+    }),
+    new Knob('indicator height (linear)', {
+      ui: numberInput(),
+      defaultValue: 4,
+      wiring: cssWire<number>(
+        '--md-linear-progress-active-indicator-height',
+        'px',
+      ),
+    }),
+    new Knob('custom theme (linear)', {ui: boolInput()}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts
index 45e43ed22..805d6379a 100644
--- a/progress/demo/stories.ts
+++ b/progress/demo/stories.ts
@@ -4,12 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import '@material/web/progress/linear-progress.js';
 import '@material/web/button/filled-tonal-button.js';
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/icon-button.js';
 import '@material/web/progress/circular-progress.js';
+import '@material/web/progress/linear-progress.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {MdCircularProgress} from '@material/web/progress/circular-progress.js';
@@ -37,7 +36,10 @@ const linear: MaterialStoryInit<StoryKnobs> = {
     }
 
     .custom {
-      --md-linear-progress-active-indicator-color: linear-gradient(steelblue, lightblue);
+      --md-linear-progress-active-indicator-color: linear-gradient(
+        steelblue,
+        lightblue
+      );
       --md-linear-progress-track-color: gainsboro;
       --md-linear-progress-active-indicator-height: 20px;
       --md-linear-progress-track-height: 20px;
@@ -49,17 +51,15 @@ const linear: MaterialStoryInit<StoryKnobs> = {
     const buffer = knobs['buffer (linear)'];
     const classes = {'custom': knobs['custom theme (linear)']};
 
-    return html`
-      <md-linear-progress
-        aria-label="An example linear progress bar"
-        class=${classMap(classes)}
-        .value=${value}
-        .max=${max}
-        .buffer=${buffer}
-        .indeterminate=${indeterminate}
-        .fourColor=${fourColor}
-      ></md-linear-progress>`;
-  }
+    return html` <md-linear-progress
+      aria-label="An example linear progress bar"
+      class=${classMap(classes)}
+      .value=${value}
+      .max=${max}
+      .buffer=${buffer}
+      .indeterminate=${indeterminate}
+      .fourColor=${fourColor}></md-linear-progress>`;
+  },
 };
 
 const circular: MaterialStoryInit<StoryKnobs> = {
@@ -71,8 +71,7 @@ const circular: MaterialStoryInit<StoryKnobs> = {
         value=${value}
         max=${max}
         ?indeterminate=${indeterminate}
-        ?four-color=${fourColor}
-      ></md-circular-progress>
+        ?four-color=${fourColor}></md-circular-progress>
     `;
   },
 };
@@ -111,9 +110,9 @@ const components: MaterialStoryInit<StoryKnobs> = {
   `,
   render({value, max}) {
     const toggleIndeterminate = ({target}: Event) => {
-      const spinner =
-          ((target as HTMLElement)
-               .parentElement?.querySelector('md-circular-progress'));
+      const spinner = (target as HTMLElement).parentElement?.querySelector(
+        'md-circular-progress',
+      );
       if (!spinner) {
         return;
       }
@@ -139,25 +138,29 @@ const components: MaterialStoryInit<StoryKnobs> = {
     return html`
       <div class="components">
         <md-filled-tonal-button @click=${toggleLoad}>
-          <md-circular-progress style="display: none" indeterminate
+          <md-circular-progress
+            style="display: none"
+            indeterminate
             aria-label="Loading, please wait"></md-circular-progress>
           <span>Load</span>
         </md-filled-tonal-button>
 
         <div class="around-icon">
-          <md-circular-progress value=${value} max=${max}
+          <md-circular-progress
+            value=${value}
+            max=${max}
             aria-label="Playback progress"></md-circular-progress>
-          <md-icon-button toggle
+          <md-icon-button
+            toggle
             aria-label="Play or pause music"
-            @change=${toggleIndeterminate}
-          >
+            @change=${toggleIndeterminate}>
             <md-icon>play_arrow</md-icon>
             <md-icon slot="selected">pause</md-icon>
           </md-icon-button>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 /** Linear Progress stories. */
diff --git a/progress/internal/circular-progress.ts b/progress/internal/circular-progress.ts
index 1895d660f..d219cd652 100644
--- a/progress/internal/circular-progress.ts
+++ b/progress/internal/circular-progress.ts
@@ -29,7 +29,9 @@ export class CircularProgress extends Progress {
     return html`
       <svg viewBox="0 0 4800 4800">
         <circle class="track" pathLength="100"></circle>
-        <circle class="active-track" pathLength="100"
+        <circle
+          class="active-track"
+          pathLength="100"
           stroke-dashoffset=${dashOffset}></circle>
       </svg>
     `;
@@ -41,14 +43,13 @@ export class CircularProgress extends Progress {
   // This approach has 4.5x the FPS of rendering via svg on Chrome 111.
   // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.
   private renderIndeterminateContainer() {
-    return html`
-      <div class="spinner">
-        <div class="left">
-          <div class="circle"></div>
-        </div>
-        <div class="right">
-          <div class="circle"></div>
-        </div>
-      </div>`;
+    return html` <div class="spinner">
+      <div class="left">
+        <div class="circle"></div>
+      </div>
+      <div class="right">
+        <div class="circle"></div>
+      </div>
+    </div>`;
   }
 }
diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts
index 73ff05a3c..bc6639fbf 100644
--- a/progress/internal/linear-progress.ts
+++ b/progress/internal/linear-progress.ts
@@ -24,12 +24,14 @@ export class LinearProgress extends Progress {
   // due to a now fixed Chrome bug: crbug.com/389359.
   protected override renderIndicator() {
     const progressStyles = {
-      transform:
-          `scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`
+      transform: `scaleX(${
+        (this.indeterminate ? 1 : this.value / this.max) * 100
+      }%)`,
     };
     const dotStyles = {
-      transform:
-          `scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`
+      transform: `scaleX(${
+        (this.indeterminate ? 1 : this.buffer / this.max) * 100
+      }%)`,
     };
 
     return html`
diff --git a/progress/internal/progress.ts b/progress/internal/progress.ts
index b6b0b5eb0..616f1488a 100644
--- a/progress/internal/progress.ts
+++ b/progress/internal/progress.ts
@@ -44,13 +44,15 @@ export abstract class Progress extends LitElement {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`
-      <div class="progress ${classMap(this.getRenderClasses())}"
+      <div
+        class="progress ${classMap(this.getRenderClasses())}"
         role="progressbar"
         aria-label="${ariaLabel || nothing}"
         aria-valuemin="0"
         aria-valuemax=${this.max}
         aria-valuenow=${this.indeterminate ? nothing : this.value}
-      >${this.renderIndicator()}</div>
+        >${this.renderIndicator()}</div
+      >
     `;
   }
 
diff --git a/radio/demo/demo.ts b/radio/demo/demo.ts
index d791ef541..913f804d0 100644
--- a/radio/demo/demo.ts
+++ b/radio/demo/demo.ts
@@ -4,18 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Radio', [
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Radio',
+  [new Knob('disabled', {ui: boolInput(), defaultValue: false})],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/radio/demo/stories.ts b/radio/demo/stories.ts
index 530fa2a13..f63cb32b7 100644
--- a/radio/demo/stories.ts
+++ b/radio/demo/stories.ts
@@ -6,7 +6,10 @@
 
 import '@material/web/radio/radio.js';
 
-import {labelStyles, MaterialStoryInit} from './material-collection.js';
+import {
+  labelStyles,
+  MaterialStoryInit,
+} from './material-collection.js';
 import {css, html} from 'lit';
 
 /** Knob types for radio stories. */
@@ -45,7 +48,8 @@ const radio: MaterialStoryInit<StoryKnobs> = {
 const withLabels: MaterialStoryInit<StoryKnobs> = {
   name: 'With labels',
   styles: [
-    labelStyles, css`
+    labelStyles,
+    css`
       .column {
         display: flex;
         flex-direction: column;
@@ -55,7 +59,7 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
         display: flex;
         align-items: center;
       }
-    `
+    `,
   ],
   render({disabled}) {
     return html`
diff --git a/radio/internal/radio.ts b/radio/internal/radio.ts
index 4a390c96b..8a7e58161 100644
--- a/radio/internal/radio.ts
+++ b/radio/internal/radio.ts
@@ -11,7 +11,10 @@ import {html, isServer, LitElement} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
-import {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';
+import {
+  polyfillElementInternalsAria,
+  setupHostAria,
+} from '../../internal/aria/aria.js';
 import {isActivationClick} from '../../internal/controller/events.js';
 
 import {SingleSelectionController} from './single-selection-controller.js';
@@ -97,7 +100,10 @@ export class Radio extends LitElement {
 
   private readonly selectionController = new SingleSelectionController(this);
   private readonly internals = polyfillElementInternalsAria(
-      this, (this as HTMLElement /* needed for closure */).attachInternals());
+    this,
+    // Cast needed for closure
+    (this as HTMLElement).attachInternals(),
+  );
 
   constructor() {
     super();
@@ -113,16 +119,22 @@ export class Radio extends LitElement {
     const classes = {checked: this.checked};
     return html`
       <div class="container ${classMap(classes)}" aria-hidden="true">
-        <md-ripple part="ripple" .control=${this}
-            ?disabled=${this.disabled}></md-ripple>
+        <md-ripple
+          part="ripple"
+          .control=${this}
+          ?disabled=${this.disabled}></md-ripple>
         <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
           <mask id="${this.maskId}">
             <rect width="100%" height="100%" fill="white" />
             <circle cx="10" cy="10" r="8" fill="black" />
           </mask>
-          <circle class="outer circle" cx="10" cy="10" r="10"
-              mask="url(#${this.maskId})" />
+          <circle
+            class="outer circle"
+            cx="10"
+            cy="10"
+            r="10"
+            mask="url(#${this.maskId})" />
           <circle class="inner circle" cx="10" cy="10" r="5" />
         </svg>
 
@@ -132,8 +144,7 @@ export class Radio extends LitElement {
           tabindex="-1"
           .checked=${this.checked}
           .value=${this.value}
-          ?disabled=${this.disabled}
-        >
+          ?disabled=${this.disabled} />
       </div>
     `;
   }
@@ -161,7 +172,8 @@ export class Radio extends LitElement {
     this.checked = true;
     this.dispatchEvent(new Event('change', {bubbles: true}));
     this.dispatchEvent(
-        new InputEvent('input', {bubbles: true, composed: true}));
+      new InputEvent('input', {bubbles: true, composed: true}),
+    );
   }
 
   private async handleKeydown(event: KeyboardEvent) {
diff --git a/radio/internal/single-selection-controller.ts b/radio/internal/single-selection-controller.ts
index 0af2e2b28..e87644583 100644
--- a/radio/internal/single-selection-controller.ts
+++ b/radio/internal/single-selection-controller.ts
@@ -52,7 +52,7 @@ export interface SingleSelectionElement extends HTMLElement {
  */
 export class SingleSelectionController implements ReactiveController {
   private focused = false;
-  private root: ParentNode|null = null;
+  private root: ParentNode | null = null;
 
   constructor(private readonly host: SingleSelectionElement) {}
 
@@ -118,7 +118,7 @@ export class SingleSelectionController implements ReactiveController {
     // There are three tabindex states for a group of elements:
     // 1. If any are checked, that element is focusable.
     const siblings = this.getNamedSiblings();
-    const checkedSibling = siblings.find(sibling => sibling.checked);
+    const checkedSibling = siblings.find((sibling) => sibling.checked);
     // 2. If an element is focused, the others are no longer focusable.
     if (checkedSibling || this.focused) {
       const focusable = checkedSibling || this.host;
@@ -149,7 +149,8 @@ export class SingleSelectionController implements ReactiveController {
     }
 
     return Array.from(
-        this.root.querySelectorAll<SingleSelectionElement>(`[name="${name}"]`));
+      this.root.querySelectorAll<SingleSelectionElement>(`[name="${name}"]`),
+    );
   }
 
   /**
diff --git a/radio/radio_test.ts b/radio/radio_test.ts
index 2b2a4da66..02dcaa80a 100644
--- a/radio/radio_test.ts
+++ b/radio/radio_test.ts
@@ -50,7 +50,7 @@ describe('<md-radio>', () => {
     const root = env.render(template);
     await env.waitForStability();
     const radios = Array.from(root.querySelectorAll('md-radio'));
-    const harnesses = radios.map(radio => new RadioHarness(radio));
+    const harnesses = radios.map((radio) => new RadioHarness(radio));
     return {harnesses, root};
   }
 
@@ -68,44 +68,43 @@ describe('<md-radio>', () => {
       const {harnesses} = await setupTest(radioGroup);
       const unselected = harnesses[1];
       expect(unselected.element.checked)
-          .withContext('unselected checked')
-          .toBeFalse();
+        .withContext('unselected checked')
+        .toBeFalse();
 
       await unselected.clickWithMouse();
       expect(unselected.element.checked)
-          .withContext('after clicking checked')
-          .toBeTrue();
+        .withContext('after clicking checked')
+        .toBeTrue();
     });
 
     it('clicking a radio can be default prevented', async () => {
       const {harnesses} = await setupTest(radioGroup);
       const unselected = harnesses[1];
       expect(unselected.element.checked)
-          .withContext('unselected checked')
-          .toBeFalse();
+        .withContext('unselected checked')
+        .toBeFalse();
 
-      unselected.element.addEventListener('click', event => {
+      unselected.element.addEventListener('click', (event) => {
         event.preventDefault();
       });
 
       await unselected.clickWithMouse();
       expect(unselected.element.checked)
-          .withContext('after clicking checked')
-          .toBeFalse();
+        .withContext('after clicking checked')
+        .toBeFalse();
     });
 
-    it('clicking a radio should unselect other radio which is already selected',
-       async () => {
-         const {harnesses} = await setupTest(radioGroupPreSelected);
-         const [, a2, a3] = harnesses;
-         expect(a2.element.checked).withContext('already checked').toBeTrue();
+    it('clicking a radio should unselect other radio which is already selected', async () => {
+      const {harnesses} = await setupTest(radioGroupPreSelected);
+      const [, a2, a3] = harnesses;
+      expect(a2.element.checked).withContext('already checked').toBeTrue();
 
-         await a3.clickWithMouse();
-         expect(a3.element.checked).withContext('new radio checked').toBeTrue();
-         expect(a2.element.checked)
-             .withContext('previous radio checked')
-             .toBeFalse();
-       });
+      await a3.clickWithMouse();
+      expect(a3.element.checked).withContext('new radio checked').toBeTrue();
+      expect(a2.element.checked)
+        .withContext('previous radio checked')
+        .toBeFalse();
+    });
 
     it('disabled radio should not be selected when clicked', async () => {
       const {harnesses} = await setupTest(radioGroupDisabled);
@@ -116,8 +115,8 @@ describe('<md-radio>', () => {
 
       await a1.clickWithMouse();
       expect(a1.element.checked)
-          .withContext('still unchecked radio')
-          .toBeFalse();
+        .withContext('still unchecked radio')
+        .toBeFalse();
 
       await a2.clickWithMouse();
       expect(a2.element.checked).withContext('still checked radio').toBeTrue();
@@ -134,8 +133,8 @@ describe('<md-radio>', () => {
       await a3.clickWithMouse();
 
       expect(a3.element.checked)
-          .withContext('clicked radio checked')
-          .toBeTrue();
+        .withContext('clicked radio checked')
+        .toBeTrue();
       expect(changeHandler).toHaveBeenCalledTimes(1);
       expect(changeHandler).toHaveBeenCalledWith(jasmine.any(Event));
     });
@@ -149,8 +148,8 @@ describe('<md-radio>', () => {
       await a3.clickWithMouse();
 
       expect(a3.element.checked)
-          .withContext('clicked radio checked')
-          .toBeTrue();
+        .withContext('clicked radio checked')
+        .toBeTrue();
       expect(inputHandler).toHaveBeenCalledTimes(1);
       expect(inputHandler).toHaveBeenCalledWith(jasmine.any(InputEvent));
     });
@@ -161,8 +160,8 @@ describe('<md-radio>', () => {
       const {harnesses} = await setupTest(radioGroupPreSelected);
       const [, a2, a3] = harnesses;
       expect(a2.element.checked)
-          .withContext('default checked radio')
-          .toBeTrue();
+        .withContext('default checked radio')
+        .toBeTrue();
 
       await simulateKeyDown(a2.element, 'ArrowRight');
 
@@ -176,34 +175,29 @@ describe('<md-radio>', () => {
       root.addEventListener('change', changeHandler);
       const [, a2] = harnesses;
       expect(a2.element.checked)
-          .withContext('default checked radio')
-          .toBeTrue();
+        .withContext('default checked radio')
+        .toBeTrue();
 
       await simulateKeyDown(a2.element, 'ArrowRight');
 
       expect(changeHandler).toHaveBeenCalledTimes(1);
     });
 
-    it('Using arrow right on the last radio should select the first radio in that group',
-       async () => {
-         const {harnesses} = await setupTest(radioGroupPreSelected);
-         const [a1, a2, a3, b1] = harnesses;
+    it('Using arrow right on the last radio should select the first radio in that group', async () => {
+      const {harnesses} = await setupTest(radioGroupPreSelected);
+      const [a1, a2, a3, b1] = harnesses;
 
-         expect(a2.element.checked).toBeTrue();
+      expect(a2.element.checked).toBeTrue();
 
-         await simulateKeyDown(a2.element, 'ArrowRight');
-         await simulateKeyDown(a3.element, 'ArrowRight');
+      await simulateKeyDown(a2.element, 'ArrowRight');
+      await simulateKeyDown(a3.element, 'ArrowRight');
 
-         expect(a3.element.checked)
-             .withContext('last radio checked')
-             .toBeFalse();
-         expect(a1.element.checked)
-             .withContext('first radio checked')
-             .toBeTrue();
-         expect(b1.element.checked)
-             .withContext('unrelated radio checked')
-             .toBeFalse();
-       });
+      expect(a3.element.checked).withContext('last radio checked').toBeFalse();
+      expect(a1.element.checked).withContext('first radio checked').toBeTrue();
+      expect(b1.element.checked)
+        .withContext('unrelated radio checked')
+        .toBeFalse();
+    });
   });
 
   describe('manages selection groups', () => {
@@ -221,65 +215,65 @@ describe('<md-radio>', () => {
 
       expect(a1.element.checked).withContext('last radio checked').toBeTrue();
       expect(a2.element.checked)
-          .withContext('unchecked by last radio')
-          .toBeFalse();
+        .withContext('unchecked by last radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated radio unchecked')
-          .toBeFalse();
+        .withContext('unrelated radio unchecked')
+        .toBeFalse();
 
       // Should re-check radio
       a2.element.checked = true;
       a1.element.checked = true;
       a2.element.checked = true;
       expect(a1.element.checked)
-          .withContext('unchecked by second radio')
-          .toBeFalse();
+        .withContext('unchecked by second radio')
+        .toBeFalse();
       expect(a2.element.checked).withContext('last radio checked').toBeTrue();
       expect(b1.element.checked)
-          .withContext('unrelated radio unchecked')
-          .toBeFalse();
+        .withContext('unrelated radio unchecked')
+        .toBeFalse();
 
       // Should ignore unrelated radios
       a1.element.checked = true;
       expect(a1.element.checked)
-          .withContext('related checked radio')
-          .toBeTrue();
+        .withContext('related checked radio')
+        .toBeTrue();
       expect(a2.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated unchecked radio')
-          .toBeFalse();
+        .withContext('unrelated unchecked radio')
+        .toBeFalse();
 
       b1.element.checked = true;
       expect(a1.element.checked)
-          .withContext('related checked radio')
-          .toBeTrue();
+        .withContext('related checked radio')
+        .toBeTrue();
       expect(a2.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated checked radio')
-          .toBeTrue();
+        .withContext('unrelated checked radio')
+        .toBeTrue();
 
       a1.element.checked = false;
       b1.element.checked = false;
       expect(a1.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(a2.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated unchecked radio')
-          .toBeFalse();
+        .withContext('unrelated unchecked radio')
+        .toBeFalse();
     });
 
     it('after updates settle', async () => {
       const {harnesses} = await setupTest(radioGroup);
       const [a1, a2, b1] = harnesses;
-      const allUpdatesComplete = () => Promise.all(
-          harnesses.map((harness) => harness.element.updateComplete));
+      const allUpdatesComplete = () =>
+        Promise.all(harnesses.map((harness) => harness.element.updateComplete));
 
       await allUpdatesComplete();
       expect(a1.element.checked).withContext('initially unchecked').toBeFalse();
@@ -293,11 +287,11 @@ describe('<md-radio>', () => {
 
       expect(a1.element.checked).withContext('last radio checked').toBeTrue();
       expect(a2.element.checked)
-          .withContext('unchecked by last radio')
-          .toBeFalse();
+        .withContext('unchecked by last radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated radio unchecked')
-          .toBeFalse();
+        .withContext('unrelated radio unchecked')
+        .toBeFalse();
 
       // Should re-check radio
       a2.element.checked = true;
@@ -305,49 +299,49 @@ describe('<md-radio>', () => {
       a2.element.checked = true;
       await allUpdatesComplete();
       expect(a1.element.checked)
-          .withContext('unchecked by second radio')
-          .toBeFalse();
+        .withContext('unchecked by second radio')
+        .toBeFalse();
       expect(a2.element.checked).withContext('last radio checked').toBeTrue();
       expect(b1.element.checked)
-          .withContext('unrelated radio unchecked')
-          .toBeFalse();
+        .withContext('unrelated radio unchecked')
+        .toBeFalse();
 
       // Should ignore unrelated radios
       a1.element.checked = true;
       expect(a1.element.checked)
-          .withContext('related checked radio')
-          .toBeTrue();
+        .withContext('related checked radio')
+        .toBeTrue();
       expect(a2.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated unchecked radio')
-          .toBeFalse();
+        .withContext('unrelated unchecked radio')
+        .toBeFalse();
 
       b1.element.checked = true;
       await allUpdatesComplete();
       expect(a1.element.checked)
-          .withContext('related checked radio')
-          .toBeTrue();
+        .withContext('related checked radio')
+        .toBeTrue();
       expect(a2.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated checked radio')
-          .toBeTrue();
+        .withContext('unrelated checked radio')
+        .toBeTrue();
 
       a1.element.checked = false;
       b1.element.checked = false;
       await allUpdatesComplete();
       expect(a1.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(a2.element.checked)
-          .withContext('related unchecked radio')
-          .toBeFalse();
+        .withContext('related unchecked radio')
+        .toBeFalse();
       expect(b1.element.checked)
-          .withContext('unrelated unchecked radio')
-          .toBeFalse();
+        .withContext('unrelated unchecked radio')
+        .toBeFalse();
     });
 
     it('when checked before connected', async () => {
@@ -401,7 +395,8 @@ describe('<md-radio>', () => {
     it('in a lit repeat', async () => {
       const values = ['a1', 'a2'];
       const repeated = values.map(
-          (value) => html`<md-radio value=${value} name="a"></md-radio>`);
+        (value) => html`<md-radio value=${value} name="a"></md-radio>`,
+      );
       const root = env.render(html`${repeated}`);
       await env.waitForStability();
       const [a1, a2] = root.querySelectorAll('md-radio');
@@ -430,15 +425,16 @@ describe('<md-radio>', () => {
       const root = env.render(html`
         <label> <md-radio name="a"></md-radio></label>
         <label> <md-radio name="a"></md-radio></label>
-     `);
+      `);
       await env.waitForStability();
       // [[label, radio]]
-      return Array.from(root.querySelectorAll('label'))
-          .map(el => ([el, el.firstElementChild as MdRadio] as const));
+      return Array.from(root.querySelectorAll('label')).map(
+        (el) => [el, el.firstElementChild as MdRadio] as const,
+      );
     }
 
     it('toggles when label is clicked', async () => {
-      const [[label1, radio1], [label2, radio2], ] = await setupLabelTest();
+      const [[label1, radio1], [label2, radio2]] = await setupLabelTest();
 
       label1.click();
       await env.waitForStability();
@@ -454,7 +450,7 @@ describe('<md-radio>', () => {
 
   describe('forms', () => {
     createFormTests({
-      queryControl: root => root.querySelector('md-radio'),
+      queryControl: (root) => root.querySelector('md-radio'),
       valueTests: [
         {
           name: 'unnamed',
@@ -464,9 +460,9 @@ describe('<md-radio>', () => {
           `,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form without a name')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form without a name')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'unchecked',
@@ -476,9 +472,9 @@ describe('<md-radio>', () => {
           `,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when unchecked')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form when unchecked')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'checked first value',
@@ -488,7 +484,7 @@ describe('<md-radio>', () => {
           `,
           assertValue(formData) {
             expect(formData.get('radio')).toBe('One');
-          }
+          },
         },
         {
           name: 'checked second value',
@@ -498,7 +494,7 @@ describe('<md-radio>', () => {
           `,
           assertValue(formData) {
             expect(formData.get('radio')).toBe('Two');
-          }
+          },
         },
         {
           name: 'disabled',
@@ -508,10 +504,10 @@ describe('<md-radio>', () => {
           `,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when disabled')
-                .toHaveSize(0);
-          }
-        }
+              .withContext('should not add anything to form when disabled')
+              .toHaveSize(0);
+          },
+        },
       ],
       resetTests: [
         {
@@ -525,9 +521,9 @@ describe('<md-radio>', () => {
           },
           assertReset(radio) {
             expect(radio.checked)
-                .withContext('radio.checked after reset')
-                .toBeFalse();
-          }
+              .withContext('radio.checked after reset')
+              .toBeFalse();
+          },
         },
         {
           name: 'reset to checked',
@@ -540,9 +536,9 @@ describe('<md-radio>', () => {
           },
           assertReset(radio) {
             expect(radio.checked)
-                .withContext('radio.checked after reset')
-                .toBeTrue();
-          }
+              .withContext('radio.checked after reset')
+              .toBeTrue();
+          },
         },
       ],
       restoreTests: [
@@ -554,9 +550,9 @@ describe('<md-radio>', () => {
           `,
           assertRestored(radio) {
             expect(radio.checked)
-                .withContext('radio.checked after restore')
-                .toBeFalse();
-          }
+              .withContext('radio.checked after restore')
+              .toBeFalse();
+          },
         },
         {
           name: 'restore checked',
@@ -566,11 +562,11 @@ describe('<md-radio>', () => {
           `,
           assertRestored(radio) {
             expect(radio.checked)
-                .withContext('radio.checked after restore')
-                .toBeTrue();
-          }
+              .withContext('radio.checked after restore')
+              .toBeTrue();
+          },
         },
-      ]
+      ],
     });
   });
 });
diff --git a/ripple/demo/demo.ts b/ripple/demo/demo.ts
index 572604a55..32c258aca 100644
--- a/ripple/demo/demo.ts
+++ b/ripple/demo/demo.ts
@@ -4,16 +4,29 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {colorPicker, cssCustomProperty, Knob, numberInput} from './index.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {
+  colorPicker,
+  cssCustomProperty,
+  Knob,
+  numberInput,
+} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
 function cssCustomPropertyAsNumber(
-    knob: Knob<number>, val: number, container: HTMLElement) {
+  knob: Knob<number>,
+  val: number,
+  container: HTMLElement,
+) {
   const value = knob.isUnset ? knob.defaultValue : val;
   if (value) {
     container.style.setProperty(knob.name, String(value));
@@ -22,25 +35,29 @@ function cssCustomPropertyAsNumber(
   }
 }
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Ripple', [
-      new Knob(
-          '--md-ripple-pressed-color',
-          {ui: colorPicker(), wiring: cssCustomProperty}),
-      new Knob('--md-ripple-pressed-opacity', {
-        ui: numberInput({step: 0.01}),
-        defaultValue: 0.12,
-        wiring: cssCustomPropertyAsNumber
-      }),
-      new Knob(
-          '--md-ripple-hover-color',
-          {ui: colorPicker(), wiring: cssCustomProperty}),
-      new Knob('--md-ripple-hover-opacity', {
-        ui: numberInput({step: 0.01}),
-        defaultValue: 0.08,
-        wiring: cssCustomPropertyAsNumber
-      }),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Ripple',
+  [
+    new Knob('--md-ripple-pressed-color', {
+      ui: colorPicker(),
+      wiring: cssCustomProperty,
+    }),
+    new Knob('--md-ripple-pressed-opacity', {
+      ui: numberInput({step: 0.01}),
+      defaultValue: 0.12,
+      wiring: cssCustomPropertyAsNumber,
+    }),
+    new Knob('--md-ripple-hover-color', {
+      ui: colorPicker(),
+      wiring: cssCustomProperty,
+    }),
+    new Knob('--md-ripple-hover-opacity', {
+      ui: numberInput({step: 0.01}),
+      defaultValue: 0.08,
+      wiring: cssCustomPropertyAsNumber,
+    }),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/ripple/demo/stories.ts b/ripple/demo/stories.ts
index a66bcb858..2e0fcb907 100644
--- a/ripple/demo/stories.ts
+++ b/ripple/demo/stories.ts
@@ -80,7 +80,7 @@ const ripples: MaterialStoryInit<StoryKnobs> = {
         </div>
       </div>
     `;
-  }
+  },
 };
 
 /** Ripple stories. */
diff --git a/ripple/internal/ripple.ts b/ripple/internal/ripple.ts
index 68af87d01..d68a9a387 100644
--- a/ripple/internal/ripple.ts
+++ b/ripple/internal/ripple.ts
@@ -8,7 +8,10 @@ import {html, isServer, LitElement, PropertyValues} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
-import {Attachable, AttachableController} from '../../internal/controller/attachable-controller.js';
+import {
+  Attachable,
+  AttachableController,
+} from '../../internal/controller/attachable-controller.js';
 import {EASING} from '../../internal/motion/animation.js';
 
 const PRESS_GROW_MS = 450;
@@ -62,15 +65,20 @@ enum State {
    * Transitions:
    *   - on click end press; transition to `INACTIVE`.
    */
-  WAITING_FOR_CLICK
+  WAITING_FOR_CLICK,
 }
 
 /**
  * Events that the ripple listens to.
  */
 const EVENTS = [
-  'click', 'contextmenu', 'pointercancel', 'pointerdown', 'pointerenter',
-  'pointerleave', 'pointerup'
+  'click',
+  'contextmenu',
+  'pointercancel',
+  'pointerdown',
+  'pointerenter',
+  'pointerleave',
+  'pointerup',
 ];
 
 /**
@@ -92,22 +100,21 @@ export class Ripple extends LitElement implements Attachable {
     return this.attachableController.htmlFor;
   }
 
-  set htmlFor(htmlFor: string|null) {
+  set htmlFor(htmlFor: string | null) {
     this.attachableController.htmlFor = htmlFor;
   }
 
   get control() {
     return this.attachableController.control;
   }
-  set control(control: HTMLElement|null) {
+  set control(control: HTMLElement | null) {
     this.attachableController.control = control;
   }
 
-
   @state() private hovered = false;
   @state() private pressed = false;
 
-  @query('.surface') private readonly mdRoot!: HTMLElement|null;
+  @query('.surface') private readonly mdRoot!: HTMLElement | null;
   private rippleSize = '';
   private rippleScale = '';
   private initialSize = 0;
@@ -115,8 +122,10 @@ export class Ripple extends LitElement implements Attachable {
   private state = State.INACTIVE;
   private rippleStartEvent?: PointerEvent;
   private checkBoundsAfterContextMenu = false;
-  private readonly attachableController =
-      new AttachableController(this, this.onControlChange.bind(this));
+  private readonly attachableController = new AttachableController(
+    this,
+    this.onControlChange.bind(this),
+  );
 
   attach(control: HTMLElement) {
     this.attachableController.attach(control);
@@ -219,7 +228,7 @@ export class Ripple extends LitElement implements Attachable {
 
     // Wait for a hold after touch delay
     this.state = State.TOUCH_DELAY;
-    await new Promise(resolve => {
+    await new Promise((resolve) => {
       setTimeout(resolve, TOUCH_DELAY_MS);
     });
 
@@ -270,8 +279,10 @@ export class Ripple extends LitElement implements Attachable {
   private determineRippleSize() {
     const {height, width} = this.getBoundingClientRect();
     const maxDim = Math.max(height, width);
-    const softEdgeSize =
-        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+    const softEdgeSize = Math.max(
+      SOFT_EDGE_CONTAINER_RATIO * maxDim,
+      SOFT_EDGE_MINIMUM_SIZE,
+    );
 
     const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
     const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
@@ -282,8 +293,10 @@ export class Ripple extends LitElement implements Attachable {
     this.rippleSize = `${initialSize}px`;
   }
 
-  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent):
-      {x: number, y: number} {
+  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent): {
+    x: number;
+    y: number;
+  } {
     const {scrollX, scrollY} = window;
     const {left, top} = this.getBoundingClientRect();
     const documentX = scrollX + left;
@@ -312,8 +325,8 @@ export class Ripple extends LitElement implements Attachable {
 
     // center around start point
     startPoint = {
-      x: startPoint.x - (this.initialSize / 2),
-      y: startPoint.y - (this.initialSize / 2),
+      x: startPoint.x - this.initialSize / 2,
+      y: startPoint.y - this.initialSize / 2,
     };
 
     return {startPoint, endPoint};
@@ -328,27 +341,28 @@ export class Ripple extends LitElement implements Attachable {
     this.growAnimation?.cancel();
     this.determineRippleSize();
     const {startPoint, endPoint} =
-        this.getTranslationCoordinates(positionEvent);
+      this.getTranslationCoordinates(positionEvent);
     const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
     const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
 
     this.growAnimation = this.mdRoot.animate(
-        {
-          top: [0, 0],
-          left: [0, 0],
-          height: [this.rippleSize, this.rippleSize],
-          width: [this.rippleSize, this.rippleSize],
-          transform: [
-            `translate(${translateStart}) scale(1)`,
-            `translate(${translateEnd}) scale(${this.rippleScale})`
-          ],
-        },
-        {
-          pseudoElement: PRESS_PSEUDO,
-          duration: PRESS_GROW_MS,
-          easing: EASING.STANDARD,
-          fill: ANIMATION_FILL
-        });
+      {
+        top: [0, 0],
+        left: [0, 0],
+        height: [this.rippleSize, this.rippleSize],
+        width: [this.rippleSize, this.rippleSize],
+        transform: [
+          `translate(${translateStart}) scale(1)`,
+          `translate(${translateEnd}) scale(${this.rippleScale})`,
+        ],
+      },
+      {
+        pseudoElement: PRESS_PSEUDO,
+        duration: PRESS_GROW_MS,
+        easing: EASING.STANDARD,
+        fill: ANIMATION_FILL,
+      },
+    );
   }
 
   private async endPressAnimation() {
@@ -366,7 +380,7 @@ export class Ripple extends LitElement implements Attachable {
       return;
     }
 
-    await new Promise(resolve => {
+    await new Promise((resolve) => {
       setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
     });
 
@@ -393,8 +407,10 @@ export class Ripple extends LitElement implements Attachable {
       return false;
     }
 
-    if (this.rippleStartEvent &&
-        this.rippleStartEvent.pointerId !== event.pointerId) {
+    if (
+      this.rippleStartEvent &&
+      this.rippleStartEvent.pointerId !== event.pointerId
+    ) {
       return false;
     }
 
@@ -449,7 +465,7 @@ export class Ripple extends LitElement implements Attachable {
     }
   }
 
-  private onControlChange(prev: HTMLElement|null, next: HTMLElement|null) {
+  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {
     if (isServer) return;
 
     for (const event of EVENTS) {
diff --git a/ripple/internal/ripple_test.ts b/ripple/internal/ripple_test.ts
index 987bbd73c..691513b9c 100644
--- a/ripple/internal/ripple_test.ts
+++ b/ripple/internal/ripple_test.ts
@@ -24,8 +24,7 @@ declare global {
 }
 
 @customElement('test-ripple')
-class TestRipple extends Ripple {
-}
+class TestRipple extends Ripple {}
 
 interface WithState {
   state: number;
@@ -74,7 +73,7 @@ describe('Ripple', () => {
     it('sets pressed class on begin press', async () => {
       const {harness, surface} = await setupTest();
       await harness.startTap();
-      jasmine.clock().tick(150);  // touch delay
+      jasmine.clock().tick(150); // touch delay
       await env.waitForStability();
 
       expect(surface).toHaveClass(RippleStateClasses.PRESSED);
@@ -83,10 +82,10 @@ describe('Ripple', () => {
     it('removes pressed class on end press', async () => {
       const {harness, surface} = await setupTest();
       await harness.startTap();
-      jasmine.clock().tick(150);  // touch delay
+      jasmine.clock().tick(150); // touch delay
       await harness.endTap();
       await harness.endTapClick();
-      jasmine.clock().tick(225);  // MINIMUM_PRESS_MS
+      jasmine.clock().tick(225); // MINIMUM_PRESS_MS
       await env.waitForStability();
 
       expect(surface).not.toHaveClass(RippleStateClasses.PRESSED);
diff --git a/scripts/analyzer/analyze-element.ts b/scripts/analyzer/analyze-element.ts
index c62bdd166..a5e9795de 100644
--- a/scripts/analyzer/analyze-element.ts
+++ b/scripts/analyzer/analyze-element.ts
@@ -4,7 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {AbsolutePath, Analyzer, LitElementDeclaration, LitElementExport, Module,} from '@lit-labs/analyzer/package-analyzer.js';
+import {
+  AbsolutePath,
+  Analyzer,
+  LitElementDeclaration,
+  LitElementExport,
+  Module,
+} from '@lit-labs/analyzer/package-analyzer.js';
 import * as path from 'path';
 import type ts from 'typescript';
 
@@ -84,15 +90,21 @@ export interface MdMethodParameterInfo {
  * and its superclass chain with data useful for API documentation.
  */
 export function analyzeElementApi(
-    analyzer: Analyzer, elementEntrypoint: string, superClassName = '') {
+  analyzer: Analyzer,
+  elementEntrypoint: string,
+  superClassName = '',
+) {
   // The description of the module
   const elementModule = analyzer.getModule(elementEntrypoint as AbsolutePath);
   // The description of the custom element / superclass
-  const customElementModule = elementModule.getCustomElementExports()[0] ||
-      (elementModule.getDeclaration(superClassName) as LitElementDeclaration);
+  const customElementModule =
+    elementModule.getCustomElementExports()[0] ||
+    (elementModule.getDeclaration(superClassName) as LitElementDeclaration);
 
-  const {properties, reactiveProperties} =
-      analyzeFields(customElementModule, elementModule);
+  const {properties, reactiveProperties} = analyzeFields(
+    customElementModule,
+    elementModule,
+  );
   const methods = analyzeMethods(customElementModule);
   const events = analyzeEvents(customElementModule);
   const superclass = customElementModule.heritage.superClass;
@@ -115,10 +127,14 @@ export function analyzeElementApi(
     // Get the typescript source path of the superclass since we use js imports
     const superClassLocation = superclass.module.replace(/\.js$/, '.ts');
     const absolutePath = path.resolve(
-        elementEntrypoint,
-        path.relative(elementEntrypoint, superClassLocation));
-    const superClassModule =
-        analyzeElementApi(analyzer, absolutePath, superclass.name);
+      elementEntrypoint,
+      path.relative(elementEntrypoint, superClassLocation),
+    );
+    const superClassModule = analyzeElementApi(
+      analyzer,
+      absolutePath,
+      superclass.name,
+    );
     elementDocModule.superClass = superClassModule;
   }
 
@@ -143,8 +159,9 @@ const FIELDS_TO_IGNORE = new Set(['isListItem', 'isMenuItem']);
  * LitElement class.
  */
 export function analyzeFields(
-    classDeclaration: LitElementExport|LitElementDeclaration, module: Module):
-    {properties: MdPropertyInfo[]; reactiveProperties: MdPropertyInfo[];} {
+  classDeclaration: LitElementExport | LitElementDeclaration,
+  module: Module,
+): {properties: MdPropertyInfo[]; reactiveProperties: MdPropertyInfo[]} {
   const properties: MdPropertyInfo[] = [];
   const reactiveProperties: MdPropertyInfo[] = [];
 
@@ -165,7 +182,7 @@ export function analyzeFields(
 
       if (variableDeclaration.isVariableDeclaration()) {
         const node =
-            variableDeclaration.node as unknown as ts.VariableDeclaration;
+          variableDeclaration.node as unknown as ts.VariableDeclaration;
 
         // attempt to get the default value. If it's not a string, just use the
         // variable name.
@@ -173,7 +190,7 @@ export function analyzeFields(
       }
     }
 
-    let attribute: string|undefined = undefined;
+    let attribute: string | undefined = undefined;
     let propertyArray = properties;
 
     // If it is a reactive property, put it in the reactive properties array
@@ -248,8 +265,9 @@ const METHODS_TO_IGNORE = new Set([
  *     analyze and format the method data.
  * @returns The information about the methods of the LitElement class.
  */
-export function analyzeMethods(classDeclaration: LitElementExport|
-                               LitElementDeclaration) {
+export function analyzeMethods(
+  classDeclaration: LitElementExport | LitElementDeclaration,
+) {
   const methods: MdMethodInfo[] = [];
   for (const method of classDeclaration.methods) {
     // Skip methods we decided to skip and symbols
@@ -261,14 +279,13 @@ export function analyzeMethods(classDeclaration: LitElementExport|
       name: method.name,
       description: makeMarkdownFriendly(method.description),
       privacy: method.privacy,
-      parameters: method.parameters.map(
-          (parameter) => ({
-            name: parameter.name,
-            summary: makeMarkdownFriendly(parameter.summary),
-            description: makeMarkdownFriendly(parameter.description),
-            type: makeMarkdownFriendly(parameter.type.text),
-            default: parameter.default,
-          })),
+      parameters: method.parameters.map((parameter) => ({
+        name: parameter.name,
+        summary: makeMarkdownFriendly(parameter.summary),
+        description: makeMarkdownFriendly(parameter.description),
+        type: makeMarkdownFriendly(parameter.type.text),
+        default: parameter.default,
+      })),
       returns: makeMarkdownFriendly(method.return?.type.text),
     });
   }
@@ -287,8 +304,9 @@ export function analyzeMethods(classDeclaration: LitElementExport|
  *     analyze and format the event data.
  * @returns The information about the events dispatched by the LitElement class.
  */
-export function analyzeEvents(classDeclaration: LitElementExport|
-                              LitElementDeclaration): MdEventInfo[] {
+export function analyzeEvents(
+  classDeclaration: LitElementExport | LitElementDeclaration,
+): MdEventInfo[] {
   const events: MdEventInfo[] = [];
   const eventsKeys = classDeclaration.events.keys();
 
diff --git a/scripts/analyzer/element-docs-map.ts b/scripts/analyzer/element-docs-map.ts
index 9a9a1cbd4..622adb0ee 100644
--- a/scripts/analyzer/element-docs-map.ts
+++ b/scripts/analyzer/element-docs-map.ts
@@ -38,15 +38,19 @@ export const docsToElementMapping: {[key: string]: string[]} = {
   'icon.md': ['icon/icon.ts'],
   'list.md': ['list/list.ts', 'list/list-item.ts'],
   'menu.md': ['menu/menu.ts', 'menu/menu-item.ts', 'menu/sub-menu.ts'],
-  'progress.md':
-      ['progress/linear-progress.ts', 'progress/circular-progress.ts'],
+  'progress.md': [
+    'progress/linear-progress.ts',
+    'progress/circular-progress.ts',
+  ],
   'radio.md': ['radio/radio.ts'],
   'ripple.md': ['ripple/ripple.ts'],
   'slider.md': ['slider/slider.ts'],
   'switch.md': ['switch/switch.ts'],
   'tabs.md': ['tabs/tabs.ts', 'tabs/primary-tab.ts', 'tabs/secondary-tab.ts'],
-  'text-field.md':
-      ['textfield/filled-text-field.ts', 'textfield/outlined-text-field.ts'],
+  'text-field.md': [
+    'textfield/filled-text-field.ts',
+    'textfield/outlined-text-field.ts',
+  ],
   'select.md': [
     'select/filled-select.ts',
     'select/outlined-select.ts',
diff --git a/scripts/analyzer/markdown-tree-builder.ts b/scripts/analyzer/markdown-tree-builder.ts
index 1db1220e7..27855ffa1 100644
--- a/scripts/analyzer/markdown-tree-builder.ts
+++ b/scripts/analyzer/markdown-tree-builder.ts
@@ -39,8 +39,9 @@ export class MarkdownTable {
    */
   addRow(row: string[]) {
     if (row.length !== this.columnsInternal.length) {
-      throw new Error(`Row length (${row.length}) must match column length (${
-          this.columnsInternal.length})`);
+      throw new Error(
+        `Row length (${row.length}) must match column length (${this.columnsInternal.length})`,
+      );
     }
 
     this.rowsInternal.push(row);
@@ -54,8 +55,9 @@ export class MarkdownTable {
   toString() {
     const headerRow = this.columnsInternal.join(' | ');
     const dividerRow = this.columnsInternal.map(() => '---').join(' | ');
-    const rows =
-        this.rowsInternal.map((row) => `${row.join(' | ')}`).join('\n');
+    const rows = this.rowsInternal
+      .map((row) => `${row.join(' | ')}`)
+      .join('\n');
     return `<!-- mdformat off(autogenerated might break rendering in catalog) -->
 
 ${headerRow}
diff --git a/scripts/analyzer/update-docs.ts b/scripts/analyzer/update-docs.ts
index 456528547..84c35f0cc 100644
--- a/scripts/analyzer/update-docs.ts
+++ b/scripts/analyzer/update-docs.ts
@@ -4,11 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {AbsolutePath, Analyzer, createPackageAnalyzer,} from '@lit-labs/analyzer/package-analyzer.js';
+import {
+  AbsolutePath,
+  Analyzer,
+  createPackageAnalyzer,
+} from '@lit-labs/analyzer/package-analyzer.js';
 import * as fs from 'fs/promises';
 import * as path from 'path';
 
-import {analyzeElementApi, MdMethodParameterInfo, MdModuleInfo, MdPropertyInfo,} from './analyze-element.js';
+import {
+  analyzeElementApi,
+  MdMethodParameterInfo,
+  MdModuleInfo,
+  MdPropertyInfo,
+} from './analyze-element.js';
 import {docsToElementMapping} from './element-docs-map.js';
 import {MarkdownTable} from './markdown-tree-builder.js';
 
@@ -44,7 +53,8 @@ async function updateApiDocs() {
   // Update all the documentation files in parallel
   for (const docFileName of documentationFileNames) {
     filesWritten.push(
-        updateDocFileApiSection(docFileName, analyzer, packagePath));
+      updateDocFileApiSection(docFileName, analyzer, packagePath),
+    );
   }
 
   // Wait for all the files to be written
@@ -63,7 +73,10 @@ async function updateApiDocs() {
  * @returns A promise that resolves when the file has been updated.
  */
 async function updateDocFileApiSection(
-    docFileName: string, analyzer: Analyzer, packagePath: string) {
+  docFileName: string,
+  analyzer: Analyzer,
+  packagePath: string,
+) {
   const elementEntrypoints = docsToElementMapping[docFileName];
   // This is a data structure that describes an element and its associated API
   // tables. e.g. a single section for MdFilledButton represents MdFilledButton
@@ -72,18 +85,23 @@ async function updateDocFileApiSection(
 
   for (const elementEntrypoint of elementEntrypoints) {
     elementTableSections.push(
-        generateTableSection(elementEntrypoint, packagePath, analyzer));
+      generateTableSection(elementEntrypoint, packagePath, analyzer),
+    );
   }
 
   const documentationFileContents = await fs.readFile(
-      path.resolve(packagePath, 'docs', 'components', docFileName));
+    path.resolve(packagePath, 'docs', 'components', docFileName),
+  );
 
   const updatedFileContents = insertMarkdownTables(
-      documentationFileContents.toString(), elementTableSections);
+    documentationFileContents.toString(),
+    elementTableSections,
+  );
 
   await fs.writeFile(
-      path.resolve(packagePath, 'docs', 'components', docFileName),
-      updatedFileContents);
+    path.resolve(packagePath, 'docs', 'components', docFileName),
+    updatedFileContents,
+  );
 }
 
 /**
@@ -99,10 +117,14 @@ async function updateDocFileApiSection(
  * associated with this element's section e.g. Properties, Methods, and Events.
  */
 function generateTableSection(
-    elementEntrypoint: string, packagePath: string,
-    analyzer: Analyzer): ElementTableSection {
-  const elementDoc =
-      analyzeElementApi(analyzer, path.resolve(packagePath, elementEntrypoint));
+  elementEntrypoint: string,
+  packagePath: string,
+  analyzer: Analyzer,
+): ElementTableSection {
+  const elementDoc = analyzeElementApi(
+    analyzer,
+    path.resolve(packagePath, elementEntrypoint),
+  );
   const tables: MarkdownTableSection[] = [];
 
   const propertiesTable = generateFieldMarkdownTable(elementDoc);
@@ -143,7 +165,9 @@ function generateTableSection(
  * @returns The mutated subclass row object.
  */
 function updateRow<T extends {[key: string]: unknown}>(
-    subclassRow: T, superClassRow: T) {
+  subclassRow: T,
+  superClassRow: T,
+) {
   const keys = Object.keys(superClassRow) as Array<keyof T>;
   // update the row values if they are not defined
   for (const key of keys) {
@@ -173,15 +197,16 @@ function generateFieldMarkdownTable(element: MdModuleInfo): MarkdownTable {
     'Description',
   ]);
   const fieldNameOrder: string[] = [];
-  const fieldToRow = new Map < string, {
-    name: string;
-    attribute?: string;
-    type?: string;
-    default:
-      string;
+  const fieldToRow = new Map<
+    string,
+    {
+      name: string;
+      attribute?: string;
+      type?: string;
+      default: string;
       description?: string;
-  }
-  > ();
+    }
+  >();
 
   /**
    * Adds rows to the fieldToRow map and fieldNameOrder array but deduplicates
@@ -270,13 +295,15 @@ function generateMethodMarkdownTable(element: MdModuleInfo): MarkdownTable {
     'Description',
   ]);
   const methodNameOrder: string[] = [];
-  const methodToRow = new Map < string, {
-    name: string;
-    parameters: MdMethodParameterInfo[];
-    returns?: string;
-    description?: string;
-  }
-  > ();
+  const methodToRow = new Map<
+    string,
+    {
+      name: string;
+      parameters: MdMethodParameterInfo[];
+      returns?: string;
+      description?: string;
+    }
+  >();
 
   let currentClass = element;
   while (currentClass) {
@@ -337,15 +364,17 @@ function generateEventsMarkdownTable(element: MdModuleInfo): MarkdownTable {
     'Description',
   ]);
   const eventNameOrder: string[] = [];
-  const eventToRow = new Map < string, {
-    name: string;
-    // TODO reenable these once we update our docs to support them
-    // type?: string;
-    // bubbles: boolean;
-    // composed: boolean;
-    description?: string;
-  }
-  > ();
+  const eventToRow = new Map<
+    string,
+    {
+      name: string;
+      // TODO reenable these once we update our docs to support them
+      // type?: string;
+      // bubbles: boolean;
+      // composed: boolean;
+      description?: string;
+    }
+  >();
 
   let currentClass = element;
 
@@ -400,7 +429,9 @@ function generateEventsMarkdownTable(element: MdModuleInfo): MarkdownTable {
  * @returns The updated documentation file contents with the API section.
  */
 function insertMarkdownTables(
-    fileContents: string, elementTableSections: ElementTableSection[]) {
+  fileContents: string,
+  elementTableSections: ElementTableSection[],
+) {
   // A file that has no tables to insert should have its API section cleared.
   const hasContent = elementTableSections.reduce((hasContent, element) => {
     return hasContent || element.tables.length > 0;
@@ -427,21 +458,25 @@ function insertMarkdownTables(
  */
 function replaceFileContents(fileContents: string, tablesStrings?: string) {
   const injectionPointRegex =
-      /<!-- auto-generated API docs start -->.*<!-- auto-generated API docs end -->/s;
+    /<!-- auto-generated API docs start -->.*<!-- auto-generated API docs end -->/s;
 
   if (!tablesStrings) {
     return fileContents.replace(
-        injectionPointRegex, `<!-- auto-generated API docs start -->
-<!-- auto-generated API docs end -->`);
+      injectionPointRegex,
+      `<!-- auto-generated API docs start -->
+<!-- auto-generated API docs end -->`,
+    );
   }
 
   return fileContents.replace(
-      injectionPointRegex, `<!-- auto-generated API docs start -->
+    injectionPointRegex,
+    `<!-- auto-generated API docs start -->
 
 ## API
 
 ${tablesStrings}
-<!-- auto-generated API docs end -->`);
+<!-- auto-generated API docs end -->`,
+  );
 }
 
 /**
@@ -460,12 +495,17 @@ function stringifyMarkdownTableSections(elements: ElementTableSection[]) {
     const {className, tables, customElementName} = element;
     tablesStrings += `
 ### ${className}${
-        customElementName ? ` <code>&lt;${customElementName}&gt;</code>` : ''}
-${tables.map(({name, table}) => `
+      customElementName ? ` <code>&lt;${customElementName}&gt;</code>` : ''
+    }
+${tables
+  .map(
+    ({name, table}) => `
 #### ${name}
 
 ${table.toString()}
-`).join('')}`;
+`,
+  )
+  .join('')}`;
   }
 
   return tablesStrings;
diff --git a/select/demo/demo.ts b/select/demo/demo.ts
index f3d45aa81..a1d4fc043 100644
--- a/select/demo/demo.ts
+++ b/select/demo/demo.ts
@@ -4,39 +4,53 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo, title} from './material-collection.js';
-import {boolInput, Knob, numberInput, selectDropdown, textInput} from './index.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+  title,
+} from './material-collection.js';
+import {
+  boolInput,
+  Knob,
+  numberInput,
+  selectDropdown,
+  textInput,
+} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Select', [
-      new Knob('md-select', {ui: title()}),
-      new Knob('label', {ui: textInput(), defaultValue: 'Fruit'}),
-      new Knob('typeaheadDelay', {ui: numberInput(), defaultValue: 200}),
-      new Knob('quick', {ui: boolInput(), defaultValue: false}),
-      new Knob('required', {ui: boolInput(), defaultValue: false}),
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-      new Knob('errorText', {ui: textInput(), defaultValue: ''}),
-      new Knob('supportingText', {ui: textInput(), defaultValue: ''}),
-      new Knob('menuPositioning', {
-        defaultValue: 'absolute' as const,
-        ui: selectDropdown<'absolute'|'fixed'>({
-          options: [
-            {label: 'absolute', value: 'absolute'},
-            {label: 'fixed', value: 'fixed'},
-          ]
-        })
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Select',
+  [
+    new Knob('md-select', {ui: title()}),
+    new Knob('label', {ui: textInput(), defaultValue: 'Fruit'}),
+    new Knob('typeaheadDelay', {ui: numberInput(), defaultValue: 200}),
+    new Knob('quick', {ui: boolInput(), defaultValue: false}),
+    new Knob('required', {ui: boolInput(), defaultValue: false}),
+    new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+    new Knob('errorText', {ui: textInput(), defaultValue: ''}),
+    new Knob('supportingText', {ui: textInput(), defaultValue: ''}),
+    new Knob('menuPositioning', {
+      defaultValue: 'absolute' as const,
+      ui: selectDropdown<'absolute' | 'fixed'>({
+        options: [
+          {label: 'absolute', value: 'absolute'},
+          {label: 'fixed', value: 'fixed'},
+        ],
       }),
-      new Knob('error', {ui: boolInput(), defaultValue: false}),
+    }),
+    new Knob('error', {ui: boolInput(), defaultValue: false}),
 
-      new Knob('md-select Slots', {ui: title()}),
-      new Knob('slot=leading-icon', {ui: textInput(), defaultValue: ''}),
-      new Knob('slot=trailing-icon', {ui: textInput(), defaultValue: ''}),
-    ]);
+    new Knob('md-select Slots', {ui: title()}),
+    new Knob('slot=leading-icon', {ui: textInput(), defaultValue: ''}),
+    new Knob('slot=trailing-icon', {ui: textInput(), defaultValue: ''}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/select/demo/stories.ts b/select/demo/stories.ts
index 133bf5063..068fdbe04 100644
--- a/select/demo/stories.ts
+++ b/select/demo/stories.ts
@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/select/select-option.js';
-import '@material/web/select/outlined-select.js';
-import '@material/web/select/filled-select.js';
 import '@material/web/icon/icon.js';
+import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-select.js';
+import '@material/web/select/select-option.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {html, nothing} from 'lit';
@@ -23,7 +23,7 @@ export interface StoryKnobs {
   errorText: string;
   supportingText: string;
   error: boolean;
-  menuPositioning: 'absolute'|'fixed'|undefined;
+  menuPositioning: 'absolute' | 'fixed' | undefined;
 
   'md-select Slots': void;
   'slot=leading-icon': string;
@@ -36,67 +36,66 @@ const selects: MaterialStoryInit<StoryKnobs> = {
     return html`
       <div style="display: flex; gap: 16px">
         <md-filled-select
-            .label=${knobs.label}
-            .quick=${knobs.quick}
-            .required=${knobs.required}
-            .disabled=${knobs.disabled}
-            .errorText=${knobs.errorText}
-            .supportingText=${knobs.supportingText}
-            .menuPositioning=${knobs.menuPositioning!}
-            .typeaheadDelay=${knobs.typeaheadDelay}
-            .error=${knobs.error}>
+          .label=${knobs.label}
+          .quick=${knobs.quick}
+          .required=${knobs.required}
+          .disabled=${knobs.disabled}
+          .errorText=${knobs.errorText}
+          .supportingText=${knobs.supportingText}
+          .menuPositioning=${knobs.menuPositioning!}
+          .typeaheadDelay=${knobs.typeaheadDelay}
+          .error=${knobs.error}>
           ${renderIcon(knobs['slot=leading-icon'], 'leading-icon')}
           ${renderIcon(knobs['slot=trailing-icon'], 'trailing-icon')}
           ${renderItems()}
         </md-filled-select>
 
         <md-outlined-select
-            .label=${knobs.label}
-            .quick=${knobs.quick}
-            .required=${knobs.required}
-            .disabled=${knobs.disabled}
-            .errorText=${knobs.errorText}
-            .supportingText=${knobs.supportingText}
-            .menuPositioning=${knobs.menuPositioning!}
-            .typeaheadDelay=${knobs.typeaheadDelay}
-            .error=${knobs.error}>
+          .label=${knobs.label}
+          .quick=${knobs.quick}
+          .required=${knobs.required}
+          .disabled=${knobs.disabled}
+          .errorText=${knobs.errorText}
+          .supportingText=${knobs.supportingText}
+          .menuPositioning=${knobs.menuPositioning!}
+          .typeaheadDelay=${knobs.typeaheadDelay}
+          .error=${knobs.error}>
           ${renderIcon(knobs['slot=leading-icon'], 'leading-icon')}
           ${renderIcon(knobs['slot=trailing-icon'], 'trailing-icon')}
           ${renderItems()}
         </md-outlined-select>
       </div>
     `;
-  }
+  },
 };
 
-function renderIcon(iconName: string, slot: 'leading-icon'|'trailing-icon') {
-  return iconName ?
-      html`<md-icon slot=${slot}><span>${iconName}</span></md-icon>` :
-      nothing;
+function renderIcon(iconName: string, slot: 'leading-icon' | 'trailing-icon') {
+  return iconName
+    ? html`<md-icon slot=${slot}><span>${iconName}</span></md-icon>`
+    : nothing;
 }
 
 function renderItems() {
-  return html`
-    <md-select-option aria-label="blank" value=""></md-select-option>
+  return html` <md-select-option aria-label="blank" value=""></md-select-option>
     <md-select-option selected value="apple">
       <div slot="headline">Apple</div>
     </md-select-option>
-    <md-select-option value="apricot" >
+    <md-select-option value="apricot">
       <div slot="headline">Apricot</div>
     </md-select-option>
-    <md-select-option value="apricot" >
+    <md-select-option value="apricot">
       <div slot="headline">Apricots</div>
     </md-select-option>
-    <md-select-option value="avocado" >
+    <md-select-option value="avocado">
       <div slot="headline">Avocado</div>
     </md-select-option>
-    <md-select-option value="green_apple" >
+    <md-select-option value="green_apple">
       <div slot="headline">Green Apple</div>
     </md-select-option>
-    <md-select-option value="green_grapes" >
+    <md-select-option value="green_grapes">
       <div slot="headline">Green Grapes</div>
     </md-select-option>
-    <md-select-option value="olive" >
+    <md-select-option value="olive">
       <div slot="headline">Olive</div>
     </md-select-option>
     <md-select-option value="orange">
diff --git a/select/harness.ts b/select/harness.ts
index a9a831461..51f2b1dc4 100644
--- a/select/harness.ts
+++ b/select/harness.ts
@@ -30,15 +30,17 @@ export class SelectHarness extends Harness<Select> {
 
   override async startHover() {
     const field = await this.getField();
-    const element =
-        await (new SelectFieldHardness(field)).getInteractiveElement();
+    const element = await new SelectFieldHardness(
+      field,
+    ).getInteractiveElement();
     this.simulateStartHover(element);
   }
 
   /** @return ListItem harnesses for the menu's items. */
   getItems() {
     return this.element.options.map(
-        (item) => new SelectOptionHarness(item as typeof item&LitElement));
+      (item) => new SelectOptionHarness(item as typeof item & LitElement),
+    );
   }
 
   async click() {
@@ -50,7 +52,8 @@ export class SelectHarness extends Harness<Select> {
     const menu = this.element.renderRoot.querySelector('md-menu')!;
     if (!menu.open) {
       console.warn(
-          'Internal menu is not open. Try calling SelectHarness.prototype.click()');
+        'Internal menu is not open. Try calling SelectHarness.prototype.click()',
+      );
     }
     (await this.getItems()[index].getInteractiveElement()).click();
   }
diff --git a/select/internal/select.ts b/select/internal/select.ts
index c5c0c73cd..4aeeddc07 100644
--- a/select/internal/select.ts
+++ b/select/internal/select.ts
@@ -16,11 +16,19 @@ import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
 import {redispatchEvent} from '../../internal/controller/events.js';
 import {getActiveItem} from '../../list/internal/list-navigation-helpers.js';
-import {CloseMenuEvent, isElementInSubtree, isSelectableKey} from '../../menu/internal/controllers/shared.js';
+import {
+  CloseMenuEvent,
+  isElementInSubtree,
+  isSelectableKey,
+} from '../../menu/internal/controllers/shared.js';
 import {TYPEAHEAD_RECORD} from '../../menu/internal/controllers/typeaheadController.js';
 import {DEFAULT_TYPEAHEAD_BUFFER_TIME, Menu} from '../../menu/internal/menu.js';
 
-import {createRequestDeselectionEvent, createRequestSelectionEvent, SelectOption} from './selectoption/selectOptionController.js';
+import {
+  createRequestDeselectionEvent,
+  createRequestSelectionEvent,
+  SelectOption,
+} from './selectoption/selectOptionController.js';
 import {getSelectedItems, SelectOptionRecord} from './shared.js';
 
 const VALUE = Symbol('value');
@@ -90,7 +98,7 @@ export abstract class Select extends LitElement {
    * element with stacking context and hidden overflows such as `md-dialog`.
    */
   @property({attribute: 'menu-positioning'})
-  menuPositioning: 'absolute'|'fixed' = 'absolute';
+  menuPositioning: 'absolute' | 'fixed' = 'absolute';
   /**
    * The max time between the keystrokes of the typeahead select / menu behavior
    * before it clears the typeahead buffer.
@@ -221,18 +229,18 @@ export abstract class Select extends LitElement {
   /**
    * Used for initializing select when the user sets the `value` directly.
    */
-  private lastUserSetValue: string|null = null;
+  private lastUserSetValue: string | null = null;
 
   /**
    * Used for initializing select when the user sets the `selectedIndex`
    * directly.
    */
-  private lastUserSetSelectedIndex: number|null = null;
+  private lastUserSetSelectedIndex: number | null = null;
 
   /**
    * Used for `input` and `change` event change detection.
    */
-  private lastSelectedOption: SelectOption|null = null;
+  private lastSelectedOption: SelectOption | null = null;
 
   // tslint:disable-next-line:enforce-name-casing
   private lastSelectedOptionRecords: SelectOptionRecord[] = [];
@@ -253,21 +261,23 @@ export abstract class Select extends LitElement {
 
   @state() private focused = false;
   @state() private open = false;
-  @query('.field') private readonly field!: Field|null;
-  @query('md-menu') private readonly menu!: Menu|null;
+  @query('.field') private readonly field!: Field | null;
+  @query('md-menu') private readonly menu!: Menu | null;
   @query('#label') private readonly labelEl!: HTMLElement;
   @queryAssignedElements({slot: 'leading-icon', flatten: true})
   private readonly leadingIcons!: Element[];
   private customValidationMessage = '';
-  private readonly internals =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  // Cast needed for closure
+  private readonly internals = (this as HTMLElement).attachInternals();
 
   /**
    * Selects an option given the value of the option, and updates MdSelect's
    * value.
    */
   select(value: string) {
-    const optionToSelect = this.options.find(option => option.value === value);
+    const optionToSelect = this.options.find(
+      (option) => option.value === value,
+    );
     if (optionToSelect) {
       this.selectItem(optionToSelect);
     }
@@ -329,10 +339,14 @@ export abstract class Select extends LitElement {
    * @return true if the select is valid, or false if not.
    */
   reportValidity() {
-    let invalidEvent: Event|undefined;
-    this.addEventListener('invalid', event => {
-      invalidEvent = event;
-    }, {once: true});
+    let invalidEvent: Event | undefined;
+    this.addEventListener(
+      'invalid',
+      (event) => {
+        invalidEvent = event;
+      },
+      {once: true},
+    );
 
     const valid = this.checkValidity();
     if (invalidEvent?.defaultPrevented) {
@@ -379,10 +393,9 @@ export abstract class Select extends LitElement {
   protected override render() {
     return html`
       <span
-          class="select ${classMap(this.getRenderClasses())}"
-          @focusout=${this.handleFocusout}>
-        ${this.renderField()}
-        ${this.renderMenu()}
+        class="select ${classMap(this.getRenderClasses())}"
+        @focusout=${this.handleFocusout}>
+        ${this.renderField()} ${this.renderMenu()}
       </span>
     `;
   }
@@ -402,8 +415,11 @@ export abstract class Select extends LitElement {
 
     // Case for when the DOM is streaming, there are no children, and a child
     // has [selected] set on it, we need to wait for DOM to render something.
-    if (!this.lastSelectedOptionRecords.length && !isServer &&
-        !this.options.length) {
+    if (
+      !this.lastSelectedOptionRecords.length &&
+      !isServer &&
+      !this.options.length
+    ) {
       setTimeout(() => {
         this.updateValueAndDisplayText();
       });
@@ -464,9 +480,9 @@ export abstract class Select extends LitElement {
   private renderLeadingIcon() {
     return html`
       <span class="icon leading" slot="start">
-         <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
       </span>
-     `;
+    `;
   }
 
   private renderTrailingIcon() {
@@ -474,12 +490,20 @@ export abstract class Select extends LitElement {
       <span class="icon trailing" slot="end">
         <slot name="trailing-icon" @slotchange=${this.handleIconChange}>
           <svg height="5" viewBox="7 10 10 5" focusable="false">
-            <polygon class="down" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
-            <polygon class="up" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
+            <polygon
+              class="down"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 10 12 15 17 10"></polygon>
+            <polygon
+              class="up"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 15 12 10 17 15"></polygon>
           </svg>
         </slot>
       </span>
-     `;
+    `;
   }
 
   private renderLabel() {
@@ -490,30 +514,29 @@ export abstract class Select extends LitElement {
 
   private renderMenu() {
     const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;
-    return html`
-      <md-menu
-          id="listbox"
-          default-focus="none"
-          role="listbox"
-          tabindex="-1"
-          aria-label=${ariaLabel || nothing}
-          stay-open-on-focusout
-          part="menu"
-          exportparts="focus-ring: menu-focus-ring"
-          anchor="field"
-          .open=${this.open}
-          .quick=${this.quick}
-          .positioning=${this.menuPositioning}
-          .typeaheadDelay=${this.typeaheadDelay}
-          @opening=${this.handleOpening}
-          @opened=${this.redispatchEvent}
-          @closing=${this.redispatchEvent}
-          @closed=${this.handleClosed}
-          @close-menu=${this.handleCloseMenu}
-          @request-selection=${this.handleRequestSelection}
-          @request-deselection=${this.handleRequestDeselection}>
-        ${this.renderMenuContent()}
-      </md-menu>`;
+    return html` <md-menu
+      id="listbox"
+      default-focus="none"
+      role="listbox"
+      tabindex="-1"
+      aria-label=${ariaLabel || nothing}
+      stay-open-on-focusout
+      part="menu"
+      exportparts="focus-ring: menu-focus-ring"
+      anchor="field"
+      .open=${this.open}
+      .quick=${this.quick}
+      .positioning=${this.menuPositioning}
+      .typeaheadDelay=${this.typeaheadDelay}
+      @opening=${this.handleOpening}
+      @opened=${this.redispatchEvent}
+      @closing=${this.redispatchEvent}
+      @closed=${this.handleClosed}
+      @close-menu=${this.handleCloseMenu}
+      @request-selection=${this.handleRequestSelection}
+      @request-deselection=${this.handleRequestDeselection}>
+      ${this.renderMenuContent()}
+    </md-menu>`;
   }
 
   private renderMenuContent() {
@@ -530,8 +553,10 @@ export abstract class Select extends LitElement {
     }
 
     const typeaheadController = this.menu.typeaheadController;
-    const isOpenKey = event.code === 'Space' || event.code === 'ArrowDown' ||
-        event.code === 'Enter';
+    const isOpenKey =
+      event.code === 'Space' ||
+      event.code === 'ArrowDown' ||
+      event.code === 'Enter';
 
     // Do not open if currently typing ahead because the user may be typing the
     // spacebar to match a word with a space
@@ -557,7 +582,8 @@ export abstract class Select extends LitElement {
 
       this.labelEl?.setAttribute?.('aria-live', 'polite');
       const hasChanged = this.selectItem(
-          lastActiveRecord[TYPEAHEAD_RECORD.ITEM] as SelectOption);
+        lastActiveRecord[TYPEAHEAD_RECORD.ITEM] as SelectOption,
+      );
 
       if (hasChanged) {
         this.dispatchInteractionEvents();
@@ -627,11 +653,10 @@ export abstract class Select extends LitElement {
     if (selectedOptions.length) {
       const [firstSelectedOption] = selectedOptions[0];
       hasSelectedOptionChanged =
-          this.lastSelectedOption !== firstSelectedOption;
+        this.lastSelectedOption !== firstSelectedOption;
       this.lastSelectedOption = firstSelectedOption;
       this[VALUE] = firstSelectedOption.value;
       this.displayText = firstSelectedOption.displayText;
-
     } else {
       hasSelectedOptionChanged = this.lastSelectedOption !== null;
       this.lastSelectedOption = null;
@@ -728,12 +753,16 @@ export abstract class Select extends LitElement {
    * property / attribute change.
    */
   private handleRequestSelection(
-      event: ReturnType<typeof createRequestSelectionEvent>) {
+    event: ReturnType<typeof createRequestSelectionEvent>,
+  ) {
     const requestingOptionEl = event.target as SelectOption & HTMLElement;
 
     // No-op if this item is already selected.
-    if (this.lastSelectedOptionRecords.some(
-            ([option]) => option === requestingOptionEl)) {
+    if (
+      this.lastSelectedOptionRecords.some(
+        ([option]) => option === requestingOptionEl,
+      )
+    ) {
       return;
     }
 
@@ -745,12 +774,16 @@ export abstract class Select extends LitElement {
    * property / attribute change.
    */
   private handleRequestDeselection(
-      event: ReturnType<typeof createRequestDeselectionEvent>) {
+    event: ReturnType<typeof createRequestDeselectionEvent>,
+  ) {
     const requestingOptionEl = event.target as SelectOption & HTMLElement;
 
     // No-op if this item is not even in the list of tracked selected items.
-    if (!this.lastSelectedOptionRecords.some(
-            ([option]) => option === requestingOptionEl)) {
+    if (
+      !this.lastSelectedOptionRecords.some(
+        ([option]) => option === requestingOptionEl,
+      )
+    ) {
       return;
     }
 
@@ -769,8 +802,9 @@ export abstract class Select extends LitElement {
       // User has set `.selectedIndex` directly, but internals have not yet
       // booted up.
     } else if (
-        this.lastUserSetSelectedIndex !== null &&
-        !this.lastSelectedOptionRecords.length) {
+      this.lastUserSetSelectedIndex !== null &&
+      !this.lastSelectedOptionRecords.length
+    ) {
       this.selectIndex(this.lastUserSetSelectedIndex);
 
       // Regular boot up!
@@ -798,12 +832,16 @@ export abstract class Select extends LitElement {
   private syncValidity() {
     const valueMissing = this.required && !this.value;
     const customError = !!this.customValidationMessage;
-    const validationMessage = this.customValidationMessage ||
-        valueMissing && this.getRequiredValidationMessage() || '';
+    const validationMessage =
+      this.customValidationMessage ||
+      (valueMissing && this.getRequiredValidationMessage()) ||
+      '';
 
     this.internals.setValidity(
-        {valueMissing, customError}, validationMessage,
-        this.field ?? undefined);
+      {valueMissing, customError},
+      validationMessage,
+      this.field ?? undefined,
+    );
   }
 
   // Returns the platform `<select>` validation message for i18n.
diff --git a/select/internal/selectoption/select-option.ts b/select/internal/selectoption/select-option.ts
index 7a1299b91..7f0a61173 100644
--- a/select/internal/selectoption/select-option.ts
+++ b/select/internal/selectoption/select-option.ts
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../../ripple/ripple.js';
 import '../../../focus/md-focus-ring.js';
 import '../../../labs/item/item.js';
+import '../../../ripple/ripple.js';
 
 import {html, LitElement, nothing} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
@@ -32,7 +32,7 @@ export class SelectOptionEl extends LitElement implements SelectOption {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
   };
 
   /**
@@ -55,7 +55,7 @@ export class SelectOptionEl extends LitElement implements SelectOption {
    */
   @property() value = '';
 
-  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;
+  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;
 
   @queryAssignedElements({slot: 'headline'})
   protected readonly headlineElements!: HTMLElement[];
@@ -99,8 +99,7 @@ export class SelectOptionEl extends LitElement implements SelectOption {
     return this.renderListItem(html`
       <md-item>
         <div slot="container">
-          ${this.renderRipple()}
-          ${this.renderFocusRing()}
+          ${this.renderRipple()} ${this.renderFocusRing()}
         </div>
         <slot name="start" slot="start"></slot>
         <slot name="end" slot="end"></slot>
@@ -128,7 +127,8 @@ export class SelectOptionEl extends LitElement implements SelectOption {
         class="list-item ${classMap(this.getRenderClasses())}"
         @click=${this.selectOptionController.onClick}
         @keydown=${this.selectOptionController.onKeydown}
-      >${content}</li>
+        >${content}</li
+      >
     `;
   }
 
@@ -136,22 +136,20 @@ export class SelectOptionEl extends LitElement implements SelectOption {
    * Handles rendering of the ripple element.
    */
   protected renderRipple() {
-    return html`
-      <md-ripple
-          part="ripple"
-          for="item"
-          ?disabled=${this.disabled}></md-ripple>`;
+    return html` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}></md-ripple>`;
   }
 
   /**
    * Handles rendering of the focus ring.
    */
   protected renderFocusRing() {
-    return html`
-      <md-focus-ring
-          part="focus-ring"
-          for="item"
-          inward></md-focus-ring>`;
+    return html` <md-focus-ring
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`;
   }
 
   /**
@@ -173,8 +171,9 @@ export class SelectOptionEl extends LitElement implements SelectOption {
       <slot name="overline" slot="overline"></slot>
       <slot name="headline" slot="headline"></slot>
       <slot name="supporting-text" slot="supporting-text"></slot>
-      <slot name="trailing-supporting-text"
-          slot="trailing-supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
     `;
   }
 
diff --git a/select/internal/selectoption/selectOptionController.ts b/select/internal/selectoption/selectOptionController.ts
index b545371f5..2131570cb 100644
--- a/select/internal/selectoption/selectOptionController.ts
+++ b/select/internal/selectoption/selectOptionController.ts
@@ -6,7 +6,11 @@
 
 import {ReactiveController, ReactiveControllerHost} from 'lit';
 
-import {MenuItem, MenuItemController, MenuItemControllerConfig} from '../../../menu/internal/controllers/menuItemController.js';
+import {
+  MenuItem,
+  MenuItemController,
+  MenuItemControllerConfig,
+} from '../../../menu/internal/controllers/menuItemController.js';
 
 /**
  * The interface specific to a Select Option
@@ -32,7 +36,7 @@ interface SelectOptionSelf {
  * The interface to implement for a select option. Additionally, the element
  * must have `md-list-item` and `md-menu-item` attributes on the host.
  */
-export type SelectOption = SelectOptionSelf&MenuItem;
+export type SelectOption = SelectOptionSelf & MenuItem;
 
 /**
  * Creates an event fired by a SelectOption to request selection from md-select.
@@ -67,9 +71,8 @@ export type SelectOptionConfig = MenuItemControllerConfig;
  */
 export class SelectOptionController implements ReactiveController {
   private readonly menuItemController: MenuItemController;
-  private readonly getHeadlineElements:
-      SelectOptionConfig['getHeadlineElements'];
-  private internalDisplayText: string|null = null;
+  private readonly getHeadlineElements: SelectOptionConfig['getHeadlineElements'];
+  private internalDisplayText: string | null = null;
   private lastSelected = this.host.selected;
   private firstUpdate = true;
 
@@ -122,8 +125,9 @@ export class SelectOptionController implements ReactiveController {
    * @param config The object that configures this controller's behavior.
    */
   constructor(
-      private readonly host: ReactiveControllerHost&SelectOption,
-      config: SelectOptionConfig) {
+    private readonly host: ReactiveControllerHost & SelectOption,
+    config: SelectOptionConfig,
+  ) {
     this.menuItemController = new MenuItemController(host, config);
     this.getHeadlineElements = config.getHeadlineElements;
     host.addController(this);
@@ -168,4 +172,4 @@ export class SelectOptionController implements ReactiveController {
   onKeydown = (e: KeyboardEvent) => {
     this.menuItemController.onKeydown(e);
   };
-}
\ No newline at end of file
+}
diff --git a/select/select_test.ts b/select/select_test.ts
index 685ff564c..89f870679 100644
--- a/select/select_test.ts
+++ b/select/select_test.ts
@@ -35,14 +35,15 @@ describe('<md-outlined-select>', () => {
   it('clicking on option triggers change', async () => {
     let changed = false;
     render(
-        html`
-          <md-outlined-select @change=${() => {
+      html` <md-outlined-select
+        @change=${() => {
           changed = true;
         }}>
-            <md-select-option selected></md-select-option>
-            <md-select-option></md-select-option>
-          </md-outlined-select>`,
-        root);
+        <md-select-option selected></md-select-option>
+        <md-select-option></md-select-option>
+      </md-outlined-select>`,
+      root,
+    );
     const selectEl = root.querySelector('md-outlined-select')!;
     await selectEl.updateComplete;
 
@@ -53,7 +54,7 @@ describe('<md-outlined-select>', () => {
 
   describe('forms', () => {
     createFormTests({
-      queryControl: root => root.querySelector('md-outlined-select'),
+      queryControl: (root) => root.querySelector('md-outlined-select'),
       valueTests: [
         {
           name: 'unnamed',
@@ -65,9 +66,9 @@ describe('<md-outlined-select>', () => {
           `,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form without a name')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form without a name')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'unselected',
@@ -79,7 +80,7 @@ describe('<md-outlined-select>', () => {
           `,
           assertValue(formData) {
             expect(formData.get('select')).toBe('');
-          }
+          },
         },
         {
           name: 'selected',
@@ -91,7 +92,7 @@ describe('<md-outlined-select>', () => {
           `,
           assertValue(formData) {
             expect(formData.get('select')).toBe('two');
-          }
+          },
         },
         {
           name: 'disabled',
@@ -103,10 +104,10 @@ describe('<md-outlined-select>', () => {
           `,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when disabled')
-                .toHaveSize(0);
-          }
-        }
+              .withContext('should not add anything to form when disabled')
+              .toHaveSize(0);
+          },
+        },
       ],
       resetTests: [
         {
@@ -122,9 +123,9 @@ describe('<md-outlined-select>', () => {
           },
           assertReset(select) {
             expect(select.value)
-                .withContext('select.value after reset')
-                .toBe('');
-          }
+              .withContext('select.value after reset')
+              .toBe('');
+          },
         },
         {
           name: 'reset to selected',
@@ -139,9 +140,9 @@ describe('<md-outlined-select>', () => {
           },
           assertReset(select) {
             expect(select.value)
-                .withContext('select.value after reset')
-                .toBe('two');
-          }
+              .withContext('select.value after reset')
+              .toBe('two');
+          },
         },
       ],
       restoreTests: [
@@ -155,9 +156,9 @@ describe('<md-outlined-select>', () => {
           `,
           assertRestored(select) {
             expect(select.value)
-                .withContext('select.value after restore')
-                .toBe('');
-          }
+              .withContext('select.value after restore')
+              .toBe('');
+          },
         },
         {
           name: 'restore selected',
@@ -169,11 +170,11 @@ describe('<md-outlined-select>', () => {
           `,
           assertRestored(select) {
             expect(select.value)
-                .withContext('select.value after restore')
-                .toBe('two');
-          }
+              .withContext('select.value after restore')
+              .toBe('two');
+          },
         },
-      ]
+      ],
     });
   });
 });
diff --git a/select/test/assets.ts b/select/test/assets.ts
index dd3cf824e..6de3726ee 100644
--- a/select/test/assets.ts
+++ b/select/test/assets.ts
@@ -4,13 +4,13 @@
  * User avatar as a dataurl.
  */
 export const AVATAR_URL =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=';
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=';
 
 /**
  * Example image as a dataurl.
  */
 export const IMAGE_URL =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAYAAADG4PRLAAAK4GlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUk8kWgOf/00NCgNClhN6RTgApoYciSAdRCUkgoYSYEBDEzuIKrgoiIqCu4EpTcHUpshbEggVRbNgXRBTUdbFgQ2V/4BF295333nn3nPnnO/e/c+fee2bOuQMA2Z8lFKbBcgCkCzJFYX6etJjYOBruKcABWUAFENBnscVCRmhoEEBkdv67vL+N2CFyw2LK17///6+iwOGK2QBA8QgncsTsdIQ7kfGcLRRlAoA6iOj1sjOFU3wNYUUREiDCT6Y4eYY/TnHiNKNJ0zYRYV4I0wDAk1gsUTIAJHNET8tiJyN+SFM5WAk4fAHCeQi7sXksDsLHETZPT8+Y4hGEjRF7IQBkpDqAnvgXn8l/858o9c9iJUt5Jq9pwXvzxcI0Vs7/WZr/Lelpktk9DJFB4on8w6ZqitTvTmpGoJQFiQtDZpnPman7FPMk/pGzzBZ7xc0yh+UdKF2btjBolpP4vkypn0xmxCxzxT7hsyzKCJPulSTyYswySzS3ryQ1UqrncZlS/7m8iOhZzuJHLZxlcWp44JyNl1QvkoRJ4+cK/Dzn9vWV5p4u/ku+fKZ0bSYvwl+aO2sufq6AMedTHCONjcP19pmziZTaCzM9pXsJ00Kl9tw0P6lenBUuXZuJHM65taHSGqawAkJnGQQBP0AD/sAbhCGzHUCyz+SuyJxKxCtDmCPiJ/MyaQzktnFpTAHb0pxmY2VjA8DU3Z05Dm/Dpu8kpHxyTpexHznG75H7UjynSywFoK0AANV7czr9PQBQ8gFo7WJLRFkzOvTUBwOIgAIUgRrQAnrAGFgAG+AAXIAH8AEBIAREgFiwFLABD6QDEcgGeWAdKABFYBvYASrAXlAD6sAhcAS0gePgNDgPLoNr4Ba4DwbAMHgBxsB7MAFBEA4iQ1RIDdKGDCAzyAaiQ26QDxQEhUGxUAKUDAkgCZQHbYCKoBKoAtoH1UM/Q8eg09BFqA+6Cw1Co9Ab6DOMgkmwIqwJG8LzYTrMgAPhCHgJnAwvh3PhfHgLXA5XwwfhVvg0fBm+BQ/AL+BxFEDJoJRROigLFB3lhQpBxaGSUCLUalQhqgxVjWpCdaC6UTdQA6iXqE9oLJqKpqEt0C5of3Qkmo1ejl6N3oyuQNehW9Fn0TfQg+gx9DcMGaOBMcM4Y5iYGEwyJhtTgCnDHMC0YM5hbmGGMe+xWKwy1gjriPXHxmJTsCuxm7G7sc3YTmwfdgg7jsPh1HBmOFdcCI6Fy8QV4HbhDuJO4a7jhnEf8TJ4bbwN3hcfhxfg1+PL8A34k/jr+Gf4CYIcwYDgTAghcAg5hK2E/YQOwlXCMGGCKE80IroSI4gpxHXEcmIT8RzxAfGtjIyMroyTzCIZvsxamXKZwzIXZAZlPpEUSKYkL1I8SULaQqoldZLukt6SyWRDsgc5jpxJ3kKuJ58hPyJ/lKXKWsoyZTmya2QrZVtlr8u+ohAoBhQGZSkll1JGOUq5SnkpR5AzlPOSY8mtlquUOybXLzcuT5W3lg+RT5ffLN8gf1F+RAGnYKjgo8BRyFeoUTijMERFUfWoXlQ2dQN1P/UcdVgRq2ikyFRMUSxSPKTYqzimpKBkpxSltEKpUumE0oAyStlQmamcprxV+YjybeXPKpoqDBWuyiaVJpXrKh9U56l6qHJVC1WbVW+pflajqfmopaoVq7WpPVRHq5uqL1LPVt+jfk795TzFeS7z2PMK5x2Zd08D1jDVCNNYqVGj0aMxrqml6acp1NyleUbzpZaylodWilap1kmtUW2qtps2X7tU+5T2c5oSjUFLo5XTztLGdDR0/HUkOvt0enUmdI10I3XX6zbrPtQj6tH1kvRK9br0xvS19YP18/Qb9e8ZEAzoBjyDnQbdBh8MjQyjDTcathmOGKkaMY1yjRqNHhiTjd2NlxtXG980wZrQTVJNdptcM4VN7U15ppWmV81gMwczvtlusz5zjLmTucC82rzfgmTBsMiyaLQYtFS2DLJcb9lm+Wq+/vy4+cXzu+d/s7K3SrPab3XfWsE6wHq9dYf1GxtTG7ZNpc1NW7Ktr+0a23bb13Zmdly7PXZ37Kn2wfYb7bvsvzo4OogcmhxGHfUdExyrHPvpivRQ+mb6BSeMk6fTGqfjTp+cHZwznY84/+Fi4ZLq0uAyssBoAXfB/gVDrrquLNd9rgNuNLcEtx/dBtx13Fnu1e6PPfQ8OB4HPJ4xTBgpjIOMV55WniLPFs8PXs5eq7w6vVHeft6F3r0+Cj6RPhU+j3x1fZN9G33H/Oz9Vvp1+mP8A/2L/fuZmkw2s545FuAYsCrgbCApMDywIvBxkGmQKKgjGA4OCN4e/GChwULBwrYQEMIM2R7yMNQodHnor4uwi0IXVS56GmYdlhfWHU4NXxbeEP4+wjNia8T9SONISWRXFCUqPqo+6kO0d3RJ9EDM/JhVMZdj1WP5se1xuLiouANx44t9Fu9YPBxvH18Qf3uJ0ZIVSy4uVV+atvTEMsoy1rKjCZiE6ISGhC+sEFY1azyRmViVOMb2Yu9kv+B4cEo5o1xXbgn3WZJrUknSSLJr8vbkUZ47r4z3ku/Fr+C/TvFP2ZvyITUktTZ1Mi06rTkdn56QfkygIEgVnM3QyliR0Sc0ExYIB5Y7L9+xfEwUKDoghsRLxO2ZikiT1CMxlnwnGcxyy6rM+pgdlX10hfwKwYqeHNOcTTnPcn1zf1qJXsle2ZWnk7cub3AVY9W+1dDqxNVda/TW5K8ZXuu3tm4dcV3quivrrdaXrH+3IXpDR75m/tr8oe/8vmsskC0QFfRvdNm493v09/zvezfZbtq16Vshp/BSkVVRWdGXzezNl36w/qH8h8ktSVt6tzps3bMNu02w7Xaxe3FdiXxJbsnQ9uDtraW00sLSdzuW7bhYZle2dydxp2TnQHlQefsu/V3bdn2p4FXcqvSsbK7SqNpU9WE3Z/f1PR57mvZq7i3a+/lH/o939vnta602rC6rwdZk1TzdH7W/+yf6T/UH1A8UHfhaK6gdqAurO1vvWF/foNGwtRFulDSOHow/eO2Q96H2Joumfc3KzUWHwWHJ4ec/J/x8+0jgka6j9KNNvxj8UtVCbSlshVpzWsfaeG0D7bHtfccCjnV1uHS0/Gr5a+1xneOVJ5RObD1JPJl/cvJU7qnxTmHny9PJp4e6lnXdPxNz5ubZRWd7zwWeu3De9/yZbkb3qQuuF45fdL547BL9Uttlh8utPfY9LVfsr7T0OvS2XnW82n7N6VpH34K+k9fdr5++4X3j/E3mzcu3Ft7qux15+05/fP/AHc6dkbtpd1/fy7o3cX/tA8yDwodyD8seaTyq/s3kt+YBh4ETg96DPY/DH98fYg+9eCJ+8mU4/yn5adkz7Wf1IzYjx0d9R689X/x8+IXwxcTLgt/lf696Zfzqlz88/ugZixkbfi16Pflm81u1t7Xv7N51jYeOP3qf/n7iQ+FHtY91n+ifuj9Hf342kf0F96X8q8nXjm+B3x5Mpk9OClki1nQrgEIGnJQEwJtapDeOBYCK9OXExTO99bRAM++BaQL/iWf672lxAKCmH4CIlQAEXQFgVwXSziL+KcibIJSC6F0AbGsrHf8ScZKtzYwvkjvSmjycnHxrDACuGICvxZOTEzWTk19rkGDvA9CZM9PTT4kW8r7IxgH8xif38ne/Av+QmX7/Lzn+cwZTEdiBf85/AsPlG21SePNzAAAAXGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAACoAIABAAAAAEAAABwoAMABAAAAAEAAABwAAAAAAzs/hgAAAK2aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTEyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjExMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqSz/U6AAAH10lEQVR4Ae2d+0/bSBDHJ0+SAAmEV4uOQum1V+lOp7v74f7/P+GkU6WWKyWEvENCQkLeCTdft0EgIDj22t61dyWUYK93x/PxrHd3Zjehk6+5W9JJVQ3MwqpKruX+rgENUPEnQQPUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiRxWX/0nxOzc9+nLyH4XDYfrz998oFAo9mc8PB33XhN7e3lK5UqHuzQ1ddzpUu7wkHPNr8h3Aq1abavXGHa98oUjD4ejuf7998RXA6XRKF8UiTSbjO0433JyWq1XfWqGvAJarNWq1O3fw5l9KlSq1rx8fn59X+dM3AEejERVLZba02SMe4/GYCnxuOn187lFmxQ74BmChVKL+YPCs+lttvBvrz55X9YQvAHa4t1mq1BYymEwmVK7VCNbop6Q8QDSL+UKJOy6TF7l0Ol0qlisv5lMpg/IA640GXTabpnSO8SB6qYuaWlMFSZRJaYAY3xWKpaWGCLDYs/M8zWb+6NAoDbBYLhszLssaRLN5RVfcqfFDUhZgr9c3hgZWIEx4wJ9jKzTz3rRSvpvXKAkQzR/eZXaawU73hqo+GFYoCbDVvubpscXDBjNWkDu/oMGCsaOZMrzOoxzAwWBIufyFEL2NeegBS1bZW6EUQCga7qFOtysEIAopV+vsdhJXnjDBTBakFMBef0DVWl2oxRjvU3Y5qTpPqhTAfKFAN72eyWfTfDZMBNTZslVMygBsXrWo0TA342IFBLwVKnZolACId18uz+M2Hr85lRCCUeJQjNlMrfALJQAiTMKNjobRoemq5fiVHiDcP99y504Z3oNyUVfJcAqrY4VSA/zuPShZmu98QGaJfy55nrQiYJJgiSptZZUaIGZcMO5zM2FYkefBPQKkVEjSAkRnAp0KzLy4nfo83qzweFOFDo20AOGohQV6lS6MeFL3H55l71dKgGjGihyk5GX8ymA45PCLsi2Px7IwrOSXEiAmq+Hu8TpVOAiqfe1dK2Dm/qUDCKuDq0gGD8FkMuWAqSK3BC8HTJlRthN5pAOICWuZPOUjhjedygtQuuVl6fU1+vXjL9JAjK/EaWVlxQnjEVKmdACxlm97Kyvk5oJQiHRNaBCULvIeNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqpZuJEXlzIsvC5PqQN1KAg3k8Ht0FAkeiEYrHYpTg6bZ4PO76rlAa4ALKgNbv96nO8agNjpXByt4Zh1rM+PjcWxIKhRkaUSQcoUQiTq/39mgjk6FkMuEKTGEA4XJxc9Y+EolSLCZM/AcYAQeWhoUvlwxvtGBjBGxrwtkNx++4O2Y/5jdKJZPGfO7+qz2GmnhQtuh/QicCfj8QPrx//v3kSNj7czecSqXo77/+eO605eOA0eBQ+5PTb4S9Z+wkyHh8eMAwt+wUs+haMb8fiIUhTqxZWCR5z4E1EnDgnuZy9OnzF9vwIDtk/PT5hE7Pco4FSDnTBi3SvKTnAA8BxAijmL/fRIiKsrC1CdxkR2/e8BaYYre+1MMIpgQl5y4uDHh2lm0/BxxlYvHMOdch8uFAfRogK+GSQxirHIfjBLw5VJRdYku8arXmh4R8Bh4g3t+nZ+eE5dZOJ9SBukQ+KIEGiB4nmjXEgLqV0NlDpJuopjTQAAfDgetrL/CgYHsTu0OU+QMXaIBYd+jV2ov2tZiNFQILEAtXMMviVWpdt4U0o4EFiH21vVwTj0G+iI5TYAEi4nrRHKfTltmHV2Nkf/PZwAKcztirwGMzrxLmj0UsIg0swFuG5yVA1D17YoP2ZR+owAJcVlGy5g8sQPyuEv68SrFolCKRiO3qvbsD26LbKyDGYRBRAQq0KkWEAYp4gIILMBrjZWNxq/q3fV0iwTE0Mfv1BxZglIOR1tfWbIOwWkCa64YMdlNgAUJxCHXw6rcFs5sbQuoONMBMep3W1lbtGsHS129ns8KsP9AA0Qs82N9fGoDdC37afy2kBwo5Ag0QCsBy7s0NMc0ZynspbWU3KZNJv5TN9PnAA0RX/t3RoSs9UgT7vj9+K+TdNycceIBQBN6DRwcH3Ct0LkgPY87jw0Phgb4a4I9H+dXeLn14d+zI4B7wPn54Tzvb4gN8nXvk5jbu0KcT3f/dnW2W9pbOeKsv7FgoIiVTSfr48zvKpMW99+7LJQRgJBKmvd0dV/cVy6yv378PYd93tncovZ6mk6+nxg9kWQ0+wrqN7MYmHXFofdLB9RFC1kYI055EBQEcYjhz+YLxe/RmRUPLkN3cpP1Xu8anEy3FPVlmQizwXoG++ToHgSEG9m9rXjWNjdcRFoiIMoTiI2E6LLGSoNXVFA/OV2k7u8UdFfe25tIAX3jkAHKV32Op5L7hAP7uiOX1gT+8+VgfiPUOYe6ohDmvwxb3SFoN8JFKnj4AMJi5EeHDe7oGa0f1MMKa3qS5SgOUBoU1QTRAa3qT5ioNUBoU1gTRAK3pTZqrNEBpUFgTRAO0pjdprtIApUFhTRAN0JrepLlKA5QGhTVBNEBrepPmKg1QGhTWBNEArelNmqs0QGlQWBNEA7SmN2mugj/Qu3XGzqhB7G5yzsgorNT/AQI1K7I2zvkPAAAAAElFTkSuQmCC';
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAYAAADG4PRLAAAK4GlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUk8kWgOf/00NCgNClhN6RTgApoYciSAdRCUkgoYSYEBDEzuIKrgoiIqCu4EpTcHUpshbEggVRbNgXRBTUdbFgQ2V/4BF295333nn3nPnnO/e/c+fee2bOuQMA2Z8lFKbBcgCkCzJFYX6etJjYOBruKcABWUAFENBnscVCRmhoEEBkdv67vL+N2CFyw2LK17///6+iwOGK2QBA8QgncsTsdIQ7kfGcLRRlAoA6iOj1sjOFU3wNYUUREiDCT6Y4eYY/TnHiNKNJ0zYRYV4I0wDAk1gsUTIAJHNET8tiJyN+SFM5WAk4fAHCeQi7sXksDsLHETZPT8+Y4hGEjRF7IQBkpDqAnvgXn8l/858o9c9iJUt5Jq9pwXvzxcI0Vs7/WZr/Lelpktk9DJFB4on8w6ZqitTvTmpGoJQFiQtDZpnPman7FPMk/pGzzBZ7xc0yh+UdKF2btjBolpP4vkypn0xmxCxzxT7hsyzKCJPulSTyYswySzS3ryQ1UqrncZlS/7m8iOhZzuJHLZxlcWp44JyNl1QvkoRJ4+cK/Dzn9vWV5p4u/ku+fKZ0bSYvwl+aO2sufq6AMedTHCONjcP19pmziZTaCzM9pXsJ00Kl9tw0P6lenBUuXZuJHM65taHSGqawAkJnGQQBP0AD/sAbhCGzHUCyz+SuyJxKxCtDmCPiJ/MyaQzktnFpTAHb0pxmY2VjA8DU3Z05Dm/Dpu8kpHxyTpexHznG75H7UjynSywFoK0AANV7czr9PQBQ8gFo7WJLRFkzOvTUBwOIgAIUgRrQAnrAGFgAG+AAXIAH8AEBIAREgFiwFLABD6QDEcgGeWAdKABFYBvYASrAXlAD6sAhcAS0gePgNDgPLoNr4Ba4DwbAMHgBxsB7MAFBEA4iQ1RIDdKGDCAzyAaiQ26QDxQEhUGxUAKUDAkgCZQHbYCKoBKoAtoH1UM/Q8eg09BFqA+6Cw1Co9Ab6DOMgkmwIqwJG8LzYTrMgAPhCHgJnAwvh3PhfHgLXA5XwwfhVvg0fBm+BQ/AL+BxFEDJoJRROigLFB3lhQpBxaGSUCLUalQhqgxVjWpCdaC6UTdQA6iXqE9oLJqKpqEt0C5of3Qkmo1ejl6N3oyuQNehW9Fn0TfQg+gx9DcMGaOBMcM4Y5iYGEwyJhtTgCnDHMC0YM5hbmGGMe+xWKwy1gjriPXHxmJTsCuxm7G7sc3YTmwfdgg7jsPh1HBmOFdcCI6Fy8QV4HbhDuJO4a7jhnEf8TJ4bbwN3hcfhxfg1+PL8A34k/jr+Gf4CYIcwYDgTAghcAg5hK2E/YQOwlXCMGGCKE80IroSI4gpxHXEcmIT8RzxAfGtjIyMroyTzCIZvsxamXKZwzIXZAZlPpEUSKYkL1I8SULaQqoldZLukt6SyWRDsgc5jpxJ3kKuJ58hPyJ/lKXKWsoyZTmya2QrZVtlr8u+ohAoBhQGZSkll1JGOUq5SnkpR5AzlPOSY8mtlquUOybXLzcuT5W3lg+RT5ffLN8gf1F+RAGnYKjgo8BRyFeoUTijMERFUfWoXlQ2dQN1P/UcdVgRq2ikyFRMUSxSPKTYqzimpKBkpxSltEKpUumE0oAyStlQmamcprxV+YjybeXPKpoqDBWuyiaVJpXrKh9U56l6qHJVC1WbVW+pflajqfmopaoVq7WpPVRHq5uqL1LPVt+jfk795TzFeS7z2PMK5x2Zd08D1jDVCNNYqVGj0aMxrqml6acp1NyleUbzpZaylodWilap1kmtUW2qtps2X7tU+5T2c5oSjUFLo5XTztLGdDR0/HUkOvt0enUmdI10I3XX6zbrPtQj6tH1kvRK9br0xvS19YP18/Qb9e8ZEAzoBjyDnQbdBh8MjQyjDTcathmOGKkaMY1yjRqNHhiTjd2NlxtXG980wZrQTVJNdptcM4VN7U15ppWmV81gMwczvtlusz5zjLmTucC82rzfgmTBsMiyaLQYtFS2DLJcb9lm+Wq+/vy4+cXzu+d/s7K3SrPab3XfWsE6wHq9dYf1GxtTG7ZNpc1NW7Ktr+0a23bb13Zmdly7PXZ37Kn2wfYb7bvsvzo4OogcmhxGHfUdExyrHPvpivRQ+mb6BSeMk6fTGqfjTp+cHZwznY84/+Fi4ZLq0uAyssBoAXfB/gVDrrquLNd9rgNuNLcEtx/dBtx13Fnu1e6PPfQ8OB4HPJ4xTBgpjIOMV55WniLPFs8PXs5eq7w6vVHeft6F3r0+Cj6RPhU+j3x1fZN9G33H/Oz9Vvp1+mP8A/2L/fuZmkw2s545FuAYsCrgbCApMDywIvBxkGmQKKgjGA4OCN4e/GChwULBwrYQEMIM2R7yMNQodHnor4uwi0IXVS56GmYdlhfWHU4NXxbeEP4+wjNia8T9SONISWRXFCUqPqo+6kO0d3RJ9EDM/JhVMZdj1WP5se1xuLiouANx44t9Fu9YPBxvH18Qf3uJ0ZIVSy4uVV+atvTEMsoy1rKjCZiE6ISGhC+sEFY1azyRmViVOMb2Yu9kv+B4cEo5o1xXbgn3WZJrUknSSLJr8vbkUZ47r4z3ku/Fr+C/TvFP2ZvyITUktTZ1Mi06rTkdn56QfkygIEgVnM3QyliR0Sc0ExYIB5Y7L9+xfEwUKDoghsRLxO2ZikiT1CMxlnwnGcxyy6rM+pgdlX10hfwKwYqeHNOcTTnPcn1zf1qJXsle2ZWnk7cub3AVY9W+1dDqxNVda/TW5K8ZXuu3tm4dcV3quivrrdaXrH+3IXpDR75m/tr8oe/8vmsskC0QFfRvdNm493v09/zvezfZbtq16Vshp/BSkVVRWdGXzezNl36w/qH8h8ktSVt6tzps3bMNu02w7Xaxe3FdiXxJbsnQ9uDtraW00sLSdzuW7bhYZle2dydxp2TnQHlQefsu/V3bdn2p4FXcqvSsbK7SqNpU9WE3Z/f1PR57mvZq7i3a+/lH/o939vnta602rC6rwdZk1TzdH7W/+yf6T/UH1A8UHfhaK6gdqAurO1vvWF/foNGwtRFulDSOHow/eO2Q96H2Joumfc3KzUWHwWHJ4ec/J/x8+0jgka6j9KNNvxj8UtVCbSlshVpzWsfaeG0D7bHtfccCjnV1uHS0/Gr5a+1xneOVJ5RObD1JPJl/cvJU7qnxTmHny9PJp4e6lnXdPxNz5ubZRWd7zwWeu3De9/yZbkb3qQuuF45fdL547BL9Uttlh8utPfY9LVfsr7T0OvS2XnW82n7N6VpH34K+k9fdr5++4X3j/E3mzcu3Ft7qux15+05/fP/AHc6dkbtpd1/fy7o3cX/tA8yDwodyD8seaTyq/s3kt+YBh4ETg96DPY/DH98fYg+9eCJ+8mU4/yn5adkz7Wf1IzYjx0d9R689X/x8+IXwxcTLgt/lf696Zfzqlz88/ugZixkbfi16Pflm81u1t7Xv7N51jYeOP3qf/n7iQ+FHtY91n+ifuj9Hf342kf0F96X8q8nXjm+B3x5Mpk9OClki1nQrgEIGnJQEwJtapDeOBYCK9OXExTO99bRAM++BaQL/iWf672lxAKCmH4CIlQAEXQFgVwXSziL+KcibIJSC6F0AbGsrHf8ScZKtzYwvkjvSmjycnHxrDACuGICvxZOTEzWTk19rkGDvA9CZM9PTT4kW8r7IxgH8xif38ne/Av+QmX7/Lzn+cwZTEdiBf85/AsPlG21SePNzAAAAXGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAACoAIABAAAAAEAAABwoAMABAAAAAEAAABwAAAAAAzs/hgAAAK2aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTEyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjExMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqSz/U6AAAH10lEQVR4Ae2d+0/bSBDHJ0+SAAmEV4uOQum1V+lOp7v74f7/P+GkU6WWKyWEvENCQkLeCTdft0EgIDj22t61dyWUYK93x/PxrHd3Zjehk6+5W9JJVQ3MwqpKruX+rgENUPEnQQPUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiRxWX/0nxOzc9+nLyH4XDYfrz998oFAo9mc8PB33XhN7e3lK5UqHuzQ1ddzpUu7wkHPNr8h3Aq1abavXGHa98oUjD4ejuf7998RXA6XRKF8UiTSbjO0433JyWq1XfWqGvAJarNWq1O3fw5l9KlSq1rx8fn59X+dM3AEejERVLZba02SMe4/GYCnxuOn187lFmxQ74BmChVKL+YPCs+lttvBvrz55X9YQvAHa4t1mq1BYymEwmVK7VCNbop6Q8QDSL+UKJOy6TF7l0Ol0qlisv5lMpg/IA640GXTabpnSO8SB6qYuaWlMFSZRJaYAY3xWKpaWGCLDYs/M8zWb+6NAoDbBYLhszLssaRLN5RVfcqfFDUhZgr9c3hgZWIEx4wJ9jKzTz3rRSvpvXKAkQzR/eZXaawU73hqo+GFYoCbDVvubpscXDBjNWkDu/oMGCsaOZMrzOoxzAwWBIufyFEL2NeegBS1bZW6EUQCga7qFOtysEIAopV+vsdhJXnjDBTBakFMBef0DVWl2oxRjvU3Y5qTpPqhTAfKFAN72eyWfTfDZMBNTZslVMygBsXrWo0TA342IFBLwVKnZolACId18uz+M2Hr85lRCCUeJQjNlMrfALJQAiTMKNjobRoemq5fiVHiDcP99y504Z3oNyUVfJcAqrY4VSA/zuPShZmu98QGaJfy55nrQiYJJgiSptZZUaIGZcMO5zM2FYkefBPQKkVEjSAkRnAp0KzLy4nfo83qzweFOFDo20AOGohQV6lS6MeFL3H55l71dKgGjGihyk5GX8ymA45PCLsi2Px7IwrOSXEiAmq+Hu8TpVOAiqfe1dK2Dm/qUDCKuDq0gGD8FkMuWAqSK3BC8HTJlRthN5pAOICWuZPOUjhjedygtQuuVl6fU1+vXjL9JAjK/EaWVlxQnjEVKmdACxlm97Kyvk5oJQiHRNaBCULvIeNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqpZuJEXlzIsvC5PqQN1KAg3k8Ht0FAkeiEYrHYpTg6bZ4PO76rlAa4ALKgNbv96nO8agNjpXByt4Zh1rM+PjcWxIKhRkaUSQcoUQiTq/39mgjk6FkMuEKTGEA4XJxc9Y+EolSLCZM/AcYAQeWhoUvlwxvtGBjBGxrwtkNx++4O2Y/5jdKJZPGfO7+qz2GmnhQtuh/QicCfj8QPrx//v3kSNj7czecSqXo77/+eO605eOA0eBQ+5PTb4S9Z+wkyHh8eMAwt+wUs+haMb8fiIUhTqxZWCR5z4E1EnDgnuZy9OnzF9vwIDtk/PT5hE7Pco4FSDnTBi3SvKTnAA8BxAijmL/fRIiKsrC1CdxkR2/e8BaYYre+1MMIpgQl5y4uDHh2lm0/BxxlYvHMOdch8uFAfRogK+GSQxirHIfjBLw5VJRdYku8arXmh4R8Bh4g3t+nZ+eE5dZOJ9SBukQ+KIEGiB4nmjXEgLqV0NlDpJuopjTQAAfDgetrL/CgYHsTu0OU+QMXaIBYd+jV2ov2tZiNFQILEAtXMMviVWpdt4U0o4EFiH21vVwTj0G+iI5TYAEi4nrRHKfTltmHV2Nkf/PZwAKcztirwGMzrxLmj0UsIg0swFuG5yVA1D17YoP2ZR+owAJcVlGy5g8sQPyuEv68SrFolCKRiO3qvbsD26LbKyDGYRBRAQq0KkWEAYp4gIILMBrjZWNxq/q3fV0iwTE0Mfv1BxZglIOR1tfWbIOwWkCa64YMdlNgAUJxCHXw6rcFs5sbQuoONMBMep3W1lbtGsHS129ns8KsP9AA0Qs82N9fGoDdC37afy2kBwo5Ag0QCsBy7s0NMc0ZynspbWU3KZNJv5TN9PnAA0RX/t3RoSs9UgT7vj9+K+TdNycceIBQBN6DRwcH3Ct0LkgPY87jw0Phgb4a4I9H+dXeLn14d+zI4B7wPn54Tzvb4gN8nXvk5jbu0KcT3f/dnW2W9pbOeKsv7FgoIiVTSfr48zvKpMW99+7LJQRgJBKmvd0dV/cVy6yv378PYd93tncovZ6mk6+nxg9kWQ0+wrqN7MYmHXFofdLB9RFC1kYI055EBQEcYjhz+YLxe/RmRUPLkN3cpP1Xu8anEy3FPVlmQizwXoG++ToHgSEG9m9rXjWNjdcRFoiIMoTiI2E6LLGSoNXVFA/OV2k7u8UdFfe25tIAX3jkAHKV32Op5L7hAP7uiOX1gT+8+VgfiPUOYe6ohDmvwxb3SFoN8JFKnj4AMJi5EeHDe7oGa0f1MMKa3qS5SgOUBoU1QTRAa3qT5ioNUBoU1gTRAK3pTZqrNEBpUFgTRAO0pjdprtIApUFhTRAN0JrepLlKA5QGhTVBNEBrepPmKg1QGhTWBNEArelNmqs0QGlQWBNEA7SmN2mugj/Qu3XGzqhB7G5yzsgorNT/AQI1K7I2zvkPAAAAAElFTkSuQmCC';
 
 /**
  * One frame of the color blue in webm as a dataurl.
@@ -20,4 +20,4 @@ export const IMAGE_URL =
  * cat ~/out.webm | base64 | tr -d '\n'
  */
 export const VIDEO_URL =
-    'data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAJrEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHYTbuMU6uEElTDZ1OsggEgTbuMU6uEHFO7a1OsggJV7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmsirXsYMPQkBNgI1MYXZmNTkuMjcuMTAwV0GNTGF2ZjU5LjI3LjEwMESJiEBEAAAAAAAAFlSua8OuAQAAAAAAADrXgQFzxYjFaDr5zFhASZyBACK1nIN1bmSIgQCGhVZfVlA5g4EBI+ODhAJiWgDgi7CCBQC6ggLQmoECElTDZ0CBc3OgY8CAZ8iaRaOHRU5DT0RFUkSHjUxhdmY1OS4yNy4xMDBzc9tjwItjxYjFaDr5zFhASWfIpUWjh0VOQ09ERVJEh5hMYXZjNTkuMzcuMTAwIGxpYnZweC12cDlnyKJFo4hEVVJBVElPTkSHlDAwOjAwOjAwLjA0MDAwMDAwMAAAH0O2dUCo54EAo0CigQAAgIJJg0IAT/As9gA4JBwYShgAQGIMw/o6+kdo6+kAuaP9KgAAAAAcZw5Vl/m2cRY6ymCqlMFVJYKqSwVSleqUBBBCAAAAABxnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAAAAAHGcOVZf5tnEWOspgqpTBVSWCqksFUpXqlAQQQgBnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAHFO7a5G7j7OBALeK94EB8YIBp/CBAw==';
\ No newline at end of file
+  'data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAJrEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHYTbuMU6uEElTDZ1OsggEgTbuMU6uEHFO7a1OsggJV7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmsirXsYMPQkBNgI1MYXZmNTkuMjcuMTAwV0GNTGF2ZjU5LjI3LjEwMESJiEBEAAAAAAAAFlSua8OuAQAAAAAAADrXgQFzxYjFaDr5zFhASZyBACK1nIN1bmSIgQCGhVZfVlA5g4EBI+ODhAJiWgDgi7CCBQC6ggLQmoECElTDZ0CBc3OgY8CAZ8iaRaOHRU5DT0RFUkSHjUxhdmY1OS4yNy4xMDBzc9tjwItjxYjFaDr5zFhASWfIpUWjh0VOQ09ERVJEh5hMYXZjNTkuMzcuMTAwIGxpYnZweC12cDlnyKJFo4hEVVJBVElPTkSHlDAwOjAwOjAwLjA0MDAwMDAwMAAAH0O2dUCo54EAo0CigQAAgIJJg0IAT/As9gA4JBwYShgAQGIMw/o6+kdo6+kAuaP9KgAAAAAcZw5Vl/m2cRY6ymCqlMFVJYKqSwVSleqUBBBCAAAAABxnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAAAAAHGcOVZf5tnEWOspgqpTBVSWCqksFUpXqlAQQQgBnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAHFO7a5G7j7OBALeK94EB8YIBp/CBAw==';
diff --git a/slider/demo/demo.ts b/slider/demo/demo.ts
index 501285804..42cbdb3ff 100644
--- a/slider/demo/demo.ts
+++ b/slider/demo/demo.ts
@@ -4,18 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Slider', [
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Slider',
+  [new Knob('disabled', {ui: boolInput(), defaultValue: false})],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/slider/demo/stories.ts b/slider/demo/stories.ts
index be7bfa17c..5e24b53ef 100644
--- a/slider/demo/stories.ts
+++ b/slider/demo/stories.ts
@@ -6,7 +6,10 @@
 
 import '@material/web/slider/slider.js';
 
-import {labelStyles, MaterialStoryInit} from './material-collection.js';
+import {
+  labelStyles,
+  MaterialStoryInit,
+} from './material-collection.js';
 import {MdSlider} from '@material/web/slider/slider.js';
 import {css, html} from 'lit';
 
@@ -31,26 +34,30 @@ const single: MaterialStoryInit<StoryKnobs> = {
     return html`
       <label>
         Continuous
-        <md-slider ?disabled=${disabled ?? false}
-          aria-label="An example continuous slider"
-        ></md-slider>
+        <md-slider
+          ?disabled=${disabled ?? false}
+          aria-label="An example continuous slider"></md-slider>
       </label>
 
       <label>
         Labeled
-        <md-slider labeled ?disabled=${disabled ?? false}
-          aria-label="An example slider with a label"
-        ></md-slider>
+        <md-slider
+          labeled
+          ?disabled=${disabled ?? false}
+          aria-label="An example slider with a label"></md-slider>
       </label>
 
       <label>
         Tick marks
-        <md-slider labeled step="10" ticks ?disabled=${disabled ?? false}
-          aria-label="An example slider with tick marks"
-        ></md-slider>
+        <md-slider
+          labeled
+          step="10"
+          ticks
+          ?disabled=${disabled ?? false}
+          aria-label="An example slider with tick marks"></md-slider>
       </label>
     `;
-  }
+  },
 };
 
 const range: MaterialStoryInit<StoryKnobs> = {
@@ -60,27 +67,35 @@ const range: MaterialStoryInit<StoryKnobs> = {
     return html`
       <label>
         Range
-        <md-slider range ?disabled=${disabled ?? false}
-          aria-label="An example range slider"
-        ></md-slider>
+        <md-slider
+          range
+          ?disabled=${disabled ?? false}
+          aria-label="An example range slider"></md-slider>
       </label>
 
       <label>
         Labeled
-        <md-slider labeled range ?disabled=${disabled ?? false}
-          aria-label="An example range slider with labels"
-        ></md-slider>
+        <md-slider
+          labeled
+          range
+          ?disabled=${disabled ?? false}
+          aria-label="An example range slider with labels"></md-slider>
       </label>
 
       <label>
         Tick marks
-        <md-slider labeled range step="10" ticks ?disabled=${disabled ?? false}
-          value-start="30" value-end="70"
-          aria-label="An example range slider with tick marks"
-        ></md-slider>
+        <md-slider
+          labeled
+          range
+          step="10"
+          ticks
+          ?disabled=${disabled ?? false}
+          value-start="30"
+          value-end="70"
+          aria-label="An example range slider with tick marks"></md-slider>
       </label>
     `;
-  }
+  },
 };
 
 const customStyling: MaterialStoryInit<StoryKnobs> = {
@@ -155,11 +170,10 @@ const customStyling: MaterialStoryInit<StoryKnobs> = {
           step="1"
           .disabled=${disabled ?? false}
           @pointerdown=${updateLabel}
-          @input=${updateLabel}
-        ></md-slider>
+          @input=${updateLabel}></md-slider>
       </label>
     `;
-  }
+  },
 };
 
 /** slider stories. */
diff --git a/slider/harness.ts b/slider/harness.ts
index 59215c339..9ef5dbba7 100644
--- a/slider/harness.ts
+++ b/slider/harness.ts
@@ -14,19 +14,21 @@ import {Slider} from './internal/slider.js';
 export class SliderHarness extends Harness<Slider> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!;
+    return this.element.renderRoot.querySelector<HTMLInputElement>(
+      'input.end',
+    )!;
   }
 
   getInputs() {
     return [
       this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!,
-      this.element.renderRoot.querySelector<HTMLInputElement>('input.start')!
+      this.element.renderRoot.querySelector<HTMLInputElement>('input.start')!,
     ];
   }
   getHandles() {
     return [
       this.element.renderRoot.querySelector('.handle.end')!,
-      this.element.renderRoot.querySelector('.handle.start')!
+      this.element.renderRoot.querySelector('.handle.start')!,
     ];
   }
 
@@ -36,7 +38,7 @@ export class SliderHarness extends Harness<Slider> {
 
   isLabelShowing() {
     const labels = this.getLabels();
-    return labels.some(l => {
+    return labels.some((l) => {
       // remove transition to avoid the need to wait for it.
       (l as HTMLElement).style.setProperty('transition', 'none');
       const {width} = l.getBoundingClientRect();
@@ -47,7 +49,7 @@ export class SliderHarness extends Harness<Slider> {
 
   async simulateValueInteraction(value: number, el?: HTMLInputElement) {
     if (!el) {
-      el = (this.getInputs())[0];
+      el = this.getInputs()[0];
     }
     el.focus();
     el.dispatchEvent(new Event('pointerdown', {bubbles: true, composed: true}));
@@ -65,16 +67,20 @@ export class SliderHarness extends Harness<Slider> {
   }
 
   protected override simulateStartHover(
-      element: HTMLElement, init: PointerEventInit = {}) {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+  ) {
     const i = this.getInputs().indexOf(element as HTMLInputElement);
-    if ((i >= 0) || (element === this.element)) {
+    if (i >= 0 || element === this.element) {
       init = this.positionEventAtHandle(init, i === 1);
     }
     super.simulateStartHover(element, init);
   }
 
   protected override simulateMousePress(
-      element: HTMLElement, init: PointerEventInit = {}) {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+  ) {
     super.simulateMousePress(element, init);
     // advance beyond RAF, which is used by the element's pointerDown handler.
     jasmine.clock().tick(1);
diff --git a/slider/internal/slider.ts b/slider/internal/slider.ts
index d2aa43cdf..103856f50 100644
--- a/slider/internal/slider.ts
+++ b/slider/internal/slider.ts
@@ -16,7 +16,11 @@ import {when} from 'lit/directives/when.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
-import {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+  redispatchEvent,
+} from '../../internal/controller/events.js';
 import {MdRipple} from '../../ripple/ripple.js';
 
 // Disable warning for classMap with destructuring
@@ -31,8 +35,10 @@ export class Slider extends LitElement {
   }
 
   /** @nocollapse */
-  static override shadowRootOptions:
-      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};
+  static override shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
 
   /** @nocollapse */
   static readonly formAssociated = true;
@@ -179,16 +185,15 @@ export class Slider extends LitElement {
     return this.internals.labels;
   }
 
-  @query('input.start') private readonly inputStart!: HTMLInputElement|null;
-  @query('.handle.start') private readonly handleStart!: HTMLDivElement|null;
+  @query('input.start') private readonly inputStart!: HTMLInputElement | null;
+  @query('.handle.start') private readonly handleStart!: HTMLDivElement | null;
   @queryAsync('md-ripple.start')
-  private readonly rippleStart!: Promise<MdRipple|null>;
+  private readonly rippleStart!: Promise<MdRipple | null>;
 
-  @query('input.end') private readonly inputEnd!: HTMLInputElement|null;
-  @query('.handle.end') private readonly handleEnd!: HTMLDivElement|null;
+  @query('input.end') private readonly inputEnd!: HTMLInputElement | null;
+  @query('.handle.end') private readonly handleEnd!: HTMLDivElement | null;
   @queryAsync('md-ripple.end')
-  private readonly rippleEnd!: Promise<MdRipple|null>;
-
+  private readonly rippleEnd!: Promise<MdRipple | null>;
 
   // handle hover/pressed states are set manually since the handle
   // does not receive pointer events so that the native inputs are
@@ -207,13 +212,18 @@ export class Slider extends LitElement {
   private get renderAriaLabelStart() {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
-    return this.ariaLabelStart || ariaLabel && `${ariaLabel} start` ||
-        this.valueLabelStart || String(this.valueStart);
+    return (
+      this.ariaLabelStart ||
+      (ariaLabel && `${ariaLabel} start`) ||
+      this.valueLabelStart ||
+      String(this.valueStart)
+    );
   }
 
   private get renderAriaValueTextStart() {
-    return this.ariaValueTextStart || this.valueLabelStart ||
-        String(this.valueStart);
+    return (
+      this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart)
+    );
   }
 
   // Note: end aria-* properties are applied for single and range sliders, which
@@ -223,8 +233,12 @@ export class Slider extends LitElement {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     if (this.range) {
-      return this.ariaLabelEnd || ariaLabel && `${ariaLabel} end` ||
-          this.valueLabelEnd || String(this.valueEnd);
+      return (
+        this.ariaLabelEnd ||
+        (ariaLabel && `${ariaLabel} end`) ||
+        this.valueLabelEnd ||
+        String(this.valueEnd)
+      );
     }
 
     return ariaLabel || this.valueLabel || String(this.value);
@@ -232,8 +246,9 @@ export class Slider extends LitElement {
 
   private get renderAriaValueTextEnd() {
     if (this.range) {
-      return this.ariaValueTextEnd || this.valueLabelEnd ||
-          String(this.valueEnd);
+      return (
+        this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd)
+      );
     }
 
     // Needed for conformance
@@ -249,8 +264,8 @@ export class Slider extends LitElement {
 
   private action?: Action;
 
-  private readonly internals =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  private readonly internals = (this as HTMLElement) /* needed for closure */
+    .attachInternals();
 
   constructor() {
     super();
@@ -270,14 +285,16 @@ export class Slider extends LitElement {
   }
 
   protected override willUpdate(changed: PropertyValues) {
-    this.renderValueStart = changed.has('valueStart') ?
-        this.valueStart :
-        this.inputStart?.valueAsNumber;
+    this.renderValueStart = changed.has('valueStart')
+      ? this.valueStart
+      : this.inputStart?.valueAsNumber;
     const endValueChanged =
-        (changed.has('valueEnd') && this.range) || changed.has('value');
-    this.renderValueEnd = endValueChanged ?
-        (this.range ? this.valueEnd : this.value) :
-        this.inputEnd?.valueAsNumber;
+      (changed.has('valueEnd') && this.range) || changed.has('value');
+    this.renderValueEnd = endValueChanged
+      ? this.range
+        ? this.valueEnd
+        : this.value
+      : this.inputEnd?.valueAsNumber;
     // manually handle ripple hover state since the handle is pointer events
     // none.
     if (changed.get('handleStartHover') !== undefined) {
@@ -288,8 +305,12 @@ export class Slider extends LitElement {
   }
 
   protected override update(changed: PropertyValues<Slider>) {
-    if (changed.has('value') || changed.has('range') ||
-        changed.has('valueStart') || changed.has('valueEnd')) {
+    if (
+      changed.has('value') ||
+      changed.has('range') ||
+      changed.has('valueStart') ||
+      changed.has('valueEnd')
+    ) {
       if (this.range) {
         const data = new FormData();
         data.append(this.nameStart, String(this.valueStart));
@@ -332,8 +353,12 @@ export class Slider extends LitElement {
     } else {
       this.value ??= this.renderValueEnd;
     }
-    if (changed.has('range') || changed.has('renderValueStart') ||
-        changed.has('renderValueEnd') || this.isUpdatePending) {
+    if (
+      changed.has('range') ||
+      changed.has('renderValueStart') ||
+      changed.has('renderValueEnd') ||
+      this.isUpdatePending
+    ) {
       // Only check if the handle nubs are overlapping, as the ripple touch
       // target extends subtantially beyond the boundary of the handle nub.
       const startNub = this.handleStart?.querySelector('.handleNub');
@@ -348,9 +373,9 @@ export class Slider extends LitElement {
   protected override render() {
     const step = this.step === 0 ? 1 : this.step;
     const range = Math.max(this.max - this.min, step);
-    const startFraction = this.range ?
-        (((this.renderValueStart ?? this.min) - this.min) / range) :
-        0;
+    const startFraction = this.range
+      ? ((this.renderValueStart ?? this.min) - this.min) / range
+      : 0;
     const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
     const containerStyles = {
       // for clipping inputs and active track.
@@ -363,8 +388,9 @@ export class Slider extends LitElement {
 
     // optional label values to show in place of the value.
     const labelStart = this.valueLabelStart || String(this.renderValueStart);
-    const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) ||
-        String(this.renderValueEnd);
+    const labelEnd =
+      (this.range ? this.valueLabelEnd : this.valueLabel) ||
+      String(this.renderValueEnd);
 
     const inputStartProps = {
       start: true,
@@ -387,86 +413,102 @@ export class Slider extends LitElement {
     const handleStartProps = {
       start: true,
       hover: this.handleStartHover,
-      label: labelStart
+      label: labelStart,
     };
 
     const handleEndProps = {
       start: false,
       hover: this.handleEndHover,
-      label: labelEnd
+      label: labelEnd,
     };
 
     const handleContainerClasses = {
-      hover: this.handleStartHover || this.handleEndHover
+      hover: this.handleStartHover || this.handleEndHover,
     };
 
-    return html`
-      <div
-        class="container ${classMap(containerClasses)}"
-        style=${styleMap(containerStyles)}
-      >
-        ${when(this.range, () => this.renderInput(inputStartProps))}
-        ${this.renderInput(inputEndProps)}
-        ${this.renderTrack()}
-        <div class="handleContainerPadded">
-          <div class="handleContainerBlock">
-            <div class="handleContainer ${classMap(handleContainerClasses)}">
-              ${when(this.range, () => this.renderHandle(handleStartProps))}
-              ${this.renderHandle(handleEndProps)}
-            </div>
+    return html` <div
+      class="container ${classMap(containerClasses)}"
+      style=${styleMap(containerStyles)}>
+      ${when(this.range, () => this.renderInput(inputStartProps))}
+      ${this.renderInput(inputEndProps)} ${this.renderTrack()}
+      <div class="handleContainerPadded">
+        <div class="handleContainerBlock">
+          <div class="handleContainer ${classMap(handleContainerClasses)}">
+            ${when(this.range, () => this.renderHandle(handleStartProps))}
+            ${this.renderHandle(handleEndProps)}
           </div>
         </div>
-      </div>`;
+      </div>
+    </div>`;
   }
 
   private renderTrack() {
     return html`
-        <div class="track"></div>
-        ${this.ticks ? html`<div class="tickmarks"></div>` : nothing}
-      `;
+      <div class="track"></div>
+      ${this.ticks ? html`<div class="tickmarks"></div>` : nothing}
+    `;
   }
 
   private renderLabel(value: string) {
     return html`<div class="label" aria-hidden="true">
-        <span class="labelContent" part="label">${value}</span>
-      </div>`;
-  }
-
-  private renderHandle({start, hover, label}:
-                           {start: boolean, hover: boolean, label: string}) {
-    const onTop = !this.disabled && start === this.startOnTop;
-    const isOverlapping = !this.disabled && this.handlesOverlapping;
-    const name = start ? 'start' : 'end';
-    return html`<div class="handle ${classMap({
-      [name]: true,
-      hover,
-      onTop,
-      isOverlapping
-    })}">
-      <div class="handleNub"><md-elevation></md-elevation></div>
-      ${when(this.labeled, () => this.renderLabel(label))}
-      <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
-      <md-ripple for=${name} class=${name} ?disabled=${
-        this.disabled}></md-ripple>
+      <span class="labelContent" part="label">${value}</span>
     </div>`;
   }
 
-  private renderInput(
-      {start, value, ariaLabel, ariaValueText, ariaMin, ariaMax}: {
-        start: boolean;
-        value?: number; ariaLabel: string; ariaValueText: string;
-        ariaMin: number;
-        ariaMax: number;
-      }) {
+  private renderHandle({
+    start,
+    hover,
+    label,
+  }: {
+    start: boolean;
+    hover: boolean;
+    label: string;
+  }) {
+    const onTop = !this.disabled && start === this.startOnTop;
+    const isOverlapping = !this.disabled && this.handlesOverlapping;
+    const name = start ? 'start' : 'end';
+    return html`<div
+      class="handle ${classMap({
+        [name]: true,
+        hover,
+        onTop,
+        isOverlapping,
+      })}">
+      <div class="handleNub"><md-elevation></md-elevation></div>
+      ${when(this.labeled, () => this.renderLabel(label))}
+      <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
+      <md-ripple
+        for=${name}
+        class=${name}
+        ?disabled=${this.disabled}></md-ripple>
+    </div>`;
+  }
+
+  private renderInput({
+    start,
+    value,
+    ariaLabel,
+    ariaValueText,
+    ariaMin,
+    ariaMax,
+  }: {
+    start: boolean;
+    value?: number;
+    ariaLabel: string;
+    ariaValueText: string;
+    ariaMin: number;
+    ariaMax: number;
+  }) {
     // Slider requires min/max set to the overall min/max for both inputs.
     // This is reported to screen readers, which is why we need aria-valuemin
     // and aria-valuemax.
     const name = start ? `start` : `end`;
-    return html`<input type="range"
+    return html`<input
+      type="range"
       class="${classMap({
-      start,
-      end: !start
-    })}"
+        start,
+        end: !start,
+      })}"
       @focus=${this.handleFocus}
       @pointerdown=${this.handleDown}
       @pointerup=${this.handleUp}
@@ -487,22 +529,32 @@ export class Slider extends LitElement {
       .value=${String(value)}
       .tabIndex=${start ? 1 : 0}
       aria-label=${ariaLabel || nothing}
-      aria-valuetext=${ariaValueText}>`;
+      aria-valuetext=${ariaValueText} />`;
   }
 
   private async toggleRippleHover(
-      ripple: Promise<MdRipple|null>, hovering: boolean) {
+    ripple: Promise<MdRipple | null>,
+    hovering: boolean,
+  ) {
     const rippleEl = await ripple;
     if (!rippleEl) {
       return;
     }
     // TODO(b/269799771): improve slider ripple connection
     if (hovering) {
-      rippleEl.handlePointerenter(new PointerEvent(
-          'pointerenter', {isPrimary: true, pointerId: this.ripplePointerId}));
+      rippleEl.handlePointerenter(
+        new PointerEvent('pointerenter', {
+          isPrimary: true,
+          pointerId: this.ripplePointerId,
+        }),
+      );
     } else {
-      rippleEl.handlePointerleave(new PointerEvent(
-          'pointerleave', {isPrimary: true, pointerId: this.ripplePointerId}));
+      rippleEl.handlePointerleave(
+        new PointerEvent('pointerleave', {
+          isPrimary: true,
+          pointerId: this.ripplePointerId,
+        }),
+      );
     }
   }
 
@@ -513,14 +565,16 @@ export class Slider extends LitElement {
   private startAction(event: Event) {
     const target = event.target as HTMLInputElement;
     const fixed =
-        (target === this.inputStart) ? this.inputEnd! : this.inputStart!;
+      target === this.inputStart ? this.inputEnd! : this.inputStart!;
     this.action = {
       canFlip: event.type === 'pointerdown',
       flipped: false,
       target,
       fixed,
-      values: new Map(
-          [[target, target.valueAsNumber], [fixed, fixed?.valueAsNumber]])
+      values: new Map([
+        [target, target.valueAsNumber],
+        [fixed, fixed?.valueAsNumber],
+      ]),
     };
   }
 
@@ -539,11 +593,11 @@ export class Slider extends LitElement {
   private handleDown(event: PointerEvent) {
     this.startAction(event);
     this.ripplePointerId = event.pointerId;
-    const isStart = event.target as HTMLInputElement === this.inputStart;
+    const isStart = (event.target as HTMLInputElement) === this.inputStart;
     // Since handle moves to pointer on down and there may not be a move,
     // it needs to be considered hovered..
     this.handleStartHover =
-        !this.disabled && isStart && Boolean(this.handleStart);
+      !this.disabled && isStart && Boolean(this.handleStart);
     this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd);
   }
 
@@ -607,8 +661,9 @@ export class Slider extends LitElement {
 
     const {target, fixed} = this.action;
     const isStart = target === this.inputStart;
-    return isStart ? target.valueAsNumber > fixed.valueAsNumber :
-                     target.valueAsNumber < fixed.valueAsNumber;
+    return isStart
+      ? target.valueAsNumber > fixed.valueAsNumber
+      : target.valueAsNumber < fixed.valueAsNumber;
   }
 
   // if start/end start coincident and the first drag input would e.g. move
@@ -701,7 +756,7 @@ export class Slider extends LitElement {
     const changeTarget = event.target as HTMLInputElement;
     const {target, values} = this.action ?? {};
     const squelch =
-        (target && (target.valueAsNumber === values!.get(changeTarget)!));
+      target && target.valueAsNumber === values!.get(changeTarget)!;
     if (!squelch) {
       redispatchEvent(this, event);
     }
@@ -723,7 +778,7 @@ export class Slider extends LitElement {
   }
 
   /** @private */
-  formStateRestoreCallback(state: string|Array<[string, string]>|null) {
+  formStateRestoreCallback(state: string | Array<[string, string]> | null) {
     if (Array.isArray(state)) {
       const [[, valueStart], [, valueEnd]] = state;
       this.valueStart = Number(valueStart);
@@ -737,7 +792,7 @@ export class Slider extends LitElement {
   }
 }
 
-function inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {
+function inBounds({x, y}: PointerEvent, element?: HTMLElement | null) {
   if (!element) {
     return false;
   }
@@ -746,15 +801,20 @@ function inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {
 }
 
 function isOverlapping(
-    elA: Element|null|undefined, elB: Element|null|undefined) {
+  elA: Element | null | undefined,
+  elB: Element | null | undefined,
+) {
   if (!(elA && elB)) {
     return false;
   }
   const a = elA.getBoundingClientRect();
   const b = elB.getBoundingClientRect();
   return !(
-      a.top > b.bottom || a.right < b.left || a.bottom < b.top ||
-      a.left > b.right);
+    a.top > b.bottom ||
+    a.right < b.left ||
+    a.bottom < b.top ||
+    a.left > b.right
+  );
 }
 
 interface Action {
@@ -762,5 +822,5 @@ interface Action {
   flipped: boolean;
   target: HTMLInputElement;
   fixed: HTMLInputElement;
-  values: Map<HTMLInputElement|undefined, number|undefined>;
+  values: Map<HTMLInputElement | undefined, number | undefined>;
 }
diff --git a/slider/slider_test.ts b/slider/slider_test.ts
index d95b8ef38..ba18d9a91 100644
--- a/slider/slider_test.ts
+++ b/slider/slider_test.ts
@@ -24,23 +24,23 @@ interface SliderTestProps {
 }
 
 function getSliderTemplate(props?: SliderTestProps) {
-  return html`
-    <md-slider
-      .range=${props?.range ?? false}
-      .value=${props?.value}
-      .valueStart=${props?.valueStart}
-      .valueEnd=${props?.valueEnd}
-      .step=${props?.step ?? 1}
-      .min=${props?.min ?? 0}
-      .max=${props?.max ?? 100}
-    ></md-slider>`;
+  return html` <md-slider
+    .range=${props?.range ?? false}
+    .value=${props?.value}
+    .valueStart=${props?.valueStart}
+    .valueEnd=${props?.valueEnd}
+    .step=${props?.step ?? 1}
+    .min=${props?.min ?? 0}
+    .max=${props?.max ?? 100}></md-slider>`;
 }
 
 describe('<md-slider>', () => {
   const env = new Environment();
 
   async function setupTest(
-      props?: SliderTestProps, template = getSliderTemplate) {
+    props?: SliderTestProps,
+    template = getSliderTemplate,
+  ) {
     const root = env.render(template(props));
     await env.waitForStability();
     const slider = root.querySelector<MdSlider>('md-slider')!;
@@ -231,24 +231,23 @@ describe('<md-slider>', () => {
       expect(harness.element.valueEnd).toEqual(4);
     });
 
-    it('when starting coincident, can move start > end and end < start',
-       async () => {
-         const props = {range: true, valueStart: 2, valueEnd: 6};
-         const {harness} = await setupTest(props);
-         await harness.element.updateComplete;
-         const [endInput, startInput] = harness.getInputs();
-         await harness.simulateValueInteraction(6, startInput);
-         expect(harness.element.valueStart).toEqual(6);
-         await harness.simulateValueInteraction(8, startInput);
-         expect(harness.element.valueStart).toEqual(6);
-         expect(harness.element.valueEnd).toEqual(8);
-         await harness.simulateValueInteraction(8, startInput);
-         expect(harness.element.valueStart).toEqual(8);
-         expect(harness.element.valueEnd).toEqual(8);
-         await harness.simulateValueInteraction(4, endInput);
-         expect(harness.element.valueStart).toEqual(4);
-         expect(harness.element.valueEnd).toEqual(8);
-       });
+    it('when starting coincident, can move start > end and end < start', async () => {
+      const props = {range: true, valueStart: 2, valueEnd: 6};
+      const {harness} = await setupTest(props);
+      await harness.element.updateComplete;
+      const [endInput, startInput] = harness.getInputs();
+      await harness.simulateValueInteraction(6, startInput);
+      expect(harness.element.valueStart).toEqual(6);
+      await harness.simulateValueInteraction(8, startInput);
+      expect(harness.element.valueStart).toEqual(6);
+      expect(harness.element.valueEnd).toEqual(8);
+      await harness.simulateValueInteraction(8, startInput);
+      expect(harness.element.valueStart).toEqual(8);
+      expect(harness.element.valueEnd).toEqual(8);
+      await harness.simulateValueInteraction(4, endInput);
+      expect(harness.element.valueStart).toEqual(4);
+      expect(harness.element.valueEnd).toEqual(8);
+    });
   });
 
   describe('dispatches input and change events', () => {
@@ -362,81 +361,94 @@ describe('<md-slider>', () => {
 
   describe('forms', () => {
     createFormTests({
-      queryControl: root => root.querySelector('md-slider'),
+      queryControl: (root) => root.querySelector('md-slider'),
       valueTests: [
         {
           name: 'unnamed',
           render: () => html`<md-slider></md-slider>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form without a name')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form without a name')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'single value',
           render: () => html`<md-slider name="slider" value="10"></md-slider>`,
           assertValue(formData) {
             expect(formData.get('slider')).toBe('10');
-          }
+          },
         },
         {
           name: 'multiple values same name',
           render: () =>
-              html`<md-slider range name="slider" value-start="0" value-end="10"></md-slider>`,
+            html`<md-slider
+              range
+              name="slider"
+              value-start="0"
+              value-end="10"></md-slider>`,
           assertValue(formData) {
             expect(formData.getAll('slider')).toEqual(['0', '10']);
-          }
+          },
         },
         {
           name: 'multiple values different names',
           render: () =>
-              html`<md-slider range name-start="slider-start" name-end="slider-end" value-start="0" value-end="10"></md-slider>`,
+            html`<md-slider
+              range
+              name-start="slider-start"
+              name-end="slider-end"
+              value-start="0"
+              value-end="10"></md-slider>`,
           assertValue(formData) {
             expect(formData.get('slider-start')).toBe('0');
             expect(formData.get('slider-end')).toBe('10');
-          }
+          },
         },
         {
           name: 'single default value',
           render: () => html`<md-slider name="slider"></md-slider>`,
           assertValue(formData) {
             expect(formData.get('slider')).toBe('50');
-          }
+          },
         },
         {
           name: 'single default value with min/max',
           render: () =>
-              html`<md-slider name="slider" min="100" max="300"></md-slider>`,
+            html`<md-slider name="slider" min="100" max="300"></md-slider>`,
           assertValue(formData) {
             expect(formData.get('slider')).toBe('200');
-          }
+          },
         },
         {
           name: 'multiple default values',
           render: () => html`<md-slider range name="slider"></md-slider>`,
           assertValue(formData) {
             expect(formData.getAll('slider')).toEqual(['33', '67']);
-          }
+          },
         },
         {
           name: 'multiple default values with min/max',
           render: () =>
-              html`<md-slider range name="slider" min="100" max="300"></md-slider>`,
+            html`<md-slider
+              range
+              name="slider"
+              min="100"
+              max="300"></md-slider>`,
           assertValue(formData) {
             expect(formData.getAll('slider')).toEqual(['167', '233']);
-          }
+          },
         },
         {
           name: 'disabled',
           render: () =>
-              html`<md-slider name="slider" value="10" disabled></md-slider>`,
+            html`<md-slider name="slider" value="10" disabled></md-slider>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when disabled')
-                .toHaveSize(0);
-          }
-        }
+              .withContext('should not add anything to form when disabled')
+              .toHaveSize(0);
+          },
+        },
       ],
       resetTests: [
         {
@@ -447,43 +459,52 @@ describe('<md-slider>', () => {
           },
           assertReset(slider) {
             expect(slider.value)
-                .withContext('slider.value after reset')
-                .toBe(10);
-          }
+              .withContext('slider.value after reset')
+              .toBe(10);
+          },
         },
         {
           name: 'reset multiple values same name',
           render: () =>
-              html`<md-slider range name="slider" value-start="0" value-end="10"></md-slider>`,
+            html`<md-slider
+              range
+              name="slider"
+              value-start="0"
+              value-end="10"></md-slider>`,
           change(slider) {
             slider.valueStart = 5;
             slider.valueEnd = 5;
           },
           assertReset(slider) {
             expect(slider.valueStart)
-                .withContext('slider.valueStart after reset')
-                .toEqual(0);
+              .withContext('slider.valueStart after reset')
+              .toEqual(0);
             expect(slider.valueEnd)
-                .withContext('slider.valueEnd after reset')
-                .toEqual(10);
-          }
+              .withContext('slider.valueEnd after reset')
+              .toEqual(10);
+          },
         },
         {
           name: 'reset multiple values different names',
           render: () =>
-              html`<md-slider range name-start="slider-start" name-end="slider-end" value-start="0" value-end="10"></md-slider>`,
+            html`<md-slider
+              range
+              name-start="slider-start"
+              name-end="slider-end"
+              value-start="0"
+              value-end="10"></md-slider>`,
           change(slider) {
             slider.valueStart = 5;
             slider.valueEnd = 5;
           },
           assertReset(slider) {
             expect(slider.valueStart)
-                .withContext('slider.valueStart after reset')
-                .toEqual(0);
+              .withContext('slider.valueStart after reset')
+              .toEqual(0);
             expect(slider.valueEnd)
-                .withContext('slider.valueEnd after reset')
-                .toEqual(10);
-          }
+              .withContext('slider.valueEnd after reset')
+              .toEqual(10);
+          },
         },
       ],
       restoreTests: [
@@ -492,37 +513,46 @@ describe('<md-slider>', () => {
           render: () => html`<md-slider name="checkbox" value="1"></md-slider>`,
           assertRestored(slider) {
             expect(slider.value)
-                .withContext('slider.value after restore')
-                .toBe(1);
-          }
+              .withContext('slider.value after restore')
+              .toBe(1);
+          },
         },
         {
           name: 'restore multiple values same name',
           render: () =>
-              html`<md-slider range name="slider" value-start="0" value-end="10"></md-slider>`,
+            html`<md-slider
+              range
+              name="slider"
+              value-start="0"
+              value-end="10"></md-slider>`,
           assertRestored(slider) {
             expect(slider.valueStart)
-                .withContext('slider.valueStart after restore')
-                .toEqual(0);
+              .withContext('slider.valueStart after restore')
+              .toEqual(0);
             expect(slider.valueEnd)
-                .withContext('slider.valueEnd after restore')
-                .toEqual(10);
-          }
+              .withContext('slider.valueEnd after restore')
+              .toEqual(10);
+          },
         },
         {
           name: 'restore multiple values different names',
           render: () =>
-              html`<md-slider range name-start="slider-start" name-end="slider-end" value-start="0" value-end="10"></md-slider>`,
+            html`<md-slider
+              range
+              name-start="slider-start"
+              name-end="slider-end"
+              value-start="0"
+              value-end="10"></md-slider>`,
           assertRestored(slider) {
             expect(slider.valueStart)
-                .withContext('slider.valueStart after restore')
-                .toEqual(0);
+              .withContext('slider.valueStart after restore')
+              .toEqual(0);
             expect(slider.valueEnd)
-                .withContext('slider.valueEnd after restore')
-                .toEqual(10);
-          }
+              .withContext('slider.valueEnd after restore')
+              .toEqual(10);
+          },
         },
-      ]
+      ],
     });
   });
 });
diff --git a/switch/demo/demo.ts b/switch/demo/demo.ts
index af2c2a170..eaba47254 100644
--- a/switch/demo/demo.ts
+++ b/switch/demo/demo.ts
@@ -4,21 +4,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Switch', [
-      new Knob('disabled', {defaultValue: false, ui: boolInput()}),
-      new Knob('selected', {defaultValue: false, ui: boolInput()}),
-      new Knob('icons', {defaultValue: false, ui: boolInput()}),
-      new Knob('showOnlySelectedIcon', {defaultValue: false, ui: boolInput()}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Switch',
+  [
+    new Knob('disabled', {defaultValue: false, ui: boolInput()}),
+    new Knob('selected', {defaultValue: false, ui: boolInput()}),
+    new Knob('icons', {defaultValue: false, ui: boolInput()}),
+    new Knob('showOnlySelectedIcon', {defaultValue: false, ui: boolInput()}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/switch/demo/stories.ts b/switch/demo/stories.ts
index cd2a363dc..57922bf8d 100644
--- a/switch/demo/stories.ts
+++ b/switch/demo/stories.ts
@@ -6,7 +6,10 @@
 
 import '@material/web/switch/switch.js';
 
-import {labelStyles, MaterialStoryInit} from './material-collection.js';
+import {
+  labelStyles,
+  MaterialStoryInit,
+} from './material-collection.js';
 import {css, html} from 'lit';
 
 /** Knob types for Switch stories. */
@@ -20,21 +23,20 @@ export interface StoryKnobs {
 const standard: MaterialStoryInit<StoryKnobs> = {
   name: 'Switch',
   render(knobs) {
-    return html`
-      <md-switch
-        aria-label="An example switch"
-        .disabled=${knobs.disabled}
-        .selected=${knobs.selected}
-        .icons=${knobs.icons}
-        .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
-      ></md-switch>`;
-  }
+    return html` <md-switch
+      aria-label="An example switch"
+      .disabled=${knobs.disabled}
+      .selected=${knobs.selected}
+      .icons=${knobs.icons}
+      .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}></md-switch>`;
+  },
 };
 
 const labeled: MaterialStoryInit<StoryKnobs> = {
   name: 'With labels',
   styles: [
-    labelStyles, css`
+    labelStyles,
+    css`
       .column {
         display: flex;
         flex-direction: column;
@@ -45,7 +47,7 @@ const labeled: MaterialStoryInit<StoryKnobs> = {
       label {
         justify-content: space-between;
       }
-    `
+    `,
   ],
   render(knobs) {
     return html`
@@ -56,8 +58,7 @@ const labeled: MaterialStoryInit<StoryKnobs> = {
             aria-label="Wi-Fi"
             .disabled=${knobs.disabled}
             .icons=${knobs.icons}
-            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
-          ></md-switch>
+            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}></md-switch>
         </label>
         <label>
           Bluetooth
@@ -66,12 +67,11 @@ const labeled: MaterialStoryInit<StoryKnobs> = {
             selected
             .disabled=${knobs.disabled}
             .icons=${knobs.icons}
-            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
-          ></md-switch>
+            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}></md-switch>
         </label>
       </div>
     `;
-  }
+  },
 };
 
 /** Switch stories. */
diff --git a/switch/internal/switch.ts b/switch/internal/switch.ts
index 5f18dbe95..93ec53631 100644
--- a/switch/internal/switch.ts
+++ b/switch/internal/switch.ts
@@ -7,12 +7,23 @@
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 
-import {html, isServer, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';
+import {
+  html,
+  isServer,
+  LitElement,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
-import {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+  redispatchEvent,
+} from '../../internal/controller/events.js';
 
 /**
  * @fires input {InputEvent} Fired whenever `selected` changes due to user
@@ -26,8 +37,10 @@ export class Switch extends LitElement {
   }
 
   /** @nocollapse */
-  static override shadowRootOptions:
-      ShadowRootInit = {mode: 'open', delegatesFocus: true};
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
 
   /** @nocollapse */
   static readonly formAssociated = true;
@@ -128,12 +141,12 @@ export class Switch extends LitElement {
     return this.internals.willValidate;
   }
 
-  @query('input') private readonly input!: HTMLInputElement|null;
+  @query('input') private readonly input!: HTMLInputElement | null;
   // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
   // Replace with this.internals.validity.customError when resolved.
   private hasCustomValidityError = false;
-  private readonly internals =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  // Cast needed for closure
+  private readonly internals = (this as HTMLElement).attachInternals();
 
   constructor() {
     super();
@@ -218,13 +231,10 @@ export class Switch extends LitElement {
           ?checked=${this.selected}
           ?disabled=${this.disabled}
           ?required=${this.required}
-          @change=${this.handleChange}
-        >
+          @change=${this.handleChange} />
 
         <md-focus-ring part="focus-ring" for="switch"></md-focus-ring>
-        <span class="track">
-          ${this.renderHandle()}
-        </span>
+        <span class="track"> ${this.renderHandle()} </span>
       </div>
     `;
   }
@@ -273,7 +283,8 @@ export class Switch extends LitElement {
   private renderOnIcon() {
     return html`
       <svg class="icon icon--on" viewBox="0 0 24 24">
-        <path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/>
+        <path
+          d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z" />
       </svg>
     `;
   }
@@ -284,7 +295,8 @@ export class Switch extends LitElement {
   private renderOffIcon() {
     return html`
       <svg class="icon icon--off" viewBox="0 0 24 24">
-        <path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/>
+        <path
+          d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z" />
       </svg>
     `;
   }
@@ -314,7 +326,10 @@ export class Switch extends LitElement {
     }
 
     this.internals.setValidity(
-        input.validity, input.validationMessage, this.getInput());
+      input.validity,
+      input.validationMessage,
+      this.getInput(),
+    );
   }
 
   private getInput() {
diff --git a/switch/internal/switch_test.ts b/switch/internal/switch_test.ts
index 398af2fa2..b8a0cf690 100644
--- a/switch/internal/switch_test.ts
+++ b/switch/internal/switch_test.ts
@@ -14,8 +14,7 @@ import {Harness} from '../../testing/harness.js';
 import {Switch} from './switch.js';
 
 @customElement('md-test-switch')
-class TestSwitch extends Switch {
-}
+class TestSwitch extends Switch {}
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -34,22 +33,20 @@ function renderSwitch(propsInit: Partial<TestSwitch> = {}) {
 }
 
 function renderSwitchInForm(propsInit: Partial<TestSwitch> = {}) {
-  return html`
-    <form>${renderSwitch(propsInit)}</form>
-  `;
+  return html` <form>${renderSwitch(propsInit)}</form> `;
 }
 
 function renderSwitchInLabel(propsInit: Partial<TestSwitch> = {}) {
-  return html`
-    <label>${renderSwitch(propsInit)}</label>
-  `;
+  return html` <label>${renderSwitch(propsInit)}</label> `;
 }
 
 describe('md-switch', () => {
   const env = new Environment();
 
   async function switchElement(
-      propsInit: Partial<TestSwitch> = {}, template = renderSwitch) {
+    propsInit: Partial<TestSwitch> = {},
+    template = renderSwitch,
+  ) {
     const root = env.render(html`<div>${template(propsInit)}</div>`);
     await env.waitForStability();
     const element = root.querySelector('md-test-switch');
@@ -168,7 +165,9 @@ describe('md-switch', () => {
 
   describe('form submission', () => {
     async function switchInForm(
-        propsInit: Partial<TestSwitch> = {}, template = renderSwitchInForm) {
+      propsInit: Partial<TestSwitch> = {},
+      template = renderSwitchInForm,
+    ) {
       const element = await switchElement(propsInit, template);
       return new Harness(element);
     }
@@ -180,8 +179,11 @@ describe('md-switch', () => {
     });
 
     it('does not submit if disabled', async () => {
-      const harness =
-          await switchInForm({name: 'foo', selected: true, disabled: true});
+      const harness = await switchInForm({
+        name: 'foo',
+        selected: true,
+        disabled: true,
+      });
       const formData = await harness.submitForm();
       expect(formData.get('foo')).toBeNull();
     });
@@ -194,8 +196,11 @@ describe('md-switch', () => {
     });
 
     it('submits under correct conditions', async () => {
-      const harness =
-          await switchInForm({name: 'foo', selected: true, value: 'bar'});
+      const harness = await switchInForm({
+        name: 'foo',
+        selected: true,
+        value: 'bar',
+      });
       const formData = await harness.submitForm();
       expect(formData.get('foo')).toEqual('bar');
     });
@@ -221,8 +226,8 @@ describe('md-switch', () => {
       toggle.required = true;
 
       expect(toggle.validity.valueMissing)
-          .withContext('toggle.validity.valueMissing')
-          .toBeTrue();
+        .withContext('toggle.validity.valueMissing')
+        .toBeTrue();
     });
 
     it('should not set valueMissing when required and selected', async () => {
@@ -230,8 +235,8 @@ describe('md-switch', () => {
       toggle.selected = true;
 
       expect(toggle.validity.valueMissing)
-          .withContext('toggle.validity.valueMissing')
-          .toBeFalse();
+        .withContext('toggle.validity.valueMissing')
+        .toBeFalse();
     });
   });
 });
diff --git a/switch/switch_test.ts b/switch/switch_test.ts
index 3c53474ee..0d4971c83 100644
--- a/switch/switch_test.ts
+++ b/switch/switch_test.ts
@@ -20,51 +20,54 @@ describe('<md-switch>', () => {
 
   describe('forms', () => {
     createFormTests({
-      queryControl: root => root.querySelector('md-switch'),
+      queryControl: (root) => root.querySelector('md-switch'),
       valueTests: [
         {
           name: 'unnamed',
           render: () => html`<md-switch selected></md-switch>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form without a name')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form without a name')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'unselected',
           render: () => html`<md-switch name="switch"></md-switch>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when unselected')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form when unselected')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'selected default value',
           render: () => html`<md-switch name="switch" selected></md-switch>`,
           assertValue(formData) {
             expect(formData.get('switch')).toBe('on');
-          }
+          },
         },
         {
           name: 'selected custom value',
           render: () =>
-              html`<md-switch name="switch" selected value="Custom value"></md-switch>`,
+            html`<md-switch
+              name="switch"
+              selected
+              value="Custom value"></md-switch>`,
           assertValue(formData) {
             expect(formData.get('switch')).toBe('Custom value');
-          }
+          },
         },
         {
           name: 'disabled',
           render: () =>
-              html`<md-switch name="switch" selected disabled></md-switch>`,
+            html`<md-switch name="switch" selected disabled></md-switch>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when disabled')
-                .toHaveSize(0);
-          }
-        }
+              .withContext('should not add anything to form when disabled')
+              .toHaveSize(0);
+          },
+        },
       ],
       resetTests: [
         {
@@ -75,9 +78,9 @@ describe('<md-switch>', () => {
           },
           assertReset(control) {
             expect(control.selected)
-                .withContext('control.selected after reset')
-                .toBeFalse();
-          }
+              .withContext('control.selected after reset')
+              .toBeFalse();
+          },
         },
         {
           name: 'reset to selected',
@@ -87,9 +90,9 @@ describe('<md-switch>', () => {
           },
           assertReset(control) {
             expect(control.selected)
-                .withContext('control.selected after reset')
-                .toBeTrue();
-          }
+              .withContext('control.selected after reset')
+              .toBeTrue();
+          },
         },
       ],
       restoreTests: [
@@ -98,20 +101,20 @@ describe('<md-switch>', () => {
           render: () => html`<md-switch name="switch"></md-switch>`,
           assertRestored(control) {
             expect(control.selected)
-                .withContext('control.selected after restore')
-                .toBeFalse();
-          }
+              .withContext('control.selected after restore')
+              .toBeFalse();
+          },
         },
         {
           name: 'restore selected',
           render: () => html`<md-switch name="switch" selected></md-switch>`,
           assertRestored(control) {
             expect(control.selected)
-                .withContext('control.selected after restore')
-                .toBeTrue();
-          }
+              .withContext('control.selected after restore')
+              .toBeTrue();
+          },
         },
-      ]
+      ],
     });
   });
 });
diff --git a/tabs/demo/demo.ts b/tabs/demo/demo.ts
index 0bfd313cc..4812767ce 100644
--- a/tabs/demo/demo.ts
+++ b/tabs/demo/demo.ts
@@ -4,45 +4,56 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {MdTabs} from '@material/web/tabs/tabs.js';
-import {boolInput, Knob, numberInput, radioSelector} from './index.js';
+import {
+  boolInput,
+  Knob,
+  numberInput,
+  radioSelector,
+} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Tabs', [
-      new Knob('activeTabIndex', {
-        ui: numberInput(),
-        defaultValue: 0,
-        // fire a change event manually to sync tabbed content
-        wiring: async (knob, value, container) => {
-          await new Promise(requestAnimationFrame);
-          const tabs =
-              Array.from(container.querySelectorAll<MdTabs>('md-tabs'));
-          for (const tab of tabs) {
-            const event = new Event('change', {bubbles: true, composed: true});
-            tab.dispatchEvent(event);
-          }
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Tabs',
+  [
+    new Knob('activeTabIndex', {
+      ui: numberInput(),
+      defaultValue: 0,
+      // fire a change event manually to sync tabbed content
+      wiring: async (knob, value, container) => {
+        await new Promise(requestAnimationFrame);
+        const tabs = Array.from(container.querySelectorAll<MdTabs>('md-tabs'));
+        for (const tab of tabs) {
+          const event = new Event('change', {bubbles: true, composed: true});
+          tab.dispatchEvent(event);
         }
+      },
+    }),
+    new Knob('autoActivate', {ui: boolInput(), defaultValue: false}),
+    new Knob('inlineIcon', {ui: boolInput(), defaultValue: false}),
+    new Knob('content', {
+      defaultValue: 'icon/label',
+      ui: radioSelector({
+        name: 'contentRadioGroup',
+        options: [
+          {label: 'icon/label', value: 'icon/label'},
+          {label: 'icon', value: 'icon'},
+          {label: 'label', value: 'label'},
+        ],
       }),
-      new Knob('autoActivate', {ui: boolInput(), defaultValue: false}),
-      new Knob('inlineIcon', {ui: boolInput(), defaultValue: false}),
-      new Knob('content', {
-        defaultValue: 'icon/label',
-        ui: radioSelector({
-          name: 'contentRadioGroup',
-          options: [
-            {label: 'icon/label', value: 'icon/label'},
-            {label: 'icon', value: 'icon'},
-            {label: 'label', value: 'label'},
-          ]
-        })
-      }),
-    ]);
+    }),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts
index 8ddd99bae..de40268e2 100644
--- a/tabs/demo/stories.ts
+++ b/tabs/demo/stories.ts
@@ -6,9 +6,9 @@
 
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/icon-button.js';
-import '@material/web/tabs/tabs.js';
 import '@material/web/tabs/primary-tab.js';
 import '@material/web/tabs/secondary-tab.js';
+import '@material/web/tabs/tabs.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {MdTabs} from '@material/web/tabs/tabs.js';
@@ -24,11 +24,11 @@ export interface StoryKnobs {
 }
 
 const styles = css`
-  [role=tabpanel]:not([hidden]) {
+  [role='tabpanel']:not([hidden]) {
     font-family: Roboto, Material Sans, system-ui;
   }
 
-  [role=tabpanel]:not(.subtabs) {
+  [role='tabpanel']:not(.subtabs) {
     padding: 16px;
   }
 
@@ -54,40 +54,60 @@ const primary: MaterialStoryInit<StoryKnobs> = {
     const inlineIcon = knobs.inlineIcon;
 
     return html`
-      <md-tabs aria-label="Primary tabs"
-          .activeTabIndex=${knobs.activeTabIndex}
-          .autoActivate=${knobs.autoActivate}
-          ${setupTabPanels()}
-      >
-        <md-primary-tab id="tab-one" aria-controls="panel-one"
-            .inlineIcon=${inlineIcon}>
+      <md-tabs
+        aria-label="Primary tabs"
+        .activeTabIndex=${knobs.activeTabIndex}
+        .autoActivate=${knobs.autoActivate}
+        ${setupTabPanels()}>
+        <md-primary-tab
+          id="tab-one"
+          aria-controls="panel-one"
+          .inlineIcon=${inlineIcon}>
           ${tabContent('piano', 'Keyboard')}
         </md-primary-tab>
-        <md-primary-tab id="tab-two" aria-controls="panel-two"
-            .inlineIcon=${inlineIcon}>
+        <md-primary-tab
+          id="tab-two"
+          aria-controls="panel-two"
+          .inlineIcon=${inlineIcon}>
           ${tabContent('tune', 'Guitar')}
         </md-primary-tab>
-        <md-primary-tab id="tab-three" aria-controls="panel-three"
-            .inlineIcon=${inlineIcon}>
+        <md-primary-tab
+          id="tab-three"
+          aria-controls="panel-three"
+          .inlineIcon=${inlineIcon}>
           ${tabContent('graphic_eq', 'Drums')}
         </md-primary-tab>
-        <md-primary-tab id="tab-four" aria-controls="panel-four"
-            .inlineIcon=${inlineIcon}>
+        <md-primary-tab
+          id="tab-four"
+          aria-controls="panel-four"
+          .inlineIcon=${inlineIcon}>
           ${tabContent('speaker', 'Bass')}
         </md-primary-tab>
-        <md-primary-tab id="tab-five" aria-controls="panel-five"
-            .inlineIcon=${inlineIcon}>
+        <md-primary-tab
+          id="tab-five"
+          aria-controls="panel-five"
+          .inlineIcon=${inlineIcon}>
           ${tabContent('nightlife', 'Saxophone')}
         </md-primary-tab>
       </md-tabs>
 
-      <div role="tabpanel" id="panel-one" aria-labelledby="tab-one">Keyboard</div>
-      <div role="tabpanel" id="panel-two" aria-labelledby="tab-two" hidden>Guitar</div>
-      <div role="tabpanel" id="panel-three" aria-labelledby="tab-three" hidden>Drums</div>
-      <div role="tabpanel" id="panel-four" aria-labelledby="tab-four" hidden>Bass</div>
-      <div role="tabpanel" id="panel-five" aria-labelledby="tab-five" hidden>Saxophone</div>
+      <div role="tabpanel" id="panel-one" aria-labelledby="tab-one"
+        >Keyboard</div
+      >
+      <div role="tabpanel" id="panel-two" aria-labelledby="tab-two" hidden
+        >Guitar</div
+      >
+      <div role="tabpanel" id="panel-three" aria-labelledby="tab-three" hidden
+        >Drums</div
+      >
+      <div role="tabpanel" id="panel-four" aria-labelledby="tab-four" hidden
+        >Bass</div
+      >
+      <div role="tabpanel" id="panel-five" aria-labelledby="tab-five" hidden
+        >Saxophone</div
+      >
     `;
-  }
+  },
 };
 
 const secondary: MaterialStoryInit<StoryKnobs> = {
@@ -97,11 +117,11 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
 
     return html`
-      <md-tabs aria-label="Secondary tabs"
-          .activeTabIndex=${knobs.activeTabIndex}
-          .autoActivate=${knobs.autoActivate}
-          ${setupTabPanels()}
-      >
+      <md-tabs
+        aria-label="Secondary tabs"
+        .activeTabIndex=${knobs.activeTabIndex}
+        .autoActivate=${knobs.autoActivate}
+        ${setupTabPanels()}>
         <md-secondary-tab id="tab-one" aria-controls="panel-one">
           ${tabContent('flight', 'Travel')}
         </md-secondary-tab>
@@ -117,11 +137,17 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
       </md-tabs>
 
       <div role="tabpanel" id="panel-one" aria-labelledby="tab-one">Travel</div>
-      <div role="tabpanel" id="panel-two" aria-labelledby="tab-two" hidden>Hotel</div>
-      <div role="tabpanel" id="panel-three" aria-labelledby="tab-three" hidden>Activities</div>
-      <div role="tabpanel" id="panel-four" aria-labelledby="tab-four" hidden>Food</div>
+      <div role="tabpanel" id="panel-two" aria-labelledby="tab-two" hidden
+        >Hotel</div
+      >
+      <div role="tabpanel" id="panel-three" aria-labelledby="tab-three" hidden
+        >Activities</div
+      >
+      <div role="tabpanel" id="panel-four" aria-labelledby="tab-four" hidden
+        >Food</div
+      >
     `;
-  }
+  },
 };
 
 const scrolling: MaterialStoryInit<StoryKnobs> = {
@@ -131,13 +157,12 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
     const inlineIcon = knobs.inlineIcon;
 
-    return html`
-      <md-tabs aria-label="A tab bar that scrolls"
-          class="scrolling"
-          .activeTabIndex=${knobs.activeTabIndex}
-          .autoActivate=${knobs.autoActivate}
-      >
-        ${new Array(10).fill(html`
+    return html` <md-tabs
+      aria-label="A tab bar that scrolls"
+      class="scrolling"
+      .activeTabIndex=${knobs.activeTabIndex}
+      .autoActivate=${knobs.autoActivate}>
+      ${new Array(10).fill(html`
         <md-primary-tab .inlineIcon=${inlineIcon}>
           ${tabContent('piano', 'Keyboard')}
         </md-primary-tab>
@@ -153,9 +178,9 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
         <md-primary-tab .inlineIcon=${inlineIcon}>
           ${tabContent('nightlife', 'Saxophone')}
         </md-primary-tab>
-        `)}
-      </md-tabs>`;
-  }
+      `)}
+    </md-tabs>`;
+  },
 };
 
 const custom: MaterialStoryInit<StoryKnobs> = {
@@ -193,11 +218,11 @@ const custom: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
 
     return html`
-      <md-tabs aria-label="A custom themed tab bar"
-          class="custom"
-          .activeTabIndex=${knobs.activeTabIndex}
-          .autoActivate=${knobs.autoActivate}
-      >
+      <md-tabs
+        aria-label="A custom themed tab bar"
+        class="custom"
+        .activeTabIndex=${knobs.activeTabIndex}
+        .autoActivate=${knobs.autoActivate}>
         <md-primary-tab id="tab-one" aria-controls="panel-one">
           ${tabContent('flight', 'Travel')}
         </md-primary-tab>
@@ -213,11 +238,17 @@ const custom: MaterialStoryInit<StoryKnobs> = {
       </md-tabs>
 
       <div role="tabpanel" id="panel-one" aria-labelledby="tab-one">Travel</div>
-      <div role="tabpanel" id="panel-two" aria-labelledby="tab-two" hidden>Hotel</div>
-      <div role="tabpanel" id="panel-three" aria-labelledby="tab-three" hidden>Activities</div>
-      <div role="tabpanel" id="panel-four" aria-labelledby="tab-four" hidden>Food</div>
+      <div role="tabpanel" id="panel-two" aria-labelledby="tab-two" hidden
+        >Hotel</div
+      >
+      <div role="tabpanel" id="panel-three" aria-labelledby="tab-three" hidden
+        >Activities</div
+      >
+      <div role="tabpanel" id="panel-four" aria-labelledby="tab-four" hidden
+        >Food</div
+      >
     `;
-  }
+  },
 };
 
 const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
@@ -232,8 +263,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
         aria-label="Primary tabs"
         .activeTabIndex=${knobs.activeTabIndex}
         .autoActivate=${knobs.autoActivate}
-        ${setupTabPanels()}
-      >
+        ${setupTabPanels()}>
         <md-primary-tab .inlineIcon=${inlineIcon} aria-controls="movies">
           ${tabContent('videocam', 'Movies')}
         </md-primary-tab>
@@ -246,59 +276,90 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
       </md-tabs>
 
       <div role="tabpanel" id="movies" class="subtabs" aria-label="Movies">
-        <md-tabs aria-label="Secondary tabs for movies"
+        <md-tabs
+          aria-label="Secondary tabs for movies"
           .activeTabIndex=${knobs.activeTabIndex}
           .autoActivate=${knobs.autoActivate}
-          ${setupTabPanels()}
-        >
-          <md-secondary-tab aria-controls="star-wars">Star Wars</md-secondary-tab>
+          ${setupTabPanels()}>
+          <md-secondary-tab aria-controls="star-wars"
+            >Star Wars</md-secondary-tab
+          >
           <md-secondary-tab aria-controls="avengers">Avengers</md-secondary-tab>
           <md-secondary-tab aria-controls="jaws">Jaws</md-secondary-tab>
           <md-secondary-tab aria-controls="forzen">Frozen</md-secondary-tab>
         </md-tabs>
 
-        <div role="tabpanel" id="star-wars" aria-label="Star Wars">Star Wars</div>
-        <div role="tabpanel" id="avengers" aria-label="Avengers" hidden>Avengers</div>
+        <div role="tabpanel" id="star-wars" aria-label="Star Wars"
+          >Star Wars</div
+        >
+        <div role="tabpanel" id="avengers" aria-label="Avengers" hidden
+          >Avengers</div
+        >
         <div role="tabpanel" id="jaws" aria-label="Jaws" hidden>Jaws</div>
         <div role="tabpanel" id="frozen" aria-label="Frozen" hidden>Frozen</div>
       </div>
 
-      <div role="tabpanel" id="photos" class="subtabs" aria-label="Photos" hidden>
-        <md-tabs aria-label="Secondary tabs for photos"
+      <div
+        role="tabpanel"
+        id="photos"
+        class="subtabs"
+        aria-label="Photos"
+        hidden>
+        <md-tabs
+          aria-label="Secondary tabs for photos"
           .activeTabIndex=${knobs.activeTabIndex}
-          .autoActivate=${knobs.autoActivate}
-        >
+          .autoActivate=${knobs.autoActivate}>
           <md-secondary-tab aria-controls="yosemite">Yosemite</md-secondary-tab>
-          <md-secondary-tab aria-controls="mona-lisa">Mona Lisa</md-secondary-tab>
-          <md-secondary-tab aria-controls="swiss-alps">Swiss Alps</md-secondary-tab>
-          <md-secondary-tab aria-controls="niagra-falls">Niagra Falls</md-secondary-tab>
+          <md-secondary-tab aria-controls="mona-lisa"
+            >Mona Lisa</md-secondary-tab
+          >
+          <md-secondary-tab aria-controls="swiss-alps"
+            >Swiss Alps</md-secondary-tab
+          >
+          <md-secondary-tab aria-controls="niagra-falls"
+            >Niagra Falls</md-secondary-tab
+          >
         </md-tabs>
 
         <div role="tabpanel" id="yosemite" aria-label="Yosemite">Yosemite</div>
-        <div role="tabpanel" id="mona-lisa" aria-label="Mona Lisa" hidden>Mona Lisa</div>
-        <div role="tabpanel" id="swiss-alps" aria-label="Swiss Alps" hidden>Swiss Alps</div>
-        <div role="tabpanel" id="niagra-falls" aria-label="Niagra Falls" hidden>Niagra Falls</div>
+        <div role="tabpanel" id="mona-lisa" aria-label="Mona Lisa" hidden
+          >Mona Lisa</div
+        >
+        <div role="tabpanel" id="swiss-alps" aria-label="Swiss Alps" hidden
+          >Swiss Alps</div
+        >
+        <div role="tabpanel" id="niagra-falls" aria-label="Niagra Falls" hidden
+          >Niagra Falls</div
+        >
       </div>
 
       <div role="tabpanel" id="music" class="subtabs" aria-label="Music" hidden>
-        <md-tabs aria-label="Secondary tabs for music"
+        <md-tabs
+          aria-label="Secondary tabs for music"
           .activeTabIndex=${knobs.activeTabIndex}
           .autoActivate=${knobs.autoActivate}
-          ${setupTabPanels()}
-        >
+          ${setupTabPanels()}>
           <md-secondary-tab aria-controls="rock">Rock</md-secondary-tab>
           <md-secondary-tab aria-controls="ambient">Ambient</md-secondary-tab>
-          <md-secondary-tab aria-controls="sounds">Soundscapes</md-secondary-tab>
+          <md-secondary-tab aria-controls="sounds"
+            >Soundscapes</md-secondary-tab
+          >
           <md-secondary-tab aria-controls="noise">White Noise</md-secondary-tab>
         </md-tabs>
 
         <div role="tabpanel" id="rock" aria-label="Rock">Rock</div>
-        <div role="tabpanel" id="ambient" aria-label="Ambient" hidden>Ambient</div>
-        <div role="tabpanel" id="sounds" aria-label="Soundscapes" hidden>Soundscapes</div>
-        <div role="tabpanel" id="noise" aria-label="White noise" hidden>White Noise</div>
+        <div role="tabpanel" id="ambient" aria-label="Ambient" hidden
+          >Ambient</div
+        >
+        <div role="tabpanel" id="sounds" aria-label="Soundscapes" hidden
+          >Soundscapes</div
+        >
+        <div role="tabpanel" id="noise" aria-label="White noise" hidden
+          >White Noise</div
+        >
       </div>
     `;
-  }
+  },
 };
 
 const dynamic: MaterialStoryInit<StoryKnobs> = {
@@ -308,8 +369,9 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
     const inlineIcon = knobs.inlineIcon;
 
     function getTabs(event: Event) {
-      return ((event.target! as Element).getRootNode() as ShadowRoot)
-          .querySelector('md-tabs')!;
+      return (
+        (event.target! as Element).getRootNode() as ShadowRoot
+      ).querySelector('md-tabs')!;
     }
 
     function addTab(event: Event) {
@@ -346,32 +408,27 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
       }
     }
 
-    return html`
-      <div class="controls">
+    return html` <div class="controls">
         <md-icon-button @click=${addTab}><md-icon>add</md-icon></md-icon-button>
-        <md-icon-button @click=${
-        removeTab}><md-icon>remove</md-icon></md-icon-button>
-        <md-icon-button @click=${
-        moveTabTowardsStart}><md-icon>chevron_left</md-icon></md-icon-button>
-        <md-icon-button @click=${
-        moveTabTowardsEnd}><md-icon>chevron_right</md-icon></md-icon-button>
+        <md-icon-button @click=${removeTab}
+          ><md-icon>remove</md-icon></md-icon-button
+        >
+        <md-icon-button @click=${moveTabTowardsStart}
+          ><md-icon>chevron_left</md-icon></md-icon-button
+        >
+        <md-icon-button @click=${moveTabTowardsEnd}
+          ><md-icon>chevron_right</md-icon></md-icon-button
+        >
       </div>
       <md-tabs
-          class="scrolling"
-          .activeTabIndex=${knobs.activeTabIndex}
-          .autoActivate=${knobs.autoActivate}
-      >
-        <md-primary-tab .inlineIcon=${inlineIcon}>
-          Tab 1
-        </md-primary-tab>
-        <md-primary-tab .inlineIcon=${inlineIcon}>
-          Tab 2
-        </md-primary-tab>
-        <md-primary-tab .inlineIcon=${inlineIcon}>
-          Tab 3
-        </md-primary-tab>
+        class="scrolling"
+        .activeTabIndex=${knobs.activeTabIndex}
+        .autoActivate=${knobs.autoActivate}>
+        <md-primary-tab .inlineIcon=${inlineIcon}> Tab 1 </md-primary-tab>
+        <md-primary-tab .inlineIcon=${inlineIcon}> Tab 2 </md-primary-tab>
+        <md-primary-tab .inlineIcon=${inlineIcon}> Tab 3 </md-primary-tab>
       </md-tabs>`;
-  }
+  },
 };
 
 function getTabContentGenerator(knobs: StoryKnobs) {
@@ -381,20 +438,19 @@ function getTabContentGenerator(knobs: StoryKnobs) {
   return (icon: string, label: string) => {
     const iconTemplate = html`<md-icon slot="icon">${icon}</md-icon>`;
     return html`
-      ${useIcon ? iconTemplate : nothing}
-      ${useLabel ? html`${label}` : nothing}
+      ${useIcon ? iconTemplate : nothing} ${useLabel ? html`${label}` : nothing}
     `;
   };
 }
 
 function setupTabPanels() {
-  return ref(instance => {
+  return ref((instance) => {
     if (!instance) {
       return;
     }
 
     const tabs = instance as MdTabs;
-    let currentPanel: HTMLElement|null = null;
+    let currentPanel: HTMLElement | null = null;
     tabs.addEventListener('change', () => {
       if (currentPanel) {
         currentPanel.hidden = true;
@@ -411,5 +467,11 @@ function setupTabPanels() {
 }
 
 /** Tabs stories. */
-export const stories =
-    [primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];
+export const stories = [
+  primary,
+  secondary,
+  scrolling,
+  custom,
+  primaryAndSecondary,
+  dynamic,
+];
diff --git a/tabs/harness.ts b/tabs/harness.ts
index f3cbcba31..825385191 100644
--- a/tabs/harness.ts
+++ b/tabs/harness.ts
@@ -48,14 +48,13 @@ export class TabsHarness extends Harness<Tabs> {
     }
 
     const selectedItemHarness =
-        (this.element.activeTab as ElementWithHarness<Tab>).harness as
-            TabHarness ??
-        new TabHarness(this.element.activeTab);
+      ((this.element.activeTab as ElementWithHarness<Tab>)
+        .harness as TabHarness) ?? new TabHarness(this.element.activeTab);
     return await selectedItemHarness.getInteractiveElement();
   }
 
   get harnessedItems() {
-    return (this.element.tabs as Array<ElementWithHarness<Tab>>).map(item => {
+    return (this.element.tabs as Array<ElementWithHarness<Tab>>).map((item) => {
       return (item.harness ?? new TabHarness(item)) as TabHarness;
     });
   }
diff --git a/tabs/internal/tab.ts b/tabs/internal/tab.ts
index 9e0698512..5438f9af8 100644
--- a/tabs/internal/tab.ts
+++ b/tabs/internal/tab.ts
@@ -9,10 +9,19 @@ import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 
 import {html, isServer, LitElement, nothing} from 'lit';
-import {property, query, queryAssignedElements, queryAssignedNodes, state} from 'lit/decorators.js';
+import {
+  property,
+  query,
+  queryAssignedElements,
+  queryAssignedNodes,
+  state,
+} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
-import {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';
+import {
+  polyfillElementInternalsAria,
+  setupHostAria,
+} from '../../internal/aria/aria.js';
 import {EASING} from '../../internal/motion/animation.js';
 
 /**
@@ -70,14 +79,17 @@ export class Tab extends LitElement {
    */
   @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;
 
-  @query('.indicator') readonly[INDICATOR]!: HTMLElement|null;
+  @query('.indicator') readonly [INDICATOR]!: HTMLElement | null;
   @state() protected fullWidthIndicator = false;
   @queryAssignedNodes({flatten: true})
   private readonly assignedDefaultNodes!: Node[];
   @queryAssignedElements({slot: 'icon', flatten: true})
   private readonly assignedIcons!: HTMLElement[];
   private readonly internals = polyfillElementInternalsAria(
-      this, (this as HTMLElement /* needed for closure */).attachInternals());
+    this,
+    // Cast needed for closure
+    (this as HTMLElement).attachInternals(),
+  );
 
   constructor() {
     super();
@@ -89,20 +101,22 @@ export class Tab extends LitElement {
 
   protected override render() {
     const indicator = html`<div class="indicator"></div>`;
-    return html`
-      <div class="button" role="presentation" @click=${this.handleContentClick}>
-        <md-focus-ring part="focus-ring" inward
-            .control=${this}></md-focus-ring>
-        <md-elevation></md-elevation>
-        <md-ripple .control=${this}></md-ripple>
-        <div class="content ${classMap(this.getContentClasses())}"
-            role="presentation">
-          <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
-          <slot @slotchange=${this.handleSlotChange}></slot>
-          ${this.fullWidthIndicator ? nothing : indicator}
-        </div>
-        ${this.fullWidthIndicator ? indicator : nothing}
-      </div>`;
+    return html` <div
+      class="button"
+      role="presentation"
+      @click=${this.handleContentClick}>
+      <md-focus-ring part="focus-ring" inward .control=${this}></md-focus-ring>
+      <md-elevation></md-elevation>
+      <md-ripple .control=${this}></md-ripple>
+      <div
+        class="content ${classMap(this.getContentClasses())}"
+        role="presentation">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.fullWidthIndicator ? nothing : indicator}
+      </div>
+      ${this.fullWidthIndicator ? indicator : nothing}
+    </div>`;
   }
 
   protected getContentClasses() {
@@ -142,13 +156,15 @@ export class Tab extends LitElement {
       return;
     }
 
-    this[INDICATOR].getAnimations().forEach(a => {
+    this[INDICATOR].getAnimations().forEach((a) => {
       a.cancel();
     });
     const frames = this.getKeyframes(previousTab);
     if (frames !== null) {
-      this[INDICATOR].animate(
-          frames, {duration: 250, easing: EASING.EMPHASIZED});
+      this[INDICATOR].animate(frames, {
+        duration: 250,
+        easing: EASING.EMPHASIZED,
+      });
     }
   }
 
@@ -160,17 +176,22 @@ export class Tab extends LitElement {
 
     const from: Keyframe = {};
     const fromRect =
-        previousTab[INDICATOR]?.getBoundingClientRect() ?? ({} as DOMRect);
+      previousTab[INDICATOR]?.getBoundingClientRect() ?? ({} as DOMRect);
     const fromPos = fromRect.left;
     const fromExtent = fromRect.width;
     const toRect = this[INDICATOR]!.getBoundingClientRect();
     const toPos = toRect.left;
     const toExtent = toRect.width;
     const scale = fromExtent / toExtent;
-    if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&
-        !isNaN(scale)) {
-      from['transform'] = `translateX(${
-          (fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
+    if (
+      !reduceMotion &&
+      fromPos !== undefined &&
+      toPos !== undefined &&
+      !isNaN(scale)
+    ) {
+      from['transform'] = `translateX(${(fromPos - toPos).toFixed(
+        4,
+      )}px) scaleX(${scale.toFixed(4)})`;
     } else {
       from['opacity'] = 0;
     }
@@ -184,8 +205,9 @@ export class Tab extends LitElement {
     // Check if there's any label text or elements. If not, then there is only
     // an icon.
     for (const node of this.assignedDefaultNodes) {
-      const hasTextContent = node.nodeType === Node.TEXT_NODE &&
-          !!(node as Text).wholeText.match(/\S/);
+      const hasTextContent =
+        node.nodeType === Node.TEXT_NODE &&
+        !!(node as Text).wholeText.match(/\S/);
       if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
         return;
       }
diff --git a/tabs/internal/tabs.ts b/tabs/internal/tabs.ts
index a9426b83e..23d08a2a8 100644
--- a/tabs/internal/tabs.ts
+++ b/tabs/internal/tabs.ts
@@ -9,7 +9,10 @@ import '../../divider/divider.js';
 import {html, isServer, LitElement} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 
-import {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';
+import {
+  polyfillElementInternalsAria,
+  setupHostAria,
+} from '../../internal/aria/aria.js';
 
 import {ANIMATE_INDICATOR, Tab} from './tab.js';
 
@@ -54,9 +57,9 @@ export class Tabs extends LitElement {
    * @export
    */
   get activeTab() {
-    return this.tabs.find(tab => tab.active) ?? null;
+    return this.tabs.find((tab) => tab.active) ?? null;
   }
-  set activeTab(tab: Tab|null) {
+  set activeTab(tab: Tab | null) {
     // Ignore setting activeTab to null. As long as there are children, one tab
     // must be selected.
     if (tab) {
@@ -70,7 +73,7 @@ export class Tabs extends LitElement {
    * @export
    */
   get activeTabIndex() {
-    return this.tabs.findIndex(tab => tab.active);
+    return this.tabs.findIndex((tab) => tab.active);
   }
   set activeTabIndex(index: number) {
     const activateTabAtIndex = () => {
@@ -108,14 +111,17 @@ export class Tabs extends LitElement {
    */
   @property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;
 
-  @query('slot') private readonly slotElement!: HTMLSlotElement|null;
+  @query('slot') private readonly slotElement!: HTMLSlotElement | null;
 
   private get focusedTab() {
-    return this.tabs.find(tab => tab.matches(':focus-within'));
+    return this.tabs.find((tab) => tab.matches(':focus-within'));
   }
 
   private readonly internals = polyfillElementInternalsAria(
-      this, (this as HTMLElement /* needed for closure */).attachInternals());
+    this,
+    // Cast needed for closure
+    (this as HTMLElement).attachInternals(),
+  );
 
   constructor() {
     super();
@@ -135,7 +141,7 @@ export class Tabs extends LitElement {
    *     active tab.
    * @return A Promise that resolves after the tab has been scrolled to.
    */
-  async scrollToTab(tabToScrollTo?: Tab|null) {
+  async scrollToTab(tabToScrollTo?: Tab | null) {
     await this.updateComplete;
     const {tabs} = this;
     tabToScrollTo ??= this.activeTab;
@@ -157,15 +163,16 @@ export class Tabs extends LitElement {
     const max = offset + extent - hostExtent + scrollMargin;
     const to = Math.min(min, Math.max(max, scroll));
     // TODO(b/299934312): improve focus smoothness
-    const behavior = !this.focusedTab ? 'smooth' : 'instant' as ScrollBehavior;
+    const behavior: ScrollBehavior = !this.focusedTab ? 'smooth' : 'instant';
     this.scrollTo({behavior, top: 0, left: to});
   }
 
   protected override render() {
     return html`
       <div class="tabs">
-        <slot @slotchange=${this.handleSlotChange}
-            @click=${this.handleTabClick}></slot>
+        <slot
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleTabClick}></slot>
       </div>
       <md-divider part="divider"></md-divider>
     `;
@@ -198,7 +205,8 @@ export class Tabs extends LitElement {
       // Don't dispatch a change event if activating a tab when no previous tabs
       // were selected, such as when md-tabs auto-selects the first tab.
       const defaultPrevented = !this.dispatchEvent(
-          new Event('change', {bubbles: true, cancelable: true}));
+        new Event('change', {bubbles: true, cancelable: true}),
+      );
       if (defaultPrevented) {
         for (const tab of tabs) {
           tab.active = tab === previousTab;
@@ -228,7 +236,7 @@ export class Tabs extends LitElement {
     const isHome = event.key === 'Home';
     const isEnd = event.key === 'End';
     // Ignore non-navigation keys
-    if (event.defaultPrevented || !isLeft && !isRight && !isHome && !isEnd) {
+    if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {
       return;
     }
 
@@ -309,4 +317,4 @@ export class Tabs extends LitElement {
 
 function isTab(element: unknown): element is Tab {
   return element instanceof HTMLElement && element.hasAttribute('md-tab');
-}
\ No newline at end of file
+}
diff --git a/tabs/tabs_test.ts b/tabs/tabs_test.ts
index 9f28f1652..0c5d81c10 100644
--- a/tabs/tabs_test.ts
+++ b/tabs/tabs_test.ts
@@ -19,14 +19,11 @@ interface TabsTestProps {
 }
 
 function getTabsTemplate(props?: TabsTestProps) {
-  return html`
-    <md-tabs
-      .activeTabIndex=${props?.activeTabIndex ?? 0}
-    >
-      <md-primary-tab>A</md-primary-tab>
-      <md-primary-tab>B</md-primary-tab>
-      <md-primary-tab>C</md-primary-tab>
-    </md-tabs>`;
+  return html` <md-tabs .activeTabIndex=${props?.activeTabIndex ?? 0}>
+    <md-primary-tab>A</md-primary-tab>
+    <md-primary-tab>B</md-primary-tab>
+    <md-primary-tab>C</md-primary-tab>
+  </md-tabs>`;
 }
 
 describe('<md-tabs>', () => {
@@ -121,20 +118,19 @@ describe('<md-tabs>', () => {
       expect(harness.element.activeTab).toBe(firstTab);
     });
 
-    it('should allow setting activeTabIndex in a lit property binding',
-       async () => {
-         const root = env.render(html`
-            <md-tabs .activeTabIndex=${1}>
-              <md-primary-tab>A</md-primary-tab>
-              <md-primary-tab>B</md-primary-tab>
-            </md-tabs>
-          `);
+    it('should allow setting activeTabIndex in a lit property binding', async () => {
+      const root = env.render(html`
+        <md-tabs .activeTabIndex=${1}>
+          <md-primary-tab>A</md-primary-tab>
+          <md-primary-tab>B</md-primary-tab>
+        </md-tabs>
+      `);
 
-         await env.waitForStability();
-         const tabs = root.querySelector('md-tabs')!;
-         expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);
-         expect(tabs.activeTab?.textContent).withContext('activeTab').toBe('B');
-       });
+      await env.waitForStability();
+      const tabs = root.querySelector('md-tabs')!;
+      expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);
+      expect(tabs.activeTab?.textContent).withContext('activeTab').toBe('B');
+    });
   });
 
   it('should dispatch "change" when tab changes', async () => {
@@ -146,25 +142,23 @@ describe('<md-tabs>', () => {
     expect(changeListener).toHaveBeenCalledTimes(1);
   });
 
-  it('should not dispatch "change" when changing to unrelated tab',
-     async () => {
-       const {harness} = await setupTest();
-       const changeListener = jasmine.createSpy('changeListener');
-       harness.element.addEventListener('change', changeListener);
+  it('should not dispatch "change" when changing to unrelated tab', async () => {
+    const {harness} = await setupTest();
+    const changeListener = jasmine.createSpy('changeListener');
+    harness.element.addEventListener('change', changeListener);
 
-       harness.element.activeTab = document.createElement('md-primary-tab');
-       await env.waitForStability();
-       expect(changeListener).not.toHaveBeenCalled();
-     });
+    harness.element.activeTab = document.createElement('md-primary-tab');
+    await env.waitForStability();
+    expect(changeListener).not.toHaveBeenCalled();
+  });
 
-  it('should not dispatch "change" when setting activeTab to itself',
-     async () => {
-       const {harness} = await setupTest();
-       const changeListener = jasmine.createSpy('changeListener');
-       harness.element.addEventListener('change', changeListener);
+  it('should not dispatch "change" when setting activeTab to itself', async () => {
+    const {harness} = await setupTest();
+    const changeListener = jasmine.createSpy('changeListener');
+    harness.element.addEventListener('change', changeListener);
 
-       harness.element.activeTab = harness.element.activeTab;
-       await env.waitForStability();
-       expect(changeListener).not.toHaveBeenCalled();
-     });
+    harness.element.activeTab = harness.element.activeTab;
+    await env.waitForStability();
+    expect(changeListener).not.toHaveBeenCalled();
+  });
 });
diff --git a/testing/environment.ts b/testing/environment.ts
index 60d314719..7a606122b 100644
--- a/testing/environment.ts
+++ b/testing/environment.ts
@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {ReactiveElement, render as litRender, TemplateResult} from 'lit';
+import {ReactiveElement, TemplateResult, render as litRender} from 'lit';
 
 import {installSkipWebAnimations} from './skip-animations.js';
 
@@ -132,7 +132,7 @@ export class Environment {
    * @return The current root container or undefined is nothing as been rendered
    *     yet.
    */
-  protected getCurrentRoot(): HTMLElement|undefined {
+  protected getCurrentRoot(): HTMLElement | undefined {
     return this.roots[this.roots.length - 1];
   }
 }
diff --git a/testing/forms.ts b/testing/forms.ts
index 50bb1f52e..a26020d07 100644
--- a/testing/forms.ts
+++ b/testing/forms.ts
@@ -18,7 +18,7 @@ export interface FormTestsOptions<T extends HTMLElement> {
    * @param root The root element to query from.
    * @return `root.querySelector('md-component')`
    */
-  queryControl(root: Element): T|null;
+  queryControl(root: Element): T | null;
   /**
    * Tests for `setFormValue`. Tests should render a form element, then
    * assert that the form's `FormData` matches the expected value (or lack of
@@ -52,7 +52,8 @@ export interface FormTestsOptions<T extends HTMLElement> {
  * @param options Options for creating tests, including use cases.
  */
 export function createFormTests<T extends HTMLElement>(
-    options: FormTestsOptions<T>) {
+  options: FormTestsOptions<T>,
+) {
   // Patch attachInternals in order to spy on `setFormValue()` for simulating
   // form state restoration.
   const originalAttachInternals = HTMLElement.prototype.attachInternals;
@@ -71,11 +72,11 @@ export function createFormTests<T extends HTMLElement>(
   }
 
   beforeAll(() => {
-    HTMLElement.prototype.attachInternals = function(this: HTMLElement) {
+    HTMLElement.prototype.attachInternals = function (this: HTMLElement) {
       const internals = originalAttachInternals.call(this);
       spyOn(internals, 'setFormValue').and.callThrough();
       (this as unknown as HTMLElementWithInternals)[INTERNALS] =
-          internals as SpiedElementInternals;
+        internals as SpiedElementInternals;
       return internals;
     };
   });
@@ -84,7 +85,7 @@ export function createFormTests<T extends HTMLElement>(
     HTMLElement.prototype.attachInternals = originalAttachInternals;
   });
 
-  let root: HTMLElement|undefined;
+  let root: HTMLElement | undefined;
 
   beforeEach(() => {
     root = document.createElement('div');
@@ -106,9 +107,9 @@ export function createFormTests<T extends HTMLElement>(
       throw new Error('Could not query rendered <form>');
     }
 
-    const control =
-        options.queryControl(root) as (T & ExpectedFormAssociatedElement) |
-        null;
+    const control = options.queryControl(root) as
+      | (T & ExpectedFormAssociatedElement)
+      | null;
     if (!control) {
       throw new Error('`queryControl` must return an element.');
     }
@@ -121,8 +122,8 @@ export function createFormTests<T extends HTMLElement>(
     const {control} = await setupTest();
 
     expect(control.constructor.formAssociated)
-        .withContext('control.constructor.formAssociated')
-        .toBeTrue();
+      .withContext('control.constructor.formAssociated')
+      .toBeTrue();
   });
 
   it('should return associated form for `form` property', async () => {
@@ -147,38 +148,34 @@ export function createFormTests<T extends HTMLElement>(
     form.appendChild(labelParent);
 
     expect(control.labels)
-        .withContext('control.labels')
-        .toBeInstanceOf(NodeList);
+      .withContext('control.labels')
+      .toBeInstanceOf(NodeList);
     const labels = Array.from(control.labels);
     expect(labels)
-        .withContext('should contain parent label element')
-        .toContain(labelParent);
+      .withContext('should contain parent label element')
+      .toContain(labelParent);
     expect(labels)
-        .withContext('should contain label element with for attribute')
-        .toContain(labelFor);
+      .withContext('should contain label element with for attribute')
+      .toContain(labelFor);
   });
 
-  it('should return empty NodeList for `labels` when not part of a <form>',
-     async () => {
-       const {form, control} = await setupTest();
-       form.parentElement?.append(control);
-       expect(control.labels)
-           .withContext('control.labels')
-           .toBeInstanceOf(NodeList);
-       expect(control.labels.length)
-           .withContext('control.labels.length')
-           .toBe(0);
-     });
+  it('should return empty NodeList for `labels` when not part of a <form>', async () => {
+    const {form, control} = await setupTest();
+    form.parentElement?.append(control);
+    expect(control.labels)
+      .withContext('control.labels')
+      .toBeInstanceOf(NodeList);
+    expect(control.labels.length).withContext('control.labels.length').toBe(0);
+  });
 
-  it('should have a name property that reflects to the name attribute',
-     async () => {
-       const {control} = await setupTest();
-       control.name = 'control';
-       await control?.updateComplete;
-       expect(control.getAttribute('name'))
-           .withContext('"name" reflected attribute')
-           .toBe('control');
-     });
+  it('should have a name property that reflects to the name attribute', async () => {
+    const {control} = await setupTest();
+    control.name = 'control';
+    await control?.updateComplete;
+    expect(control.getAttribute('name'))
+      .withContext('"name" reflected attribute')
+      .toBe('control');
+  });
 
   it('should not add a form value without a name', async () => {
     const {form, control} = await setupTest();
@@ -208,24 +205,26 @@ export function createFormTests<T extends HTMLElement>(
   for (const restoreTest of options.restoreTests) {
     it(`it should pass the "${restoreTest.name}" restore test`, async () => {
       const {form} = await setupTest(restoreTest.render());
-      const controls =
-          Array.from(form.elements) as ExpectedFormAssociatedElement[];
+      const controls = Array.from(
+        form.elements,
+      ) as ExpectedFormAssociatedElement[];
       for (const control of controls) {
         // Simulate restoring a new set of controls. For each control, we
         // grab its value and state from its internals. Then, we remove it from
         // the form, add a new control, and simulate restoring the state and
         // value for that control.
-        const [value, state] =
-            getInternals(control).setFormValue.calls.mostRecent()?.args ??
-            [null, null];
+        const [value, state] = getInternals(
+          control,
+        ).setFormValue.calls.mostRecent()?.args ?? [null, null];
 
-        const newControl = document.createElement(control.tagName) as
-            ExpectedFormAssociatedElement;
+        const newControl = document.createElement(
+          control.tagName,
+        ) as ExpectedFormAssociatedElement;
         // Include any children for controls like `<select>`
         newControl.append(...control.children);
         control.remove();
         form.appendChild(newControl);
-        let restoreState: FormState|null|FormData = state ?? value;
+        let restoreState: FormState | null | FormData = state ?? value;
         if (restoreState instanceof FormData) {
           restoreState = Array.from(restoreState.entries());
         }
@@ -249,15 +248,18 @@ export function createFormTests<T extends HTMLElement>(
  * checking in this file only.
  */
 interface ExpectedFormAssociatedElement extends HTMLElement {
-  new(): ExpectedFormAssociatedElement;
-  constructor: (new() => ExpectedFormAssociatedElement)&
-      {readonly formAssociated: true};
+  new (): ExpectedFormAssociatedElement;
+  constructor: (new () => ExpectedFormAssociatedElement) & {
+    readonly formAssociated: true;
+  };
   prototype: ExpectedFormAssociatedElement;
-  form: HTMLFormElement|null;
+  form: HTMLFormElement | null;
   labels: NodeList;
   name: string;
   formStateRestoreCallback(
-      state: FormState|null, reason: 'restore'|'autocomplete'): void;
+    state: FormState | null,
+    reason: 'restore' | 'autocomplete',
+  ): void;
   updateComplete?: Promise<void>;
 }
 
@@ -265,7 +267,7 @@ interface ExpectedFormAssociatedElement extends HTMLElement {
  * `formStateRestoreCallback` type for `state`. May be a string, `File`,
  * `FormData` entries, or null.
  */
-type FormState = FormDataEntryValue|Array<[string, FormDataEntryValue]>;
+type FormState = FormDataEntryValue | Array<[string, FormDataEntryValue]>;
 
 /**
  * A test for `FormData` values.
diff --git a/testing/harness.ts b/testing/harness.ts
index a018132b7..d4caed1d4 100644
--- a/testing/harness.ts
+++ b/testing/harness.ts
@@ -4,16 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {defaultTransformPseudoClasses, getTransformedPseudoClass, transformPseudoClasses} from './transform-pseudo-classes.js';
-
+import {
+  defaultTransformPseudoClasses,
+  getTransformedPseudoClass,
+  transformPseudoClasses,
+} from './transform-pseudo-classes.js';
 
 /**
  * Retrieves the element type from a `Harness` type.
  *
  * @template H The harness type.
  */
-export type HarnessElement<H extends Harness> =
-    H extends Harness<infer E>? ElementWithHarness<E, H>: never;
+export type HarnessElement<H extends Harness> = H extends Harness<infer E>
+  ? ElementWithHarness<E, H>
+  : never;
 
 /**
  * Harnesses will attach themselves to their element for convenience.
@@ -21,9 +25,10 @@ export type HarnessElement<H extends Harness> =
  * @template E The element type.
  * @template H The harness type.
  */
-export type ElementWithHarness<E extends HTMLElement = HTMLElement,
-                                         H extends Harness<E> = Harness<E>> =
-    E&{
+export type ElementWithHarness<
+  E extends HTMLElement = HTMLElement,
+  H extends Harness<E> = Harness<E>,
+> = E & {
   /**
    * The harness for this element.
    */
@@ -32,7 +37,7 @@ export type ElementWithHarness<E extends HTMLElement = HTMLElement,
   /**
    * Associated form element.
    */
-  form?: HTMLFormElement|null;
+  form?: HTMLFormElement | null;
 };
 
 /**
@@ -42,8 +47,9 @@ export type ElementWithHarness<E extends HTMLElement = HTMLElement,
  * @param element The element to check.
  * @return True if the element has a harness property.
  */
-export function isElementWithHarness(element: Element):
-    element is ElementWithHarness {
+export function isElementWithHarness(
+  element: Element,
+): element is ElementWithHarness {
   return (element as unknown as ElementWithHarness).harness instanceof Harness;
 }
 
@@ -63,7 +69,7 @@ export class Harness<E extends HTMLElement = HTMLElement> {
   /**
    * The element that this harness controls.
    */
-  readonly element: E&ElementWithHarness<E, this>;
+  readonly element: E & ElementWithHarness<E, this>;
 
   /**
    * A set of elements that have already been patched to support transformed
@@ -87,7 +93,7 @@ export class Harness<E extends HTMLElement = HTMLElement> {
   async reset() {
     const element = await this.getInteractiveElement();
     for (const pseudoClass of this.transformPseudoClasses) {
-      this.forEachNodeFrom(element, el => {
+      this.forEachNodeFrom(element, (el) => {
         this.removePseudoClass(el, pseudoClass);
       });
     }
@@ -325,7 +331,7 @@ export class Harness<E extends HTMLElement = HTMLElement> {
     if (!form) {
       return new FormData();
     }
-    return new Promise<FormData>(resolve => {
+    return new Promise<FormData>((resolve) => {
       const submitListener = (event: SubmitEvent) => {
         event.preventDefault();
         const data = new FormData(form);
@@ -366,13 +372,16 @@ export class Harness<E extends HTMLElement = HTMLElement> {
     const root = element.getRootNode() as Document | ShadowRoot;
     if (element.shadowRoot) {
       transformPseudoClasses(
-          element.shadowRoot.adoptedStyleSheets || [],
-          this.transformPseudoClasses);
+        element.shadowRoot.adoptedStyleSheets || [],
+        this.transformPseudoClasses,
+      );
     }
 
     transformPseudoClasses(root.styleSheets, this.transformPseudoClasses);
     transformPseudoClasses(
-        root.adoptedStyleSheets || [], this.transformPseudoClasses);
+      root.adoptedStyleSheets || [],
+      this.transformPseudoClasses,
+    );
     element.classList.add(getTransformedPseudoClass(pseudoClass));
     this.patchForTransformedPseudoClasses(element);
   }
@@ -396,10 +405,12 @@ export class Harness<E extends HTMLElement = HTMLElement> {
   protected simulateClick(element: HTMLElement, init: MouseEventInit = {}) {
     // Firefox does not support some simulations with PointerEvents, such as
     // selecting an <input type="checkbox">. Use MouseEvent for browser support.
-    element.dispatchEvent(new MouseEvent('click', {
-      ...this.createMouseEventInit(element),
-      ...init,
-    }));
+    element.dispatchEvent(
+      new MouseEvent('click', {
+        ...this.createMouseEventInit(element),
+        ...init,
+      }),
+    );
   }
 
   /**
@@ -409,13 +420,17 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateContextmenu(
-      element: HTMLElement, init: MouseEventInit = {}) {
-    element.dispatchEvent(new MouseEvent('contextmenu', {
-      ...this.createMouseEventInit(element),
-      button: 2,
-      buttons: 2,
-      ...init,
-    }));
+    element: HTMLElement,
+    init: MouseEventInit = {},
+  ) {
+    element.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        ...this.createMouseEventInit(element),
+        button: 2,
+        buttons: 2,
+        ...init,
+      }),
+    );
   }
 
   /**
@@ -439,12 +454,13 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    */
   protected simulatePointerFocus(element: HTMLElement) {
     this.addPseudoClass(element, ':focus');
-    this.forEachNodeFrom(element, el => {
+    this.forEachNodeFrom(element, (el) => {
       this.addPseudoClass(el, ':focus-within');
     });
     element.dispatchEvent(new FocusEvent('focus', {composed: true}));
     element.dispatchEvent(
-        new FocusEvent('focusin', {bubbles: true, composed: true}));
+      new FocusEvent('focusin', {bubbles: true, composed: true}),
+    );
   }
 
   /**
@@ -455,12 +471,13 @@ export class Harness<E extends HTMLElement = HTMLElement> {
   protected simulateBlur(element: HTMLElement) {
     this.removePseudoClass(element, ':focus');
     this.removePseudoClass(element, ':focus-visible');
-    this.forEachNodeFrom(element, el => {
+    this.forEachNodeFrom(element, (el) => {
       this.removePseudoClass(el, ':focus-within');
     });
     element.dispatchEvent(new FocusEvent('blur', {composed: true}));
     element.dispatchEvent(
-        new FocusEvent('focusout', {bubbles: true, composed: true}));
+      new FocusEvent('focusout', {bubbles: true, composed: true}),
+    );
   }
 
   /**
@@ -470,8 +487,10 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateStartHover(
-      element: HTMLElement, init: PointerEventInit = {}) {
-    this.forEachNodeFrom(element, el => {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+  ) {
+    this.forEachNodeFrom(element, (el) => {
       this.addPseudoClass(el, ':hover');
     });
     const rect = element.getBoundingClientRect();
@@ -510,8 +529,10 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateEndHover(
-      element: HTMLElement, init: PointerEventInit = {}) {
-    this.forEachNodeFrom(element, el => {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+  ) {
+    this.forEachNodeFrom(element, (el) => {
       this.removePseudoClass(el, ':hover');
     });
     const rect = element.getBoundingClientRect();
@@ -550,9 +571,11 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateMousePress(
-      element: HTMLElement, init: PointerEventInit = {}) {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+  ) {
     this.addPseudoClass(element, ':active');
-    this.forEachNodeFrom(element, el => {
+    this.forEachNodeFrom(element, (el) => {
       this.addPseudoClass(el, ':active');
     });
     const mouseInit = this.createMouseEventInit(element);
@@ -575,9 +598,11 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateMouseRelease(
-      element: HTMLElement, init: PointerEventInit = {}) {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+  ) {
     this.removePseudoClass(element, ':active');
-    this.forEachNodeFrom(element, el => {
+    this.forEachNodeFrom(element, (el) => {
       this.removePseudoClass(el, ':active');
     });
     const mouseInit = this.createMouseEventInit(element);
@@ -599,10 +624,12 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateTouchPress(
-      element: HTMLElement, init: PointerEventInit = {},
-      touchInit: TouchEventInit = {}) {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+    touchInit: TouchEventInit = {},
+  ) {
     this.addPseudoClass(element, ':active');
-    this.forEachNodeFrom(element, el => {
+    this.forEachNodeFrom(element, (el) => {
       this.addPseudoClass(el, ':active');
     });
     const mouseInit = this.createMouseEventInit(element);
@@ -617,12 +644,14 @@ export class Harness<E extends HTMLElement = HTMLElement> {
     // Firefox does not support TouchEvent constructor
     if (window.TouchEvent) {
       const touch = this.createTouch(element);
-      element.dispatchEvent(new TouchEvent('touchstart', {
-        touches: [touch],
-        targetTouches: [touch],
-        changedTouches: [touch],
-        ...touchInit,
-      }));
+      element.dispatchEvent(
+        new TouchEvent('touchstart', {
+          touches: [touch],
+          targetTouches: [touch],
+          changedTouches: [touch],
+          ...touchInit,
+        }),
+      );
     }
     this.simulatePointerFocus(element);
   }
@@ -634,10 +663,12 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateTouchRelease(
-      element: HTMLElement, init: PointerEventInit = {},
-      touchInit: TouchEventInit = {}) {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+    touchInit: TouchEventInit = {},
+  ) {
     this.removePseudoClass(element, ':active');
-    this.forEachNodeFrom(element, el => {
+    this.forEachNodeFrom(element, (el) => {
       this.removePseudoClass(el, ':active');
     });
     const mouseInit = this.createMouseEventInit(element);
@@ -653,7 +684,8 @@ export class Harness<E extends HTMLElement = HTMLElement> {
     if (window.TouchEvent) {
       const touch = this.createTouch(element);
       element.dispatchEvent(
-          new TouchEvent('touchend', {changedTouches: [touch], ...touchInit}));
+        new TouchEvent('touchend', {changedTouches: [touch], ...touchInit}),
+      );
     }
   }
 
@@ -664,10 +696,12 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateTouchCancel(
-      element: HTMLElement, init: PointerEventInit = {},
-      touchInit: TouchEventInit = {}) {
+    element: HTMLElement,
+    init: PointerEventInit = {},
+    touchInit: TouchEventInit = {},
+  ) {
     this.removePseudoClass(element, ':active');
-    this.forEachNodeFrom(element, el => {
+    this.forEachNodeFrom(element, (el) => {
       this.removePseudoClass(el, ':active');
     });
     const mouseInit = this.createMouseEventInit(element);
@@ -682,8 +716,9 @@ export class Harness<E extends HTMLElement = HTMLElement> {
     // Firefox does not support TouchEvent constructor
     if (window.TouchEvent) {
       const touch = this.createTouch(element);
-      element.dispatchEvent(new TouchEvent(
-          'touchcancel', {changedTouches: [touch], ...touchInit}));
+      element.dispatchEvent(
+        new TouchEvent('touchcancel', {changedTouches: [touch], ...touchInit}),
+      );
     }
   }
 
@@ -695,7 +730,10 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateKeypress(
-      element: EventTarget, key: string, init: KeyboardEventInit = {}) {
+    element: EventTarget,
+    key: string,
+    init: KeyboardEventInit = {},
+  ) {
     this.simulateKeydown(element, key, init);
     this.simulateKeyup(element, key, init);
   }
@@ -708,14 +746,19 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional event options.
    */
   protected simulateKeydown(
-      element: EventTarget, key: string, init: KeyboardEventInit = {}) {
-    element.dispatchEvent(new KeyboardEvent('keydown', {
-      ...init,
-      key,
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-    }));
+    element: EventTarget,
+    key: string,
+    init: KeyboardEventInit = {},
+  ) {
+    element.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        ...init,
+        key,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
   }
 
   /**
@@ -726,14 +769,19 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param init Additional keyboard options.
    */
   protected simulateKeyup(
-      element: EventTarget, key: string, init: KeyboardEventInit = {}) {
-    element.dispatchEvent(new KeyboardEvent('keyup', {
-      ...init,
-      key,
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-    }));
+    element: EventTarget,
+    key: string,
+    init: KeyboardEventInit = {},
+  ) {
+    element.dispatchEvent(
+      new KeyboardEvent('keyup', {
+        ...init,
+        key,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
   }
 
   /**
@@ -797,11 +845,11 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    * @param parent The last parent element to visit.
    */
   protected forEachNodeFrom(
-      child: HTMLElement,
-      callback: (node: HTMLElement) => void,
-      parent: HTMLElement = this.element,
+    child: HTMLElement,
+    callback: (node: HTMLElement) => void,
+    parent: HTMLElement = this.element,
   ) {
-    let nextNode: Node|null = child;
+    let nextNode: Node | null = child;
     while (nextNode && nextNode !== this.element) {
       const currentNode: Node = nextNode;
       nextNode = currentNode.parentNode || (currentNode as ShadowRoot).host;
@@ -816,7 +864,7 @@ export class Harness<E extends HTMLElement = HTMLElement> {
         const slot = currentNode.getAttribute('slot');
         const slotSelector = slot ? `slot[name=${slot}]` : 'slot:not([name])';
         const slotElement =
-            nextNode.shadowRoot.querySelector<HTMLSlotElement>(slotSelector);
+          nextNode.shadowRoot.querySelector<HTMLSlotElement>(slotSelector);
         if (slotElement) {
           this.forEachNodeFrom(slotElement, callback, nextNode);
         }
diff --git a/testing/skip-animations.ts b/testing/skip-animations.ts
index 4532a95db..b3e4c3ed2 100644
--- a/testing/skip-animations.ts
+++ b/testing/skip-animations.ts
@@ -8,11 +8,17 @@
 export function installSkipWebAnimations() {
   const nativeAnimate = Element.prototype.animate;
   function patchedAnimate(
-      this: Element, ...args: Parameters<typeof nativeAnimate>) {
+    this: Element,
+    ...args: Parameters<typeof nativeAnimate>
+  ) {
     const animation = nativeAnimate.apply(this, args);
     if (animation.effect) {
-      animation.effect.updateTiming(
-          {delay: 0, duration: 1, easing: 'step-start', iterations: 1});
+      animation.effect.updateTiming({
+        delay: 0,
+        duration: 1,
+        easing: 'step-start',
+        iterations: 1,
+      });
     }
 
     return animation;
@@ -22,7 +28,7 @@ export function installSkipWebAnimations() {
     configurable: true,
     enumerable: true,
     writable: true,
-    value: patchedAnimate
+    value: patchedAnimate,
   });
 
   // return uninstall function.
@@ -31,7 +37,7 @@ export function installSkipWebAnimations() {
       configurable: true,
       enumerable: true,
       writable: true,
-      value: nativeAnimate
+      value: nativeAnimate,
     });
   };
 }
diff --git a/testing/skip-animations_test.ts b/testing/skip-animations_test.ts
index 1789f194c..d163012ee 100644
--- a/testing/skip-animations_test.ts
+++ b/testing/skip-animations_test.ts
@@ -24,12 +24,9 @@ describe('skip-animations test', () => {
 
   it('does not skip animations before installing', () => {
     // Act
-    element.animate(
-        [
-          {color: 'rgb(255, 255, 255'},
-          {color: 'rgb(0, 0, 0)'},
-        ],
-        {duration: 1000});
+    element.animate([{color: 'rgb(255, 255, 255'}, {color: 'rgb(0, 0, 0)'}], {
+      duration: 1000,
+    });
 
     // Assert
     expect(getComputedStyle(element).color).toEqual('rgb(255, 255, 255)');
@@ -40,12 +37,9 @@ describe('skip-animations test', () => {
     uninstallFunction = installSkipWebAnimations();
 
     // Act
-    element.animate(
-        [
-          {color: 'rgb(255, 255, 255'},
-          {color: 'rgb(0, 0, 0)'},
-        ],
-        {duration: 1000});
+    element.animate([{color: 'rgb(255, 255, 255'}, {color: 'rgb(0, 0, 0)'}], {
+      duration: 1000,
+    });
 
     // Assert
     expect(getComputedStyle(element).color).toEqual('rgb(0, 0, 0)');
diff --git a/testing/table/internal/test-table.ts b/testing/table/internal/test-table.ts
index 084260aaa..8717dd660 100644
--- a/testing/table/internal/test-table.ts
+++ b/testing/table/internal/test-table.ts
@@ -12,7 +12,7 @@ import {html, literal} from 'lit/static-html.js';
 /** Test table interface. */
 export interface TestTableTemplate<S extends string = string> {
   /** The row display name. May be a Lit static value for rich HTML. */
-  display: string|ReturnType<typeof literal>;
+  display: string | ReturnType<typeof literal>;
   /**
    * A template's render function. It accepts a state string (the column) and
    * returns a Lit `TemplateResult`.
@@ -20,7 +20,7 @@ export interface TestTableTemplate<S extends string = string> {
    * @param state The current state to render in.
    * @return A `TemplateResult` for the given state.
    */
-  render(state: S): TemplateResult|null;
+  render(state: S): TemplateResult | null;
 }
 
 /**
@@ -41,9 +41,11 @@ export class TestTable<S extends string = string> extends LitElement {
         <thead>
           <tr>
             <th class="md3-test-table__header"></th>
-            ${this.states.map(state => html`
-              <th class="md3-test-table__header">${state}</th>
-            `)}
+            ${this.states.map(
+              (state) => html`
+                <th class="md3-test-table__header">${state}</th>
+              `,
+            )}
           </tr>
         </thead>
         <tbody>
@@ -57,32 +59,39 @@ export class TestTable<S extends string = string> extends LitElement {
   protected renderTemplates() {
     // Render templates in the light DOM for easier styling access
     render(
-        this.templates.map(
-            (template, rowIndex) => this.states.map((state, colIndex) => {
-              const renderResult = template.render(state);
-              const isEmptyTemplate = renderResult === null;
-              return isEmptyTemplate ? html`` : html`
-                <div slot="${`${rowIndex}-${colIndex}`}">
-                  ${renderResult}
-                </div>`;
-            })),
-        this);
+      this.templates.map((template, rowIndex) =>
+        this.states.map((state, colIndex) => {
+          const renderResult = template.render(state);
+          const isEmptyTemplate = renderResult === null;
+          return isEmptyTemplate
+            ? html``
+            : html` <div slot="${`${rowIndex}-${colIndex}`}">
+                ${renderResult}
+              </div>`;
+        }),
+      ),
+      this,
+    );
 
     return html`
-      ${this.templates.map((template, rowIndex) => html`
-        <tr>
-          <th class="md3-test-table__header">
-            ${this.getVariantName(template.display)}
-          </th>
-          ${this.states.map((state, colIndex) => html`
-            <td class="md3-test-table__cell">
-              <slot name="${`${rowIndex}-${colIndex}`}">
-                <div class="md3-test-table__text">N/A</div>
-              </slot>
-            </td>
-          `)}
-        </tr>
-      `)}
+      ${this.templates.map(
+        (template, rowIndex) => html`
+          <tr>
+            <th class="md3-test-table__header">
+              ${this.getVariantName(template.display)}
+            </th>
+            ${this.states.map(
+              (state, colIndex) => html`
+                <td class="md3-test-table__cell">
+                  <slot name="${`${rowIndex}-${colIndex}`}">
+                    <div class="md3-test-table__text">N/A</div>
+                  </slot>
+                </td>
+              `,
+            )}
+          </tr>
+        `,
+      )}
     `;
   }
 
diff --git a/testing/table/internal/test-table_test.ts b/testing/table/internal/test-table_test.ts
index 994c3b115..18790b89f 100644
--- a/testing/table/internal/test-table_test.ts
+++ b/testing/table/internal/test-table_test.ts
@@ -20,8 +20,7 @@ declare global {
 }
 
 @customElement('test-test-table')
-class TestTestTable<S extends string = string> extends TestTable<S> {
-}
+class TestTestTable<S extends string = string> extends TestTable<S> {}
 
 describe('<test-test-table>', () => {
   const env = new Environment();
diff --git a/testing/templates.ts b/testing/templates.ts
index 7b32d2f38..7caa4a6fe 100644
--- a/testing/templates.ts
+++ b/testing/templates.ts
@@ -68,8 +68,10 @@ export enum State {
  * @template H Optional element harness type.
  * @template V Variant name types.
  */
-export class TemplateBuilder<H extends Harness = never,
-                                       V extends string = never> {
+export class TemplateBuilder<
+  H extends Harness = never,
+  V extends string = never,
+> {
   /**
    * A map of variant names and their template factories.
    */
@@ -77,7 +79,7 @@ export class TemplateBuilder<H extends Harness = never,
   /**
    * The current harness constructor to use when rendering.
    */
-  private harnessCtor?: new(element: HarnessElement<H>) => H;
+  private harnessCtor?: new (element: HarnessElement<H>) => H;
   /**
    * The current state callback to invoke after rendering.
    */
@@ -97,7 +99,7 @@ export class TemplateBuilder<H extends Harness = never,
     }
 
     return Array.from(this.variants.values()).flatMap(({display, factory}) => {
-      return testCaseProps.map(props => ({display, render: factory(props)}));
+      return testCaseProps.map((props) => ({display, render: factory(props)}));
     });
   }
 
@@ -128,7 +130,8 @@ export class TemplateBuilder<H extends Harness = never,
    * @return The template builder, now using the provided harness type.
    */
   withHarness<NewHarness extends Harness>(
-      harnessCtor: new(element: HarnessElement<NewHarness>) => NewHarness) {
+    harnessCtor: new (element: HarnessElement<NewHarness>) => NewHarness,
+  ) {
     const typedThis = this as unknown as TemplateBuilder<NewHarness, V>;
     typedThis.harnessCtor = harnessCtor;
     return typedThis;
@@ -178,15 +181,18 @@ export class TemplateBuilder<H extends Harness = never,
    * @return The template builder, now using the provided variants.
    */
   withVariants(
-      variants: Record<string, TemplateRender<H>|TemplateVariantOptions<H>>) {
+    variants: Record<string, TemplateRender<H> | TemplateVariantOptions<H>>,
+  ) {
     // TODO: clean this up by only allowing TemplateVariantOptions and force
     // users to specify the display name.
     for (const variant of Object.keys(variants)) {
       this.withVariant(variant, variants[variant]);
     }
 
-    return this as unknown as
-        TemplateBuilder<H, V|Extract<keyof typeof variants, string>>;
+    return this as unknown as TemplateBuilder<
+      H,
+      V | Extract<keyof typeof variants, string>
+    >;
   }
 
   /**
@@ -199,26 +205,30 @@ export class TemplateBuilder<H extends Harness = never,
    * @return The template builder, now using the provided variant.
    */
   withVariant<NewVariant extends string>(
-      variant: NewVariant,
-      renderOrOptions: TemplateRender<H>|TemplateVariantOptions<H>) {
+    variant: NewVariant,
+    renderOrOptions: TemplateRender<H> | TemplateVariantOptions<H>,
+  ) {
     // TODO: clean this up by only allowing TemplateVariantOptions and force
     // users to specify the display name.
-    const typedThis = this as unknown as TemplateBuilder<H, V|NewVariant>;
-    const {display, render} = typeof renderOrOptions === 'function' ?
-        {display: variant, render: renderOrOptions} :
-        renderOrOptions;
+    const typedThis = this as unknown as TemplateBuilder<H, V | NewVariant>;
+    const {display, render} =
+      typeof renderOrOptions === 'function'
+        ? {display: variant, render: renderOrOptions}
+        : renderOrOptions;
 
     typedThis.variants.set(variant, {
       display: display ?? variant,
-      factory: props => {
-        return state => {
-          const directive = ref(async element => {
+      factory: (props) => {
+        return (state) => {
+          const directive = ref(async (element) => {
             if (!element) {
               return;
             }
 
             const harness = await this.createHarnessAndApplyState(
-                element as HarnessElement<H>, state);
+              element as HarnessElement<H>,
+              state,
+            );
 
             // Allow the component to apply additional state or perform custom
             // state logic.
@@ -227,7 +237,7 @@ export class TemplateBuilder<H extends Harness = never,
 
           return render(directive, props || {}, state);
         };
-      }
+      },
     });
 
     return typedThis;
@@ -244,14 +254,16 @@ export class TemplateBuilder<H extends Harness = never,
    *     being used.
    */
   private async createHarnessAndApplyState(
-      element: HarnessElement<H>, state: string): Promise<H|never> {
+    element: HarnessElement<H>,
+    state: string,
+  ): Promise<H | never> {
     if (!this.harnessCtor) {
       return undefined as never;
     }
 
-    const harness = isElementWithHarness(element) ?
-        element.harness as H :
-        new this.harnessCtor(element);
+    const harness = isElementWithHarness(element)
+      ? (element.harness as H)
+      : new this.harnessCtor(element);
     // Common shared component state harness actions
     await harness.reset();
     switch (state) {
@@ -280,7 +292,7 @@ export class TemplateBuilder<H extends Harness = never,
  */
 export interface TemplateVariant<H extends Harness> {
   /** The variant's display name. */
-  display: string|StaticValue;
+  display: string | StaticValue;
   /**
    * A factory function that takes an object of element properties and returns
    * another a test table template that renders the variant's element for a
@@ -298,7 +310,7 @@ export interface TemplateVariantOptions<H extends Harness> {
   /** A function to render this variant. */
   render: TemplateRender<H>;
   /** Custom variant display name. Defaults to the name of the variant. */
-  display?: string|ReturnType<typeof literal>;
+  display?: string | ReturnType<typeof literal>;
 }
 
 // TODO: clean this devx up a bit by swapping props/state args
@@ -318,9 +330,11 @@ export interface TemplateVariantOptions<H extends Harness> {
  * @param state The current state to render the element in.
  * @return A `TemplateResult` rendering the element.
  */
-export type TemplateRender<H extends Harness> =
-    (directive: DirectiveResult, props: TemplateProps<H>, state: string) =>
-        TemplateResult|null;
+export type TemplateRender<H extends Harness> = (
+  directive: DirectiveResult,
+  props: TemplateProps<H>,
+  state: string,
+) => TemplateResult | null;
 
 /**
  * A callback that is invoked after the template's element has rendered. It
@@ -333,8 +347,10 @@ export type TemplateRender<H extends Harness> =
  * @param state The current test table state.
  * @param harness The rendered element's harness.
  */
-export type TemplateStateCallback<H extends Harness> =
-    (state: string, harness: H) => void;
+export type TemplateStateCallback<H extends Harness> = (
+  state: string,
+  harness: H,
+) => void;
 
 /**
  * Element properties for a harness constructor. Returns a partial object with
@@ -343,9 +359,10 @@ export type TemplateStateCallback<H extends Harness> =
  *
  * @template H The harness type.
  */
-export type TemplateProps<H extends Harness> = Partial<Pick<
-    HarnessElement<H>, Exclude<keyof HarnessElement<H>, keyof HTMLElement>>>&
-    SharedTemplateProps;
+export type TemplateProps<H extends Harness> = Partial<
+  Pick<HarnessElement<H>, Exclude<keyof HarnessElement<H>, keyof HTMLElement>>
+> &
+  SharedTemplateProps;
 
 /**
  * Shared element properties for all harnesses.
diff --git a/testing/tokens.ts b/testing/tokens.ts
index 1d5a8f163..c488bee18 100644
--- a/testing/tokens.ts
+++ b/testing/tokens.ts
@@ -103,8 +103,9 @@ export function getUnusedTokens(styles: CSSResult[]) {
   return unusedTokens;
 }
 
-function getDefinedTokensFromRule(rule: CSSRule|CSSStyleSheet|
-                                  CSSStyleRule): Set<string> {
+function getDefinedTokensFromRule(
+  rule: CSSRule | CSSStyleSheet | CSSStyleRule,
+): Set<string> {
   let defined = new Set<string>();
   if ('cssRules' in rule) {
     // Rule is either a CSSStyleSheet, CSSKeyframesRule, or one of the
@@ -125,8 +126,9 @@ function getDefinedTokensFromRule(rule: CSSRule|CSSStyleSheet|
   return defined;
 }
 
-function getUsedTokensFromRule(rule: CSSRule|CSSStyleSheet|
-                               CSSStyleRule): Set<string> {
+function getUsedTokensFromRule(
+  rule: CSSRule | CSSStyleSheet | CSSStyleRule,
+): Set<string> {
   let used = new Set<string>();
   if ('cssRules' in rule) {
     // Rule is either a CSSStyleSheet, CSSKeyframesRule, or one of the
diff --git a/testing/tokens_test.ts b/testing/tokens_test.ts
index 30d896915..85e9080cb 100644
--- a/testing/tokens_test.ts
+++ b/testing/tokens_test.ts
@@ -41,9 +41,9 @@ describe('testing', () => {
         `;
 
         const unusedTokens = getUnusedTokens([styles]);
-        expect(unusedTokens).withContext('unused tokens').toEqual([
-          '--_unused'
-        ]);
+        expect(unusedTokens)
+          .withContext('unused tokens')
+          .toEqual(['--_unused']);
       });
     });
 
@@ -76,9 +76,9 @@ describe('testing', () => {
         `;
 
         const undefinedTokens = getUndefinedTokens([styles]);
-        expect(undefinedTokens).withContext('undefined tokens').toEqual([
-          '--_undefined'
-        ]);
+        expect(undefinedTokens)
+          .withContext('undefined tokens')
+          .toEqual(['--_undefined']);
       });
     });
   });
diff --git a/testing/transform-pseudo-classes.ts b/testing/transform-pseudo-classes.ts
index 26f877e5e..0d24882d7 100644
--- a/testing/transform-pseudo-classes.ts
+++ b/testing/transform-pseudo-classes.ts
@@ -62,8 +62,9 @@ const transformedStyleSheets = new WeakSet<CSSStyleSheet>();
  * @param pseudoClasses An optional array of pseudo class names to transform.
  */
 export function transformPseudoClasses(
-    stylesheets: Iterable<CSSStyleSheet>,
-    pseudoClasses = defaultTransformPseudoClasses) {
+  stylesheets: Iterable<CSSStyleSheet>,
+  pseudoClasses = defaultTransformPseudoClasses,
+) {
   for (const stylesheet of stylesheets) {
     if (transformedStyleSheets.has(stylesheet)) {
       continue;
@@ -91,8 +92,10 @@ export function transformPseudoClasses(
  * CSSGroupingRule unlike Chrome and Safari
  */
 function isCSSGroupingRule(rule: CSSRule): rule is CSSGroupingRule {
-  return !!(rule as CSSGroupingRule)?.cssRules &&
-      !(rule as CSSStyleRule).selectorText;
+  return (
+    !!(rule as CSSGroupingRule)?.cssRules &&
+    !(rule as CSSStyleRule).selectorText
+  );
 }
 
 /**
@@ -105,8 +108,11 @@ function isCSSGroupingRule(rule: CSSRule): rule is CSSGroupingRule {
  * @param pseudoClasses An array of pseudo classes to search for and replace.
  */
 function visitRule(
-    rule: CSSRule, stylesheet: CSSStyleSheet|CSSGroupingRule, index: number,
-    pseudoClasses: string[]) {
+  rule: CSSRule,
+  stylesheet: CSSStyleSheet | CSSGroupingRule,
+  index: number,
+  pseudoClasses: string[],
+) {
   if (isCSSGroupingRule(rule)) {
     for (let i = rule.cssRules.length - 1; i >= 0; i--) {
       visitRule(rule.cssRules[i], rule, i, pseudoClasses);
@@ -123,7 +129,7 @@ function visitRule(
     // match :foo, ensuring that it does not have a paren at the end
     // (no pseudo class functions like :foo())
     const regex = /(:(?![\w-]+\()[\w-]+)/g;
-    const matches = Array.from(selectorText.matchAll(regex)).filter(match => {
+    const matches = Array.from(selectorText.matchAll(regex)).filter((match) => {
       // don't match pseudo elements like ::foo
       if (match.index != null && selectorText[match.index - 1] === ':') {
         return false;
@@ -138,9 +144,10 @@ function visitRule(
     matches.reverse();
     selectorText = rearrangePseudoElements(selectorText);
     for (const match of matches) {
-      selectorText = selectorText.substring(0, match.index!) +
-          `.${getTransformedPseudoClass(match[1])}` +
-          selectorText.substring(match.index! + match[1].length);
+      selectorText =
+        selectorText.substring(0, match.index!) +
+        `.${getTransformedPseudoClass(match[1])}` +
+        selectorText.substring(match.index! + match[1].length);
     }
 
     const css = `${selectorText} {${rule.style.cssText}}`;
@@ -166,19 +173,24 @@ function visitRule(
  * @return The re-arranged selector text.
  */
 function rearrangePseudoElements(selectorText: string) {
-  const pseudoElementsBeforeClasses =
-      Array.from(selectorText.matchAll(/(?:::[\w-]+)+(?=:[\w-])/g));
+  const pseudoElementsBeforeClasses = Array.from(
+    selectorText.matchAll(/(?:::[\w-]+)+(?=:[\w-])/g),
+  );
   pseudoElementsBeforeClasses.reverse();
   for (const match of pseudoElementsBeforeClasses) {
     const pseudoElement = match[0];
     const pseudoElementIndex = match.index!;
-    const endOfCompoundSelector = selectorText.substring(pseudoElementIndex)
-                                      .match(/(\s(?!([^\s].)*\))|,|$)/)!;
+    const endOfCompoundSelector = selectorText
+      .substring(pseudoElementIndex)
+      .match(/(\s(?!([^\s].)*\))|,|$)/)!;
     const index = endOfCompoundSelector.index! + pseudoElementIndex;
-    selectorText = selectorText.substring(0, index) + pseudoElement +
-        selectorText.substring(index);
-    selectorText = selectorText.substring(0, pseudoElementIndex) +
-        selectorText.substring(pseudoElementIndex + pseudoElement.length);
+    selectorText =
+      selectorText.substring(0, index) +
+      pseudoElement +
+      selectorText.substring(index);
+    selectorText =
+      selectorText.substring(0, pseudoElementIndex) +
+      selectorText.substring(pseudoElementIndex + pseudoElement.length);
   }
 
   return selectorText;
diff --git a/textfield/demo/demo.ts b/textfield/demo/demo.ts
index 0ee83bf5f..eb737c626 100644
--- a/textfield/demo/demo.ts
+++ b/textfield/demo/demo.ts
@@ -4,24 +4,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Textfield', [
-      new Knob('label', {ui: textInput(), defaultValue: 'Label'}),
-      new Knob('placeholder', {ui: textInput(), defaultValue: ''}),
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-      new Knob('prefixText', {ui: textInput(), defaultValue: ''}),
-      new Knob('suffixText', {ui: textInput(), defaultValue: ''}),
-      new Knob(
-          'supportingText', {ui: textInput(), defaultValue: 'Supporting text'}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Textfield',
+  [
+    new Knob('label', {ui: textInput(), defaultValue: 'Label'}),
+    new Knob('placeholder', {ui: textInput(), defaultValue: ''}),
+    new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+    new Knob('prefixText', {ui: textInput(), defaultValue: ''}),
+    new Knob('suffixText', {ui: textInput(), defaultValue: ''}),
+    new Knob('supportingText', {
+      ui: textInput(),
+      defaultValue: 'Supporting text',
+    }),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 
diff --git a/textfield/demo/stories.ts b/textfield/demo/stories.ts
index 5414bbe3e..805d1144c 100644
--- a/textfield/demo/stories.ts
+++ b/textfield/demo/stories.ts
@@ -39,11 +39,11 @@ const styles = css`
     width: 200px;
   }
 
-  [type=textarea] {
+  [type='textarea'] {
     min-height: 56px;
   }
 
-  [type=textarea][supporting-text] {
+  [type='textarea'][supporting-text] {
     min-height: 76px;
   }
 `;
@@ -60,8 +60,8 @@ const textfields: MaterialStoryInit<StoryKnobs> = {
           placeholder=${knobs.placeholder || nothing}
           prefix-text=${knobs.prefixText || nothing}
           suffix-text=${knobs.suffixText || nothing}
-          supporting-text=${knobs.supportingText || nothing}
-        ></md-filled-text-field>
+          supporting-text=${knobs.supportingText ||
+          nothing}></md-filled-text-field>
 
         <md-outlined-text-field
           ?disabled=${knobs.disabled}
@@ -69,11 +69,11 @@ const textfields: MaterialStoryInit<StoryKnobs> = {
           placeholder=${knobs.placeholder || nothing}
           prefix-text=${knobs.prefixText || nothing}
           suffix-text=${knobs.suffixText || nothing}
-          supporting-text=${knobs.supportingText || nothing}
-        ></md-outlined-text-field>
+          supporting-text=${knobs.supportingText ||
+          nothing}></md-outlined-text-field>
       </div>
     `;
-  }
+  },
 };
 
 const textareas: MaterialStoryInit<StoryKnobs> = {
@@ -87,19 +87,19 @@ const textareas: MaterialStoryInit<StoryKnobs> = {
           ?disabled=${knobs.disabled}
           label=${knobs.label || nothing}
           placeholder=${knobs.placeholder || nothing}
-          supporting-text=${knobs.supportingText || nothing}
-        ></md-filled-text-field>
+          supporting-text=${knobs.supportingText ||
+          nothing}></md-filled-text-field>
 
         <md-outlined-text-field
           type="textarea"
           ?disabled=${knobs.disabled}
           label=${knobs.label || nothing}
           placeholder=${knobs.placeholder || nothing}
-          supporting-text=${knobs.supportingText || nothing}
-        ></md-outlined-text-field>
+          supporting-text=${knobs.supportingText ||
+          nothing}></md-outlined-text-field>
       </div>
     `;
-  }
+  },
 };
 
 const icons: MaterialStoryInit<StoryKnobs> = {
@@ -115,11 +115,12 @@ const icons: MaterialStoryInit<StoryKnobs> = {
           value="Value"
           prefix-text=${knobs.prefixText || nothing}
           suffix-text=${knobs.suffixText || nothing}
-          supporting-text=${knobs.supportingText || nothing}
-        >
+          supporting-text=${knobs.supportingText || nothing}>
           <md-icon slot="leading-icon">search</md-icon>
-          <md-icon-button aria-label="Clear input" slot="trailing-icon"
-              @click=${clearInput}>
+          <md-icon-button
+            aria-label="Clear input"
+            slot="trailing-icon"
+            @click=${clearInput}>
             <md-icon>clear</md-icon>
           </md-icon-button>
         </md-filled-text-field>
@@ -131,17 +132,18 @@ const icons: MaterialStoryInit<StoryKnobs> = {
           value="Value"
           prefix-text=${knobs.prefixText || nothing}
           suffix-text=${knobs.suffixText || nothing}
-          supporting-text=${knobs.supportingText || nothing}
-        >
+          supporting-text=${knobs.supportingText || nothing}>
           <md-icon slot="leading-icon">search</md-icon>
-          <md-icon-button aria-label="Clear input" slot="trailing-icon"
-              @click=${clearInput}>
+          <md-icon-button
+            aria-label="Clear input"
+            slot="trailing-icon"
+            @click=${clearInput}>
             <md-icon>clear</md-icon>
           </md-icon-button>
         </md-outlined-text-field>
       </div>
     `;
-  }
+  },
 };
 
 const validation: MaterialStoryInit<StoryKnobs> = {
@@ -156,8 +158,7 @@ const validation: MaterialStoryInit<StoryKnobs> = {
           value="Value"
           required
           supporting-text="* this field is required"
-          @change=${reportValidity}
-        ></md-outlined-text-field>
+          @change=${reportValidity}></md-outlined-text-field>
 
         <md-outlined-text-field
           ?disabled=${knobs.disabled}
@@ -166,8 +167,7 @@ const validation: MaterialStoryInit<StoryKnobs> = {
           min="1"
           max="10"
           supporting-text="Enter a number between 1 and 10"
-          @change=${reportValidity}
-        ></md-outlined-text-field>
+          @change=${reportValidity}></md-outlined-text-field>
 
         <md-outlined-text-field
           ?disabled=${knobs.disabled}
@@ -175,8 +175,7 @@ const validation: MaterialStoryInit<StoryKnobs> = {
           minlength="3"
           maxlength="10"
           supporting-text="3 to 10 characters"
-          @change=${reportValidity}
-        ></md-outlined-text-field>
+          @change=${reportValidity}></md-outlined-text-field>
 
         <md-outlined-text-field
           style="text-align: end"
@@ -186,11 +185,10 @@ const validation: MaterialStoryInit<StoryKnobs> = {
           placeholder="username"
           suffix-text="@gmail.com"
           supporting-text="Characters only"
-          @change=${reportValidity}
-        ></md-outlined-text-field>
+          @change=${reportValidity}></md-outlined-text-field>
       </div>
     `;
-  }
+  },
 };
 
 const forms: MaterialStoryInit<StoryKnobs> = {
@@ -212,14 +210,12 @@ const forms: MaterialStoryInit<StoryKnobs> = {
             ?disabled=${knobs.disabled}
             label="First name"
             name="first-name"
-            autocomplete="given-name"
-          ></md-filled-text-field>
+            autocomplete="given-name"></md-filled-text-field>
           <md-filled-text-field
             ?disabled=${knobs.disabled}
             label="Last name"
             name="last-name"
-            autocomplete="family-name"
-          ></md-filled-text-field>
+            autocomplete="family-name"></md-filled-text-field>
         </div>
         <div class="row buttons">
           <md-text-button type="reset">Reset</md-text-button>
@@ -227,7 +223,7 @@ const forms: MaterialStoryInit<StoryKnobs> = {
         </div>
       </form>
     `;
-  }
+  },
 };
 
 function reportValidity(event: Event) {
diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts
index 4b1a3a84f..c0d5a6d77 100644
--- a/textfield/filled-text-field.ts
+++ b/textfield/filled-text-field.ts
@@ -29,8 +29,11 @@ declare global {
  */
 @customElement('md-filled-text-field')
 export class MdFilledTextField extends FilledTextField {
-  static override styles =
-      [sharedStyles, filledStyles, filledForcedColorsStyles];
+  static override styles = [
+    sharedStyles,
+    filledStyles,
+    filledForcedColorsStyles,
+  ];
 
   protected override readonly fieldTag = literal`md-filled-field`;
 }
diff --git a/textfield/harness.ts b/textfield/harness.ts
index 2317d6085..f0f9099dc 100644
--- a/textfield/harness.ts
+++ b/textfield/harness.ts
@@ -53,7 +53,10 @@ export class TextFieldHarness extends Harness<TextField> {
   async deleteValue(beginIndex?: number, endIndex?: number) {
     this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');
     this.simulateDeletion(
-        await this.getInteractiveElement(), beginIndex, endIndex);
+      await this.getInteractiveElement(),
+      beginIndex,
+      endIndex,
+    );
   }
 
   override async reset() {
@@ -78,8 +81,10 @@ export class TextFieldHarness extends Harness<TextField> {
   }
 
   protected simulateInput(
-      element: HTMLInputElement|HTMLTextAreaElement, charactersToAppend: string,
-      init?: InputEventInit) {
+    element: HTMLInputElement | HTMLTextAreaElement,
+    charactersToAppend: string,
+    init?: InputEventInit,
+  ) {
     element.value += charactersToAppend;
     if (!init) {
       init = {
@@ -95,11 +100,15 @@ export class TextFieldHarness extends Harness<TextField> {
   }
 
   protected simulateDeletion(
-      element: HTMLInputElement|HTMLTextAreaElement, beginIndex?: number,
-      endIndex?: number, init?: InputEventInit) {
+    element: HTMLInputElement | HTMLTextAreaElement,
+    beginIndex?: number,
+    endIndex?: number,
+    init?: InputEventInit,
+  ) {
     const deletedCharacters = element.value.slice(beginIndex, endIndex);
-    element.value = element.value.substring(0, beginIndex ?? 0) +
-        element.value.substring(endIndex ?? element.value.length);
+    element.value =
+      element.value.substring(0, beginIndex ?? 0) +
+      element.value.substring(endIndex ?? element.value.length);
     if (!init) {
       init = {
         inputType: 'deleteContentBackward',
@@ -113,8 +122,9 @@ export class TextFieldHarness extends Harness<TextField> {
     element.dispatchEvent(new InputEvent('input', init));
   }
 
-  protected simulateChangeIfNeeded(element: HTMLInputElement|
-                                   HTMLTextAreaElement) {
+  protected simulateChangeIfNeeded(
+    element: HTMLInputElement | HTMLTextAreaElement,
+  ) {
     if (this.valueBeforeChange === element.value) {
       return;
     }
@@ -125,7 +135,8 @@ export class TextFieldHarness extends Harness<TextField> {
 
   protected override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.renderRoot.querySelector('.input') as HTMLInputElement |
-        HTMLTextAreaElement;
+    return this.element.renderRoot.querySelector('.input') as
+      | HTMLInputElement
+      | HTMLTextAreaElement;
   }
 }
diff --git a/textfield/harness_test.ts b/textfield/harness_test.ts
index 8b247629b..438f0c176 100644
--- a/textfield/harness_test.ts
+++ b/textfield/harness_test.ts
@@ -18,8 +18,9 @@ describe('TextFieldHarness', () => {
   const env = new Environment();
 
   async function setupTest() {
-    const root =
-        env.render(html`<md-filled-text-field></md-filled-text-field>`);
+    const root = env.render(
+      html`<md-filled-text-field></md-filled-text-field>`,
+    );
     const instance = root.querySelector('md-filled-text-field');
     if (!instance) {
       throw new Error('Failed to query md-filled-text-field.');
@@ -72,9 +73,11 @@ describe('TextFieldHarness', () => {
       // Assertion.
       expect(keydownHandler).toHaveBeenCalledTimes(1);
       expect(keydownHandler).toHaveBeenCalledWith(jasmine.any(KeyboardEvent));
-      expect(keydownHandler).toHaveBeenCalledWith(jasmine.objectContaining({
-        key: 'Backspace'
-      }));
+      expect(keydownHandler).toHaveBeenCalledWith(
+        jasmine.objectContaining({
+          key: 'Backspace',
+        }),
+      );
     });
 
     it('should delete the entire value by default', async () => {
@@ -121,19 +124,18 @@ describe('TextFieldHarness', () => {
   });
 
   describe('simulating change events', () => {
-    it('should dispatch change if value changes after focus and blur',
-       async () => {
-         // Setup.
-         const harness = await setupTest();
-         const changeHandler = jasmine.createSpy('changeHandler');
-         harness.element.addEventListener('change', changeHandler);
-         // Test case.
-         await harness.focusWithKeyboard();
-         await harness.inputValue('value');
-         await harness.blur();
-         // Assertion.
-         expect(changeHandler).toHaveBeenCalledTimes(1);
-       });
+    it('should dispatch change if value changes after focus and blur', async () => {
+      // Setup.
+      const harness = await setupTest();
+      const changeHandler = jasmine.createSpy('changeHandler');
+      harness.element.addEventListener('change', changeHandler);
+      // Test case.
+      await harness.focusWithKeyboard();
+      await harness.inputValue('value');
+      await harness.blur();
+      // Assertion.
+      expect(changeHandler).toHaveBeenCalledTimes(1);
+    });
 
     it('should not dispatch change if value does not change', async () => {
       // Setup.
diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
index b7a3624e3..3127b30be 100644
--- a/textfield/internal/text-field.ts
+++ b/textfield/internal/text-field.ts
@@ -21,19 +21,39 @@ import {stringConverter} from '../../internal/controller/string-converter.js';
  * Input types that are compatible with the text field.
  */
 export type TextFieldType =
-    'email'|'number'|'password'|'search'|'tel'|'text'|'url'|'textarea';
+  | 'email'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'url'
+  | 'textarea';
 
 /**
  * Input types that are not fully supported for the text field.
  */
 export type UnsupportedTextFieldType =
-    'color'|'date'|'datetime-local'|'file'|'month'|'time'|'week';
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'file'
+  | 'month'
+  | 'time'
+  | 'week';
 
 /**
  * Input types that are incompatible with the text field.
  */
 export type InvalidTextFieldType =
-    'button'|'checkbox'|'hidden'|'image'|'radio'|'range'|'reset'|'submit';
+  | 'button'
+  | 'checkbox'
+  | 'hidden'
+  | 'image'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'submit';
 
 /**
  * A text field component.
@@ -44,8 +64,10 @@ export abstract class TextField extends LitElement {
   }
 
   /** @nocollapse */
-  static override shadowRootOptions:
-      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};
+  static override shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
 
   /** @nocollapse  */
   static readonly formAssociated = true;
@@ -195,7 +217,7 @@ export abstract class TextField extends LitElement {
   get selectionDirection() {
     return this.getInputOrTextarea().selectionDirection;
   }
-  set selectionDirection(value: 'forward'|'backward'|'none'|null) {
+  set selectionDirection(value: 'forward' | 'backward' | 'none' | null) {
     this.getInputOrTextarea().selectionDirection = value;
   }
 
@@ -205,7 +227,7 @@ export abstract class TextField extends LitElement {
   get selectionEnd() {
     return this.getInputOrTextarea().selectionEnd;
   }
-  set selectionEnd(value: number|null) {
+  set selectionEnd(value: number | null) {
     this.getInputOrTextarea().selectionEnd = value;
   }
 
@@ -215,7 +237,7 @@ export abstract class TextField extends LitElement {
   get selectionStart() {
     return this.getInputOrTextarea().selectionStart;
   }
-  set selectionStart(value: number|null) {
+  set selectionStart(value: number | null) {
     this.getInputOrTextarea().selectionStart = value;
   }
 
@@ -247,7 +269,7 @@ export abstract class TextField extends LitElement {
    * for more details on each input type.
    */
   @property({reflect: true})
-  type: TextFieldType|UnsupportedTextFieldType = 'text';
+  type: TextFieldType | UnsupportedTextFieldType = 'text';
 
   /**
    * Describes what, if any, type of autocomplete functionality the input
@@ -310,7 +332,7 @@ export abstract class TextField extends LitElement {
 
     return input.valueAsDate;
   }
-  set valueAsDate(value: Date|null) {
+  set valueAsDate(value: Date | null) {
     const input = this.getInput();
     if (!input) {
       return;
@@ -354,8 +376,11 @@ export abstract class TextField extends LitElement {
   }
 
   @query('.input')
-  private readonly inputOrTextarea?: HTMLInputElement|HTMLTextAreaElement|null;
-  @query('.field') private readonly field?: Field|null;
+  private readonly inputOrTextarea?:
+    | HTMLInputElement
+    | HTMLTextAreaElement
+    | null;
+  @query('.field') private readonly field?: Field | null;
   @queryAssignedElements({slot: 'leading-icon'})
   private readonly leadingIcons!: Element[];
   @queryAssignedElements({slot: 'trailing-icon'})
@@ -363,8 +388,8 @@ export abstract class TextField extends LitElement {
   // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
   // Replace with this.internals.validity.customError when resolved.
   private hasCustomValidityError = false;
-  private readonly internals =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  // Cast needed for closure
+  private readonly internals = (this as HTMLElement).attachInternals();
 
   /**
    * Checks the text field's native validation and returns whether or not the
@@ -400,10 +425,14 @@ export abstract class TextField extends LitElement {
    * @return true if the text field is valid, or false if not.
    */
   reportValidity() {
-    let invalidEvent: Event|undefined;
-    this.addEventListener('invalid', event => {
-      invalidEvent = event;
-    }, {once: true});
+    let invalidEvent: Event | undefined;
+    this.addEventListener(
+      'invalid',
+      (event) => {
+        invalidEvent = event;
+      },
+      {once: true},
+    );
 
     const valid = this.checkValidity();
     if (invalidEvent?.defaultPrevented) {
@@ -444,7 +473,10 @@ export abstract class TextField extends LitElement {
   setCustomValidity(error: string) {
     this.hasCustomValidityError = !!error;
     this.internals.setValidity(
-        {customError: !!error}, error, this.getInputOrTextarea());
+      {customError: !!error},
+      error,
+      this.getInputOrTextarea(),
+    );
   }
 
   /**
@@ -454,13 +486,17 @@ export abstract class TextField extends LitElement {
    */
   setRangeText(replacement: string): void;
   setRangeText(
-      replacement: string, start: number, end: number,
-      selectionMode?: SelectionMode): void;
+    replacement: string,
+    start: number,
+    end: number,
+    selectionMode?: SelectionMode,
+  ): void;
   setRangeText(...args: unknown[]) {
     // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
     // Use spread syntax and type casting to ensure correct usage.
     this.getInputOrTextarea().setRangeText(
-        ...args as Parameters<HTMLInputElement['setRangeText']>);
+      ...(args as Parameters<HTMLInputElement['setRangeText']>),
+    );
     this.value = this.getInputOrTextarea().value;
   }
 
@@ -474,8 +510,10 @@ export abstract class TextField extends LitElement {
    * @param direction The direction in which the selection is performed.
    */
   setSelectionRange(
-      start: number|null, end: number|null,
-      direction?: 'forward'|'backward'|'none') {
+    start: number | null,
+    end: number | null,
+    direction?: 'forward' | 'backward' | 'none',
+  ) {
     this.getInputOrTextarea().setSelectionRange(start, end, direction);
   }
 
@@ -526,7 +564,10 @@ export abstract class TextField extends LitElement {
   }
 
   override attributeChangedCallback(
-      attribute: string, newValue: string|null, oldValue: string|null) {
+    attribute: string,
+    newValue: string | null,
+    oldValue: string | null,
+  ) {
     if (attribute === 'value' && this.dirty) {
       // After user input, changing the value attribute no longer updates the
       // text field's value (until reset). This matches native <input> behavior.
@@ -544,10 +585,10 @@ export abstract class TextField extends LitElement {
     };
 
     return html`
-       <span class="text-field ${classMap(classes)}">
-         ${this.renderField()}
-       </span>
-     `;
+      <span class="text-field ${classMap(classes)}">
+        ${this.renderField()}
+      </span>
+    `;
   }
 
   protected override updated(changedProperties: PropertyValues) {
@@ -595,24 +636,24 @@ export abstract class TextField extends LitElement {
 
   private renderLeadingIcon() {
     return html`
-       <span class="icon leading" slot="start">
-         <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
-       </span>
-     `;
+      <span class="icon leading" slot="start">
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
   }
 
   private renderTrailingIcon() {
     return html`
-       <span class="icon trailing" slot="end">
-         <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
-       </span>
-     `;
+      <span class="icon trailing" slot="end">
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
   }
 
   private renderInputOrTextarea() {
     const style = {direction: this.textDirection};
     const ariaLabel =
-        (this as ARIAMixinStrict).ariaLabel || this.label || nothing;
+      (this as ARIAMixinStrict).ariaLabel || this.label || nothing;
     // lit-anaylzer `autocomplete` types are too strict
     // tslint:disable-next-line:no-any
     const autocomplete = this.autocomplete as any;
@@ -639,8 +680,7 @@ export abstract class TextField extends LitElement {
           @focusin=${this.handleFocusin}
           @focusout=${this.handleFocusout}
           @input=${this.handleInput}
-          @select=${this.redispatchEvent}
-        ></textarea>
+          @select=${this.redispatchEvent}></textarea>
       `;
     }
 
@@ -679,8 +719,7 @@ export abstract class TextField extends LitElement {
           @focusin=${this.handleFocusin}
           @focusout=${this.handleFocusout}
           @input=${this.handleInput}
-          @select=${this.redispatchEvent}
-        >
+          @select=${this.redispatchEvent} />
         ${suffix}
       </div>
     `;
@@ -776,7 +815,10 @@ export abstract class TextField extends LitElement {
     }
 
     this.internals.setValidity(
-        input.validity, input.validationMessage, this.getInputOrTextarea());
+      input.validity,
+      input.validationMessage,
+      this.getInputOrTextarea(),
+    );
   }
 
   private handleIconChange() {
diff --git a/textfield/internal/text-field_test.ts b/textfield/internal/text-field_test.ts
index 36c4528bc..359e11630 100644
--- a/textfield/internal/text-field_test.ts
+++ b/textfield/internal/text-field_test.ts
@@ -30,8 +30,10 @@ class TestTextField extends TextField {
 
   async getHasError() {
     await this.updateComplete;
-    return this.renderRoot.querySelector('input')?.getAttribute(
-               'aria-invalid') === 'true';
+    return (
+      this.renderRoot.querySelector('input')?.getAttribute('aria-invalid') ===
+      'true'
+    );
   }
 
   async getErrorTextValue() {
@@ -44,7 +46,8 @@ describe('TextField', () => {
   const env = new Environment();
 
   async function setupTest(
-      template = html`<md-test-text-field></md-test-text-field>`) {
+    template = html`<md-test-text-field></md-test-text-field>`,
+  ) {
     // Variant type does not matter for shared tests
     const element = env.render(template).querySelector('md-test-text-field');
     if (!element) {
@@ -73,21 +76,18 @@ describe('TextField', () => {
       expect(input.matches(':focus')).withContext('is input:focus').toBeTrue();
     });
 
-    it('should NOT focus the input when elements inside text field are clicked',
-       async () => {
-         const {harness, input} = await setupTest();
-         // Add a trailing icon button to click on
-         render(html`<button slot="trailing-icon">X</button>`, harness.element);
-         const button = harness.element.querySelector('button');
+    it('should NOT focus the input when elements inside text field are clicked', async () => {
+      const {harness, input} = await setupTest();
+      // Add a trailing icon button to click on
+      render(html`<button slot="trailing-icon">X</button>`, harness.element);
+      const button = harness.element.querySelector('button');
 
-         expect(button).toBeDefined();
-         const buttonHarness = new Harness(button!);
-         await buttonHarness.clickWithMouse();
+      expect(button).toBeDefined();
+      const buttonHarness = new Harness(button!);
+      await buttonHarness.clickWithMouse();
 
-         expect(input.matches(':focus'))
-             .withContext('is input:focus')
-             .toBeFalse();
-       });
+      expect(input.matches(':focus')).withContext('is input:focus').toBeFalse();
+    });
 
     it('should not focus the input when disabled', async () => {
       const {harness, input} = await setupTest();
@@ -97,8 +97,8 @@ describe('TextField', () => {
       harness.element.focus();
 
       expect(input.matches(':focus'))
-          .withContext('not input:focus')
-          .toBeFalse();
+        .withContext('not input:focus')
+        .toBeFalse();
     });
 
     it('focus() should focus input', async () => {
@@ -116,8 +116,8 @@ describe('TextField', () => {
       harness.element.blur();
 
       expect(input.matches(':focus'))
-          .withContext('not input:focus')
-          .toBeFalse();
+        .withContext('not input:focus')
+        .toBeFalse();
     });
   });
 
@@ -205,23 +205,22 @@ describe('TextField', () => {
       expect(harness.element.value).toBe('Value');
     });
 
-    it('should render `value` instead of default value attribute when `value` changes',
-       async () => {
-         const {harness, input} = await setupTest();
+    it('should render `value` instead of default value attribute when `value` changes', async () => {
+      const {harness, input} = await setupTest();
 
-         harness.element.setAttribute('value', 'Default');
-         await env.waitForStability();
-         expect(input.value).toBe('Default');
+      harness.element.setAttribute('value', 'Default');
+      await env.waitForStability();
+      expect(input.value).toBe('Default');
 
-         harness.element.value = 'Value';
-         await env.waitForStability();
-         expect(input.value).toBe('Value');
+      harness.element.value = 'Value';
+      await env.waitForStability();
+      expect(input.value).toBe('Value');
 
-         harness.element.value = '';
-         await env.waitForStability();
-         expect(input.value).toBe('');
-         expect(harness.element.getAttribute('value')).toBe('Default');
-       });
+      harness.element.value = '';
+      await env.waitForStability();
+      expect(input.value).toBe('');
+      expect(harness.element.getAttribute('value')).toBe('Default');
+    });
   });
 
   describe('valueAsDate', () => {
@@ -261,8 +260,11 @@ describe('TextField', () => {
   describe('valueAsNumber', () => {
     it('should get input.valueAsNumber', async () => {
       const {testElement, input} = await setupTest();
-      const spy =
-          spyOnProperty(input, 'valueAsNumber', 'get').and.callThrough();
+      const spy = spyOnProperty(
+        input,
+        'valueAsNumber',
+        'get',
+      ).and.callThrough();
 
       expect(testElement.valueAsNumber).toEqual(NaN);
 
@@ -273,8 +275,11 @@ describe('TextField', () => {
       const {testElement, input} = await setupTest();
       testElement.type = 'number';
       await env.waitForStability();
-      const spy =
-          spyOnProperty(input, 'valueAsNumber', 'set').and.callThrough();
+      const spy = spyOnProperty(
+        input,
+        'valueAsNumber',
+        'set',
+      ).and.callThrough();
 
       testElement.valueAsNumber = 100;
 
@@ -342,8 +347,8 @@ describe('TextField', () => {
         await harness.deleteValue();
 
         expect(isValidDuringInput)
-            .withContext('validity.valid result during input event')
-            .toBeFalse();
+          .withContext('validity.valid result during input event')
+          .toBeFalse();
       });
 
       it('should return validity during change event', async () => {
@@ -354,16 +359,20 @@ describe('TextField', () => {
         await harness.blur();
 
         let isValidDuringChange = true;
-        testElement.addEventListener('change', () => {
-          isValidDuringChange = testElement.validity.valid;
-        }, {once: true});
+        testElement.addEventListener(
+          'change',
+          () => {
+            isValidDuringChange = testElement.validity.valid;
+          },
+          {once: true},
+        );
 
         await harness.deleteValue();
         await harness.blur();
 
         expect(isValidDuringChange)
-            .withContext('validity.valid result during change event')
-            .toBeFalse();
+          .withContext('validity.valid result during change event')
+          .toBeFalse();
       });
     });
 
@@ -375,8 +384,8 @@ describe('TextField', () => {
 
         expect(valid).withContext('valid').toBeTrue();
         expect(await testElement.getHasError())
-            .withContext('testElement.getHasError()')
-            .toBeFalse();
+          .withContext('testElement.getHasError()')
+          .toBeFalse();
       });
 
       it('should return false when invalid and set error to true', async () => {
@@ -387,8 +396,8 @@ describe('TextField', () => {
 
         expect(valid).withContext('valid').toBeFalse();
         expect(await testElement.getHasError())
-            .withContext('testElement.getHasError()')
-            .toBeTrue();
+          .withContext('testElement.getHasError()')
+          .toBeTrue();
       });
 
       it('should update error text to validationMessage', async () => {
@@ -402,23 +411,22 @@ describe('TextField', () => {
         expect(await testElement.getErrorTextValue()).toEqual(errorMessage);
       });
 
-      it('should not update error or error text if invalid event is canceled',
-         async () => {
-           const {testElement} = await setupTest();
-           testElement.addEventListener('invalid', e => {
-             e.preventDefault();
-           });
-           const errorMessage = 'Error message';
-           testElement.setCustomValidity(errorMessage);
+      it('should not update error or error text if invalid event is canceled', async () => {
+        const {testElement} = await setupTest();
+        testElement.addEventListener('invalid', (e) => {
+          e.preventDefault();
+        });
+        const errorMessage = 'Error message';
+        testElement.setCustomValidity(errorMessage);
 
-           const valid = testElement.reportValidity();
+        const valid = testElement.reportValidity();
 
-           expect(valid).withContext('valid').toBeFalse();
-           expect(await testElement.getHasError())
-               .withContext('testElement.getHasError()')
-               .toBeFalse();
-           expect(await testElement.getErrorTextValue()).toEqual('');
-         });
+        expect(valid).withContext('valid').toBeFalse();
+        expect(await testElement.getHasError())
+          .withContext('testElement.getHasError()')
+          .toBeFalse();
+        expect(await testElement.getErrorTextValue()).toEqual('');
+      });
 
       it('should be overridden by error and errorText', async () => {
         const {testElement} = await setupTest();
@@ -429,8 +437,8 @@ describe('TextField', () => {
         const valid = testElement.reportValidity();
         expect(valid).withContext('native validity should be valid').toBeTrue();
         expect(await testElement.getHasError())
-            .withContext('testElement.getHasError()')
-            .toBeTrue();
+          .withContext('testElement.getHasError()')
+          .toBeTrue();
         expect(await testElement.getErrorTextValue()).toEqual(errorMessage);
       });
     });
@@ -442,8 +450,8 @@ describe('TextField', () => {
         const errorMessage = 'Error message';
         testElement.setCustomValidity(errorMessage);
         expect(testElement.validationMessage)
-            .withContext('validationMessage')
-            .toEqual(errorMessage);
+          .withContext('validationMessage')
+          .toEqual(errorMessage);
       });
     });
 
@@ -455,11 +463,11 @@ describe('TextField', () => {
         await env.waitForStability();
 
         expect(input.getAttribute('minLength'))
-            .withContext('minLength')
-            .toEqual('2');
+          .withContext('minLength')
+          .toEqual('2');
         expect(input.getAttribute('maxLength'))
-            .withContext('maxLength')
-            .toEqual('5');
+          .withContext('maxLength')
+          .toEqual('5');
       });
 
       it('should not set attribute if value is -1', async () => {
@@ -469,22 +477,22 @@ describe('TextField', () => {
         await env.waitForStability();
 
         expect(input.hasAttribute('minlength'))
-            .withContext('should have minlength')
-            .toBeTrue();
+          .withContext('should have minlength')
+          .toBeTrue();
         expect(input.hasAttribute('maxlength'))
-            .withContext('should have maxlength')
-            .toBeTrue();
+          .withContext('should have maxlength')
+          .toBeTrue();
 
         testElement.minLength = -1;
         testElement.maxLength = -1;
         await env.waitForStability();
 
         expect(input.hasAttribute('minlength'))
-            .withContext('should not have minlength')
-            .toBeFalse();
+          .withContext('should not have minlength')
+          .toBeFalse();
         expect(input.hasAttribute('maxlength'))
-            .withContext('should not have maxlength')
-            .toBeFalse();
+          .withContext('should not have maxlength')
+          .toBeFalse();
       });
     });
 
@@ -511,14 +519,14 @@ describe('TextField', () => {
         await env.waitForStability();
 
         expect(input.hasAttribute('min'))
-            .withContext('should have min')
-            .toBeTrue();
+          .withContext('should have min')
+          .toBeTrue();
         expect(input.hasAttribute('max'))
-            .withContext('should have max')
-            .toBeTrue();
+          .withContext('should have max')
+          .toBeTrue();
         expect(input.hasAttribute('step'))
-            .withContext('should have step')
-            .toBeTrue();
+          .withContext('should have step')
+          .toBeTrue();
 
         testElement.min = '';
         testElement.max = '';
@@ -526,14 +534,14 @@ describe('TextField', () => {
         await env.waitForStability();
 
         expect(input.hasAttribute('min'))
-            .withContext('should not have min')
-            .toBeFalse();
+          .withContext('should not have min')
+          .toBeFalse();
         expect(input.hasAttribute('max'))
-            .withContext('should not have max')
-            .toBeFalse();
+          .withContext('should not have max')
+          .toBeFalse();
         expect(input.hasAttribute('step'))
-            .withContext('should not have step')
-            .toBeFalse();
+          .withContext('should not have step')
+          .toBeFalse();
       });
     });
 
@@ -544,8 +552,8 @@ describe('TextField', () => {
         await env.waitForStability();
 
         expect(input.getAttribute('pattern'))
-            .withContext('pattern')
-            .toEqual('foo');
+          .withContext('pattern')
+          .toEqual('foo');
       });
 
       it('should not set attribute if value is empty', async () => {
@@ -554,15 +562,15 @@ describe('TextField', () => {
         await env.waitForStability();
 
         expect(input.hasAttribute('pattern'))
-            .withContext('should have pattern')
-            .toBeTrue();
+          .withContext('should have pattern')
+          .toBeTrue();
 
         testElement.pattern = '';
         await env.waitForStability();
 
         expect(input.hasAttribute('pattern'))
-            .withContext('should not have pattern')
-            .toBeFalse();
+          .withContext('should not have pattern')
+          .toBeFalse();
       });
     });
   });
@@ -595,85 +603,94 @@ describe('TextField', () => {
 
   describe('forms', () => {
     createFormTests({
-      queryControl: root => root.querySelector('md-test-text-field'),
+      queryControl: (root) => root.querySelector('md-test-text-field'),
       valueTests: [
         {
           name: 'unnamed',
           render: () =>
-              html`<md-test-text-field value="Value"></md-test-text-field>`,
+            html`<md-test-text-field value="Value"></md-test-text-field>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form without a name')
-                .toHaveSize(0);
-          }
+              .withContext('should not add anything to form without a name')
+              .toHaveSize(0);
+          },
         },
         {
           name: 'should add empty value',
           render: () =>
-              html`<md-test-text-field name="input"></md-test-text-field>`,
+            html`<md-test-text-field name="input"></md-test-text-field>`,
           assertValue(formData) {
             expect(formData.get('input')).toBe('');
-          }
+          },
         },
         {
           name: 'with value',
           render: () =>
-              html`<md-test-text-field name="input" value="Value"></md-test-text-field>`,
+            html`<md-test-text-field
+              name="input"
+              value="Value"></md-test-text-field>`,
           assertValue(formData) {
             expect(formData.get('input')).toBe('Value');
-          }
+          },
         },
         {
           name: 'disabled',
           render: () =>
-              html`<md-test-text-field name="input" value="Value" disabled></md-test-text-field>`,
+            html`<md-test-text-field
+              name="input"
+              value="Value"
+              disabled></md-test-text-field>`,
           assertValue(formData) {
             expect(formData)
-                .withContext('should not add anything to form when disabled')
-                .toHaveSize(0);
-          }
-        }
+              .withContext('should not add anything to form when disabled')
+              .toHaveSize(0);
+          },
+        },
       ],
       resetTests: [
         {
           name: 'reset to empty value',
           render: () =>
-              html`<md-test-text-field name="input"></md-test-text-field>`,
+            html`<md-test-text-field name="input"></md-test-text-field>`,
           change(textField) {
             textField.value = 'Value';
           },
           assertReset(textField) {
             expect(textField.value)
-                .withContext('textField.value after reset')
-                .toBe('');
-          }
+              .withContext('textField.value after reset')
+              .toBe('');
+          },
         },
         {
           name: 'reset value',
           render: () =>
-              html`<md-test-text-field name="input" value="First"></md-test-text-field>`,
+            html`<md-test-text-field
+              name="input"
+              value="First"></md-test-text-field>`,
           change(textField) {
             textField.value = 'Second';
           },
           assertReset(textField) {
             expect(textField.value)
-                .withContext('textField.value after reset')
-                .toBe('First');
-          }
+              .withContext('textField.value after reset')
+              .toBe('First');
+          },
         },
       ],
       restoreTests: [
         {
           name: 'restore value',
           render: () =>
-              html`<md-test-text-field name="input" value="Value"></md-test-text-field>`,
+            html`<md-test-text-field
+              name="input"
+              value="Value"></md-test-text-field>`,
           assertRestored(textField) {
             expect(textField.value)
-                .withContext('textField.value after restore')
-                .toBe('Value');
-          }
+              .withContext('textField.value after restore')
+              .toBe('Value');
+          },
         },
-      ]
+      ],
     });
   });
 });
diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts
index 3f48c2870..938f25fa2 100644
--- a/textfield/outlined-text-field.ts
+++ b/textfield/outlined-text-field.ts
@@ -29,8 +29,11 @@ declare global {
  */
 @customElement('md-outlined-text-field')
 export class MdOutlinedTextField extends OutlinedTextField {
-  static override styles =
-      [sharedStyles, outlinedStyles, outlinedForcedColorsStyles];
+  static override styles = [
+    sharedStyles,
+    outlinedStyles,
+    outlinedForcedColorsStyles,
+  ];
 
   protected override readonly fieldTag = literal`md-outlined-field`;
 }
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index f300e6615..3bb3c9603 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -11,13 +11,14 @@ export default {
   ...jasmineTestRunnerConfig(),
   nodeResolve: true,
   files: ['**/*test.js', '!node_modules/', '!.wireit/'],
-  browsers: [
-    playwrightLauncher({
-      product: 'chromium',
-      // TODO Firefox errors with "Touch is not defined"
-      // product: 'firefox',
-      // TODO Webkit errors with "Unknown error"
-      // product: 'webkit',
-    }),
-  ],
+  browsers:
+      [
+        playwrightLauncher({
+          product: 'chromium',
+          // TODO Firefox errors with "Touch is not defined"
+          // product: 'firefox',
+          // TODO Webkit errors with "Unknown error"
+          // product: 'webkit',
+        }),
+      ],
 };