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

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

@@ -3,23 +3,70 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 /**
- * @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 {
     /**
      * Makes the focus ring visible.
      */
     visible: boolean;
+    /**
+     * 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>
+     * ```
+     */
+    htmlFor: string | 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(): HTMLElement;
+    private currentControl;
+    /**
+     * Attaches the focus ring to an interactive element.
+     *
+     * @param control The element that controls the focus ring.
+     */
+    attach(control: HTMLElement): void;
+    /**
+     * Detaches the focus ring from its current interactive element.
+     */
+    detach(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<FocusRing>): void;
+    /**
+     * @private
+     */
+    handleEvent(event: FocusRingEvent): void;
+    private setCurrentControl;
+}
+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,21 +3,11 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+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,10 +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 }),
-    __metadata("design:type", Object)
+    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;AADC;IAAC,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/icon/icon.d.ts

@@ -10,7 +10,6 @@ declare global {
     }
 }
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/icon/icon.js

@@ -8,7 +8,6 @@ import { customElement } from 'lit/decorators.js';
 import { Icon } from './lib/icon.js';
 import { styles } from './lib/icon-styles.css.js';
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

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;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;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;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;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 * @final\n * @suppress {visibility}\n */\n@customElement('md-icon')\nexport class MdIcon extends Icon {\n  static override styles = [styles];\n}\n"]}

package/icon/lib/_icon.scss

@@ -34,6 +34,8 @@ $_custom-property-prefix: 'icon';
     font-size: var(--_size);
     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/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 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;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 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;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.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(): {
+        '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 {