@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/focus/lib/_focus-ring.scss

@@ -3,66 +3,127 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
-@use '../../sass/theme';
-@use '../../sass/shape';
-@use '../../sass/resolvers';
-@use './md-comp-focus-ring';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
 
-$_custom-property-prefix: 'focus-ring';
+$_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(md-comp-focus-ring.values(), $tokens);
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+  $supported-tokens: list.join(
+    tokens.$md-comp-focus-ring-supported-tokens,
+    ('shape-start-start', 'shape-start-end', 'shape-end-end', 'shape-end-start')
+  );
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-focus-ring-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
-  $tokens: md-comp-focus-ring.values();
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+  $tokens: tokens.md-comp-focus-ring-values();
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-focus-ring-#{$token}, #{$value});
     }
 
-    pointer-events: none;
-  }
+    // Support logical shape properties
+    --_shape-start-start: var(--md-focus-ring-shape-start-start, var(--_shape));
+    --_shape-start-end: var(--md-focus-ring-shape-start-end, var(--_shape));
+    --_shape-end-end: var(--md-focus-ring-shape-end-end, var(--_shape));
+    --_shape-end-start: var(--md-focus-ring-shape-end-start, var(--_shape));
 
-  .md3-focus-ring {
+    animation-delay: 0s, calc(var(--_duration) * 0.25);
+    animation-duration: calc(var(--_duration) * 0.25),
+      calc(var(--_duration) * 0.75);
+    animation-timing-function: map.get($_md-sys-motion, 'easing-emphasized');
+    box-sizing: border-box;
+    color: var(--_color);
     display: none;
+    pointer-events: none;
     position: absolute;
-    box-sizing: border-box;
-    border: var(--_width) solid var(--_color);
-    border-start-start-radius: var(--_shape-start-start);
-    border-start-end-radius: var(--_shape-start-end);
-    border-end-start-radius: var(--_shape-end-start);
-    border-end-end-radius: var(--_shape-end-end);
-    // Note that the ring will not respect its parent's border. This will not be
-    // an issue as long as border is set via a sibling node, similar to ripple
-    // and touch target.
-    $vertical-inset: calc(-1 * (var(--_offset-vertical) + var(--_width)));
-    $horizontal-inset: calc(-1 * (var(--_offset-horizontal) + var(--_width)));
-
-    inset: $vertical-inset $horizontal-inset;
   }
 
-  .md3-focus-ring--visible {
-    display: block;
+  :host([visible]) {
+    display: flex;
   }
-}
 
-@function _resolve-tokens($tokens) {
-  $tokens: shape.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, shape),
-    shape
-  );
-  @return $tokens;
+  :host(:not([inward])) {
+    animation-name: outward-grow, outward-shrink;
+    border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
+    border-end-start-radius: calc(
+      var(--_shape-end-start) + var(--_outward-offset)
+    );
+    border-start-end-radius: calc(
+      var(--_shape-start-end) + var(--_outward-offset)
+    );
+    border-start-start-radius: calc(
+      var(--_shape-start-start) + var(--_outward-offset)
+    );
+    inset: calc(-1 * (var(--_outward-offset)));
+    outline: var(--_width) solid currentColor;
+  }
+
+  :host([inward]) {
+    animation-name: inward-grow, inward-shrink;
+    border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
+    border-end-start-radius: calc(
+      var(--_shape-end-start) - var(--_inward-offset)
+    );
+    border-start-end-radius: calc(
+      var(--_shape-start-end) - var(--_inward-offset)
+    );
+    border-start-start-radius: calc(
+      var(--_shape-start-start) - var(--_inward-offset)
+    );
+    border: var(--_width) solid currentColor;
+    inset: var(--_inward-offset);
+  }
+
+  @keyframes outward-grow {
+    from {
+      outline-width: 0;
+    }
+    to {
+      outline-width: var(--_active-width);
+    }
+  }
+
+  @keyframes outward-shrink {
+    from {
+      outline-width: var(--_active-width);
+    }
+  }
+
+  @keyframes inward-grow {
+    from {
+      border-width: 0;
+    }
+    to {
+      border-width: var(--_active-width);
+    }
+  }
+
+  @keyframes inward-shrink {
+    from {
+      border-width: var(--_active-width);
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    :host {
+      animation: none;
+    }
+  }
 }

