@m3e/web 2.5.9 → 2.5.11

package/dist/all.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
 import { unsafeCSS, css, LitElement, html, nothing, isServer, noChange, svg } from 'lit';
 import { query, property, queryAssignedElements, state } from 'lit/decorators.js';
-import { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, hasAssignedNodes as hasAssignedNodes$1, debounce as debounce$1, customElement as customElement$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, ReconnectedCallback as ReconnectedCallback$1, SuppressInitialAnimation as SuppressInitialAnimation$1, AttachInternals as AttachInternals$1, VelocityTracker as VelocityTracker$1, ScrollLockController as ScrollLockController$1, InertController as InertController$1, ResizeController as ResizeController$1, focusWhenReady as focusWhenReady$1, hasCustomState as hasCustomState$1, computeCssSize as computeCssSize$1, registerStyleSheet as registerStyleSheet$1, spaceSeparatedStringConverter as spaceSeparatedStringConverter$1, KeyboardClick as KeyboardClick$1, LinkButton as LinkButton$1, Focusable as Focusable$1, Disabled as Disabled$1, renderPseudoLink as renderPseudoLink$1, FormSubmitter as FormSubmitter$1, DisabledInteractive as DisabledInteractive$1, FocusController as FocusController$1, PressedController as PressedController$1, isSelectedMixin as isSelectedMixin$1, dateConverter as dateConverter$1, Labelled as Labelled$1, RequiredConstraintValidation as RequiredConstraintValidation$1, Dirty as Dirty$1, Touched as Touched$1, Required as Required$1, ConstraintValidation as ConstraintValidation$1, CheckedIndeterminate as CheckedIndeterminate$1, FormAssociated as FormAssociated$1, HoverController as HoverController$1, formValue as formValue$1, isDisabledMixin as isDisabledMixin$1, isDisabledInteractiveMixin as isDisabledInteractiveMixin$1, isLinkButtonMixin as isLinkButtonMixin$1, getTextContent as getTextContent$1, Vertical as Vertical$1, Selected as Selected$1, getScrollbarWidth as getScrollbarWidth$1, ScrollController as ScrollController$1, isReadOnlyMixin as isReadOnlyMixin$1, interceptProperty as interceptProperty$1, computeLineCount as computeLineCount$1, generateClipPaths as generateClipPaths$1, Checked as Checked$1, resumeAnimation as resumeAnimation$1, AnimationLoopController as AnimationLoopController$1, resolveFragmentUrl as resolveFragmentUrl$1, safeStyleMap as safeStyleMap$1, updateLabels as updateLabels$1, waitForUpgrade as waitForUpgrade$1, guid as guid$1, IntersectionController as IntersectionController$1, LongPressController as LongPressController$1 } from '@m3e/web/core';
+import { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, hasAssignedNodes as hasAssignedNodes$1, debounce as debounce$1, customElement as customElement$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, ReconnectedCallback as ReconnectedCallback$1, SuppressInitialAnimation as SuppressInitialAnimation$1, AttachInternals as AttachInternals$1, VelocityTracker as VelocityTracker$1, ScrollLockController as ScrollLockController$1, InertController as InertController$1, ResizeController as ResizeController$1, focusWhenReady as focusWhenReady$1, hasCustomState as hasCustomState$1, computeCssSize as computeCssSize$1, registerStyleSheet as registerStyleSheet$1, spaceSeparatedStringConverter as spaceSeparatedStringConverter$1, KeyboardClick as KeyboardClick$1, LinkButton as LinkButton$1, Focusable as Focusable$1, Disabled as Disabled$1, renderPseudoLink as renderPseudoLink$1, FormSubmitter as FormSubmitter$1, DisabledInteractive as DisabledInteractive$1, FocusController as FocusController$1, PressedController as PressedController$1, waitForUpgrade as waitForUpgrade$1, isSelectedMixin as isSelectedMixin$1, dateConverter as dateConverter$1, Labelled as Labelled$1, RequiredConstraintValidation as RequiredConstraintValidation$1, Dirty as Dirty$1, Touched as Touched$1, Required as Required$1, ConstraintValidation as ConstraintValidation$1, CheckedIndeterminate as CheckedIndeterminate$1, FormAssociated as FormAssociated$1, HoverController as HoverController$1, formValue as formValue$1, isDisabledMixin as isDisabledMixin$1, isDisabledInteractiveMixin as isDisabledInteractiveMixin$1, isLinkButtonMixin as isLinkButtonMixin$1, getTextContent as getTextContent$1, Vertical as Vertical$1, Selected as Selected$1, getScrollbarWidth as getScrollbarWidth$1, ScrollController as ScrollController$1, isReadOnlyMixin as isReadOnlyMixin$1, interceptProperty as interceptProperty$1, computeLineCount as computeLineCount$1, generateClipPaths as generateClipPaths$1, Checked as Checked$1, resumeAnimation as resumeAnimation$1, AnimationLoopController as AnimationLoopController$1, resolveFragmentUrl as resolveFragmentUrl$1, safeStyleMap as safeStyleMap$1, updateLabels as updateLabels$1, guid as guid$1, IntersectionController as IntersectionController$1, LongPressController as LongPressController$1 } from '@m3e/web/core';
 import { ListKeyManager, M3eLiveAnnouncer, M3eInteractivityChecker, isModifierAllowed, addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager, ListManager, RovingTabIndexManager, M3eAriaDescriber, typeaheadLabel } from '@m3e/web/core/a11y';
 import { M3eOptGroupElement as M3eOptGroupElement$1 } from '@m3e/web/option';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -2327,7 +2327,7 @@ _M3eBreadcrumbItemButtonElement_handleClick = function _M3eBreadcrumbItemButtonE
   }
 };
 /** The styles of the element. */
