@material/web 1.0.0-pre.7 → 1.0.0-pre.8

package/focus/lib/focus-ring.js

@@ -7,17 +7,7 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.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 class FocusRing extends LitElement {
     constructor() {
@@ -26,9 +16,124 @@ export class FocusRing extends LitElement {
          * Makes the focus ring visible.
          */
         this.visible = false;
+        /**
+         * Reflects the value of the `for` attribute, which is the ID of the focus
+         * ring's associated control element.
+         *
+         * Use this when the focus ring's associated element is not a parent element.
+         *
+         * To manually control a focus ring, set its `for` attribute to `""`.
+         *
+         * @example
+         * ```html
+         * <div class="container">
+         *   <md-focus-ring for="interactive"></md-focus-ring>
+         *   <button id="interactive">Action</button>
+         * </div>
+         * ```
+         *
+         * @example
+         * ```html
+         * <button class="manually-controlled">
+         *   <md-focus-ring visible for=""></md-focus-ring>
+         * </button>
+         * ```
+         */
+        this.htmlFor = null;
+        this.currentControl = null;
+    }
+    /**
+     * The element that controls the visibility of the focus ring. It is one of:
+     *
+     * - The element referenced by the `for` attribute.
+     * - The element provided to `.attach(element)`
+     * - The parent element.
+     * - `null` if the focus ring is not controlled.
+     */
+    get control() {
+        if (this.hasAttribute('for')) {
+            if (!this.htmlFor) {
+                return null;
+            }
+            return this.getRootNode()
+                .querySelector(`#${this.htmlFor}`);
+        }
+        return this.currentControl || this.parentElement;
+    }
+    /**
+     * Attaches the focus ring to an interactive element.
+     *
+     * @param control The element that controls the focus ring.
+     */
+    attach(control) {
+        if (control === this.currentControl) {
+            return;
+        }
+        this.setCurrentControl(control);
+        // When imperatively attaching the focus ring, remove the `for` attribute so
+        // that the attached control is used instead of a referenced one.
+        this.removeAttribute('for');
+    }
+    /**
+     * Detaches the focus ring from its current interactive element.
+     */
+    detach() {
+        this.setCurrentControl(null);
+        // When imperatively detaching, add an empty `for=""` attribute. This will
+        // ensure the control is `null` rather than the `parentElement`.
+        this.setAttribute('for', '');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setCurrentControl(this.control);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.setCurrentControl(null);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('htmlFor')) {
+            const { control } = this;
+            if (control) {
+                this.setCurrentControl(control);
+            }
+        }
+    }
+    /**
+     * @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;
+    }
+    setCurrentControl(control) {
+        for (const event of ['focusin', 'focusout', 'pointerdown']) {
+            this.currentControl?.removeEventListener(event, this);
+            control?.addEventListener(event, this);
+        }
+        this.currentControl = control;
     }
 }
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
+__decorate([
+    property({ attribute: 'for', reflect: true })
+], FocusRing.prototype, "htmlFor", 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,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACuC,YAAO,GAAG,KAAK,CAAC;IAC5D,CAAC;CAAA;AAD2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAiB","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\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, reflect: true}) visible = false;\n}\n"]}
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n/**\n * A focus ring component.\n */\nexport class FocusRing extends LitElement {\n  /**\n   * Makes the focus ring visible.\n   */\n  @property({type: Boolean, reflect: true}) visible = false;\n\n  /**\n   * Reflects the value of the `for` attribute, which is the ID of the focus\n   * ring's associated control element.\n   *\n   * Use this when the focus ring's associated element is not a parent element.\n   *\n   * To manually control a focus ring, set its `for` attribute to `\"\"`.\n   *\n   * @example\n   * ```html\n   * <div class=\"container\">\n   *   <md-focus-ring for=\"interactive\"></md-focus-ring>\n   *   <button id=\"interactive\">Action</button>\n   * </div>\n   * ```\n   *\n   * @example\n   * ```html\n   * <button class=\"manually-controlled\">\n   *   <md-focus-ring visible for=\"\"></md-focus-ring>\n   * </button>\n   * ```\n   */\n  @property({attribute: 'for', reflect: true}) htmlFor: string|null = null;\n\n  /**\n   * The element that controls the visibility of the focus ring. It is one of:\n   *\n   * - The element referenced by the `for` attribute.\n   * - The element provided to `.attach(element)`\n   * - The parent element.\n   * - `null` if the focus ring is not controlled.\n   */\n  get control() {\n    if (this.hasAttribute('for')) {\n      if (!this.htmlFor) {\n        return null;\n      }\n\n      return (this.getRootNode() as Document | ShadowRoot)\n          .querySelector<HTMLElement>(`#${this.htmlFor}`);\n    }\n\n    return this.currentControl || this.parentElement;\n  }\n\n  private currentControl: HTMLElement|null = null;\n\n  /**\n   * Attaches the focus ring to an interactive element.\n   *\n   * @param control The element that controls the focus ring.\n   */\n  attach(control: HTMLElement) {\n    if (control === this.currentControl) {\n      return;\n    }\n\n    this.setCurrentControl(control);\n    // When imperatively attaching the focus ring, remove the `for` attribute so\n    // that the attached control is used instead of a referenced one.\n    this.removeAttribute('for');\n  }\n\n  /**\n   * Detaches the focus ring from its current interactive element.\n   */\n  detach() {\n    this.setCurrentControl(null);\n    // When imperatively detaching, add an empty `for=\"\"` attribute. This will\n    // ensure the control is `null` rather than the `parentElement`.\n    this.setAttribute('for', '');\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setCurrentControl(this.control);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.setCurrentControl(null);\n  }\n\n  protected override updated(changedProperties: PropertyValues<FocusRing>) {\n    if (changedProperties.has('htmlFor')) {\n      const {control} = this;\n      if (control) {\n        this.setCurrentControl(control);\n      }\n    }\n  }\n\n  /**\n   * @private\n   */\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 setCurrentControl(control: HTMLElement|null) {\n    for (const event of ['focusin', 'focusout', 'pointerdown']) {\n      this.currentControl?.removeEventListener(event, this);\n      control?.addEventListener(event, this);\n    }\n\n    this.currentControl = control;\n  }\n}\n\nconst HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');\n\ninterface FocusRingEvent extends Event {\n  [HANDLED_BY_FOCUS_RING]: true;\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(): {
+        'md3-icon-button--filled': boolean;
+        'md3-icon-button--toggle-filled': boolean;
+        'md3-icon-button--flip-icon': boolean;
+        'md3-icon-button--selected': boolean;
+    };
 }

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;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAG7B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;YAC/B,gCAAgC,EAAE,IAAI,CAAC,MAAM;SAC9C,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';\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      'md3-icon-button--toggle-filled': this.toggle,\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,yBAAyB,EAAE,IAAI;YAC/B,gCAAgC,EAAE,IAAI,CAAC,MAAM;SAC9C,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      'md3-icon-button--filled': true,\n      'md3-icon-button--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(): {
+        'md3-icon-button--filled-tonal': boolean;
+        'md3-icon-button--toggle-filled-tonal': boolean;
+        'md3-icon-button--flip-icon': boolean;
+        'md3-icon-button--selected': boolean;
+    };
 }

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;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAGlC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,+BAA+B,EAAE,IAAI;YACrC,sCAAsC,EAAE,IAAI,CAAC,MAAM;SACpD,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';\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      'md3-icon-button--toggle-filled-tonal': this.toggle,\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,+BAA+B,EAAE,IAAI;YACrC,sCAAsC,EAAE,IAAI,CAAC,MAAM;SACpD,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      'md3-icon-button--filled-tonal': true,\n      'md3-icon-button--toggle-filled-tonal': this.toggle,\n    };\n  }\n}\n"]}