package/focus/lib/focus-ring-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, 9999px);--_shape-start-end: var(--md-focus-ring-shape-start-end, 9999px);--_shape-end-end: var(--md-focus-ring-shape-end-end, 9999px);--_shape-end-start: var(--md-focus-ring-shape-end-start, 9999px);--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}.md3-focus-ring--visible{display:block}/*# sourceMappingURL=focus-ring-styles.css.map */
+export const styles = css `:host{--_active-width: var(--md-focus-ring-active-width, 8px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));--_duration: var(--md-focus-ring-duration, 600ms);--_inward-offset: var(--md-focus-ring-inward-offset, 0px);--_outward-offset: var(--md-focus-ring-outward-offset, 2px);--_shape: var(--md-focus-ring-shape, 9999px);--_width: var(--md-focus-ring-width, 3px);--_shape-start-start: var(--md-focus-ring-shape-start-start, var(--_shape));--_shape-start-end: var(--md-focus-ring-shape-start-end, var(--_shape));--_shape-end-end: var(--md-focus-ring-shape-end-end, var(--_shape));--_shape-end-start: var(--md-focus-ring-shape-end-start, var(--_shape));animation-delay:0s,calc(var(--_duration)*.25);animation-duration:calc(var(--_duration)*.25),calc(var(--_duration)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--_color);display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_shape-end-end) + var(--_outward-offset));border-end-start-radius:calc(var(--_shape-end-start) + var(--_outward-offset));border-start-end-radius:calc(var(--_shape-start-end) + var(--_outward-offset));border-start-start-radius:calc(var(--_shape-start-start) + var(--_outward-offset));inset:calc(-1*(var(--_outward-offset)));outline:var(--_width) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_shape-end-end) - var(--_inward-offset));border-end-start-radius:calc(var(--_shape-end-start) - var(--_inward-offset));border-start-end-radius:calc(var(--_shape-start-end) - var(--_inward-offset));border-start-start-radius:calc(var(--_shape-start-start) - var(--_inward-offset));border:var(--_width) solid currentColor;inset:var(--_inward-offset)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@keyframes outward-shrink{from{outline-width:var(--_active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@keyframes inward-shrink{from{border-width:var(--_active-width)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */
 `;
 //# sourceMappingURL=focus-ring-styles.css.js.map