-M3eBreadcrumbItemButtonElement.styles = css`:host { display: block; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken$1.density.calc(-1)}); column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem); } .icon { font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } :host(:is(:state(--icon-only), :--icon-only)) .overflow { flex: none; } :host(:not(:is(:state(--icon-only), :--icon-only))), :host(:not(:is(:state(--icon-only), :--icon-only))) .base { min-width: 0; } :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:is(:state(--icon-only), :--icon-only)) .base { width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken$1.density.calc(-1)}); padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-icon-hover-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-icon-focus-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); } :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-label-color, ${DesignToken$1.color.primary}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { font-size: var(--m3e-breadcrumb-item-label-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-breadcrumb-item-label-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-breadcrumb-item-label-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-label-hover-state-layer-color, ${DesignToken$1.color.primary} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-label-focus-state-layer-color, ${DesignToken$1.color.primary} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${DesignToken$1.color.primary}); } :host([current]) .base { color: var(--m3e-breadcrumb-item-last-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([current])) { cursor: pointer; user-select: none; } :host(:disabled:not([current])) .base { color: color-mix( in srgb, var(--m3e-breadcrumb-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-breadcrumb-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; width: max(3rem, 100%); margin: auto; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base, :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: LinkText; outline: 1px solid LinkText; } :host(:disabled) .base { color: GrayText; } }`;
+M3eBreadcrumbItemButtonElement.styles = css`:host { display: block; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken$1.density.calc(-3)}); column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem); } .icon { font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } :host(:is(:state(--icon-only), :--icon-only)) .overflow { flex: none; } :host(:not(:is(:state(--icon-only), :--icon-only))), :host(:not(:is(:state(--icon-only), :--icon-only))) .base { min-width: 0; } :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:is(:state(--icon-only), :--icon-only)) .base { width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken$1.density.calc(-3)}); padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-icon-hover-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-icon-focus-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); } :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-label-color, ${DesignToken$1.color.primary}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { font-size: var(--m3e-breadcrumb-item-label-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-breadcrumb-item-label-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-breadcrumb-item-label-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-label-hover-state-layer-color, ${DesignToken$1.color.primary} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-label-focus-state-layer-color, ${DesignToken$1.color.primary} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${DesignToken$1.color.primary}); } :host([current]) .base { color: var(--m3e-breadcrumb-item-last-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([current])) { cursor: pointer; user-select: none; } :host(:disabled:not([current])) .base { color: color-mix( in srgb, var(--m3e-breadcrumb-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-breadcrumb-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; width: max(3rem, 100%); margin: auto; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base, :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: LinkText; outline: 1px solid LinkText; } :host(:disabled) .base { color: GrayText; } }`;
 __decorate([query(".focus-ring")], M3eBreadcrumbItemButtonElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eBreadcrumbItemButtonElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eBreadcrumbItemButtonElement.prototype, "_ripple", void 0);
@@ -2473,7 +2473,7 @@ M3eBreadcrumbItemElement = __decorate([customElement$1("m3e-breadcrumb-item")],
  */
 const ButtonSizeToken = {
   "extra-small": {
-    containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${DesignToken$1.density.calc(0)})`),
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
     labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}))`),
     labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
@@ -2490,7 +2490,7 @@ const ButtonSizeToken = {
     iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")
   },
   small: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-1)})`),
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
     labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}))`),
     labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
