@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

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

@@ -1,13 +1,105 @@
 //
-// Copyright 2021 Google LLC
+// Copyright 2022 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../ripple/ripple';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+$_custom-property-prefix: 'icon-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-icon-button-values(), $tokens);
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-icon-button-values();
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-icon-button--standard {
+    $touch-target-height: 48px;
     background-color: transparent;
+    color: var(--_unselected-icon-color);
+    height: var(--_state-layer-size);
+    width: var(--_state-layer-size);
+    margin: max(
+      0px,
+      calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
+    );
+
+    @include ripple.theme(
+      (
+        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
+        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
+        pressed-state-layer-opacity:
+          var(--_unselected-pressed-state-layer-opacity),
+      )
+    );
+
+    &:hover {
+      color: var(--_unselected-hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_unselected-focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_unselected-pressed-icon-color);
+    }
+
+    &:disabled {
+      color: var(--_disabled-icon-color);
+    }
+  }
+
+  .md3-icon-button--on {
+    &: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(
+      (
+        focus-state-layer-color: var(--_selected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
+        hover-state-layer-color: var(--_selected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
+        pressed-state-layer-opacity:
+          var(--_selected-pressed-state-layer-opacity),
+      )
+    );
   }
 }

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 `.md3-icon-button--filled{height:var(--md-filled-icon-button-container-size, 40px);width:var(--md-filled-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-icon-button-container-shape, 9999px);font-size:var(--md-filled-icon-button-icon-size, 24px);color:var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-focus-state-layer-opacity:var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-opacity:var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-opacity:var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled i,.md3-icon-button--filled svg,.md3-icon-button--filled img{height:var(--md-filled-icon-button-icon-size, 24px);width:var(--md-filled-icon-button-icon-size, 24px)}.md3-icon-button--filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled:focus{color:var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:hover{color:var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:not(:disabled):active{color:var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--toggle-filled{color:var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--toggle-filled:focus{color:var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:hover{color:var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--on{color:var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--on:focus{color:var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:hover{color:var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# 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, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 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-variant, #e7e0ec))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-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-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-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--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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`.md3-icon-button--filled{height:var(--md-filled-icon-button-container-size, 40px);width:var(--md-filled-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-icon-button-container-shape, 9999px);font-size:var(--md-filled-icon-button-icon-size, 24px);color:var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-focus-state-layer-opacity:var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-opacity:var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-opacity:var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled i,.md3-icon-button--filled svg,.md3-icon-button--filled img{height:var(--md-filled-icon-button-icon-size, 24px);width:var(--md-filled-icon-button-icon-size, 24px)}.md3-icon-button--filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled:focus{color:var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:hover{color:var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:not(:disabled):active{color:var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--toggle-filled{color:var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--toggle-filled:focus{color:var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:hover{color:var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--on{color:var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--on:focus{color:var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:hover{color:var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
+{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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{--_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, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 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-variant, #e7e0ec))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-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-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-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--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}

package/iconbutton/lib/filled-styles.scss

@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './filled-icon-button';
-@use './filled-icon-button-theme';
-
-@include filled-icon-button.static-styles();
 
-.md3-icon-button--filled {
-  @include filled-icon-button-theme.theme-styles(
-    filled-icon-button-theme.$light-theme
-  );
-}
+@include filled-icon-button.styles;

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `.md3-icon-button--filled-tonal{height:var(--md-filled-tonal-icon-button-container-size, 40px);width:var(--md-filled-tonal-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-tonal-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-tonal-icon-button-container-shape, 9999px);font-size:var(--md-filled-tonal-icon-button-icon-size, 24px);color:var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-focus-state-layer-opacity:var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-opacity:var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-opacity:var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled-tonal i,.md3-icon-button--filled-tonal svg,.md3-icon-button--filled-tonal img{height:var(--md-filled-tonal-icon-button-icon-size, 24px);width:var(--md-filled-tonal-icon-button-icon-size, 24px)}.md3-icon-button--filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal:focus{color:var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:hover{color:var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal{color:var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));background-color:var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:focus{color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:hover{color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--on{color:var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--on:focus{color:var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:hover{color:var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# sourceMappingURL=filled-tonal-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-shape: var(--md-filled-tonal-icon-button-container-shape, 9999px);--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-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-tonal{--md-ripple-focus-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */
 `;
 //# sourceMappingURL=filled-tonal-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filled-tonal-styles.css.js","sourceRoot":"","sources":["filled-tonal-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`.md3-icon-button--filled-tonal{height:var(--md-filled-tonal-icon-button-container-size, 40px);width:var(--md-filled-tonal-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-tonal-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-tonal-icon-button-container-shape, 9999px);font-size:var(--md-filled-tonal-icon-button-icon-size, 24px);color:var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-focus-state-layer-opacity:var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-opacity:var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-opacity:var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled-tonal i,.md3-icon-button--filled-tonal svg,.md3-icon-button--filled-tonal img{height:var(--md-filled-tonal-icon-button-icon-size, 24px);width:var(--md-filled-tonal-icon-button-icon-size, 24px)}.md3-icon-button--filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal:focus{color:var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:hover{color:var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal{color:var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));background-color:var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:focus{color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:hover{color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--on{color:var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--on:focus{color:var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:hover{color:var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}
+{"version":3,"file":"filled-tonal-styles.css.js","sourceRoot":"","sources":["filled-tonal-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{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-shape: var(--md-filled-tonal-icon-button-container-shape, 9999px);--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-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-tonal{--md-ripple-focus-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}

package/iconbutton/lib/filled-tonal-styles.scss

@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './filled-tonal-icon-button';
-@use './filled-tonal-icon-button-theme';
-
-@include filled-tonal-icon-button.static-styles();
 
-.md3-icon-button--filled-tonal {
-  @include filled-tonal-icon-button-theme.theme-styles(
-    filled-tonal-icon-button-theme.$light-theme
-  );
-}
+@include filled-tonal-icon-button.styles;

package/iconbutton/lib/icon-button-toggle.d.ts

@@ -3,42 +3,61 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ActionElement, BeginPressConfig, EndPressConfig } from '@material/web/actionelement/action-element.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
-import { TemplateResult } from 'lit';
+import '../../focus/focus-ring.js';
+import '../../icon/icon.js';
+import '../../ripple/ripple.js';
+import { LitElement, TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
-export declare abstract class IconButtonToggle extends ActionElement {
-    /** @soyPrefixAttribute */
+import { MdRipple } from '../../ripple/ripple.js';
+/**
+ * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}
+ * Dispatched whenever `selected` is changed via user click
+ */
+export declare class IconButtonToggle extends LitElement {
     ariaLabel: string;
+    /**
+     * Disables the icon button and makes it non-interactive.
+     */
     disabled: boolean;
+    /**
+     * The glyph of the icon to display from the applied icon font when toggle
+     * button is selected or "on". See the associated typography tokens for more
+     * info.
+     */
     onIcon: string;
+    /**
+     * The glyph of the icon to display from the applied icon font when toggle
+     * button is not selected or "off". See the associated typography tokens for
+     * more info.
+     */
     offIcon: string;
+    /**
+     * The `aria-label` of the button when the toggle button is selected or "on".
+     */
     ariaLabelOn: string;
+    /**
+     * The `aria-label` of the button when the toggle button is not selected or
+     * "off".
+     */
     ariaLabelOff: string;
-    isOn: boolean;
-    ripple: MdRipple;
+    /**
+     * Sets the toggle button to the "on" state and displays the `onIcon`. If
+     * false, sets the toggle button to the "off" state and displays the
+     * `offIcon`.
+     */
+    selected: boolean;
+    ripple: Promise<MdRipple | null>;
     protected showFocusRing: boolean;
-    protected readonly rippleElementTag: import("lit-html/static").StaticValue;
-    protected readonly focusElementTag: import("lit-html/static").StaticValue;
-    protected readonly iconElementTag: import("lit-html/static").StaticValue;
-    beginPress({ positionEvent }: BeginPressConfig): void;
-    endPress({ cancelled }: EndPressConfig): void;
-    /** @soyTemplate */
-    protected renderRipple(): TemplateResult;
-    /** @soyTemplate */
+    protected showRipple: boolean;
+    protected readonly getRipple: () => Promise<MdRipple>;
+    protected readonly renderRipple: () => TemplateResult<1>;
     protected render(): TemplateResult;
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
     protected renderIcon(icon: string): TemplateResult | string;
-    /** @soyTemplate */
     protected renderTouchTarget(): TemplateResult;
-    /** @soyTemplate */
     protected renderFocusRing(): TemplateResult;
-    handlePointerDown(e: PointerEvent): void;
-    protected handlePointerEnter(e: PointerEvent): void;
-    handlePointerLeave(e: PointerEvent): void;
+    protected handlePointerDown(e: PointerEvent): void;
     protected handleFocus(): void;
     protected handleBlur(): void;
+    protected handleClick(): void;
 }

package/iconbutton/lib/icon-button-toggle.js

@@ -4,51 +4,63 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { ActionElement } from '@material/web/actionelement/action-element.js';
-import { ariaProperty } from '@material/web/decorators/aria-property.js';
-import { pointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
-import { html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+// Required for @ariaProperty
+// tslint:disable:no-new-decorators
+import '../../focus/focus-ring.js';
+import '../../icon/icon.js';
+import '../../ripple/ripple.js';
+import { html, LitElement } from 'lit';
+import { property, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { html as staticHtml, literal } from 'lit/static-html.js';
-/** @soyCompatible */
-export class IconButtonToggle extends ActionElement {
+import { when } from 'lit/directives/when.js';
+import { ariaProperty } from '../../decorators/aria-property.js';
+import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
+import { ripple } from '../../ripple/directive.js';
+/**
+ * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}
+ * Dispatched whenever `selected` is changed via user click
+ */
+export class IconButtonToggle extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * Disables the icon button and makes it non-interactive.
+         */
         this.disabled = false;
+        /**
+         * The glyph of the icon to display from the applied icon font when toggle
+         * button is selected or "on". See the associated typography tokens for more
+         * info.
+         */
         this.onIcon = '';
+        /**
+         * The glyph of the icon to display from the applied icon font when toggle
+         * button is not selected or "off". See the associated typography tokens for
+         * more info.
+         */
         this.offIcon = '';
-        this.isOn = false;
+        /**
+         * Sets the toggle button to the "on" state and displays the `onIcon`. If
+         * false, sets the toggle button to the "off" state and displays the
+         * `offIcon`.
+         */
+        this.selected = false;
         this.showFocusRing = false;
-        this.rippleElementTag = literal `md-ripple`;
-        this.focusElementTag = literal `md-focus-ring`;
-        this.iconElementTag = literal `md-icon`;
-    }
-    beginPress({ positionEvent }) {
-        this.ripple.beginPress(positionEvent);
-    }
-    endPress({ cancelled }) {
-        this.ripple.endPress();
-        if (cancelled) {
-            return;
-        }
-        this.isOn = !this.isOn;
-        const detail = { isOn: this.isOn };
-        this.dispatchEvent(new CustomEvent('icon-button-toggle-change', { detail, bubbles: true, composed: true }));
-        super.endPress({ cancelled, actionData: detail });
-    }
-    /** @soyTemplate */
-    renderRipple() {
-        return staticHtml `<${this.rippleElementTag} ?disabled="${this.disabled}" unbounded> </${this.rippleElementTag}>`;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            return html `<md-ripple ?disabled="${this.disabled}" unbounded></md-ripple>`;
+        };
     }
-    /** @soyTemplate */
     render() {
         const hasToggledAriaLabel = this.ariaLabelOn && this.ariaLabelOff;
-        const ariaPressedValue = hasToggledAriaLabel ? undefined : this.isOn;
+        const ariaPressedValue = hasToggledAriaLabel ? undefined : this.selected;
         const ariaLabelValue = hasToggledAriaLabel ?
-            (this.isOn ? this.ariaLabelOn : this.ariaLabelOff) :
+            (this.selected ? this.ariaLabelOn : this.ariaLabelOff) :
             this.ariaLabel;
         return html `<button
           class="md3-icon-button ${classMap(this.getRenderClasses())}"
@@ -58,14 +70,10 @@ export class IconButtonToggle extends ActionElement {
           @focus="${this.handleFocus}"
           @blur="${this.handleBlur}"
           @pointerdown="${this.handlePointerDown}"
-          @pointerup="${this.handlePointerUp}"
-          @pointercancel="${this.handlePointerCancel}"
-          @pointerleave="${this.handlePointerLeave}"
-          @pointerenter="${this.handlePointerEnter}"
           @click="${this.handleClick}"
-          @contextmenu="${this.handleContextMenu}">
+          ${ripple(this.getRipple)}>
         ${this.renderFocusRing()}
-        ${this.renderRipple()}
+        ${when(this.showRipple, this.renderRipple)}
         ${this.renderTouchTarget()}
         <span class="md3-icon-button__icon">
           <slot name="offIcon">${this.renderIcon(this.offIcon)}</slot>
@@ -75,49 +83,39 @@ export class IconButtonToggle extends ActionElement {
         </span>
       </button>`;
     }
-    /** @soyTemplate */
     getRenderClasses() {
         return {
-            'md3-icon-button--on': this.isOn,
+            'md3-icon-button--on': this.selected,
         };
     }
-    /** @soyTemplate */
     renderIcon(icon) {
-        return icon ?
-            staticHtml `<${this.iconElementTag}>${icon}</${this.iconElementTag}>` :
-            '';
+        return icon ? html `<md-icon>${icon}</md-icon>` : '';
     }
-    /** @soyTemplate */
     renderTouchTarget() {
         return html `<span class="md3-icon-button__touch"></span>`;
     }
-    /** @soyTemplate */
     renderFocusRing() {
-        return staticHtml `<${this.focusElementTag} .visible="${this.showFocusRing}"></${this.focusElementTag}>`;
+        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
     }
     handlePointerDown(e) {
-        super.handlePointerDown(e);
         pointerPress();
         this.showFocusRing = shouldShowStrongFocus();
     }
-    handlePointerEnter(e) {
-        this.ripple.beginHover(e);
-    }
-    handlePointerLeave(e) {
-        super.handlePointerLeave(e);
-        this.ripple.endHover();
-    }
     handleFocus() {
         this.showFocusRing = shouldShowStrongFocus();
     }
     handleBlur() {
         this.showFocusRing = false;
     }
+    handleClick() {
+        this.selected = !this.selected;
+        const detail = { selected: this.selected };
+        this.dispatchEvent(new CustomEvent('icon-button-toggle-change', { detail, bubbles: true, composed: true }));
+    }
 }
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'aria-label' }),
+    ariaProperty,
+    property({ type: String, attribute: 'data-aria-label' }),
     __metadata("design:type", String)
 ], IconButtonToggle.prototype, "ariaLabel", void 0);
 __decorate([
@@ -143,13 +141,17 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
-], IconButtonToggle.prototype, "isOn", void 0);
+], IconButtonToggle.prototype, "selected", void 0);
 __decorate([
-    query('md-ripple'),
-    __metadata("design:type", MdRipple)
+    queryAsync('md-ripple'),
+    __metadata("design:type", Promise)
 ], IconButtonToggle.prototype, "ripple", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], IconButtonToggle.prototype, "showFocusRing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], IconButtonToggle.prototype, "showRipple", void 0);
 //# sourceMappingURL=icon-button-toggle.js.map