package/focus/lib/focus-ring-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, 9999px);--_shape-start-end: var(--md-focus-ring-shape-start-end, 9999px);--_shape-end-end: var(--md-focus-ring-shape-end-end, 9999px);--_shape-end-start: var(--md-focus-ring-shape-end-start, 9999px);--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}.md3-focus-ring--visible{display:block}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}
+{"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-width: var(--md-focus-ring-active-width, 8px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));--_duration: var(--md-focus-ring-duration, 600ms);--_inward-offset: var(--md-focus-ring-inward-offset, 0px);--_outward-offset: var(--md-focus-ring-outward-offset, 2px);--_shape: var(--md-focus-ring-shape, 9999px);--_width: var(--md-focus-ring-width, 3px);--_shape-start-start: var(--md-focus-ring-shape-start-start, var(--_shape));--_shape-start-end: var(--md-focus-ring-shape-start-end, var(--_shape));--_shape-end-end: var(--md-focus-ring-shape-end-end, var(--_shape));--_shape-end-start: var(--md-focus-ring-shape-end-start, var(--_shape));animation-delay:0s,calc(var(--_duration)*.25);animation-duration:calc(var(--_duration)*.25),calc(var(--_duration)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--_color);display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_shape-end-end) + var(--_outward-offset));border-end-start-radius:calc(var(--_shape-end-start) + var(--_outward-offset));border-start-end-radius:calc(var(--_shape-start-end) + var(--_outward-offset));border-start-start-radius:calc(var(--_shape-start-start) + var(--_outward-offset));inset:calc(-1*(var(--_outward-offset)));outline:var(--_width) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_shape-end-end) - var(--_inward-offset));border-end-start-radius:calc(var(--_shape-end-start) - var(--_inward-offset));border-start-end-radius:calc(var(--_shape-start-end) - var(--_inward-offset));border-start-start-radius:calc(var(--_shape-start-start) - var(--_inward-offset));border:var(--_width) solid currentColor;inset:var(--_inward-offset)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@keyframes outward-shrink{from{outline-width:var(--_active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@keyframes inward-shrink{from{border-width:var(--_active-width)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}

package/focus/lib/focus-ring-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './focus-ring';
+// go/keep-sorted end
 
 @include focus-ring.styles;

package/focus/lib/focus-ring.d.ts

@@ -3,26 +3,32 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
+import { LitElement } from 'lit';
+import { Attachable } from '../../internal/controller/attachable-controller.js';
 /**
- * @summary An accessible, themable ring designed to be shown on
- * `:focus-visible`.
- *
- * @description
- * An accessible, themable ring designed to be shown on focus-visible.
- * Focus ring is designed to be controlled by the `strong-focus` module in the
- * same package.
- *
- * In most cases, `visible` should be set to
- * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`
- * documentation in the `strong-focus` module), and `false` on `blur`.
+ * A focus ring component.
  */
-export declare class FocusRing extends LitElement {
+export declare class FocusRing extends LitElement implements Attachable {
     /**
      * Makes the focus ring visible.
      */
     visible: boolean;
-    protected render(): TemplateResult;
-    protected getRenderClasses(): ClassInfo;
+    /**
+     * Makes the focus ring animate inwards instead of outwards.
+     */
+    inward: boolean;
+    get htmlFor(): string | null;
+    set htmlFor(htmlFor: string | null);
+    get control(): HTMLElement;
+    private readonly attachableController;
+    attach(control: HTMLElement): void;
+    detach(): void;
+    /** @private */
+    handleEvent(event: FocusRingEvent): void;
+    private onControlChange;
+}
+declare const HANDLED_BY_FOCUS_RING: unique symbol;
+interface FocusRingEvent extends Event {
+    [HANDLED_BY_FOCUS_RING]: true;
 }
+export {};

package/focus/lib/focus-ring.js

@@ -3,22 +3,16 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-import { html, LitElement } from 'lit';
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { AttachableController } from '../../internal/controller/attachable-controller.js';
 /**
- * @summary An accessible, themable ring designed to be shown on
- * `:focus-visible`.
- *
- * @description
- * An accessible, themable ring designed to be shown on focus-visible.
- * Focus ring is designed to be controlled by the `strong-focus` module in the
- * same package.
- *
- * In most cases, `visible` should be set to
- * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`
- * documentation in the `strong-focus` module), and `false` on `blur`.
+ * Events that the focus ring listens to.
+ */
+const EVENTS = ['focusin', 'focusout', 'pointerdown'];
+/**
+ * A focus ring component.
  */
 export class FocusRing extends LitElement {
     constructor() {
@@ -27,18 +21,59 @@ export class FocusRing extends LitElement {
          * Makes the focus ring visible.
          */
         this.visible = false;
+        /**
+         * Makes the focus ring animate inwards instead of outwards.
+         */
+        this.inward = false;
+        this.attachableController = new AttachableController(this, this.onControlChange.bind(this));
+    }
+    get htmlFor() {
+        return this.attachableController.htmlFor;
     }
-    render() {
-        return html `<span class="md3-focus-ring ${classMap(this.getRenderClasses())}"></span>`;
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
     }
-    getRenderClasses() {
-        return {
-            'md3-focus-ring--visible': this.visible,
-        };
+    get control() {
+        return this.attachableController.control;
+    }
+    attach(control) {
+        this.attachableController.attach(control);
+    }
+    detach() {
+        this.attachableController.detach();
+    }
+    /** @private */
+    handleEvent(event) {
+        if (event[HANDLED_BY_FOCUS_RING]) {
+            // This ensures the focus ring does not activate when multiple focus rings
+            // are used within a single component.
+            return;
+        }
+        switch (event.type) {
+            default:
+                return;
+            case 'focusin':
+                this.visible = this.control?.matches(':focus-visible') ?? false;
+                break;
+            case 'focusout':
+            case 'pointerdown':
+                this.visible = false;
+                break;
+        }
+        event[HANDLED_BY_FOCUS_RING] = true;
+    }
+    onControlChange(prev, next) {
+        for (const event of EVENTS) {
+            prev?.removeEventListener(event, this);
+            next?.addEventListener(event, this);
+        }
     }
 }
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FocusRing.prototype, "inward", void 0);
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');
 //# sourceMappingURL=focus-ring.js.map

package/focus/lib/focus-ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;IAY7C,CAAC;IAVoB,MAAM;QACvB,OAAO,IAAI,CAAA,+BACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,WAAW,CAAC;IACnD,CAAC;IAES,gBAAgB;QACxB,OAAO;YACL,yBAAyB,EAAE,IAAI,CAAC,OAAO;SACxC,CAAC;IACJ,CAAC;CACF;AAZ4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/**\n * @summary An accessible, themable ring designed to be shown on\n * `:focus-visible`.\n *\n * @description\n * An accessible, themable ring designed to be shown on focus-visible.\n * Focus ring is designed to be controlled by the `strong-focus` module in the\n * same package.\n *\n * In most cases, `visible` should be set to\n * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`\n * documentation in the `strong-focus` module), and `false` on `blur`.\n */\nexport class FocusRing extends LitElement {\n  /**\n   * Makes the focus ring visible.\n   */\n  @property({type: Boolean}) visible = false;\n\n  protected override render(): TemplateResult {\n    return html`<span class=\"md3-focus-ring ${\n        classMap(this.getRenderClasses())}\"></span>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-focus-ring--visible': this.visible,\n    };\n  }\n}\n"]}
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAa,oBAAoB,EAAC,MAAM,oDAAoD,CAAC;AAEpG;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;AAEtD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACuC,YAAO,GAAG,KAAK,CAAC;QAE1D;;WAEG;QACuC,WAAM,GAAG,KAAK,CAAC;QAcxC,yBAAoB,GACjC,IAAI,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAuCtE,CAAC;IApDC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAC3C,CAAC;IAED,IAAI,OAAO,CAAC,OAAoB;QAC9B,IAAI,CAAC,oBAAoB,CAAC,OAAO,GAAG,OAAO,CAAC;IAC9C,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAC3C,CAAC;IAKD,MAAM,CAAC,OAAoB;QACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;IACrC,CAAC;IAED,eAAe;IACf,WAAW,CAAC,KAAqB;QAC/B,IAAI,KAAK,CAAC,qBAAqB,CAAC,EAAE;YAChC,0EAA0E;YAC1E,sCAAsC;YACtC,OAAO;SACR;QAED,QAAQ,KAAK,CAAC,IAAI,EAAE;YAClB;gBACE,OAAO;YACT,KAAK,SAAS;gBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC,IAAI,KAAK,CAAC;gBAChE,MAAM;YACR,KAAK,UAAU,CAAC;YAChB,KAAK,aAAa;gBAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,MAAM;SACT;QAED,KAAK,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC;IACtC,CAAC;IAEO,eAAe,CAAC,IAAsB,EAAE,IAAsB;QACpE,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;YAC1B,IAAI,EAAE,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACvC,IAAI,EAAE,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;CACF;AA3D2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAiB;AAKhB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAgB;AAwD3D,MAAM,qBAAqB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {Attachable, AttachableController} from '../../internal/controller/attachable-controller.js';\n\n/**\n * Events that the focus ring listens to.\n */\nconst EVENTS = ['focusin', 'focusout', 'pointerdown'];\n\n/**\n * A focus ring component.\n */\nexport class FocusRing extends LitElement implements Attachable {\n  /**\n   * Makes the focus ring visible.\n   */\n  @property({type: Boolean, reflect: true}) visible = false;\n\n  /**\n   * Makes the focus ring animate inwards instead of outwards.\n   */\n  @property({type: Boolean, reflect: true}) inward = false;\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string|null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n\n  private readonly attachableController =\n      new AttachableController(this, this.onControlChange.bind(this));\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  /** @private */\n  handleEvent(event: FocusRingEvent) {\n    if (event[HANDLED_BY_FOCUS_RING]) {\n      // This ensures the focus ring does not activate when multiple focus rings\n      // are used within a single component.\n      return;\n    }\n\n    switch (event.type) {\n      default:\n        return;\n      case 'focusin':\n        this.visible = this.control?.matches(':focus-visible') ?? false;\n        break;\n      case 'focusout':\n      case 'pointerdown':\n        this.visible = false;\n        break;\n    }\n\n    event[HANDLED_BY_FOCUS_RING] = true;\n  }\n\n  private onControlChange(prev: HTMLElement|null, next: HTMLElement|null) {\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this);\n      next?.addEventListener(event, this);\n    }\n  }\n}\n\nconst HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');\n\ninterface FocusRingEvent extends Event {\n  [HANDLED_BY_FOCUS_RING]: true;\n}\n"]}

package/icon/icon.d.ts

@@ -10,10 +10,10 @@ declare global {
     }
 }
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */
 export declare class MdIcon extends Icon {
+    /** @nocollapse */
     static styles: import("lit").CSSResult[];
 }

package/icon/icon.js

@@ -8,12 +8,12 @@ import { customElement } from 'lit/decorators.js';
 import { Icon } from './lib/icon.js';
 import { styles } from './lib/icon-styles.css.js';
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */
 let MdIcon = class MdIcon extends Icon {
 };
+/** @nocollapse */
 MdIcon.styles = [styles];
 MdIcon = __decorate([
     customElement('md-icon')

package/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAQhD;;;;GAIG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,IAAI;CAE/B,CAAA;AADiB,aAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Icon} from './lib/icon.js';\nimport {styles} from './lib/icon-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-icon')\nexport class MdIcon extends Icon {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAQhD;;;GAGG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AAC9B,kBAAkB;AACF,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAFvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAGlB;SAHY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Icon} from './lib/icon.js';\nimport {styles} from './lib/icon-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-icon')\nexport class MdIcon extends Icon {\n  /** @nocollapse */\n  static override styles = [styles];\n}\n"]}

package/icon/lib/_icon.scss

@@ -3,8 +3,10 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@use '../../sass/theme';
+// go/keep-sorted start
+@use '../../internal/sass/theme';
 @use './md-comp-icon';
+// go/keep-sorted end
 
 $_custom-property-prefix: 'icon';
 
@@ -30,8 +32,10 @@ $_custom-property-prefix: 'icon';
     font-weight: var(--_weight);
     font-style: normal;
     font-size: var(--_size);
-    font-variation-settings: var(--_font-varation-settings);
+    font-variation-settings: var(--_font-variation-settings);
     line-height: 1;
+    // Avoid displaying overflowing text if font ligatures have not loaded.
+    overflow: hidden;
     letter-spacing: normal;
     text-transform: none;
     white-space: nowrap;

package/icon/lib/_md-comp-icon.scss

@@ -7,8 +7,7 @@
   $values: (
     (
       color: if($exclude-hardcoded-values, null, inherit),
-      // TODO(b/225384738): Change to 'Material Symbols Outlined'
-      font: if($exclude-hardcoded-values, null, 'Material Icons'),
+      font: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'),
       font-variation-settings: if($exclude-hardcoded-values, null, inherit),
       size: if($exclude-hardcoded-values, null, 24px),
       weight: if($exclude-hardcoded-values, null, 400),

package/icon/lib/icon-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, "Material Icons");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor}span ::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */
+export const styles = css `:host{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, "Material Symbols Outlined");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-variation-settings);line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor}span ::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */
 `;
 //# sourceMappingURL=icon-styles.css.js.map

package/icon/lib/icon-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, \"Material Icons\");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor}span ::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}
+{"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, \"Material Symbols Outlined\");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-variation-settings);line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor}span ::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}

package/icon/lib/icon-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './icon';
+// go/keep-sorted end
 
 @include icon.styles;

package/icon/lib/icon.d.ts

@@ -3,9 +3,10 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement, TemplateResult } from 'lit';
-/** @soyCompatible */
+import { LitElement } from 'lit';
+/**
+ * TODO(b/265336902): add docs
+ */
 export declare class Icon extends LitElement {
-    /** @soyTemplate */
-    protected render(): TemplateResult;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/icon/lib/icon.js

@@ -4,9 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { html, LitElement } from 'lit';
-/** @soyCompatible */
+/**
+ * TODO(b/265336902): add docs
+ */
 export class Icon extends LitElement {
-    /** @soyTemplate */
     render() {
         return html `<span><slot></slot></span>`;
     }

package/icon/lib/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAErD,qBAAqB;AACrB,MAAM,OAAO,IAAK,SAAQ,UAAU;IAClC,mBAAmB;IACA,MAAM;QACvB,OAAO,IAAI,CAAA,4BAA4B,CAAC;IAC1C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\n\n/** @soyCompatible */\nexport class Icon extends LitElement {\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<span><slot></slot></span>`;\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IACf,MAAM;QACvB,OAAO,IAAI,CAAA,4BAA4B,CAAC;IAC1C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * TODO(b/265336902): add docs\n */\nexport class Icon extends LitElement {\n  protected override render() {\n    return html`<span><slot></slot></span>`;\n  }\n}\n"]}

package/iconbutton/filled-icon-button.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ClassInfo } from 'lit/directives/class-map.js';
 import { IconButton } from './lib/icon-button.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -27,5 +26,10 @@ declare global {
  */
 export declare class MdFilledIconButton extends IconButton {
     static styles: import("lit").CSSResult[];
-    protected getRenderClasses(): ClassInfo;
+    protected getRenderClasses(): {
+        filled: boolean;
+        'toggle-filled': boolean;
+        'flip-icon': boolean;
+        selected: boolean;
+    };
 }

package/iconbutton/filled-icon-button.js

@@ -27,7 +27,8 @@ let MdFilledIconButton = class MdFilledIconButton extends IconButton {
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),
-            'md3-icon-button--filled': true,
+            'filled': true,
+            'toggle-filled': this.toggle,
         };
     }
 };