@@ -2507,7 +2507,7 @@ const ButtonSizeToken = {
     iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")
   },
   medium: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-2)})`),
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
     labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}))`),
     labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}))`),
@@ -2561,7 +2561,7 @@ const ButtonSizeToken = {
 
 /** @private */
 function buttonStyle(size) {
-  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${ButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .wrapper { padding-inline-start: calc(${ButtonSizeToken[size].leadingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2))); padding-inline-end: calc(${ButtonSizeToken[size].trailingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2))); column-gap: ${ButtonSizeToken[size].iconLabelSpace}; } :host([size="${unsafeCSS(size)}"]) .label { font-size: ${ButtonSizeToken[size].labelTextFontSize}; font-weight: ${ButtonSizeToken[size].labelTextFontWeight}; line-height: ${ButtonSizeToken[size].labelTextLineHeight}; letter-spacing: ${ButtonSizeToken[size].labelTextTracking}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${ButtonSizeToken[size].iconSize}; --m3e-icon-size: ${ButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${ButtonSizeToken[size].outlineThickness}); outline-width: ${ButtonSizeToken[size].outlineThickness}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${ButtonSizeToken[size].selectedShapeRound}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${ButtonSizeToken[size].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${ButtonSizeToken[size].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not([toggle][selected])) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); }`;
+  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${ButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .wrapper { padding-inline-start: calc(${ButtonSizeToken[size].leadingSpace} - calc(var(--_adjacent-shrink, 0px) / 2)); padding-inline-end: calc(${ButtonSizeToken[size].trailingSpace} - calc(var(--_adjacent-shrink, 0px) / 2)); column-gap: ${ButtonSizeToken[size].iconLabelSpace}; } :host([size="${unsafeCSS(size)}"]) .label { font-size: ${ButtonSizeToken[size].labelTextFontSize}; font-weight: ${ButtonSizeToken[size].labelTextFontWeight}; line-height: ${ButtonSizeToken[size].labelTextLineHeight}; letter-spacing: ${ButtonSizeToken[size].labelTextTracking}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${ButtonSizeToken[size].iconSize}; --m3e-icon-size: ${ButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${ButtonSizeToken[size].outlineThickness}); outline-width: ${ButtonSizeToken[size].outlineThickness}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${ButtonSizeToken[size].selectedShapeRound}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${ButtonSizeToken[size].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${ButtonSizeToken[size].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not([toggle][selected])) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); }`;
 }
 /**
  * Size variant styles for `M3eButtonElement`.
@@ -2574,7 +2574,7 @@ const ButtonSizeStyle = [buttonStyle("extra-small"), buttonStyle("small"), butto
  * @internal
  */
 const ButtonStyle = 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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
-          border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${unsafeCSS(`flex-basis ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed, :state(--adjacent-pressed), :--adjacent-pressed) ) ) { flex-basis: var(--_button-width); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .label { text-overflow: clip; } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${unsafeCSS(`border-radius ${DesignToken$1.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]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .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]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .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-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))), :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper, :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .label, .icon { transition: none; } }`;
+          border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${unsafeCSS(`width ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed, :state(--adjacent-pressed), :--adjacent-pressed) ) ) { width: var(--_button-width); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed) ):is(:state(--adjacent-pressed), :--adjacent-pressed) ) { width: calc(var(--_button-width) - var(--_adjacent-shrink, 0px)); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { width: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .label { text-overflow: clip; } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${unsafeCSS(`border-radius ${DesignToken$1.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]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .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]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .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-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))), :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper, :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .label, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eButtonElement`.
@@ -3591,6 +3591,8 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   constructor() {
     super();
     _M3eButtonElement_instances.add(this);
+    /** @internal */
+    this._adjacentPressedTimeout = -1;
     /** @private */
     _M3eButtonElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handleClick).call(this, e));
     /**
@@ -3690,7 +3692,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   /** @private */
   _handleResize() {
     if (this.grouped && !hasCustomState$1(this, "--no-resize") && this !== document.activeElement) {
-      this.style.setProperty("--_button-width", `${this.clientWidth}px`);
+      this.style.setProperty("--_button-width", `${this.getBoundingClientRect().width}px`);
       __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this, true);
     }
   }
@@ -3735,6 +3737,10 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
   const group = this.closest("m3e-button-group");
   if (group && group.variant === "standard") {
     const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
+    for (const button of buttons) {
+      clearTimeout(button._adjacentPressedTimeout);
+      button._adjacentPressedTimeout = -1;
+    }
     const index = buttons.indexOf(this);
     if (pressed) {
       const multiplier = parseFloat(getComputedStyle(this).getPropertyValue("--m3e-standard-button-group-width-multiplier") || "0.15");
@@ -3765,15 +3771,15 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
       }
       if (!prefersReducedMotion$1()) {
         this.addEventListener("transitionend", e => {
-          if (e.propertyName === "flex-basis") {
-            queueMicrotask(() => {
-              // Pressed state is tested to ensure this runs only when the button
+          if (e.propertyName === "width") {
+            this._adjacentPressedTimeout = setTimeout(() => {
+              // Pressed timeout is tested to ensure this runs only when the button
               // is no longer pressed. This handles changes to pressed state in
               // quick succession.
-              if (!hasCustomState$1(this, "--pressed")) {
+              if (this._adjacentPressedTimeout > -1) {
                 __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_cleanupAdjacentPressed).call(this, buttons);
               }
-            });
+            }, 600);
           }
         }, {
           once: true
@@ -3933,11 +3939,18 @@ let M3eButtonGroupElement = class M3eButtonGroupElement extends Role$1(LitElemen
 };
 _M3eButtonGroupElement_pressedController = new WeakMap();
 _M3eButtonGroupElement_instances = new WeakSet();
-_M3eButtonGroupElement_updateButtons = function _M3eButtonGroupElement_updateButtons() {
+_M3eButtonGroupElement_updateButtons = /** @private */
+async function _M3eButtonGroupElement_updateButtons() {
   const buttons = this.buttons;
   for (const target of __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").targets) {
     __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").unobserve(target);
   }
+  for (const button of this.buttons) {
+    await waitForUpgrade$1(button);
+    if (button.isUpdatePending) {
+      await button.updateComplete;
+    }
+  }
   const canToggle = [...buttons].some(x => x.toggle);
   // disable-role is an internal attribute to by split-button to disable setting roles.
   if (!this.hasAttribute("disable-role")) {
@@ -5640,6 +5653,11 @@ _M3eCheckboxElement_renderIcon = function _M3eCheckboxElement_renderIcon() {
 };
 _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   if (e.defaultPrevented) return;
+  if (this.disabled) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    return;
+  }
   if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
     cancelable: true
@@ -5787,7 +5805,7 @@ _M3eChipElement_handleSlotChange = function _M3eChipElement_handleSlotChange(e)
   __classPrivateFieldSet(this, _M3eChipElement_textContent, getTextContent$1(e.target), "f");
 };
 /** The styles of the element. */
-M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: 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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken$1.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken$1.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken$1.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken$1.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:is(:state(--with-icon), :--with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:is(:state(--with-trailing-icon), :--with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:is(:state(--with-trailing-icon), :--with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken$1.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken$1.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
+M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: 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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken$1.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-3)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken$1.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken$1.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken$1.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:is(:state(--with-icon), :--with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:is(:state(--with-trailing-icon), :--with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:is(:state(--with-trailing-icon), :--with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken$1.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken$1.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
 __decorate([query(".elevation")], M3eChipElement.prototype, "_elevation", void 0);
 __decorate([query(".focus-ring")], M3eChipElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eChipElement.prototype, "_stateLayer", void 0);
@@ -6344,7 +6362,7 @@ _M3eInputChipElement_handleKeyDown = function _M3eInputChipElement_handleKeyDown
 /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
 M3eInputChipElement.formAssociated = true;
 /** The styles of the element. */
-M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${DesignToken$1.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}); } :host(:is(:state(--with-avatar), :--with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:is(:state(--with-avatar), :--with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
+M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-3)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${DesignToken$1.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}); } :host(:is(:state(--with-avatar), :--with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:is(:state(--with-avatar), :--with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
 __decorate([query(".cell")], M3eInputChipElement.prototype, "cell", void 0);
 __decorate([query(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
 __decorate([property({
@@ -13930,11 +13948,11 @@ const FabSizeToken = {
     labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.medium.fontWeight}))`),
     labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.medium.lineHeight}))`),
     labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.medium.tracking}))`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconSize: unsafeCSS("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),
     extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),
     shape: unsafeCSS(`var(--m3e-fab-small-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.large}))`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
     iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, var(--m3e-fab-icon-label-space, 0.5rem))"),
     extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem))"),
     extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem))")
