@m3e/web 2.0.3 → 2.0.4

package/dist/icon-button.js

@@ -4,8 +4,8 @@
  * See LICENSE file in the project root for full license text.
  */
 import { unsafeCSS, css, LitElement, nothing, html } from 'lit';
-import { query, property, customElement } from 'lit/decorators.js';
-import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, Role, ResizeController, FocusController, PressedController, prefersReducedMotion, renderPseudoLink, debounce, hasAssignedNodes } from '@m3e/web/core';
+import { query, property } from 'lit/decorators.js';
+import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, Role, ResizeController, FocusController, PressedController, prefersReducedMotion, hasCustomState, renderPseudoLink, deleteCustomState, debounce, element, setCustomState, hasAssignedNodes } from '@m3e/web/core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -134,7 +134,7 @@ const IconButtonSizeToken = {
 
 /** @private */
 function iconButtonStyle(size) {
-  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${IconButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${IconButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness}); outline-width: ${IconButtonSizeToken[size].outlineThickness}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); }`;
+  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${IconButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${IconButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness}); outline-width: ${IconButtonSizeToken[size].outlineThickness}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"]:state(-pressed)) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:state(-connected)[size="${unsafeCSS(size)}"]:state(-pressed)) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); }`;
 }
 /**
  * Size variant styles for `M3eIconButtonElement`.
@@ -146,8 +146,8 @@ const IconButtonSizeStyle = [iconButtonStyle("extra-small"), iconButtonStyle("sm
  * Baseline styles for `M3eIconButtonElement`.
  * @internal
  */
-const IconButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
-          border-radius ${DesignToken.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${DesignToken.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`;
+const IconButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+          border-radius ${DesignToken.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:state(-grouped):state(-connected)) { flex: 1 1 auto; } :host(:state(-grouped):not(:state(-connected)):not(:state(-adjacent-pressed)):not(:state(-pressed))) { flex-shrink: 0; flex-grow: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) { flex-shrink: 1; min-width: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) .label { text-overflow: clip; } :host(:state(-grouped):not(:state(-connected)):state(-pressed):not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: border-radius ${DesignToken.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .wrapper, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
@@ -553,7 +553,7 @@ const IconButtonVariantToken = {
 
 /** @private */
 function iconButtonVariantStyle(variant) {
-  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.containerColor} ${IconButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
+  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.iconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${IconButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.containerColor} ${IconButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
 }
 /**
  * Appearance variant styles for `M3eIconButtonElement`.
@@ -937,7 +937,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(Link
   }
   /** Whether the button is contained by a button group. */
   get grouped() {
-    return this.classList.contains("-grouped");
+    return hasCustomState(this, "-grouped");
   }
   /** @inheritdoc */
   render() {
@@ -951,11 +951,11 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(Link
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => this.classList.remove(x));
+    ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => deleteCustomState(this, x));
     this._base?.style.removeProperty("--_button-shape");
     this.style.removeProperty("--_button-width");
     this.style.removeProperty("--_adjacent-button-width");
-    this.classList.remove("-adjacent-pressed");
+    deleteCustomState(this, "-adjacent-pressed");
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
   }
   /** @inheritdoc */
@@ -967,8 +967,8 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(Link
   updated(_changedProperties) {
     super.updated(_changedProperties);
     if (_changedProperties.has("disabled") && this.disabled || _changedProperties.has("disabledInteractive") && this.disabledInteractive) {
-      this.classList.toggle("-pressed", false);
-      this.classList.toggle("-resting", false);
+      deleteCustomState(this, "-pressed");
+      deleteCustomState(this, "-resting");
     }
     if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
       this.ariaPressed = this.toggle ? `${this.selected}` : null;
@@ -981,7 +981,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(Link
   }
   /** @private */
   _handleResize() {
-    if (this.grouped && !this.classList.contains("-pressed")) {
+    if (this.grouped && !hasCustomState(this, "-pressed")) {
       this.style.setProperty("--_button-width", `${this.clientWidth}px`);
       __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this, true);
     }
@@ -1000,8 +1000,8 @@ _M3eIconButtonElement_updateButtonShape = function _M3eIconButtonElement_updateB
   }
 };
 _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handlePressedChange(pressed) {
-  this.classList.toggle("-pressed", pressed);
-  this.classList.toggle("-resting", !pressed);
+  setCustomState(this, "-pressed", pressed);
+  setCustomState(this, "-resting", !pressed);
   const group = this.closest("m3e-button-group");
   if (group) {
     const clientWidth = this.getBoundingClientRect().width;
@@ -1011,13 +1011,13 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
       const button = buttons[i];
       if (i === index - 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        button.classList.toggle("-adjacent-pressed", pressed);
+        setCustomState(button, "-adjacent-pressed", pressed);
       } else if (i === index + 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        button.classList.toggle("-adjacent-pressed", pressed);
+        setCustomState(button, "-adjacent-pressed", pressed);
       } else {
         button.style.removeProperty("--_adjacent-button-width");
-        button.classList.remove("-adjacent-pressed");
+        deleteCustomState(button, "-adjacent-pressed");
       }
     }
   }
@@ -1075,7 +1075,7 @@ __decorate([property({
   reflect: true
 })], M3eIconButtonElement.prototype, "selected", void 0);
 __decorate([debounce(40)], M3eIconButtonElement.prototype, "_handleResize", null);
-M3eIconButtonElement = __decorate([customElement("m3e-icon-button")], M3eIconButtonElement);
+M3eIconButtonElement = __decorate([element("m3e-icon-button")], M3eIconButtonElement);
 
 export { M3eIconButtonElement };
 //# sourceMappingURL=icon-button.js.map