@material/web 1.0.0-pre.8 → 1.0.0

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

@@ -1 +0,0 @@
-{"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);--_offset: var(--md-focus-ring-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-duration:var(--_duration);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);border-end-end-radius:calc(var(--_offset) + var(--_shape-end-end));border-end-start-radius:calc(var(--_offset) + var(--_shape-end-start));border-start-end-radius:calc(var(--_offset) + var(--_shape-start-end));border-start-start-radius:calc(var(--_offset) + var(--_shape-start-start));box-shadow:inset 0 0 0 0 currentColor;box-sizing:border-box;color:var(--_color);display:none;inset:calc(-1*(var(--_offset) + 1px));outline-offset:-1px;outline:var(--_width) solid currentColor;pointer-events:none;position:absolute}:host([visible]){display:flex;animation-name:focus-ring}@keyframes focus-ring{from{outline-width:0px}25%{box-shadow:inset 0 0 0 calc(var(--_active-width)/2) currentColor;outline-width:calc(var(--_active-width)/2)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}

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

@@ -1,72 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement, PropertyValues } from 'lit';
-/**
- * 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

@@ -1,139 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-/**
- * A focus ring component.
- */
-export class FocusRing extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * 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 +0,0 @@
-{"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/lib/_icon.scss

@@ -1,61 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use '../../sass/theme';
-@use './md-comp-icon';
-// go/keep-sorted end
-
-$_custom-property-prefix: 'icon';
-
-@mixin theme($tokens) {
-  $tokens: theme.validate-theme(md-comp-icon.values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($tokens);
-}
-
-@mixin styles() {
-  $tokens: md-comp-icon.values();
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-
-    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;
-    // Avoid displaying overflowing text if font ligatures have not loaded.
-    overflow: hidden;
-    letter-spacing: normal;
-    text-transform: none;
-    white-space: nowrap;
-    word-wrap: normal;
-
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  span {
-    ::slotted(svg) {
-      fill: currentColor;
-    }
-    ::slotted(*) {
-      height: var(--_size);
-      width: var(--_size);
-    }
-  }
-}

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

@@ -1,18 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@function values($exclude-hardcoded-values: false) {
-  $values: (
-    (
-      color: if($exclude-hardcoded-values, null, inherit),
-      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),
-    )
-  );
-
-  @return $values;
-}

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

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * 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;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 +0,0 @@
-{"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

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

package/icon/lib/icon.js

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { html, LitElement } from 'lit';
-/**
- * TODO(b/265336902): add docs
- */
-export class Icon extends LitElement {
-    render() {
-        return html `<span><slot></slot></span>`;
-    }
-}
-//# sourceMappingURL=icon.js.map

package/icon/lib/icon.js.map

@@ -1 +0,0 @@
-{"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/_standard-icon-button.scss

@@ -1,6 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@forward './lib/standard-icon-button' show theme;

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

@@ -1,157 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// 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';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../ripple/ripple';
-@use '../../tokens';
-@use './shared';
-// go/keep-sorted end
-
-@mixin theme($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');
-
-  @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');
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$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 {
-    background-color: var(--_container-color);
-    color: var(--_icon-color);
-
-    &:hover {
-      color: var(--_hover-icon-color);
-    }
-
-    &:focus {
-      color: var(--_focus-icon-color);
-    }
-
-    &:active {
-      color: var(--_pressed-icon-color);
-    }
-
-    &:disabled {
-      background-color: var(--_disabled-container-color);
-      color: var(--_disabled-icon-color);
-    }
-
-    @include ripple.theme(
-      (
-        focus-color: var(--_focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  .md3-icon-button--toggle-filled {
-    &:not(:disabled) {
-      background-color: var(--_unselected-container-color);
-      color: var(--_toggle-unselected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-unselected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-unselected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-unselected-pressed-icon-color);
-      }
-    }
-
-    @include ripple.theme(
-      (
-        focus-color: var(--_toggle-unselected-focus-state-layer-color),
-        hover-color: var(--_toggle-unselected-hover-state-layer-color),
-        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
-      )
-    );
-  }
-
-  .md3-icon-button--selected {
-    &:not(:disabled) {
-      background-color: var(--_selected-container-color);
-      color: var(--_toggle-selected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-selected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-selected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-selected-pressed-icon-color);
-      }
-    }
-
-    @include ripple.theme(
-      (
-        focus-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
-      )
-    );
-  }
-}

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

@@ -1,159 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// 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';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../ripple/ripple';
-@use '../../tokens';
-@use './shared';
-// go/keep-sorted end
-
-$_custom-property-prefix: 'filled-tonal-icon-button';
-
-@mixin theme($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');
-
-  @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');
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$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 {
-    background-color: var(--_container-color);
-    color: var(--_icon-color);
-
-    &:hover {
-      color: var(--_hover-icon-color);
-    }
-
-    &:focus {
-      color: var(--_focus-icon-color);
-    }
-
-    &:active {
-      color: var(--_pressed-icon-color);
-    }
-
-    &:disabled {
-      background-color: var(--_disabled-container-color);
-      color: var(--_disabled-icon-color);
-    }
-
-    @include ripple.theme(
-      (
-        focus-color: var(--_focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  .md3-icon-button--toggle-filled-tonal {
-    &:not(:disabled) {
-      background-color: var(--_unselected-container-color);
-      color: var(--_toggle-unselected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-unselected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-unselected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-unselected-pressed-icon-color);
-      }
-    }
-
-    @include ripple.theme(
-      (
-        focus-color: var(--_toggle-unselected-focus-state-layer-color),
-        hover-color: var(--_toggle-unselected-hover-state-layer-color),
-        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
-      )
-    );
-  }
-
-  .md3-icon-button--selected {
-    &:not(:disabled) {
-      background-color: var(--_selected-container-color);
-      color: var(--_toggle-selected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-selected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-selected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-selected-pressed-icon-color);
-      }
-    }
-
-    @include ripple.theme(
-      (
-        focus-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
-      )
-    );
-  }
-}