@@ -13946,11 +13964,11 @@ const FabSizeToken = {
     labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}))`),
     labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}))`),
     labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}))`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),
     extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),
     shape: unsafeCSS(`var(--m3e-fab-medium-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.largeIncreased}))`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
     iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, var(--m3e-fab-icon-label-space, 0.75rem))"),
     extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem))"),
     extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem))")
@@ -13962,11 +13980,11 @@ const FabSizeToken = {
     labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}))`),
     labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}))`),
     labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}))`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconSize: unsafeCSS("calc(var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),
     extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),
     shape: unsafeCSS(`var(--m3e-fab-large-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.extraLarge}))`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
     iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, var(--m3e-fab-icon-label-space, 1rem))"),
     extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem))"),
     extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem))")
@@ -15806,14 +15824,13 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
   }
 };
 (() => {
-  registerStyleSheet$1(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken$1.density.calc(-2)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`);
+  registerStyleSheet$1(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken$1.density.calc(-3)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`);
 })();
 /** The styles of the element. */
-M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${unsafeCSS(`top ${DesignToken$1.motion.duration.short4}, 
+M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${unsafeCSS(`top ${DesignToken$1.motion.duration.short4}, 
         font-size ${DesignToken$1.motion.duration.short4}, 
-        line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--with-select)) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken$1.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short4}, 
-        margin-top ${DesignToken$1.motion.duration.short4}, 
-        margin-bottom ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken$1.density.calc(-2)}); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
+        line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--with-select)) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken$1.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top: 0.25rem; transform: translateY(-0.25rem); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short4}, 
+        transform ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; transform: translateY(0); } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-3)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: max(0px, calc(0.5rem + ${DesignToken$1.density.calc(-3)})); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
 __decorate([query(".base")], M3eFormFieldElement.prototype, "_base", void 0);
 __decorate([query(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
 __decorate([query(".error")], M3eFormFieldElement.prototype, "_error", void 0);
@@ -16288,94 +16305,94 @@ function registerIcon(name, variant, data) {
 const IconButtonSizeToken = {
   /** Design tokens that control the `extra-small` `size` variant. */
   "extra-small": {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken$1.density.calc(0)})`),
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${DesignToken$1.density.calc(0)})`),
+    iconSize: unsafeCSS(`var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem))`),
     shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
     shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
     selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
     selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
     shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(0)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(0)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${DesignToken$1.density.calc(0)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${DesignToken$1.density.calc(0)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${DesignToken$1.density.calc(0)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${DesignToken$1.density.calc(0)})`)
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
   },
   /** Design tokens that control the `small` `size` variant. */
   small: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-1)})`),
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-1)})`),
+    iconSize: unsafeCSS(`var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem))`),
     shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
     shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
     selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
     selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
     shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(-1)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(-1)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${DesignToken$1.density.calc(-1)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${DesignToken$1.density.calc(-1)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${DesignToken$1.density.calc(-1)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${DesignToken$1.density.calc(-1)})`)
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
   },
   /** Design tokens that control the `medium` `size` variant. */
   medium: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-2)})`),
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`),
+    iconSize: unsafeCSS(`var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem))`),
     shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
     shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.large}))`),
     selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.large}))`),
     selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
     shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.medium}))`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${DesignToken$1.density.calc(-2)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${DesignToken$1.density.calc(-2)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${DesignToken$1.density.calc(-2)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-2)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`)
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
   },
   /** Design tokens that control the `large` `size` variant. */
   large: {
     containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconSize: unsafeCSS(`var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem))`),
     shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
     shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
     selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
     selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
     shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`)
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
   },
   /** Design tokens that control the `extra-large` `size` variant. */
   "extra-large": {
     containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${DesignToken$1.density.calc(-3)})`),
     outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconSize: unsafeCSS(`var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem))`),
     shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
     shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
     selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
     selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
     shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`)
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
   }
 };
 
 /** @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: calc( ${IconButtonSizeToken[size].defaultLeadingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2)) ); padding-inline-end: calc( ${IconButtonSizeToken[size].defaultTrailingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2)) ); } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: calc( ${IconButtonSizeToken[size].narrowLeadingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2)) ); padding-inline-end: calc( ${IconButtonSizeToken[size].narrowTrailingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2)) ); } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: calc( ${IconButtonSizeToken[size].wideLeadingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2)) ); padding-inline-end: calc( ${IconButtonSizeToken[size].wideTrailingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2)) ); } :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(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not([toggle][selected])) .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(:is(:state(--connected), :--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( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--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: calc( ${IconButtonSizeToken[size].defaultLeadingSpace} - calc(var(--_adjacent-shrink, 0px) / 2) ); padding-inline-end: calc( ${IconButtonSizeToken[size].defaultTrailingSpace} - calc(var(--_adjacent-shrink, 0px) / 2) ); } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: calc( ${IconButtonSizeToken[size].narrowLeadingSpace} - calc(var(--_adjacent-shrink, 0px) / 2) ); padding-inline-end: calc( ${IconButtonSizeToken[size].narrowTrailingSpace} - calc(var(--_adjacent-shrink, 0px) / 2) ); } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: calc( ${IconButtonSizeToken[size].wideLeadingSpace} - calc(var(--_adjacent-shrink, 0px) / 2) ); padding-inline-end: calc(${IconButtonSizeToken[size].wideTrailingSpace} - calc(var(--_adjacent-shrink, 0px) / 2)); } :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(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not([toggle][selected])) .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(:is(:state(--connected), :--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( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--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`.