package/iconbutton/filled-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-icon-button.js","sourceRoot":"","sources":["filled-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,UAAU;IAG7B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;SAChC,CAAC;IACJ,CAAC;CACF,CAAA;AARiB,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAS9B;SATY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-icon-button': MdFilledIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-icon-button')\nexport class MdFilledIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-icon-button.js","sourceRoot":"","sources":["filled-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAG7B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,QAAQ,EAAE,IAAI;YACd,eAAe,EAAE,IAAI,CAAC,MAAM;SAC7B,CAAC;IACJ,CAAC;;AARe,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AADrC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAU9B;SAVY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-icon-button': MdFilledIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-icon-button')\nexport class MdFilledIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'filled': true,\n      'toggle-filled': this.toggle,\n    };\n  }\n}\n"]}

package/iconbutton/filled-tonal-icon-button.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ClassInfo } from 'lit/directives/class-map.js';
 import { IconButton } from './lib/icon-button.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -27,5 +26,10 @@ declare global {
  */
 export declare class MdFilledTonalIconButton extends IconButton {
     static styles: import("lit").CSSResult[];
-    protected getRenderClasses(): ClassInfo;
+    protected getRenderClasses(): {
+        'filled-tonal': boolean;
+        'toggle-filled-tonal': boolean;
+        'flip-icon': boolean;
+        selected: boolean;
+    };
 }

