@m3e/web 2.5.8 → 2.5.10

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';
@@ -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: ${ButtonSizeToken[size].leadingSpace}; padding-inline-end: ${ButtonSizeToken[size].trailingSpace}; column-gap: ${ButtonSizeToken[size].iconLabelSpace}; } :host( [size="${unsafeCSS(size)}"]:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .wrapper { padding-inline-start: calc( ${ButtonSizeToken[size].leadingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); padding-inline-end: calc( ${ButtonSizeToken[size].trailingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); } :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( :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"]) .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; } .label { justify-self: center; flex: 1 1 auto; text-align: center; 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(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--adjacent-pressed), :--adjacent-pressed) ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 1; min-width: 0; } :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; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .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(--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`.
@@ -3148,7 +3148,7 @@ function buttonVariantStyle(variant) {
  */
 const ButtonVariantStyle = [buttonVariantStyle("text"), buttonVariantStyle("elevated"), buttonVariantStyle("outlined"), buttonVariantStyle("filled"), buttonVariantStyle("tonal"), css`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];
 
-var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonElement_handleClick, _M3eButtonElement_handleSelectedIconSlotChange, _M3eButtonElement_updateButtonShape, _M3eButtonElement_handlePressedChange;
+var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonElement_handleClick, _M3eButtonElement_handleSelectedIconSlotChange, _M3eButtonElement_updateButtonShape, _M3eButtonElement_handlePressedChange, _M3eButtonElement_cleanupAdjacentPressed;
 /**
  * A button users interact with to perform an action.
  *
@@ -3619,11 +3619,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
      */
     this.selected = false;
     new ResizeController$1(this, {
-      callback: () => {
-        if (this.grouped) {
-          this._handleResize();
-        }
-      }
+      callback: () => this._handleResize()
     });
     new FocusController$1(this, {
       callback: focused => {
@@ -3639,11 +3635,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
         if (!this.disabled && !this.disabledInteractive) {
           if (pressed) {
             __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this);
-            if (prefersReducedMotion$1()) {
-              __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handlePressedChange).call(this, true);
-            } else {
-              requestAnimationFrame(() => __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handlePressedChange).call(this, true));
-            }
+            __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handlePressedChange).call(this, true);
           } else {
             __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handlePressedChange).call(this, false);
           }
@@ -3670,7 +3662,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
     ["--pressed", "--resting", "--grouped", "--connected"].forEach(x => deleteCustomState$1(this, x));
     this._base?.style.removeProperty("--_button-shape");
     this.style.removeProperty("--_button-width");
-    this.style.removeProperty("--_adjacent-button-width");
+    this.style.removeProperty("--_adjacent-shrink");
     deleteCustomState$1(this, "--adjacent-pressed");
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eButtonElement_clickHandler, "f"));
   }
@@ -3697,8 +3689,8 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   }
   /** @private */
   _handleResize() {
-    if (this.grouped && !hasCustomState$1(this, "--pressed")) {
-      this.style.setProperty("--_button-width", `${this.clientWidth}px`);
+    if (this.grouped && !hasCustomState$1(this, "--no-resize") && this !== document.activeElement) {
+      this.style.setProperty("--_button-width", `${this.getBoundingClientRect().width}px`);
       __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this, true);
     }
   }
@@ -3739,27 +3731,67 @@ _M3eButtonElement_updateButtonShape = function _M3eButtonElement_updateButtonSha
   }
 };
 _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressedChange(pressed) {
-  setCustomState$1(this, "--pressed", pressed);
-  setCustomState$1(this, "--resting", !pressed);
+  const clientWidth = this.getBoundingClientRect().width;
   const group = this.closest("m3e-button-group");
-  if (group) {
-    const clientWidth = this.getBoundingClientRect().width;
+  if (group && group.variant === "standard") {
     const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
     const index = buttons.indexOf(this);
-    for (let i = 0; i < buttons.length; i++) {
-      const button = buttons[i];
-      if (i === index - 1) {
-        button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        setCustomState$1(button, "--adjacent-pressed", pressed);
-      } else if (i === index + 1) {
-        button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        setCustomState$1(button, "--adjacent-pressed", pressed);
+    if (pressed) {
+      const multiplier = parseFloat(getComputedStyle(this).getPropertyValue("--m3e-standard-button-group-width-multiplier") || "0.15");
+      let adjacentShrink = clientWidth * multiplier;
+      if (index > 0 && index < buttons.length - 1) {
+        adjacentShrink /= 2;
+      }
+      for (let i = 0; i < buttons.length; i++) {
+        if (i == index - 1 || i == index + 1) {
+          addCustomState$1(buttons[i], "--no-resize");
+          buttons[i].style.setProperty("--_adjacent-shrink", `${adjacentShrink}px`);
+          addCustomState$1(buttons[i], "--adjacent-pressed");
+        } else if (i == index) {
+          addCustomState$1(buttons[i], "--no-resize");
+          buttons[i].style.removeProperty("--_adjacent-shrink");
+          deleteCustomState$1(buttons[i], "--adjacent-pressed");
+        } else {
+          deleteCustomState$1(buttons[i], "--no-resize");
+          buttons[i].style.removeProperty("--_adjacent-shrink");
+          deleteCustomState$1(buttons[i], "--adjacent-pressed");
+        }
+      }
+    } else {
+      for (let i = 0; i < buttons.length; i++) {
+        if (i == index - 1 || i == index + 1) {
+          buttons[i].style.setProperty("--_adjacent-shrink", "0px");
+        }
+      }
+      if (!prefersReducedMotion$1()) {
+        this.addEventListener("transitionend", e => {
+          if (e.propertyName === "width") {
+            queueMicrotask(() => {
+              // Pressed state 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")) {
+                __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_cleanupAdjacentPressed).call(this, buttons);
+              }
+            });
+          }
+        }, {
+          once: true
+        });
       } else {
-        button.style.removeProperty("--_adjacent-button-width");
-        deleteCustomState$1(button, "--adjacent-pressed");
+        __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_cleanupAdjacentPressed).call(this, buttons);
       }
     }
   }
+  setCustomState$1(this, "--pressed", pressed);
+  setCustomState$1(this, "--resting", !pressed);
+};
+_M3eButtonElement_cleanupAdjacentPressed = function _M3eButtonElement_cleanupAdjacentPressed(buttons) {
+  for (const button of buttons) {
+    deleteCustomState$1(button, "--adjacent-pressed");
+    deleteCustomState$1(button, "--no-resize");
+    button.style.removeProperty("--_adjacent-shrink");
+  }
 };
 /** The styles of the element. */
 M3eButtonElement.styles = [ButtonSizeStyle, ButtonVariantStyle, ButtonStyle];
@@ -3788,7 +3820,7 @@ __decorate([property({
 __decorate([debounce$1(40)], M3eButtonElement.prototype, "_handleResize", null);
 M3eButtonElement = __decorate([customElement$1("m3e-button")], M3eButtonElement);
 
-var _M3eButtonGroupElement_instances, _M3eButtonGroupElement_pressedController, _M3eButtonGroupElement_updateButtons, _M3eButtonGroupElement_handleChange;
+var _M3eButtonGroupElement_instances, _M3eButtonGroupElement_pressedController, _M3eButtonGroupElement_updateButtons, _M3eButtonGroupElement_handleChange, _M3eButtonGroupElement_handlePressedChange, _M3eButtonGroupElement_cleanupPressed;
 /**
  * Organizes buttons and adds interactions between them.
  *
@@ -3853,16 +3885,7 @@ let M3eButtonGroupElement = class M3eButtonGroupElement extends Role$1(LitElemen
       capture: true,
       minPressedDuration: 150,
       isPressedKey: key => key === " ",
-      callback: pressed => {
-        if (!this._base) return;
-        if (!pressed || this.variant === "connected") {
-          this._base.style.removeProperty("--_button-group-width");
-          this._base.classList.remove("pressed");
-        } else {
-          this._base.classList.add("pressed");
-          this._base.style.setProperty("--_button-group-width", `${this._base.getBoundingClientRect().width}px`);
-        }
-      }
+      callback: pressed => __classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_handlePressedChange).call(this, pressed)
     }));
     /**
      * The appearance variant of the group.
@@ -3910,11 +3933,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")) {
@@ -3952,6 +3982,34 @@ _M3eButtonGroupElement_handleChange = function _M3eButtonGroupElement_handleChan
     }
   }
 };
+_M3eButtonGroupElement_handlePressedChange = function _M3eButtonGroupElement_handlePressedChange(pressed) {
+  const base = this._base;
+  if (!base) return;
+  if (!pressed || this.variant === "connected") {
+    const button = this.buttons.find(x => x === document.activeElement);
+    if (!prefersReducedMotion$1() && button) {
+      button.addEventListener("transitionend", () => queueMicrotask(() => {
+        // Pressed state 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(button, "--pressed")) {
+          __classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_cleanupPressed).call(this, base);
+        }
+      }), {
+        once: true
+      });
+    } else {
+      __classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_cleanupPressed).call(this, base);
+    }
+  } else {
+    base.classList.add("pressed");
+    base.style.setProperty("--_button-group-width", `${base.getBoundingClientRect().width}px`);
+  }
+};
+_M3eButtonGroupElement_cleanupPressed = function _M3eButtonGroupElement_cleanupPressed(base) {
+  base.style.removeProperty("--_button-group-width");
+  base.classList.remove("pressed");
+};
 /** The styles of the element. */
 M3eButtonGroupElement.styles = css`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--first), :--first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--last), :--last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--first), :--first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--last), :--last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--first), :--first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--last), :--last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--first), :--first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken$1.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--last), :--last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken$1.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--first), :--first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken$1.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--last), :--last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken$1.shape.corner.large} ); }`;
 __decorate([query(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
@@ -8967,6 +9025,40 @@ const ElevationToken$1 = {
   level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`)
 };
 