@@ -16388,7 +16405,7 @@ const IconButtonSizeStyle = [iconButtonStyle("extra-small"), iconButtonStyle("sm
  * @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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
-          border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.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$1.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(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${unsafeCSS(`flex-basis ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed, :state(--adjacent-pressed), :--adjacent-pressed) ) ) { flex-basis: var(--_button-width); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { 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(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: border-radius ${DesignToken$1.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])) .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])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .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]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .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) .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(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))), :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper, :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .wrapper, .icon { transition: none; } }`;
+          border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.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$1.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(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${unsafeCSS(`width ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed, :state(--adjacent-pressed), :--adjacent-pressed) ) ) { width: var(--_button-width); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed) ):is(:state(--adjacent-pressed), :--adjacent-pressed) ) { width: calc(var(--_button-width) - var(--_adjacent-shrink, 0px)); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { width: 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(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: border-radius ${DesignToken$1.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])) .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])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .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]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .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) .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(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))), :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper, :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .wrapper, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
@@ -17112,6 +17129,8 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   constructor() {
     super();
     _M3eIconButtonElement_instances.add(this);
+    /** @internal */
+    this._adjacentPressedTimeout = -1;
     /** @private */
     _M3eIconButtonElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handleClick).call(this, e));
     /**
@@ -17216,7 +17235,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   /** @private */
   _handleResize() {
     if (this.grouped && !hasCustomState$1(this, "--no-resize") && this !== document.activeElement) {
-      this.style.setProperty("--_button-width", `${this.clientWidth}px`);
+      this.style.setProperty("--_button-width", `${this.getBoundingClientRect().width}px`);
       __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this, true);
     }
   }
@@ -17238,6 +17257,10 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
   const group = this.closest("m3e-button-group");
   if (group && group.variant === "standard") {
     const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
+    for (const button of buttons) {
+      clearTimeout(button._adjacentPressedTimeout);
+      button._adjacentPressedTimeout = -1;
+    }
     const index = buttons.indexOf(this);
     if (pressed) {
       const multiplier = parseFloat(getComputedStyle(this).getPropertyValue("--m3e-standard-button-group-width-multiplier") || "0.15");
@@ -17268,15 +17291,15 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
       }
       if (!prefersReducedMotion$1()) {
         this.addEventListener("transitionend", e => {
-          if (e.propertyName === "flex-basis") {
-            queueMicrotask(() => {
-              // Pressed state is tested to ensure this runs only when the button
+          if (e.propertyName === "width") {
+            this._adjacentPressedTimeout = setTimeout(() => {
+              // Pressed timeout is tested to ensure this runs only when the button
               // is no longer pressed. This handles changes to pressed state in
               // quick succession.
-              if (!hasCustomState$1(this, "--pressed")) {
+              if (this._adjacentPressedTimeout > -1) {
                 __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_cleanupAdjacentPressed).call(this, buttons);
               }
-            });
+            }, 600);
           }
         }, {
           once: true
@@ -18608,7 +18631,7 @@ class MenuItemElementBase extends KeyboardClick$1(Focusable$1(AttachInternals$1(
   }
 }
 /** The styles of the element. */
-MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([checked]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([checked]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
+MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: calc(var(--m3e-menu-item-container-height, 2.75rem) + ${DesignToken$1.density.calc(-3)}); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([checked]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([checked]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: calc( var(--m3e-menu-item-container-height, 2.75rem) + calc(var(--m3e-menu-gap, 0.125rem) * 2) + ${DesignToken$1.density.calc(-3)} ); left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
 __decorate([query(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
@@ -19281,7 +19304,7 @@ M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin:
         transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
         overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
         display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } :host(:is(:state(--shift-down), :--shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:is(:state(--shift-up), :--shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken$1.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${DesignToken$1.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${DesignToken$1.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${DesignToken$1.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
+        border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); animation: ${unsafeCSS(`bounce-open ${DesignToken$1.motion.duration.medium1} ${DesignToken$1.motion.easing.standard}`)}; } @keyframes bounce-open { 0% { transform: scaleY(0.8); } 70% { transform: scaleY(1.02); } 100% { transform: scaleY(1); } } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } :host(:is(:state(--shift-down), :--shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:is(:state(--shift-up), :--shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken$1.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${DesignToken$1.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${DesignToken$1.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${DesignToken$1.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
 __decorate([property({
   attribute: "position-x"
 })], M3eMenuElement.prototype, "positionX", void 0);
@@ -21015,7 +21038,7 @@ _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange
   }
 };
 /** The styles of the element. */
-M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:is(:state(--empty), :--empty))[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([selected]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${unsafeCSS(`margin-inline-start ${DesignToken$1.motion.spring.fastEffects}, width ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:is(:state(--empty), :--empty)) .icon, :host(:is(:state(--hide-selection-indicator), :--hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`;
+M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: calc(var(--m3e-option-container-height, 2.75rem) + ${DesignToken$1.density.calc(-3)}); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:is(:state(--empty), :--empty))[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([selected]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: calc( var(--m3e-option-container-height, 2.75rem) + calc(var(--m3e-option-panel-gap, 0.125rem) * 2) + ${DesignToken$1.density.calc(-3)} ); left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${unsafeCSS(`margin-inline-start ${DesignToken$1.motion.spring.fastEffects}, width ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:is(:state(--empty), :--empty)) .icon, :host(:is(:state(--hide-selection-indicator), :--hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`;
 __decorate([query(".focus-ring")], M3eOptionElement.prototype, "focusRing", void 0);
 __decorate([query(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
 __decorate([query(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);
@@ -21429,7 +21452,7 @@ _M3ePaginatorElement_emitPageEvent = function _M3ePaginatorElement_emitPageEvent
   }));
 };
 /** The styles of the element. */
-M3ePaginatorElement.styles = css`:host { display: block; } .outer { display: flex; font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .inner { display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; width: 100%; } .form-field { --md-sys-density-scale: -2; --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); --m3e-form-field-font-weight: var( --m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight} ); --m3e-form-field-line-height: var( --m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .items-per-page-label { display: flex; align-items: center; margin-inline-end: 0.5rem; } .form-field { min-width: auto; width: 6rem; margin-inline: 0.25rem; } .range-label { margin-inline: 1.5rem 2rem; } :host([hide-page-size]) .range-label { margin-inline-start: unset; } .range-actions { display: flex; align-items: center; } ::slotted([slot="first-page-icon"]), ::slotted([slot="previous-page-icon"]), ::slotted([slot="next-page-icon"]), ::slotted([slot="last-page-icon"]), svg { width: 1em; font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important; } :host(:dir(rtl)) svg { transform: rotate(180deg); }`;
+M3ePaginatorElement.styles = css`:host { display: block; } .outer { display: flex; font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .inner { display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; width: 100%; --_density-scale: ${DesignToken$1.density.scale}; } .form-field { --md-sys-density-scale: min(-2, var(--_density-scale)); --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); --m3e-form-field-font-weight: var( --m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight} ); --m3e-form-field-line-height: var( --m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .items-per-page-label { display: flex; align-items: center; margin-inline-end: 0.5rem; } .form-field { min-width: auto; width: 6rem; margin-inline: 0.25rem; } .range-label { margin-inline: 1.5rem 2rem; } :host([hide-page-size]) .range-label { margin-inline-start: unset; } .range-actions { display: flex; align-items: center; } ::slotted([slot="first-page-icon"]), ::slotted([slot="previous-page-icon"]), ::slotted([slot="next-page-icon"]), ::slotted([slot="last-page-icon"]), svg { width: 1em; font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important; } :host(:dir(rtl)) svg { transform: rotate(180deg); }`;
 /* @private */
 M3ePaginatorElement.__nextId = 0;
 __decorate([property({
@@ -22262,7 +22285,12 @@ _M3eRadioElement_renderIcon = function _M3eRadioElement_renderIcon() {
   return html`<svg viewBox="0 0 20 20"><mask id="cutout2"><rect width="100%" height="100%" fill="white"></rect><circle cx="10" cy="10" r="8" fill="black"></circle></mask><circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout2)"></circle><circle class="inner circle" cx="10" cy="10" r="5"></circle></svg>`;
 };
 _M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
-  if (e.defaultPrevented || this.checked || this.disabled) return;
+  if (e.defaultPrevented || this.checked) return;
+  if (this.disabled) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    return;
+  }
   if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
     cancelable: true
@@ -25635,7 +25663,7 @@ _M3eSplitButtonElement_updateButtonShape = function _M3eSplitButtonElement_updat
   }
 };
 /** The styles of the element. */
-M3eSplitButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(0)} ); --m3e-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(0)} ); --m3e-icon-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(-1)} ); --m3e-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(-1)} ); --m3e-icon-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken$1.density.calc(-2)} ); --m3e-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken$1.density.calc(-2)} ); --m3e-icon-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken$1.density.calc(-3)} ); --m3e-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken$1.density.calc(-3)} ); --m3e-icon-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken$1.density.calc(-3)} ); --m3e-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken$1.density.calc(-3)} ); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`;
+M3eSplitButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-icon-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-icon-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); --m3e-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`;
 __decorate([query(".base")], M3eSplitButtonElement.prototype, "_base", void 0);
 __decorate([property({
   reflect: true
@@ -27060,25 +27088,25 @@ const SwitchToken = {
   selectedIconSize: unsafeCSS("var(--m3e-switch-selected-icon-size, 1rem)"),
   unselectedIconColor: unsafeCSS(`var(--m3e-switch-unselected-icon-color, ${DesignToken$1.color.surfaceContainerHighest})`),
   unselectedIconSize: unsafeCSS("var(--m3e-switch-unselected-icon-size, 1rem)"),
-  trackHeight: unsafeCSS("var(--m3e-switch-track-height, 2rem)"),
-  trackWidth: unsafeCSS("var(--m3e-switch-track-width, 3.25rem)"),
+  trackHeight: unsafeCSS(`calc(var(--m3e-switch-track-height, 2rem) + ${DesignToken$1.density.calc(-3)})`),
+  trackWidth: unsafeCSS(`calc(var(--m3e-switch-track-width, 3.25rem) + ${DesignToken$1.density.calc(-3)})`),
   trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken$1.color.outline})`),
   trackOutlineWidth: unsafeCSS("var(--m3e-switch-track-outline-width, 2px)"),
   trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken$1.shape.corner.full})`),
   selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken$1.color.primary})`),
   unselectedTrackColor: unsafeCSS(`var(--m3e-switch-unselected-track-color, ${DesignToken$1.color.surfaceContainerHighest})`),
-  unselectedHandleHeight: unsafeCSS("var(--m3e-switch-unselected-handle-height, 1rem)"),
-  unselectedHandleWidth: unsafeCSS("var(--m3e-switch-unselected-handle-width, 1rem)"),
-  withIconHandleHeight: unsafeCSS("var(--m3e-switch-with-icon-handle-height, 1.5rem)"),
-  withIconHandleWidth: unsafeCSS("var(--m3e-switch-with-icon-handle-width, 1.5rem)"),
-  selectedHandleHeight: unsafeCSS("var(--m3e-switch-selected-handle-height, 1.5rem)"),
-  selectedHandleWidth: unsafeCSS("var(--m3e-switch-selected-handle-width, 1.5rem)"),
-  pressedHandleHeight: unsafeCSS("var(--m3e-switch-pressed-handle-height, 1.75rem)"),
-  pressedHandleWidth: unsafeCSS("var(--m3e-switch-pressed-handle-width, 1.75rem)"),
+  unselectedHandleHeight: unsafeCSS(`calc(var(--m3e-switch-unselected-handle-height, 1rem) + ${DesignToken$1.density.calc(-3)})`),
+  unselectedHandleWidth: unsafeCSS(`calc(var(--m3e-switch-unselected-handle-width, 1rem) + ${DesignToken$1.density.calc(-3)})`),
+  withIconHandleHeight: unsafeCSS(`calc(var(--m3e-switch-with-icon-handle-height, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
+  withIconHandleWidth: unsafeCSS(`calc(var(--m3e-switch-with-icon-handle-width, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
+  selectedHandleHeight: unsafeCSS(`calc(var(--m3e-switch-selected-handle-height, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
+  selectedHandleWidth: unsafeCSS(`calc(var(--m3e-switch-selected-handle-width, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
+  pressedHandleHeight: unsafeCSS(`calc(var(--m3e-switch-pressed-handle-height, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
+  pressedHandleWidth: unsafeCSS(`calc(var(--m3e-switch-pressed-handle-width, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
   handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken$1.shape.corner.full})`),
   selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken$1.color.onPrimary})`),
   unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken$1.color.outline})`),
-  stateLayerSize: unsafeCSS("var(--m3e-switch-state-layer-size, 2.5rem)"),
+  stateLayerSize: unsafeCSS(`calc(var(--m3e-switch-state-layer-size, 2.5rem) + ${DesignToken$1.density.calc(-3)})`),
   stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken$1.shape.corner.full})`),
   disabledSelectedIconColor: unsafeCSS(`var(--m3e-switch-disabled-selected-icon-color, ${DesignToken$1.color.onSurface})`),
   disabledSelectedIconOpacity: unsafeCSS("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),
@@ -27348,6 +27376,11 @@ _M3eSwitchElement_renderIcon = function _M3eSwitchElement_renderIcon() {
 };
 _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
   if (e.defaultPrevented) return;
+  if (this.disabled) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    return;
+  }
   if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
     cancelable: true
@@ -34988,7 +35021,7 @@ async function getColorFromImage(image) {
   return hexFromArgb(await sourceColorFromImage(image));
 }
 
-var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getContrastLevel;
+var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getVariant, _M3eThemeElement_getContrastLevel;
 /**
  * A non-visual element responsible for application-level theming.
  *
@@ -35023,6 +35056,7 @@ var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_fi
  * @attr density - The density scale (0, -1, -2).
  * @attr scheme - The color scheme of the theme.
  * @attr strong-focus - Whether to enable strong focus indicators.
+ * @attr variant - The color variant of the theme.
  *
  * @fires change - Dispatched when the theme changes.
  */
@@ -35047,6 +35081,10 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
      * @default "#6750A4"
      */
     this.color = "#6750A4";
+    /** The color variant of the theme.
+     * @default "neutral"
+     */
+    this.variant = "neutral";
     /**
      * The color scheme of the theme.
      * @default "auto"
@@ -35151,7 +35189,7 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
   const theme = themeFromSourceColor(color);
   const scheme = new DynamicScheme({
     sourceColorHct: Hct.fromInt(color),
-    variant: 1,
+    variant: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getVariant).call(this),
     contrastLevel: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this),
     isDark: this.isDark,
     primaryPalette: theme.palettes.primary,
@@ -35221,6 +35259,29 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
     void document.body.offsetHeight;
   }
 };
+_M3eThemeElement_getVariant = function _M3eThemeElement_getVariant() {
+  switch (this.variant) {
+    case "neutral":
+      return 1;
+    case "tonal-spot":
+      return 2;
+    case "vibrant":
+      return 3;
+    case "expressive":
+      return 4;
+    case "fidelity":
+      return 5;
+    case "content":
+      return 6;
+    case "rainbow":
+      return 7;
+    case "fruit-salad":
+      return 8;
+    default:
+      return 0;
+    // monochrome
+  }
+};
 _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel() {
   switch (this.contrast) {
     case "high":
@@ -35284,6 +35345,7 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
 /** The styles of the element. */
 M3eThemeElement.styles = css`:host { display: contents; }`;
 __decorate([property()], M3eThemeElement.prototype, "color", void 0);
+__decorate([property()], M3eThemeElement.prototype, "variant", void 0);
 __decorate([property()], M3eThemeElement.prototype, "scheme", void 0);
 __decorate([property()], M3eThemeElement.prototype, "contrast", void 0);
 __decorate([property({
@@ -35296,6 +35358,147 @@ __decorate([property({
 __decorate([property()], M3eThemeElement.prototype, "motion", void 0);
 M3eThemeElement = __decorate([customElement$1("m3e-theme")], M3eThemeElement);
 
+var _M3eThemeIconElement_instances, _M3eThemeIconElement_light, _M3eThemeIconElement_dark, _M3eThemeIconElement_colorSchemeChangeHandler, _M3eThemeIconElement_getVariant;
+/**
+ * An icon that visually presents a preview of a theme.
+ *
+ * @description
+ * The `m3e-theme-icon` renders a small preview of a theme's surface and primary colors.
+ *
+ * @example
+ * The following example presents a preview of a teal light theme.
+ * ```html
+ * <m3e-theme-icon color="#004f4f" scheme="light"></m3e-theme-icon>
+ * ```
+ *
+ * @tag m3e-theme-icon
+ *
+ * @attr color - The hex color of the theme to preview
+ * @attr scheme - The color scheme of the theme to preview.
+ * @attr variant - The color variant of the theme to preview.
+ *
+ * @cssprop --m3e-theme-icon-size - Size of the theme icon.
+ * @cssprop --m3e-theme-icon-shape - Border radius of the icon container.
+ * @cssprop --m3e-theme-icon-outline-color - Outline stroke color of the icon border.
+ * @cssprop --m3e-theme-icon-outline-opacity - Opacity percentage applied to the outline color.
+ * @cssprop --m3e-theme-icon-container-color - Fill color for the container layer of the previewed theme.
+ * @cssprop --m3e-theme-icon-color - Fill color for the primary layer of the previewed theme.
+ */
+let M3eThemeIconElement = class M3eThemeIconElement extends Role$1(LitElement, "img") {
+  constructor() {
+    super(...arguments);
+    _M3eThemeIconElement_instances.add(this);
+    /** @private */
+    _M3eThemeIconElement_light.set(this, void 0);
+    /** @private */
+    _M3eThemeIconElement_dark.set(this, void 0);
+    /** @private */
+    _M3eThemeIconElement_colorSchemeChangeHandler.set(this, () => this.requestUpdate());
+    /**
+     * The hex color of the theme to preview
+     * @default "#6750A4"
+     */
+    this.color = "#6750A4";
+    /** The color variant of the theme.
+     * @default "neutral"
+     */
+    this.variant = "neutral";
+    /**
+     * The color scheme of the theme.
+     * @default "auto"
+     */
+    this.scheme = "auto";
+  }
+  /** Whether a dark theme is applied. */
+  get isDark() {
+    switch (this.scheme) {
+      case "light":
+        return false;
+      case "dark":
+        return true;
+      default:
+        // auto
+        if (this.parentElement instanceof HTMLBodyElement) {
+          switch (document.documentElement.style.colorScheme) {
+            case "light":
+              return false;
+            case "dark":
+              return true;
+          }
+        }
+        return __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")?.matches ?? false;
+    }
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldSet(this, _M3eThemeIconElement_light, matchMedia("(prefers-color-scheme: light)"), "f");
+    __classPrivateFieldSet(this, _M3eThemeIconElement_dark, matchMedia("(prefers-color-scheme: dark)"), "f");
+    [__classPrivateFieldGet(this, _M3eThemeIconElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")].forEach(x => x.addEventListener("change", __classPrivateFieldGet(this, _M3eThemeIconElement_colorSchemeChangeHandler, "f")));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    [__classPrivateFieldGet(this, _M3eThemeIconElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")].forEach(x => x?.removeEventListener("change", __classPrivateFieldGet(this, _M3eThemeIconElement_colorSchemeChangeHandler, "f")));
+    __classPrivateFieldSet(this, _M3eThemeIconElement_light, __classPrivateFieldSet(this, _M3eThemeIconElement_dark, undefined, "f"), "f");
+  }
+  /** @inheritdoc */
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    const base = this.shadowRoot?.querySelector(".base");
+    const color = argbFromHex(this.color);
+    const theme = themeFromSourceColor(color);
+    const scheme = new DynamicScheme({
+      sourceColorHct: Hct.fromInt(color),
+      variant: __classPrivateFieldGet(this, _M3eThemeIconElement_instances, "m", _M3eThemeIconElement_getVariant).call(this),
+      contrastLevel: 0,
+      isDark: this.isDark,
+      primaryPalette: theme.palettes.primary,
+      neutralPalette: theme.palettes.neutral
+    });
+    const dynamicColors = new MaterialDynamicColors();
+    base?.style.setProperty("--_theme-icon-container-color", hexFromArgb(dynamicColors.surface().getArgb(scheme)));
+    base?.style.setProperty("--_theme-icon-color", hexFromArgb(dynamicColors.primary().getArgb(scheme)));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><svg viewBox="0 0 80 80" class="icon"><path class="container" d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"/><path class="color" d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"/><path class="color" d="M0 0h80v17.24H0V0z"/></svg></div>`;
+  }
+};
+_M3eThemeIconElement_light = new WeakMap();
+_M3eThemeIconElement_dark = new WeakMap();
+_M3eThemeIconElement_colorSchemeChangeHandler = new WeakMap();
+_M3eThemeIconElement_instances = new WeakSet();
+_M3eThemeIconElement_getVariant = function _M3eThemeIconElement_getVariant() {
+  switch (this.variant) {
+    case "neutral":
+      return 1;
+    case "tonal-spot":
+      return 2;
+    case "vibrant":
+      return 3;
+    case "expressive":
+      return 4;
+    case "fidelity":
+      return 5;
+    case "content":
+      return 6;
+    case "rainbow":
+      return 7;
+    case "fruit-salad":
+      return 8;
+    default:
+      return 0;
+    // monochrome
+  }
+};
+/** The styles of the element. */
+M3eThemeIconElement.styles = css`:host { display: inline-block; width: var(--m3e-theme-icon-size, 1.5rem); height: var(--m3e-theme-icon-size, 1.5rem); } .base { width: 100%; height: 100%; border-radius: var(--m3e-theme-icon-shape, ${DesignToken$1.shape.corner.extraSmall}); outline: solid 1px color-mix( in srgb, var(--m3e-theme-icon-outline-color, ${DesignToken$1.color.outlineVariant}) var(--m3e-theme-icon-outline-opacity, 50%), transparent ); } .icon { width: 100%; height: 100%; } .container { fill: var(--m3e-theme-icon-container-color, var(--_theme-icon-container-color)); } .color { fill: var(--m3e-theme-icon-color, var(--_theme-icon-color)); }`;
+__decorate([property()], M3eThemeIconElement.prototype, "color", void 0);
+__decorate([property()], M3eThemeIconElement.prototype, "variant", void 0);
+__decorate([property()], M3eThemeIconElement.prototype, "scheme", void 0);
+M3eThemeIconElement = __decorate([customElement$1("m3e-theme-icon")], M3eThemeIconElement);
+
 /**
  * An item in a table of contents.
  * @tag m3e-toc-item
@@ -37148,5 +37351,5 @@ __decorate([property({
 })], M3eTreeElement.prototype, "cascade", void 0);
 M3eTreeElement = M3eTreeElement_1 = __decorate([customElement$1("m3e-tree")], M3eTreeElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eBreadcrumbElement, M3eBreadcrumbItemElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eContentPaneElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSkeletonElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eSplitPaneElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eTreeElement, M3eTreeItemElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getColorFromImage, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerIcon, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, resumeAnimation, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
+export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eBreadcrumbElement, M3eBreadcrumbItemElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eContentPaneElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSkeletonElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eSplitPaneElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eThemeIconElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eTreeElement, M3eTreeItemElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getColorFromImage, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerIcon, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, resumeAnimation, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
 //# sourceMappingURL=all.js.map