package/iconbutton/filled-tonal-icon-button.js

@@ -27,7 +27,8 @@ let MdFilledTonalIconButton = class MdFilledTonalIconButton extends IconButton {
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),
-            'md3-icon-button--filled-tonal': true,
+            'filled-tonal': true,
+            'toggle-filled-tonal': this.toggle,
         };
     }
 };

package/iconbutton/filled-tonal-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-tonal-icon-button.js","sourceRoot":"","sources":["filled-tonal-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEH,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,UAAU;IAGlC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,+BAA+B,EAAE,IAAI;SACtC,CAAC;IACJ,CAAC;CACF,CAAA;AARiB,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CASnC;SATY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-tonal-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button': MdFilledTonalIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-tonal-icon-button')\nexport class MdFilledTonalIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled-tonal': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-tonal-icon-button.js","sourceRoot":"","sources":["filled-tonal-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAGlC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,cAAc,EAAE,IAAI;YACpB,qBAAqB,EAAE,IAAI,CAAC,MAAM;SACnC,CAAC;IACJ,CAAC;;AARe,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AADrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAUnC;SAVY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from './lib/filled-tonal-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button': MdFilledTonalIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-tonal-icon-button')\nexport class MdFilledTonalIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'filled-tonal': true,\n      'toggle-filled-tonal': this.toggle,\n    };\n  }\n}\n"]}

package/iconbutton/harness.d.ts

@@ -5,10 +5,9 @@
  */
 import { Harness } from '../testing/harness.js';
 import { IconButton } from './lib/icon-button.js';
-import { IconButtonToggle } from './lib/icon-button-toggle.js';
 /**
  * Test harness for icon buttons.
  */
-export declare class IconButtonHarness extends Harness<IconButton | IconButtonToggle> {
-    protected getInteractiveElement(): Promise<HTMLElement>;
+export declare class IconButtonHarness extends Harness<IconButton> {
+    protected getInteractiveElement(): Promise<HTMLAnchorElement | HTMLButtonElement>;
 }