@material/web 1.0.0-pre.8 → 1.0.0

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

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { IconButton } from './lib/icon-button.js';
+import { IconButton } from './internal/icon-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-filled-tonal-icon-button': MdFilledTonalIconButton;
@@ -27,9 +27,9 @@ declare global {
 export declare class MdFilledTonalIconButton extends IconButton {
     static styles: import("lit").CSSResult[];
     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;
+        'filled-tonal': boolean;
+        'toggle-filled-tonal': boolean;
+        'flip-icon': boolean;
+        selected: boolean;
     };
 }

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

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles } from './lib/filled-tonal-styles.css.js';
-import { IconButton } from './lib/icon-button.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { styles } from './internal/filled-tonal-styles.css.js';
+import { IconButton } from './internal/icon-button.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Icon buttons help people take supplementary actions with a single
  * tap.
@@ -23,12 +23,12 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
  * - Add to Favorites
  * - Print
  */
-let MdFilledTonalIconButton = class MdFilledTonalIconButton extends IconButton {
+export let MdFilledTonalIconButton = class MdFilledTonalIconButton extends IconButton {
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),
-            'md3-icon-button--filled-tonal': true,
-            'md3-icon-button--toggle-filled-tonal': this.toggle,
+            'filled-tonal': true,
+            'toggle-filled-tonal': this.toggle,
         };
     }
 };
@@ -36,5 +36,4 @@ MdFilledTonalIconButton.styles = [sharedStyles, styles];
 MdFilledTonalIconButton = __decorate([
     customElement('md-filled-tonal-icon-button')
 ], MdFilledTonalIconButton);
-export { MdFilledTonalIconButton };
 //# sourceMappingURL=filled-tonal-icon-button.js.map

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;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"]}
+{"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,uCAAuC,CAAC;AAC7D,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;GAcG;AAEI,WAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAGlC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,cAAc,EAAE,IAAI;YACpB,qBAAqB,EAAE,IAAI,CAAC,MAAM;SACnC,CAAC;IACJ,CAAC;;AARe,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,AAAzB,CAA0B;AADrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAUnC","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 './internal/filled-tonal-styles.css.js';\nimport {IconButton} from './internal/icon-button.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button': MdFilledTonalIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-tonal-icon-button')\nexport class MdFilledTonalIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'filled-tonal': true,\n      'toggle-filled-tonal': this.toggle,\n    };\n  }\n}\n"]}

package/iconbutton/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { IconButton } from './lib/icon-button.js';
+import { IconButton } from './internal/icon-button.js';
 /**
  * Test harness for icon buttons.
  */

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,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"]}
+{"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 './internal/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/icon-button.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { IconButton } from './internal/icon-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-icon-button': MdIconButton;
+    }
+}
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
+export declare class MdIconButton extends IconButton {
+    static styles: import("lit").CSSResult[];
+    protected getRenderClasses(): {
+        standard: boolean;
+        'flip-icon': boolean;
+        selected: boolean;
+    };
+}

package/iconbutton/icon-button.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { IconButton } from './internal/icon-button.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+import { styles } from './internal/standard-styles.css.js';
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
+export let MdIconButton = class MdIconButton extends IconButton {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'standard': true,
+        };
+    }
+};
+MdIconButton.styles = [sharedStyles, styles];
+MdIconButton = __decorate([
+    customElement('md-icon-button')
+], MdIconButton);
+//# sourceMappingURL=icon-button.js.map

package/iconbutton/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,mCAAmC,CAAC;AAQzD;;;;;;;;;;;;;;GAcG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAGvB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,UAAU,EAAE,IAAI;SACjB,CAAC;IACJ,CAAC;;AAPe,mBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,AAAzB,CAA0B;AADrC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CASxB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {IconButton} from './internal/icon-button.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles} from './internal/standard-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon-button': MdIconButton;\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-icon-button')\nexport class MdIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'standard': true,\n    };\n  }\n}\n"]}

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