package/iconbutton/harness.d.ts

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

package/iconbutton/harness.js

@@ -10,7 +10,10 @@ import { Harness } from '../testing/harness.js';
 export class IconButtonHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('.md3-icon-button');
+        if (this.element.href) {
+            return this.element.renderRoot.querySelector('a');
+        }
+        return this.element.renderRoot.querySelector('button');
     }
 }
 //# sourceMappingURL=harness.js.map

package/iconbutton/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,OAAmB;IACrC,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAChD,CAAC;IAClB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {IconButton} from './lib/icon-button.js';\n\n/**\n * Test harness for icon buttons.\n */\nexport class IconButtonHarness extends Harness<IconButton> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-icon-button') as\n        HTMLElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,OAAmB;IACrC,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACrB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAE,CAAC;SACpD;QAED,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;IAC1D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {IconButton} from './lib/icon-button.js';\n\n/**\n * Test harness for icon buttons.\n */\nexport class IconButtonHarness extends Harness<IconButton> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    if (this.element.href) {\n      return this.element.renderRoot.querySelector('a')!;\n    }\n\n    return this.element.renderRoot.querySelector('button')!;\n  }\n}\n"]}

package/iconbutton/lib/_filled-icon-button.scss

@@ -7,40 +7,65 @@
 // Selector '.md3-*' should only be used in this project.
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../ripple/ripple';
-@use '../../sass/shape';
-@use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'filled-icon-button';
-
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-icon-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-icon-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
+
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens);
 