+/** Design tokens that control measurements. */
+const MeasurementToken = {
+  /** Zero spacing. */
+  space0: unsafeCSS("var(--md-sys-measurement-space0, 0rem)"),
+  /** 2dp spacing. */
+  space25: unsafeCSS("var(--md-sys-measurement-space25, 0.125rem)"),
+  /** 4dp spacing. */
+  space50: unsafeCSS("var(--md-sys-measurement-space50, 0.25rem)"),
+  /** 6dp spacing. */
+  space75: unsafeCSS("var(--md-sys-measurement-space75, 0.375rem)"),
+  /** 8dp spacing. */
+  space100: unsafeCSS("var(--md-sys-measurement-space100, 0.5rem)"),
+  /** 12dp spacing. */
+  space150: unsafeCSS("var(--md-sys-measurement-space150, 0.75rem)"),
+  /** 16dp spacing. */
+  space200: unsafeCSS("var(--md-sys-measurement-space200, 1rem)"),
+  /** 20dp spacing. */
+  space250: unsafeCSS("var(--md-sys-measurement-space250, 1.25rem)"),
+  /** 32dp spacing. */
+  space300: unsafeCSS("var(--md-sys-measurement-space300, 2rem)"),
+  /** 40dp spacing. */
+  space400: unsafeCSS("var(--md-sys-measurement-space400, 2.5rem)"),
+  /** 48dp spacing. */
+  space500: unsafeCSS("var(--md-sys-measurement-space500, 3rem)"),
+  /** 56dp spacing. */
+  space600: unsafeCSS("var(--md-sys-measurement-space600, 3.5rem)"),
+  /** 64dp spacing. */
+  space700: unsafeCSS("var(--md-sys-measurement-space700, 4rem)"),
+  /** 72dp spacing. */
+  space800: unsafeCSS("var(--md-sys-measurement-space800, 4.5rem)"),
+  /** 96dp spacing. */
+  space900: unsafeCSS("var(--md-sys-measurement-space900, 6rem)")
+};
+
 const EasingToken = {
   /** Emphasized transition. */
   emphasized: unsafeCSS("var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0.0, 0, 1.0))"),
@@ -9376,7 +9468,9 @@ const DesignToken = {
   /** Design tokens that control scrollbars. */
   scrollbar: ScrollbarToken,
   /** Design tokens that control density. */
-  density: DensityToken
+  density: DensityToken,
+  /** Design tokens that control measurement. */
+  measurement: MeasurementToken
 };
 
 /**
@@ -16288,7 +16382,7 @@ const IconButtonSizeToken = {
 
 /** @private */
 function iconButtonStyle(size) {
-  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${IconButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${IconButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness}); outline-width: ${IconButtonSizeToken[size].outlineThickness}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"]: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"]) .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`.
@@ -16301,7 +16395,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)):not( :is(:state(--adjacent-pressed), :--adjacent-pressed) ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 1; min-width: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(: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(--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`.
@@ -16715,7 +16809,7 @@ function iconButtonVariantStyle(variant) {
  */
 const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];
 