@@ -0,0 +1,171 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../ripple/ripple';
+@use '../../tokens';
+// 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'
+    )
+  );
+
+  @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();
+
+  :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)
+    );
+  }
+
+  .icon-button {
+    color: var(--_icon-color);
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:disabled {
+      color: var(--_disabled-icon-color);
+    }
+
+    @include ripple.theme(
+      (
+        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),
+      )
+    );
+  }
+
+  .icon-button::before {
+    // Background color, separate node for opacity changes
+    background-color: var(--_container-color);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    z-index: -1; // place behind content
+  }
+
+  .icon-button:disabled::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .icon-button:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .toggle-filled {
+    &:not(:disabled) {
+      color: var(--_toggle-icon-color);
+
+      &:hover {
+        color: var(--_toggle-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_toggle-hover-state-layer-color),
+        pressed-color: var(--_toggle-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .toggle-filled:not(:disabled)::before {
+    // Note: filled icon buttons have three container colors,
+    // "container-color" for regular, then selected/unselected for toggle.
+    background-color: var(--_unselected-container-color);
+  }
+
+  .selected {
+    &:not(:disabled) {
+      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(
+      (
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .selected:not(:disabled)::before {
+    background-color: var(--_selected-container-color);
+  }
+}

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

@@ -0,0 +1,173 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../ripple/ripple';
+@use '../../tokens';
+// 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'
+    )
+  );
+
+  @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();
+
+  :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)
+    );
+  }
+
+  .icon-button {
+    color: var(--_icon-color);
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:disabled {
+      color: var(--_disabled-icon-color);
+    }
+
+    @include ripple.theme(
+      (
+        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),
+      )
+    );
+  }
+
+  .icon-button::before {
+    // Background color, separate node for opacity changes
+    background-color: var(--_container-color);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    z-index: -1; // place behind content
+  }
+
+  .icon-button:disabled::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .icon-button:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .toggle-filled-tonal {
+    &:not(:disabled) {
+      color: var(--_toggle-icon-color);
+
+      &:hover {
+        color: var(--_toggle-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_toggle-hover-state-layer-color),
+        pressed-color: var(--_toggle-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .toggle-filled-tonal:not(:disabled)::before {
+    // Note: filled tonal icon buttons have three container colors,
+    // "container-color" for regular, then selected/unselected for toggle.
+    background-color: var(--_unselected-container-color);
+  }
+
+  .selected {
+    &:not(:disabled) {
+      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(
+      (
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .selected:not(:disabled)::before {
+    background-color: var(--_selected-container-color);
+  }
+}

package/iconbutton/internal/_icon-button.scss

@@ -0,0 +1,131 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// 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 '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-icon-button-supported-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();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-icon-button-#{$token}, #{$value});
+    }
+
+    // These custom properties are not used, so set defaults so token tests pass
+    // for <md-icon-button>.
+    --_container-shape-start-start: 0;
+    --_container-shape-start-end: 0;
+    --_container-shape-end-end: 0;
+    --_container-shape-end-start: 0;
+    --_container-height: 0;
+    --_container-width: 0;
+
+    height: var(--_state-layer-height);
+    width: var(--_state-layer-width);
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_state-layer-height))/2)
+      max(0px, (48px - var(--_state-layer-width))/2);
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_state-layer-shape),
+        'shape-start-end': var(--_state-layer-shape),
+        'shape-end-end': var(--_state-layer-shape),
+        'shape-end-start': var(--_state-layer-shape),
+      )
+    );
+  }
+
+  .standard {
+    background-color: transparent;
+    color: var(--_icon-color);
+
+    @include ripple.theme(
+      (
+        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),
+      )
+    );
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:disabled {
+      color: var(--_disabled-icon-color);
+    }
+  }
+
+  md-ripple {
+    border-radius: var(--_state-layer-shape);
+  }
+
+  .standard:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .selected {
+    &:not(:disabled) {
+      color: var(--_selected-icon-color);
+
+      &:hover {
+        color: var(--_selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+      )
+    );
+  }
+}