@material/web 1.0.0-pre.0 → 1.0.0-pre.2

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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 */
+export const styles = css `:host{--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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--selected{--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--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map

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`:host{--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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 "]}
+{"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-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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--selected{--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--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}

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 `:host{--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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 */
+export const styles = css `:host{--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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--selected{--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--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-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`:host{--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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 "]}
+{"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-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_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));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.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--selected{--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--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}

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

@@ -6,58 +6,29 @@
 import '../../focus/focus-ring.js';
 import '../../icon/icon.js';
 import '../../ripple/ripple.js';
-import { LitElement, TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
-import { MdRipple } from '../../ripple/ripple.js';
+import { IconButton } from './icon-button.js';
 /**
- * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}
+ * @fires change {Event}
+ * Dispatched whenever `selected` is changed via user click
+ *
+ * @fires input {InputEvent}
  * 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;
+export declare class IconButtonToggle extends IconButton {
     /**
-     * The `aria-label` of the button when the toggle button is not selected or
-     * "off".
+     * The `aria-label` of the button when the toggle button is selected.
      */
-    ariaLabelOff: string;
+    ariaLabelSelected: string;
     /**
-     * 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`.
+     * Sets the selected state. When false, displays the default icon. When true,
+     * displays the `selectedIcon`, or the default icon If no `selectedIcon` is
+     * provided.
      */
     selected: boolean;
-    ripple: Promise<MdRipple | null>;
-    protected showFocusRing: boolean;
-    protected showRipple: boolean;
-    protected readonly getRipple: () => Promise<MdRipple>;
-    protected readonly renderRipple: () => TemplateResult<1>;
     protected render(): TemplateResult;
+    protected renderSelectedIcon(): TemplateResult<1>;
     protected getRenderClasses(): ClassInfo;
-    protected renderIcon(icon: string): TemplateResult | string;
-    protected renderTouchTarget(): TemplateResult;
-    protected renderFocusRing(): TemplateResult;
-    protected handlePointerDown(e: PointerEvent): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
     protected handleClick(): void;
 }

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

@@ -9,63 +9,39 @@ import { __decorate, __metadata } from "tslib";
 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 { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 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';
+import { IconButton } from './icon-button.js';
 /**
- * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}
+ * @fires change {Event}
+ * Dispatched whenever `selected` is changed via user click
+ *
+ * @fires input {InputEvent}
  * Dispatched whenever `selected` is changed via user click
  */
-export class IconButtonToggle extends LitElement {
+export class IconButtonToggle extends IconButton {
     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 = '';
-        /**
-         * 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`.
+         * Sets the selected state. When false, displays the default icon. When true,
+         * displays the `selectedIcon`, or the default icon If no `selectedIcon` is
+         * provided.
          */
         this.selected = false;
-        this.showFocusRing = false;
-        this.showRipple = false;
-        this.getRipple = () => {
-            this.showRipple = true;
-            return this.ripple;
-        };
-        this.renderRipple = () => {
-            return html `<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
-        };
     }
     render() {
-        const hasToggledAriaLabel = this.ariaLabelOn && this.ariaLabelOff;
-        const ariaPressedValue = hasToggledAriaLabel ? undefined : this.selected;
-        const ariaLabelValue = hasToggledAriaLabel ?
-            (this.selected ? this.ariaLabelOn : this.ariaLabelOff) :
+        const hasToggledAriaLabel = this.ariaLabel && this.ariaLabelSelected;
+        const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;
+        const ariaLabelValue = (hasToggledAriaLabel && this.selected) ?
+            this.ariaLabelSelected :
             this.ariaLabel;
         return html `<button
           class="md3-icon-button ${classMap(this.getRenderClasses())}"
-          aria-pressed="${ifDefined(ariaPressedValue)}"
-          aria-label="${ifDefined(ariaLabelValue)}"
+          aria-pressed="${ariaPressedValue}"
+          aria-label="${ariaLabelValue || nothing}"
           ?disabled="${this.disabled}"
           @focus="${this.handleFocus}"
           @blur="${this.handleBlur}"
@@ -75,83 +51,37 @@ export class IconButtonToggle extends LitElement {
         ${this.renderFocusRing()}
         ${when(this.showRipple, this.renderRipple)}
         ${this.renderTouchTarget()}
-        <span class="md3-icon-button__icon">
-          <slot name="offIcon">${this.renderIcon(this.offIcon)}</slot>
-        </span>
-        <span class="md3-icon-button__icon md3-icon-button__icon--on">
-          <slot name="onIcon">${this.renderIcon(this.onIcon)}</slot>
-        </span>
+        ${!this.selected ? this.renderIcon() : nothing}
+        ${this.selected ? this.renderSelectedIcon() : nothing}
       </button>`;
     }
+    renderSelectedIcon() {
+        // Use default slot as fallback to not require specifying multiple icons
+        return html `<md-icon class="md3-icon-button__icon md3-icon-button__icon--selected"><slot name="selectedIcon"><slot></slot></slot></md-icon>`;
+    }
     getRenderClasses() {
         return {
-            'md3-icon-button--on': this.selected,
+            ...super.getRenderClasses(),
+            'md3-icon-button--selected': this.selected,
         };
     }
-    renderIcon(icon) {
-        return icon ? html `<md-icon>${icon}</md-icon>` : '';
-    }
-    renderTouchTarget() {
-        return html `<span class="md3-icon-button__touch"></span>`;
-    }
-    renderFocusRing() {
-        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
-    }
-    handlePointerDown(e) {
-        pointerPress();
-        this.showFocusRing = shouldShowStrongFocus();
-    }
-    handleFocus() {
-        this.showFocusRing = shouldShowStrongFocus();
-    }
-    handleBlur() {
-        this.showFocusRing = false;
-    }
     handleClick() {
+        if (this.disabled) {
+            return;
+        }
         this.selected = !this.selected;
-        const detail = { selected: this.selected };
-        this.dispatchEvent(new CustomEvent('icon-button-toggle-change', { detail, bubbles: true, composed: true }));
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        // Bubbles but does not compose to mimic native browser <input> & <select>
+        // Additionally, native change event is not an InputEvent.
+        this.dispatchEvent(new Event('change', { bubbles: true }));
     }
 }
-__decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-label' }),
-    __metadata("design:type", String)
-], IconButtonToggle.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], IconButtonToggle.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], IconButtonToggle.prototype, "onIcon", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], IconButtonToggle.prototype, "offIcon", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], IconButtonToggle.prototype, "ariaLabelOn", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], IconButtonToggle.prototype, "ariaLabelOff", void 0);
+], IconButtonToggle.prototype, "ariaLabelSelected", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], IconButtonToggle.prototype, "selected", void 0);
-__decorate([
-    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

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button-toggle.js","sourceRoot":"","sources":["icon-button-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}\n * Dispatched whenever `selected` is changed via user click\n */\nexport class IconButtonToggle extends LitElement {\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label'})\n  override ariaLabel!: string;\n\n  /**\n   * Disables the icon button and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The glyph of the icon to display from the applied icon font when toggle\n   * button is selected or \"on\". See the associated typography tokens for more\n   * info.\n   */\n  @property({type: String}) onIcon = '';\n\n  /**\n   * The glyph of the icon to display from the applied icon font when toggle\n   * button is not selected or \"off\". See the associated typography tokens for\n   * more info.\n   */\n  @property({type: String}) offIcon = '';\n\n  /**\n   * The `aria-label` of the button when the toggle button is selected or \"on\".\n   */\n  @property({type: String}) ariaLabelOn!: string;\n\n  /**\n   * The `aria-label` of the button when the toggle button is not selected or\n   * \"off\".\n   */\n  @property({type: String}) ariaLabelOff!: string;\n\n  /**\n   * Sets the toggle button to the \"on\" state and displays the `onIcon`. If\n   * false, sets the toggle button to the \"off\" state and displays the\n   * `offIcon`.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @queryAsync('md-ripple') ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected readonly renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n  };\n\n  protected override render(): TemplateResult {\n    const hasToggledAriaLabel = this.ariaLabelOn && this.ariaLabelOff;\n    const ariaPressedValue = hasToggledAriaLabel ? undefined : this.selected;\n    const ariaLabelValue = hasToggledAriaLabel ?\n        (this.selected ? this.ariaLabelOn : this.ariaLabelOff) :\n        this.ariaLabel;\n    return html`<button\n          class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n          aria-pressed=\"${ifDefined(ariaPressedValue)}\"\n          aria-label=\"${ifDefined(ariaLabelValue)}\"\n          ?disabled=\"${this.disabled}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerdown=\"${this.handlePointerDown}\"\n          @click=\"${this.handleClick}\"\n          ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderTouchTarget()}\n        <span class=\"md3-icon-button__icon\">\n          <slot name=\"offIcon\">${this.renderIcon(this.offIcon)}</slot>\n        </span>\n        <span class=\"md3-icon-button__icon md3-icon-button__icon--on\">\n          <slot name=\"onIcon\">${this.renderIcon(this.onIcon)}</slot>\n        </span>\n      </button>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-icon-button--on': this.selected,\n    };\n  }\n\n  protected renderIcon(icon: string): TemplateResult|string {\n    return icon ? html`<md-icon>${icon}</md-icon>` : '';\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`<span class=\"md3-icon-button__touch\"></span>`;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  protected handlePointerDown(e: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  protected handleClick() {\n    this.selected = !this.selected;\n    const detail = {selected: this.selected};\n    this.dispatchEvent(new CustomEvent(\n        'icon-button-toggle-change', {detail, bubbles: true, composed: true}));\n  }\n}\n"]}
+{"version":3,"file":"icon-button-toggle.js","sourceRoot":"","sources":["icon-button-toggle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,6BAA6B;AAC7B,mCAAmC;AAEnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAEjD,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAME;;;;WAIG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAkD7D,CAAC;IAhDoB,MAAM;QACvB,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC;QACrE,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACvE,MAAM,cAAc,GAAG,CAAC,mBAAmB,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC3D,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxB,IAAI,CAAC,SAAS,CAAC;QACnB,OAAO,IAAI,CAAA;mCACoB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;0BAC1C,gBAAgB;wBAClB,cAAc,IAAI,OAAO;uBAC1B,IAAI,CAAC,QAAQ;oBAChB,IAAI,CAAC,WAAW;mBACjB,IAAI,CAAC,UAAU;0BACR,IAAI,CAAC,iBAAiB;oBAC5B,IAAI,CAAC,WAAW;YACxB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;UACxB,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;UACxC,IAAI,CAAC,iBAAiB,EAAE;UACxB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,OAAO;UAC5C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO;gBAC7C,CAAC;IACf,CAAC;IAES,kBAAkB;QAC1B,wEAAwE;QACxE,OAAO,IAAI,CAAA,iIAAiI,CAAC;IAC/I,CAAC;IAEkB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,2BAA2B,EAAE,IAAI,CAAC,QAAQ;SAC3C,CAAC;IACJ,CAAC;IAES,WAAW;QACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CACd,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QAC9D,0EAA0E;QAC1E,0DAA0D;QAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC3D,CAAC;CACF;AAzD2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;2DAA4B;AAOX;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;kDAAkB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ripple} from '../../ripple/directive.js';\n\nimport {IconButton} from './icon-button.js';\n\n/**\n * @fires change {Event}\n * Dispatched whenever `selected` is changed via user click\n *\n * @fires input {InputEvent}\n * Dispatched whenever `selected` is changed via user click\n */\nexport class IconButtonToggle extends IconButton {\n  /**\n   * The `aria-label` of the button when the toggle button is selected.\n   */\n  @property({type: String}) ariaLabelSelected!: string;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the `selectedIcon`, or the default icon If no `selectedIcon` is\n   * provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  protected override render(): TemplateResult {\n    const hasToggledAriaLabel = this.ariaLabel && this.ariaLabelSelected;\n    const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;\n    const ariaLabelValue = (hasToggledAriaLabel && this.selected) ?\n        this.ariaLabelSelected :\n        this.ariaLabel;\n    return html`<button\n          class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n          aria-pressed=\"${ariaPressedValue}\"\n          aria-label=\"${ariaLabelValue || nothing}\"\n          ?disabled=\"${this.disabled}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerdown=\"${this.handlePointerDown}\"\n          @click=\"${this.handleClick}\"\n          ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderTouchTarget()}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n      </button>`;\n  }\n\n  protected renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<md-icon class=\"md3-icon-button__icon md3-icon-button__icon--selected\"><slot name=\"selectedIcon\"><slot></slot></slot></md-icon>`;\n  }\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--selected': this.selected,\n    };\n  }\n\n  protected handleClick() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(\n        new InputEvent('input', {bubbles: true, composed: true}));\n    // Bubbles but does not compose to mimic native browser <input> & <select>\n    // Additionally, native change event is not an InputEvent.\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}

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

@@ -11,12 +11,10 @@ import { ClassInfo } from 'lit/directives/class-map.js';
 import { MdRipple } from '../../ripple/ripple.js';
 import { ARIAHasPopup } from '../../types/aria.js';
 export declare class IconButton extends LitElement {
-    disabled: boolean;
     /**
-     * The glyph of the icon to display from the applied icon font. See the
-     * associated typography tokens for more info.
+     * Disables the icon button and makes it non-interactive.
      */
-    icon: string;
+    disabled: boolean;
     /**
      * Flips the icon if it is in an RTL context at startup.
      */

package/iconbutton/lib/icon-button.js

@@ -22,12 +22,10 @@ import { ripple } from '../../ripple/directive.js';
 export class IconButton extends LitElement {
     constructor() {
         super(...arguments);
-        this.disabled = false;
         /**
-         * The glyph of the icon to display from the applied icon font. See the
-         * associated typography tokens for more info.
+         * Disables the icon button and makes it non-interactive.
          */
-        this.icon = '';
+        this.disabled = false;
         /**
          * Flips the icon if it is in an RTL context at startup.
          */
@@ -67,7 +65,7 @@ export class IconButton extends LitElement {
     renderIcon() {
         // Note, it's important not to render the icon property as a slot fallback
         // to avoid any whitespace from overridding it.
-        return html `<span class="md3-icon-button__icon"><md-icon>${this.icon ? this.icon : html `<slot></slot>`}</md-icon></span>`;
+        return html `<md-icon class="md3-icon-button__icon"><slot></slot></md-icon>`;
     }
     renderTouchTarget() {
         return html `<span class="md3-icon-button__touch"></span>`;
@@ -94,10 +92,6 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], IconButton.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], IconButton.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The glyph of the icon to display from the applied icon font. See the\n   * associated typography tokens for more info.\n   */\n  @property({type: String}) icon = '';\n\n  /**\n   * Flips the icon if it is in an RTL context at startup.\n   */\n  @property({type: Boolean}) flipIconInRtl = false;\n\n  @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label'})\n  override ariaLabel!: string;\n\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-haspopup'})\n  override ariaHasPopup!: ARIAHasPopup;\n\n  @query('button') protected buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected readonly renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n  };\n\n  protected override render(): TemplateResult {\n    return html`<button\n        class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n        ?disabled=\"${this.disabled}\"\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderIcon()}\n        ${this.renderTouchTarget()}\n  </button>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-icon-button--flip-icon': this.flipIcon,\n    };\n  }\n\n  protected renderIcon(): TemplateResult {\n    // Note, it's important not to render the icon property as a slot fallback\n    // to avoid any whitespace from overridding it.\n    return html`<span class=\"md3-icon-button__icon\"><md-icon>${\n        this.icon ? this.icon : html`<slot></slot>`}</md-icon></span>`;\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`<span class=\"md3-icon-button__touch\"></span>`;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n\n  handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n  /**\n   * Disables the icon button and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Flips the icon if it is in an RTL context at startup.\n   */\n  @property({type: Boolean}) flipIconInRtl = false;\n\n  @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label'})\n  override ariaLabel!: string;\n\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-haspopup'})\n  override ariaHasPopup!: ARIAHasPopup;\n\n  @query('button') protected buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected readonly renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n  };\n\n  protected override render(): TemplateResult {\n    return html`<button\n        class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n        ?disabled=\"${this.disabled}\"\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderIcon()}\n        ${this.renderTouchTarget()}\n  </button>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-icon-button--flip-icon': this.flipIcon,\n    };\n  }\n\n  protected renderIcon(): TemplateResult {\n    // Note, it's important not to render the icon property as a slot fallback\n    // to avoid any whitespace from overridding it.\n    return html`<md-icon class=\"md3-icon-button__icon\"><slot></slot></md-icon>`;\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`<span class=\"md3-icon-button__touch\"></span>`;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n\n  handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n}\n"]}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, 9999px);--_container-size: var(--md-outlined-icon-button-container-size, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-outline-color: var(--md-outlined-icon-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-unselected-outline-color: var(--md-outlined-icon-button-disabled-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-unselected-outline-opacity: var(--md-outlined-icon-button-disabled-unselected-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-outlined-icon-button-focus-state-layer-opacity, 0.08);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #313033));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-focus-state-layer-color: var(--md-outlined-icon-button-selected-focus-state-layer-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_unselected-focus-icon-color: var(--md-outlined-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-color: var(--md-outlined-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-outlined-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-color: var(--md-outlined-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-icon-color: var(--md-outlined-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-color: var(--md-outlined-icon-button-unselected-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-outline-width: var(--md-outlined-icon-button-unselected-outline-width, 1px);--_unselected-pressed-icon-color: var(--md-outlined-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-outlined-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.md3-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--_unselected-icon-color);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--outlined::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--outlined:hover{color:var(--_unselected-hover-icon-color)}.md3-icon-button--outlined:focus{color:var(--_unselected-focus-icon-color)}.md3-icon-button--outlined:active{color:var(--_unselected-pressed-icon-color)}.md3-icon-button--outlined:disabled{color:var(--_disabled-icon-color)}.md3-icon-button--outlined:disabled::before{border-color:var(--_disabled-outline-color)}.md3-icon-button--outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:"";inline-size:100%;inset:0;pointer-events:none;position:absolute}.md3-icon-button--outlined.md3-icon-button--on::before{border-width:0}.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_selected-pressed-icon-color)}.md3-icon-button--on:disabled{background-color:var(--_disabled-selected-container-color)}@media(forced-colors: active){.md3-icon-button--on::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--on:disabled::before{border-color:var(--_disabled-outline-color)}}/*# sourceMappingURL=outlined-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, 9999px);--_container-size: var(--md-outlined-icon-button-container-size, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-unselected-outline-color: var(--md-outlined-icon-button-disabled-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-unselected-outline-opacity: var(--md-outlined-icon-button-disabled-unselected-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-outlined-icon-button-focus-state-layer-opacity, 0.08);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #313033));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-focus-state-layer-color: var(--md-outlined-icon-button-selected-focus-state-layer-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f4eff4));--_unselected-focus-icon-color: var(--md-outlined-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-color: var(--md-outlined-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-outlined-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-color: var(--md-outlined-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-icon-color: var(--md-outlined-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-color: var(--md-outlined-icon-button-unselected-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-outline-width: var(--md-outlined-icon-button-unselected-outline-width, 1px);--_unselected-pressed-icon-color: var(--md-outlined-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-outlined-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}.md3-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--_unselected-icon-color);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--outlined::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--outlined:hover{color:var(--_unselected-hover-icon-color)}.md3-icon-button--outlined:focus{color:var(--_unselected-focus-icon-color)}.md3-icon-button--outlined:active{color:var(--_unselected-pressed-icon-color)}.md3-icon-button--outlined:disabled{color:var(--_disabled-icon-color)}.md3-icon-button--outlined:disabled::before{border-color:var(--_disabled-unselected-outline-color);opacity:var(--_disabled-unselected-outline-opacity)}.md3-icon-button--outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:"";inline-size:100%;inset:0;pointer-events:none;position:absolute}.md3-icon-button--outlined.md3-icon-button--selected::before{border-width:0}.md3-icon-button--selected{--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}.md3-icon-button--selected:disabled{background-color:var(--_disabled-selected-container-color)}@media(forced-colors: active){.md3-icon-button--selected::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--selected:disabled::before{border-color:var(--_disabled-unselected-outline-color);opacity:var(--_disabled-unselected-outline-opacity)}}/*# sourceMappingURL=outlined-styles.css.map */
 `;
 //# sourceMappingURL=outlined-styles.css.js.map