-var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handlePressedChange, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
+var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handlePressedChange, _M3eIconButtonElement_cleanupAdjacentPressed, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
 /**
  * An icon button users interact with to perform a supplementary action.
  *
@@ -17058,11 +17152,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
      */
     this.selected = false;
     new ResizeController$1(this, {
-      callback: () => {
-        if (this.grouped) {
-          this._handleResize();
-        }
-      }
+      callback: () => this._handleResize()
     });
     new FocusController$1(this, {
       callback: focused => {
@@ -17078,11 +17168,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
         if (!this.disabled && !this.disabledInteractive) {
           if (pressed) {
             __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this);
-            if (prefersReducedMotion$1()) {
-              __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handlePressedChange).call(this, true);
-            } else {
-              requestAnimationFrame(() => __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handlePressedChange).call(this, true));
-            }
+            __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handlePressedChange).call(this, true);
           } else {
             __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handlePressedChange).call(this, false);
           }
@@ -17109,7 +17195,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
     ["--pressed", "--resting", "--grouped", "--connected"].forEach(x => deleteCustomState$1(this, x));
     this._base?.style.removeProperty("--_button-shape");
     this.style.removeProperty("--_button-width");
-    this.style.removeProperty("--_adjacent-button-width");
+    this.style.removeProperty("--_adjacent-shrink");
     deleteCustomState$1(this, "--adjacent-pressed");
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
   }