-  @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-filled-icon-button-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-filled-icon-button-values();
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-filled-icon-button-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filled-icon-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filled-icon-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filled-icon-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filled-icon-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 
   .md3-icon-button {

package/iconbutton/lib/_filled-tonal-icon-button.scss

@@ -7,12 +7,11 @@
 // Selector '.md3-*' should only be used in this project.
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../ripple/ripple';
-@use '../../sass/shape';
-@use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
 // go/keep-sorted end
@@ -20,27 +19,55 @@
 $_custom-property-prefix: 'filled-tonal-icon-button';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-tonal-icon-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-tonal-icon-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
+
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens);
 
-  @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-filled-tonal-icon-button-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-filled-tonal-icon-button-values();
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-filled-tonal-icon-button-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filled-tonal-icon-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filled-tonal-icon-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filled-tonal-icon-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filled-tonal-icon-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 
   .md3-icon-button {

package/iconbutton/lib/_outlined-icon-button.scss

@@ -7,41 +7,66 @@
 // Selector '.md3-*' should only be used in this project.
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../ripple/ripple';
 @use '../../sass/color';
-@use '../../sass/shape';
-@use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'outlined-icon-button';
-
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-outlined-icon-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-outlined-icon-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
+
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens);
 
-  @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-outlined-icon-button-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-outlined-icon-button-values();
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-outlined-icon-button-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-outlined-icon-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-outlined-icon-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-outlined-icon-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-outlined-icon-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 
   .md3-icon-button--outlined {

package/iconbutton/lib/_shared.scss

@@ -16,7 +16,6 @@
 @use '../../focus/focus-ring';
 @use '../../icon/icon';
 @use '../../sass/color';
-@use '../../sass/shape';
 @use '../../sass/touch-target';
 @use '../../tokens';
 // go/keep-sorted end
@@ -32,7 +31,10 @@
 
     @include focus-ring.theme(
       (
-        shape: shape.corners-to-shape-token('--_container-shape'),
+        'shape-start-start': var(--_container-shape-start-start),
+        'shape-start-end': var(--_container-shape-start-end),
+        'shape-end-end': var(--_container-shape-end-end),
+        'shape-end-start': var(--_container-shape-end-start),
       )
     );
   }
@@ -159,7 +161,3 @@
     )
   );
 }
-
-@function resolve-shape-tokens($tokens, $property: 'container-shape') {
-  @return shape.resolve-tokens($tokens, $property);
-}

package/iconbutton/lib/_standard-icon-button.scss

@@ -7,38 +7,38 @@
 // Selector '.md3-*' should only be used in this project.
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
-@use '../../sass/shape';
-@use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'icon-button';
-$_shape-property: 'state-layer-shape';
-
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-icon-button-values(), $tokens);
+  $supported-tokens: tokens.$md-comp-icon-button-supported-tokens;
   $tokens: shared.flatten-disabled-colors($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens, $property: $_shape-property);
 
-  @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-icon-button-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-icon-button-values();
   $tokens: shared.flatten-disabled-colors($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shared.resolve-shape-tokens($tokens, $property: $_shape-property);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-icon-button-#{$token}, #{$value});
     }
 
     height: var(--_state-layer-size);
@@ -46,7 +46,7 @@ $_shape-property: 'state-layer-shape';
 
     @include focus-ring.theme(
       (
-        shape: shape.corners-to-shape-token('--_state-layer-shape'),
+        'shape': var(--_state-layer-shape),
       )
     );
   }
@@ -63,7 +63,7 @@ $_shape-property: 'state-layer-shape';
         hover-opacity: var(--_unselected-hover-state-layer-opacity),
         pressed-color: var(--_unselected-pressed-state-layer-color),
         pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
-        shape: shape.corners-to-shape-token('--_state-layer-shape'),
+        shape: var(--_state-layer-shape),
       )
     );
 

package/iconbutton/lib/filled-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-shape: var(--md-filled-icon-button-container-shape, 9999px);--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_container-shape-start-start: var( --md-filled-icon-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filled-icon-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filled-icon-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filled-icon-button-container-shape-end-start, var(--_container-shape) )}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map