@@ -17136,8 +17222,8 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   }
   /** @private */
   _handleResize() {
-    if (this.grouped && !hasCustomState$1(this, "--pressed")) {
-      this.style.setProperty("--_button-width", `${this.clientWidth}px`);
+    if (this.grouped && !hasCustomState$1(this, "--no-resize") && this !== document.activeElement) {
+      this.style.setProperty("--_button-width", `${this.getBoundingClientRect().width}px`);
       __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this, true);
     }
   }
@@ -17155,27 +17241,67 @@ _M3eIconButtonElement_updateButtonShape = function _M3eIconButtonElement_updateB
   }
 };
 _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handlePressedChange(pressed) {
-  setCustomState$1(this, "--pressed", pressed);
-  setCustomState$1(this, "--resting", !pressed);
+  const clientWidth = this.getBoundingClientRect().width;
   const group = this.closest("m3e-button-group");
-  if (group) {
-    const clientWidth = this.getBoundingClientRect().width;
+  if (group && group.variant === "standard") {
     const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
     const index = buttons.indexOf(this);
-    for (let i = 0; i < buttons.length; i++) {
-      const button = buttons[i];
-      if (i === index - 1) {
-        button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        setCustomState$1(button, "--adjacent-pressed", pressed);
-      } else if (i === index + 1) {
-        button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        setCustomState$1(button, "--adjacent-pressed", pressed);
+    if (pressed) {
+      const multiplier = parseFloat(getComputedStyle(this).getPropertyValue("--m3e-standard-button-group-width-multiplier") || "0.15");
+      let adjacentShrink = clientWidth * multiplier;
+      if (index > 0 && index < buttons.length - 1) {
+        adjacentShrink /= 2;
+      }
+      for (let i = 0; i < buttons.length; i++) {
+        if (i == index - 1 || i == index + 1) {
+          addCustomState$1(buttons[i], "--no-resize");
+          buttons[i].style.setProperty("--_adjacent-shrink", `${adjacentShrink}px`);
+          addCustomState$1(buttons[i], "--adjacent-pressed");
+        } else if (i == index) {
+          addCustomState$1(buttons[i], "--no-resize");
+          buttons[i].style.removeProperty("--_adjacent-shrink");
+          deleteCustomState$1(buttons[i], "--adjacent-pressed");
+        } else {
+          deleteCustomState$1(buttons[i], "--no-resize");
+          buttons[i].style.removeProperty("--_adjacent-shrink");
+          deleteCustomState$1(buttons[i], "--adjacent-pressed");
+        }
+      }
+    } else {
+      for (let i = 0; i < buttons.length; i++) {
+        if (i == index - 1 || i == index + 1) {
+          buttons[i].style.setProperty("--_adjacent-shrink", "0px");
+        }
+      }
+      if (!prefersReducedMotion$1()) {
+        this.addEventListener("transitionend", e => {
+          if (e.propertyName === "width") {
+            queueMicrotask(() => {
+              // Pressed state 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")) {
+                __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_cleanupAdjacentPressed).call(this, buttons);
+              }
+            });
+          }
+        }, {
+          once: true
+        });
       } else {
-        button.style.removeProperty("--_adjacent-button-width");
-        deleteCustomState$1(button, "--adjacent-pressed");
+        __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_cleanupAdjacentPressed).call(this, buttons);
       }
     }
   }
+  setCustomState$1(this, "--pressed", pressed);
+  setCustomState$1(this, "--resting", !pressed);
+};
+_M3eIconButtonElement_cleanupAdjacentPressed = function _M3eIconButtonElement_cleanupAdjacentPressed(buttons) {
+  for (const button of buttons) {
+    deleteCustomState$1(button, "--adjacent-pressed");
+    deleteCustomState$1(button, "--no-resize");
+    button.style.removeProperty("--_adjacent-shrink");
+  }
 };
 _M3eIconButtonElement_handleClick = function _M3eIconButtonElement_handleClick(e) {
   if (this.disabled || this.disabledInteractive) {
@@ -35113,6 +35239,55 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
       return 0;
   }
 };
+(() => {
+  if (typeof window !== "undefined") {
+    const composeCss = token => {
+      let css = "";
+      for (const key in token) {
+        const cssVar = token[key].toString();
+        if (!cssVar.startsWith("var(")) continue;
+        const inner = cssVar.trim().slice(4, -1); // remove "var(" and ")"
+        const [prop, fallback] = inner.split(/,(.+)/).map(s => s.trim());
+        if (!prop.startsWith("--") || !fallback) continue;
+        css += `${prop}:${fallback};`;
+      }
+      return css;
+    };
+    const omitKey = (obj, key) => {
+      const {
+        [key]: _unused,
+        ...rest
+      } = obj;
+      return rest;
+    };
+    let css = "";
+    css += composeCss(DesignToken$1.typescale.standard.display.large);
+    css += composeCss(DesignToken$1.typescale.standard.display.medium);
+    css += composeCss(DesignToken$1.typescale.standard.display.small);
+    css += composeCss(DesignToken$1.typescale.standard.headline.large);
+    css += composeCss(DesignToken$1.typescale.standard.headline.medium);
+    css += composeCss(DesignToken$1.typescale.standard.headline.small);
+    css += composeCss(DesignToken$1.typescale.standard.title.large);
+    css += composeCss(DesignToken$1.typescale.standard.title.medium);
+    css += composeCss(DesignToken$1.typescale.standard.title.small);
+    css += composeCss(DesignToken$1.typescale.standard.label.large);
+    css += composeCss(DesignToken$1.typescale.standard.label.medium);
+    css += composeCss(DesignToken$1.typescale.standard.label.small);
+    css += composeCss(DesignToken$1.typescale.standard.body.large);
+    css += composeCss(DesignToken$1.typescale.standard.body.medium);
+    css += composeCss(DesignToken$1.typescale.standard.body.small);
+    css += composeCss(DesignToken$1.elevation);
+    css += composeCss(DesignToken$1.shape.corner.value);
+    css += composeCss(omitKey(DesignToken$1.shape.corner, "value"));
+    css += composeCss(DesignToken$1.motion.duration);
+    css += composeCss(DesignToken$1.motion.easing);
+    css += composeCss(DesignToken$1.motion.spring);
+    css += composeCss(omitKey(DesignToken$1.density, "calc"));
+    css += composeCss(DesignToken$1.measurement);
+    css += composeCss(DesignToken$1.state);
+    registerStyleSheet$1(unsafeCSS(`html{${css}}`));
+  }
+})();
 /** The styles of the element. */
 M3eThemeElement.styles = css`:host { display: contents; }`;
 __decorate([property()], M3eThemeElement.prototype, "color", void 0);
@@ -35233,7 +35408,7 @@ _a$1 = TocGenerator, _TocGenerator_getHeaderLevel = function _TocGenerator_getHe
   return element.tagName.startsWith("H") ? parseInt(element.tagName.substring(1)) : parseInt(element.getAttribute("level") ?? "0");
 };
 
-var _M3eTocElement_instances, _M3eTocElement_ignoreScroll, _M3eTocElement_selectionManager, _M3eTocElement_intersectionController, _M3eTocElement_scrollController, _M3eTocElement_mutationController, _M3eTocElement_renderNode, _M3eTocElement_handleOverlineSlotChange, _M3eTocElement_handleTitleSlotChange, _M3eTocElement_handleClick, _M3eTocElement_generateToc;
+var _M3eTocElement_instances, _M3eTocElement_ignoreScroll, _M3eTocElement_selectionManager, _M3eTocElement_intersectionController, _M3eTocElement_scrollController, _M3eTocElement_mutationController, _M3eTocElement_resizeController, _M3eTocElement_renderNode, _M3eTocElement_handleOverlineSlotChange, _M3eTocElement_handleTitleSlotChange, _M3eTocElement_handleClick, _M3eTocElement_generateToc;
 /**
  * A table of contents that provides in-page scroll navigation.
  *
@@ -35300,6 +35475,9 @@ let M3eTocElement = class M3eTocElement extends HtmlFor$1(AttachInternals$1(Role
     _M3eTocElement_ignoreScroll.set(this, false);
     /** @private */
     _M3eTocElement_selectionManager.set(this, new SelectionManager().withHomeAndEnd().withVerticalOrientation().disableRovingTabIndex().onSelectedItemsChange(() => {
+      for (const target of __classPrivateFieldGet(this, _M3eTocElement_resizeController, "f").targets) {
+        __classPrivateFieldGet(this, _M3eTocElement_resizeController, "f").unobserve(target);
+      }
       if (this._activeIndicator) {
         const item = __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").selectedItems[0];
         if (!item) {
@@ -35308,6 +35486,7 @@ let M3eTocElement = class M3eTocElement extends HtmlFor$1(AttachInternals$1(Role
           this._activeIndicator.style.height = `0px`;
           this._activeIndicator.style.visibility = "hidden";
         } else {
+          __classPrivateFieldGet(this, _M3eTocElement_resizeController, "f").observe(item);
           const scrollContainer = this._scrollContainer;
           if (item === __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").items[0]) {
             scrollContainer.scrollTo({
@@ -35373,6 +35552,18 @@ let M3eTocElement = class M3eTocElement extends HtmlFor$1(AttachInternals$1(Role
       },
       callback: () => this._updateToc()
     }));
+    /** @private */
+    _M3eTocElement_resizeController.set(this, new ResizeController$1(this, {
+      target: null,
+      callback: () => {
+        const item = __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").selectedItems[0];
+        if (item && this._activeIndicator) {
+          this._activeIndicator.style.top = `${item.offsetTop}px`;
+          this._activeIndicator.style.height = `${item.clientHeight}px`;
+          this._activeIndicator.style.visibility = item.clientHeight == 0 ? "hidden" : "";
+        }
+      }
+    }));
     /**
      * The maximum depth of the table of contents.
      * @default 2
@@ -35440,6 +35631,7 @@ _M3eTocElement_selectionManager = new WeakMap();
 _M3eTocElement_intersectionController = new WeakMap();
 _M3eTocElement_scrollController = new WeakMap();
 _M3eTocElement_mutationController = new WeakMap();
+_M3eTocElement_resizeController = new WeakMap();
 _M3eTocElement_instances = new WeakSet();
 _M3eTocElement_renderNode = function _M3eTocElement_renderNode(node) {
   return html`<li><m3e-toc-item tabindex="-1" .node="${node}" @click="${__classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_handleClick)}">${node.label}</m3e-toc-item>${node.nodes.length == 0 ? nothing : html`<ul>${node.nodes.map(x => __classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_renderNode).call(this, x))}</ul>`}</li>`;