@m3e/web 2.5.4 → 2.5.6

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, 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, 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 { 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';
@@ -403,9 +403,9 @@ var M3eAutocompleteElement_1;
  * @slot loading - Renders content when loading options.
  * @slot no-data - Renders content when there are no options to show.
  *
- * @fires toggle - Emitted when the options menu opens or closes.
- * @fires query - Emitted when the input is focused or when the user modifies its value.
- * @fires change - Emitted when the committed value changes due to selecting an option or clearing the input.
+ * @fires toggle - Dispatched when the options menu opens or closes.
+ * @fires query - Dispatched when the input is focused or when the user modifies its value.
+ * @fires change - Dispatched when the committed value changes due to selecting an option or clearing the input.
  */
 let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteElement extends HtmlFor$1(LitElement) {
   constructor() {
@@ -600,7 +600,7 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("hideNoData") && this.hideNoData && __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
-      setCustomState$1(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "-no-data", false);
+      setCustomState$1(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "--no-data", false);
     }
     if (changedProperties.has("loading")) {
       if (this.loading) {
@@ -615,7 +615,7 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
       } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
         __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
       } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
-        deleteCustomState$1(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "-loading");
+        deleteCustomState$1(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "--loading");
       } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) {
         __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
       }
@@ -691,7 +691,7 @@ async function _M3eAutocompleteElement_handleMutation() {
   } = this._listKeyManager.setItems([...__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f").querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
-    setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator);
+    setCustomState$1(x, "--hide-selection-indicator", this.hideSelectionIndicator);
   });
   if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
     const count = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
@@ -947,8 +947,8 @@ _M3eAutocompleteElement_projectClone = function _M3eAutocompleteElement_projectC
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").replaceChildren(...children);
 };
 _M3eAutocompleteElement_updateMenuState = function _M3eAutocompleteElement_updateMenuState(menu, count) {
-  setCustomState$1(menu, "-loading", this.loading);
-  setCustomState$1(menu, "-no-data", count == 0);
+  setCustomState$1(menu, "--loading", this.loading);
+  setCustomState$1(menu, "--no-data", count == 0);
 };
 _M3eAutocompleteElement_hideMenu = function _M3eAutocompleteElement_hideMenu() {
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.hide();
@@ -1043,21 +1043,21 @@ _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterO
     clone.hidden = !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOption).call(this, clone, option, term, exactTerm);
     if (clone.hidden === true) {
       __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, clone);
-      deleteCustomState$1(clone, "-first");
-      deleteCustomState$1(clone, "-last");
+      deleteCustomState$1(clone, "--first");
+      deleteCustomState$1(clone, "--last");
     } else {
       newCount++;
       if (!first && !(clone.parentElement instanceof M3eOptGroupElement$1)) {
-        addCustomState$1(clone, "-first");
+        addCustomState$1(clone, "--first");
         first = true;
-        addCustomState$1(clone, "-last");
+        addCustomState$1(clone, "--last");
         last = clone;
       } else {
-        deleteCustomState$1(clone, "-first");
+        deleteCustomState$1(clone, "--first");
         if (last) {
-          deleteCustomState$1(last, "-last");
+          deleteCustomState$1(last, "--last");
         }
-        addCustomState$1(clone, "-last");
+        addCustomState$1(clone, "--last");
         last = clone;
       }
     }
@@ -1407,7 +1407,7 @@ let M3eBottomSheetActionElement = class M3eBottomSheetActionElement extends Acti
 };
 M3eBottomSheetActionElement = __decorate([customElement$1("m3e-bottom-sheet-action")], M3eBottomSheetActionElement);
 
-var _M3eBottomSheetElement_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_inertController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _M3eBottomSheetElement_initialize, _M3eBottomSheetElement_handleHeaderSlotChange, _M3eBottomSheetElement_handleHeaderPointerDown, _M3eBottomSheetElement_handleHeaderPointerMove, _M3eBottomSheetElement_handleHeaderPointerUp, _M3eBottomSheetElement_handleDocumentClick, _M3eBottomSheetElement_handleDocumentKeyDown, _M3eBottomSheetElement_handleWindowResize, _M3eBottomSheetElement_handleDragHandleClick, _M3eBottomSheetElement_handleDragHandleKeyDown, _M3eBottomSheetElement_getNextHigherDetent, _M3eBottomSheetElement_getNextLowerDetent, _M3eBottomSheetElement_getClosestDetent, _M3eBottomSheetElement_computeDetentHeight, _M3eBottomSheetElement_computeMaxHeight, _M3eBottomSheetElement_computeMinHeight, _M3eBottomSheetElement_computePeekHeight, _M3eBottomSheetElement_computeFitHeight, _M3eBottomSheetElement_handleSectionResize, _M3eBottomSheetElement_snapToDetent, _M3eBottomSheetElement_snapToHeight, _M3eBottomSheetElement_updateHeight;
+var _M3eBottomSheetElement_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_inertController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _M3eBottomSheetElement_initialize, _M3eBottomSheetElement_handleHeaderPointerDown, _M3eBottomSheetElement_handleHeaderPointerMove, _M3eBottomSheetElement_handleHeaderPointerUp, _M3eBottomSheetElement_handleDocumentClick, _M3eBottomSheetElement_handleDocumentKeyDown, _M3eBottomSheetElement_handleWindowResize, _M3eBottomSheetElement_handleDragHandleClick, _M3eBottomSheetElement_handleDragHandleKeyDown, _M3eBottomSheetElement_getNextHigherDetent, _M3eBottomSheetElement_getNextLowerDetent, _M3eBottomSheetElement_getClosestDetent, _M3eBottomSheetElement_computeDetentHeight, _M3eBottomSheetElement_computeMaxHeight, _M3eBottomSheetElement_computeMinHeight, _M3eBottomSheetElement_computePeekHeight, _M3eBottomSheetElement_computeFitHeight, _M3eBottomSheetElement_handleSectionResize, _M3eBottomSheetElement_snapToDetent, _M3eBottomSheetElement_snapToHeight, _M3eBottomSheetElement_updateHeight;
 var M3eBottomSheetElement_1;
 /**
  * A sheet used to show secondary content anchored to the bottom of the screen.
@@ -1468,11 +1468,11 @@ var M3eBottomSheetElement_1;
  * @attr open - Whether the bottom sheet is open.
  * @attr overshoot-limit - A fractional value, between 0 and 100, indicating the maximum visual overshoot allowed when dragging past the minimum or maximum size.
  *
- * @fires opening - Emitted when the sheet begins to open.
- * @fires opened - Emitted when the sheet has opened.
- * @fires cancel - Emitted when the sheet is cancelled.
- * @fires closing - Emitted when the sheet begins to close.
- * @fires closed - Emitted when the sheet has closed.
+ * @fires opening - Dispatched when the sheet begins to open.
+ * @fires opened - Dispatched when the sheet has opened.
+ * @fires cancel - Dispatched when the sheet is cancelled.
+ * @fires closing - Dispatched when the sheet begins to close.
+ * @fires closed - Dispatched when the sheet has closed.
  *
  * @cssprop --m3e-bottom-sheet-width - The width of the sheet.
  * @cssprop --m3e-bottom-sheet-max-width - The maximum width of the sheet.
@@ -1731,7 +1731,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
   }
   /** @inheritdoc */
   render() {
-    return html`<m3e-focus-trap ?disabled="${!this.modal}"><div class="base"><m3e-elevation class="elevation"></m3e-elevation><div class="header" @pointerdown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerUp)}">${this.handle ? html`<div class="handle-row"><div id="handle" class="handle" role="button" aria-label="${this.handleLabel}" tabindex="0" @click="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleClick)}" @keydown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleKeyDown)}"><m3e-focus-ring class="focus-ring" for="handle"></m3e-focus-ring><div class="handle-touch" aria-hidden="true"></div></div></div>` : nothing}<slot name="header" @slotchange="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderSlotChange)}"></slot></div><div class="body"><div class="content"><slot></slot></div></div></div></m3e-focus-trap>`;
+    return html`<m3e-focus-trap ?disabled="${!this.modal}"><div class="base"><m3e-elevation class="elevation"></m3e-elevation><div class="header" @pointerdown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerUp)}">${this.handle ? html`<div class="handle-row"><div id="handle" class="handle" role="button" aria-label="${this.handleLabel}" tabindex="0" @click="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleClick)}" @keydown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleKeyDown)}"><m3e-focus-ring class="focus-ring" for="handle"></m3e-focus-ring><div class="handle-touch" aria-hidden="true"></div></div></div>` : nothing}<slot name="header"></slot></div><div class="body"><div class="content"><slot></slot></div></div></div></m3e-focus-trap>`;
   }
 };
 _M3eBottomSheetElement_documentClickHandler = new WeakMap();
@@ -1762,9 +1762,6 @@ _M3eBottomSheetElement_initialize = function _M3eBottomSheetElement_initialize()
     __classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(header);
   }
 };
-_M3eBottomSheetElement_handleHeaderSlotChange = function _M3eBottomSheetElement_handleHeaderSlotChange(e) {
-  setCustomState$1(this, "has-header", hasAssignedNodes$1(e.target));
-};
 _M3eBottomSheetElement_handleHeaderPointerDown = function _M3eBottomSheetElement_handleHeaderPointerDown(e) {
   if (e.target instanceof HTMLElement && M3eInteractivityChecker.isFocusable(e.target)) {
     return;
@@ -1882,7 +1879,7 @@ _M3eBottomSheetElement_handleWindowResize = function _M3eBottomSheetElement_hand
     return;
   }
   const maxHeight = __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computeMaxHeight).call(this);
-  if (hasCustomState$1(this, "-full")) {
+  if (hasCustomState$1(this, "--full")) {
     __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_updateHeight).call(this, maxHeight);
   } else if (this.clientHeight > maxHeight) {
     __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_updateHeight).call(this, maxHeight);
@@ -2059,7 +2056,7 @@ async function _M3eBottomSheetElement_snapToHeight(height) {
 };
 _M3eBottomSheetElement_updateHeight = function _M3eBottomSheetElement_updateHeight(height) {
   this.style.setProperty("--_bottom-sheet-height", `${height}px`);
-  setCustomState$1(this, "-full", height === __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computeMaxHeight).call(this));
+  setCustomState$1(this, "--full", height === __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computeMaxHeight).call(this));
   const content = this.shadowRoot?.querySelector(".content");
   if (content) {
     content.inert = height <= __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computePeekHeight).call(this);
@@ -2069,15 +2066,15 @@ _M3eBottomSheetElement_updateHeight = function _M3eBottomSheetElement_updateHeig
   registerStyleSheet$1(css`@property --_bottom-sheet-height { syntax: "<length>"; inherits: false; initial-value: 50vh; } m3e-bottom-sheet > [slot="header"] { margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); }</length>`);
 })();
 /** The styles of the element. */
-M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standardDecelerate},
-        border-radius ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([modal]):not(:state(-full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken$1.elevation.level1}); } :host([modal]:not(:state(-full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken$1.elevation.level1}); } :host(:state(-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken$1.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken$1.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(:state(-full))), :host([modal]:not(:state(-full)):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]:state(-full)), :host([modal]:state(-full):popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal]:not(:state(-no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standardDecelerate},
+        border-radius ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([modal]):not(:is(:state(--full), :--full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken$1.elevation.level1}); } :host([modal]:not(:is(:state(--full), :--full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken$1.elevation.level1}); } :host(:is(:state(--full), :--full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken$1.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken$1.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(:is(:state(--full), :--full))), :host([modal]:not(:is(:state(--full), :--full)):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]:is(:state(--full), :--full)), :host([modal]:is(:state(--full), :--full):popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(:state(-no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:state(-no-animate))) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
+        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         padding ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         height ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
-        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))), :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop, :host(:not(:state(-no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))), :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
 __decorate([property({
   type: Boolean,
   reflect: true
@@ -2321,7 +2318,7 @@ let M3eBreadcrumbItemButtonElement = class M3eBreadcrumbItemButtonElement extend
 _M3eBreadcrumbItemButtonElement_clickHandler = new WeakMap();
 _M3eBreadcrumbItemButtonElement_instances = new WeakSet();
 _M3eBreadcrumbItemButtonElement_handleSlotChange = function _M3eBreadcrumbItemButtonElement_handleSlotChange(e) {
-  setCustomState$1(this, "-icon-only", isIconOnly(e.target));
+  setCustomState$1(this, "--icon-only", isIconOnly(e.target));
 };
 _M3eBreadcrumbItemButtonElement_handleClick = function _M3eBreadcrumbItemButtonElement_handleClick(e) {
   // If current and link, disable default link click handler behavior.
@@ -2330,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(:state(-icon-only)) .overflow { flex: none; } :host(:not(:state(-icon-only))), :host(:not(:state(-icon-only))) .base { min-width: 0; } :host(:state(-icon-only):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:state(-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(:state(-icon-only)):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-label-color, ${DesignToken$1.color.primary}); } :host(:not(:state(-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(:state(-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(:state(-icon-only):not([current]):not(:disabled)) .base, :host(:not(:state(-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(-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; } }`;
 __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);
@@ -2361,7 +2358,7 @@ var _M3eBreadcrumbItemElement_instances, _M3eBreadcrumbItemElement_defaultSepara
  * @attr download - A value indicating whether the internal link target will be downloaded, optionally specifying a file name.
  * @attr rel - The relationship between the internal link target and the document.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-breadcrumb-item-shape - Shape of the internal breadcrumb item button.
  * @cssprop --m3e-breadcrumb-item-container-height - Height of the internal breadcrumb item button container.
@@ -2449,14 +2446,14 @@ _M3eBreadcrumbItemElement_handleIconSlotChange = function _M3eBreadcrumbItemElem
   __classPrivateFieldGet(this, _M3eBreadcrumbItemElement_instances, "m", _M3eBreadcrumbItemElement_updateIconFilled).call(this);
 };
 _M3eBreadcrumbItemElement_handleSlotChange = function _M3eBreadcrumbItemElement_handleSlotChange(e) {
-  setCustomState$1(this, "-icon-only", isIconOnly(e.target));
+  setCustomState$1(this, "--icon-only", isIconOnly(e.target));
   __classPrivateFieldGet(this, _M3eBreadcrumbItemElement_instances, "m", _M3eBreadcrumbItemElement_updateIconFilled).call(this);
 };
 _M3eBreadcrumbItemElement_updateIconFilled = function _M3eBreadcrumbItemElement_updateIconFilled() {
   this.querySelectorAll("m3e-icon").forEach(x => x.filled = this.current !== undefined && this.current !== null);
 };
 /** The styles of the element. */
-M3eBreadcrumbItemElement.styles = css`:host { display: block; } .base { display: flex; align-items: center; height: 100%; } :host(:not(:state(-icon-only))[current]), :host(:not(:state(-icon-only))[current]) .base { min-width: 0; } .button { flex: 1 1 auto; } .separator { flex: none; display: flex; justify-content: center; align-items: center; min-width: 0.5rem; --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem); } .separator-icon { width: 1em; height: 1em; font-size: var(--m3e-icon-size); vertical-align: middle; }`;
+M3eBreadcrumbItemElement.styles = css`:host { display: block; } .base { display: flex; align-items: center; height: 100%; } :host(:not(:is(:state(--icon-only), :--icon-only))[current]), :host(:not(:is(:state(--icon-only), :--icon-only))[current]) .base { min-width: 0; } .button { flex: 1 1 auto; } .separator { flex: none; display: flex; justify-content: center; align-items: center; min-width: 0.5rem; --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem); } .separator-icon { width: 1em; height: 1em; font-size: var(--m3e-icon-size); vertical-align: middle; }`;
 __decorate([query(".button")], M3eBreadcrumbItemElement.prototype, "_button", void 0);
 __decorate([property({
   attribute: "item-label"
@@ -2564,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)}"]:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not( :state(-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(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${ButtonSizeToken[size].selectedShapeRound}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${ButtonSizeToken[size].shapeSquare}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"]:state(-pressed)) .base { border-radius: ${ButtonSizeToken[size].shapePressedMorph}; } :host(:state(-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(:state(-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(:state(-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:state(-connected)[size="${unsafeCSS(size)}"]:state(-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: ${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}); }`;
 }
 /**
  * Size variant styles for `M3eButtonElement`.
@@ -2576,8 +2573,8 @@ const ButtonSizeStyle = [buttonStyle("extra-small"), buttonStyle("small"), butto
  * Baseline styles for `M3eButtonElement`.
  * @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(:state(-pressed)) .base, :host(:state(-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(:state(-grouped):state(-connected)) { flex: 1 1 auto; } :host(:state(-grouped):not(:state(-connected))) { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:state(-grouped):not(:state(-connected)):not(:state(-adjacent-pressed)):not(:state(-pressed))) { flex-shrink: 0; flex-grow: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) { flex-shrink: 1; min-width: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) .label { text-overflow: clip; } :host(:state(-grouped):not(:state(-connected)):state(-pressed):not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:state(-pressed)) .base, :host(:state(-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(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .label, .icon { transition: none; } }`;
+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; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eButtonElement`.
@@ -3143,7 +3140,7 @@ const ButtonVariantToken = {
 
 /** @private */
 function buttonVariantStyle(variant) {
-  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${ButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${ButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${ButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${ButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${ButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${ButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${ButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].pressed.labelTextColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${ButtonVariantToken[variant].pressed.unselectedLabelTextColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .label { color: ${ButtonVariantToken[variant].pressed.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].pressed.iconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${ButtonVariantToken[variant].pressed.unselectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${ButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { --m3e-elevation-level: ${ButtonVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")}; outline-color: ${ButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.containerColor} ${ButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .label, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.labelTextColor} ${ButtonVariantToken[variant].disabled.labelTextOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.iconColor} ${ButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
+  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${ButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${ButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${ButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${ButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${ButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${ButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${ButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host( [variant="${unsafeCSS(variant)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .base { outline-color: ${ButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.selectedLabelTextColor}; } :host( [variant="${unsafeCSS(variant)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .label { color: ${ButtonVariantToken[variant].pressed.labelTextColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${ButtonVariantToken[variant].pressed.unselectedLabelTextColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${ButtonVariantToken[variant].pressed.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.selectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${ButtonVariantToken[variant].pressed.iconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${ButtonVariantToken[variant].pressed.unselectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${ButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { --m3e-elevation-level: ${ButtonVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")}; outline-color: ${ButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.containerColor} ${ButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .label, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.labelTextColor} ${ButtonVariantToken[variant].disabled.labelTextOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.iconColor} ${ButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
 }
 /**
  * Appearance variant styles for `M3eButtonElement`.
@@ -3199,9 +3196,10 @@ var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonEleme
  * @attr value - The value associated with the element's name when it's submitted with form data.
  * @attr variant - The appearance variant of the button.
  *
+ * @fires beforeinput - Dispatched before a toggle button's selected state changes.
  * @fires input - Dispatched when a toggle button's selected state changes.
  * @fires change - Dispatched when a toggle button's selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-button-container-height - Height of the button container, for all size variants.
  * @cssprop --m3e-button-outline-thickness - Thickness of the button outline, for all size variants.
@@ -3655,7 +3653,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   }
   /** Whether the button is contained by a button group. */
   get grouped() {
-    return hasCustomState$1(this, "-grouped");
+    return hasCustomState$1(this, "--grouped");
   }
   /** @inheritdoc */
   render() {
@@ -3669,11 +3667,11 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => deleteCustomState$1(this, x));
+    ["--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");
-    deleteCustomState$1(this, "-adjacent-pressed");
+    deleteCustomState$1(this, "--adjacent-pressed");
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eButtonElement_clickHandler, "f"));
   }
   /** @inheritdoc */
@@ -3685,8 +3683,8 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   updated(_changedProperties) {
     super.updated(_changedProperties);
     if (_changedProperties.has("disabled") && this.disabled || _changedProperties.has("disabledInteractive") && this.disabledInteractive) {
-      deleteCustomState$1(this, "-pressed");
-      deleteCustomState$1(this, "-resting");
+      deleteCustomState$1(this, "--pressed");
+      deleteCustomState$1(this, "--resting");
     }
     if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
       this.ariaPressed = this.toggle ? `${this.selected}` : null;
@@ -3699,7 +3697,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   }
   /** @private */
   _handleResize() {
-    if (this.grouped && !hasCustomState$1(this, "-pressed")) {
+    if (this.grouped && !hasCustomState$1(this, "--pressed")) {
       this.style.setProperty("--_button-width", `${this.clientWidth}px`);
       __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this, true);
     }
@@ -3713,19 +3711,17 @@ _M3eButtonElement_handleClick = function _M3eButtonElement_handleClick(e) {
     e.stopImmediatePropagation();
   }
   if (this.toggle && !e.defaultPrevented) {
-    this.selected = !this.selected;
-    // Dispatch an input event and if not prevented, dispatch a change event.
-    // Otherwise, reset the selected state.
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.selected = !this.selected;
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.selected = !this.selected;
     }
   }
 };
@@ -3743,8 +3739,8 @@ _M3eButtonElement_updateButtonShape = function _M3eButtonElement_updateButtonSha
   }
 };
 _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressedChange(pressed) {
-  setCustomState$1(this, "-pressed", pressed);
-  setCustomState$1(this, "-resting", !pressed);
+  setCustomState$1(this, "--pressed", pressed);
+  setCustomState$1(this, "--resting", !pressed);
   const group = this.closest("m3e-button-group");
   if (group) {
     const clientWidth = this.getBoundingClientRect().width;
@@ -3754,13 +3750,13 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
       const button = buttons[i];
       if (i === index - 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        setCustomState$1(button, "-adjacent-pressed", pressed);
+        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);
+        setCustomState$1(button, "--adjacent-pressed", pressed);
       } else {
         button.style.removeProperty("--_adjacent-button-width");
-        deleteCustomState$1(button, "-adjacent-pressed");
+        deleteCustomState$1(button, "--adjacent-pressed");
       }
     }
   }
@@ -3927,10 +3923,10 @@ _M3eButtonGroupElement_updateButtons = function _M3eButtonGroupElement_updateBut
   const buttonRole = this.role === "radiogroup" ? "radio" : "button";
   buttons.forEach((button, i) => {
     __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").observe(button);
-    setCustomState$1(button, "-connected", this.variant === "connected");
-    addCustomState$1(button, "-grouped");
-    setCustomState$1(button, "-first", i == 0);
-    setCustomState$1(button, "-last", i == buttons.length - 1);
+    setCustomState$1(button, "--connected", this.variant === "connected");
+    addCustomState$1(button, "--grouped");
+    setCustomState$1(button, "--first", i == 0);
+    setCustomState$1(button, "--last", i == buttons.length - 1);
     if (!this.hasAttribute("disable-role") && button.role !== buttonRole && button.toggle) {
       const checked = !button.toggle ? null : button.selected ? "true" : "false";
       button.role = buttonRole;
@@ -3957,7 +3953,7 @@ _M3eButtonGroupElement_handleChange = function _M3eButtonGroupElement_handleChan
   }
 };
 /** 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(:state(-first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-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(:state(-last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-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} ); }`;
+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);
 __decorate([property({
   reflect: true
@@ -4595,7 +4591,7 @@ var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eC
  * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.
  * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.
  *
- * @fires change - Emitted when the selected date changes.
+ * @fires change - Dispatched when the selected date changes.
  *
  * @cssprop --m3e-calendar-container-color - Background color of the container surface.
  * @cssprop --m3e-calendar-container-elevation - Elevation shadow applied to the container surface.
@@ -5247,7 +5243,7 @@ var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_han
  * @attr orientation - The orientation of the card.
  * @attr variant - The appearance variant of the card.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-card-padding - Internal spacing for all slotted regions
  * @cssprop --m3e-card-shape - Corner radius of the card container.
@@ -5479,10 +5475,11 @@ var _M3eCheckboxElement_instances, _M3eCheckboxElement_clickHandler, _M3eCheckbo
  * @attr required - Whether the element is required.
  * @attr value - A string representing the value of the checkbox.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires invalid - Emitted when a form is submitted and the element fails constraint validation.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires invalid - Dispatched when a form is submitted and the element fails constraint validation.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-checkbox-icon-size - Size of the checkbox icon inside the container.
  * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.
@@ -5592,18 +5589,18 @@ _M3eCheckboxElement_renderIcon = function _M3eCheckboxElement_renderIcon() {
 };
 _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.checked = !this.checked;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = !this.checked;
     this.indeterminate = false;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = !this.checked;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -5611,7 +5608,7 @@ _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken$1.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken$1.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken$1.color.error}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken$1.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken$1.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken$1.color.onError}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base, :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper, :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
+M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken$1.color.primary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken$1.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken$1.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken$1.color.error}); } :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate] ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken$1.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken$1.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken$1.color.onError}); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper, :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: Highlight; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base, :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is( :state(--invalid), :--invalid )[indeterminate] ) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
 __decorate([query(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);
@@ -5730,16 +5727,16 @@ _M3eChipElement_renderContent = function _M3eChipElement_renderContent() {
   return html`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`;
 };
 _M3eChipElement_handleIconSlotChange = function _M3eChipElement_handleIconSlotChange(e) {
-  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eChipElement_handleTrailingIconSlotChange = function _M3eChipElement_handleTrailingIconSlotChange(e) {
-  setCustomState$1(this, "-with-trailing-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-trailing-icon", hasAssignedNodes$1(e.target));
 };
 _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(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:state(-with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:state(-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:state(-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(-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; } }`;
 __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);
@@ -5789,7 +5786,7 @@ M3eChipElement = __decorate([customElement$1("m3e-chip")], M3eChipElement);
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -5902,9 +5899,10 @@ var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFil
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -5983,25 +5981,24 @@ _M3eFilterChipElement_clickHandler = new WeakMap();
 _M3eFilterChipElement_instances = new WeakSet();
 _M3eFilterChipElement_handleClick = function _M3eFilterChipElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  const selected = this.selected;
-  this.selected = !this.selected;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.selected = !this.selected;
     this.closest("m3e-filter-chip-set")?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = selected;
   }
 };
 /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
 M3eFilterChipElement.formAssociated = true;
 /** The styles of the element. */
-M3eFilterChipElement.styles = [M3eChipElement.styles, css`:host([selected]:not(:state(-hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${DesignToken$1.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${DesignToken$1.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${DesignToken$1.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken$1.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken$1.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:state(-with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :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])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`];
+M3eFilterChipElement.styles = [M3eChipElement.styles, css`:host([selected]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:is(:state(--hide-selection), :--hide-selection)) .check, :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${DesignToken$1.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${DesignToken$1.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${DesignToken$1.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken$1.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken$1.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :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])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`];
 M3eFilterChipElement = __decorate([customElement$1("m3e-filter-chip")], M3eFilterChipElement);
 
 var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalitySubscription, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _M3eFilterChipSetElement_updateChipRole, _a$a;
@@ -6037,8 +6034,9 @@ var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalityS
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr vertical - Whether the element is oriented vertically.
  *
- * @fires input - Emitted when the selected state of a chip changes.
- * @fires change - Emitted when the selected state of a chip changes.
+ * @fires beforeinput - Dispatched before the selected state of a chip changes.
+ * @fires input - Dispatched when the selected state of a chip changes.
+ * @fires change - Dispatched when the selected state of a chip changes.
  *
  * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
  */
@@ -6123,7 +6121,7 @@ let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled$1(D
       this.ariaDisabled = this.multi && this.disabled ? "true" : null;
     }
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.chips.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
+      this.chips.forEach(x => setCustomState$1(x, "--hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -6135,7 +6133,7 @@ _M3eFilterChipSetElement_handleSlotChange = function _M3eFilterChipSetElement_ha
   const {
     added
   } = this[selectionManager].setItems([...this.querySelectorAll("m3e-filter-chip")]);
-  added.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
+  added.forEach(x => setCustomState$1(x, "--hide-selection", this.hideSelectionIndicator));
   __classPrivateFieldGet(this, _M3eFilterChipSetElement_instances, "m", _M3eFilterChipSetElement_updateChipRole).call(this);
 };
 _M3eFilterChipSetElement_handleKeyDown = function _M3eFilterChipSetElement_handleKeyDown(e) {
@@ -6197,8 +6195,8 @@ var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange,
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.
- * @fires click - Emitted when the element is clicked.
+ * @fires remove - Dispatched when the remove button is clicked or DELETE or BACKSPACE key is pressed.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -6262,7 +6260,7 @@ let M3eInputChipElement = class M3eInputChipElement extends DisabledInteractive$
     super.update(changedProperties);
     this.removeAttribute("tabindex");
     if (changedProperties.has("removable")) {
-      setCustomState$1(this, "-with-trailing-icon", this.removable);
+      setCustomState$1(this, "--with-trailing-icon", this.removable);
     }
   }
   /** @inheritdoc */
@@ -6276,7 +6274,7 @@ let M3eInputChipElement = class M3eInputChipElement extends DisabledInteractive$
 };
 _M3eInputChipElement_instances = new WeakSet();
 _M3eInputChipElement_handleAvatarSlotChange = function _M3eInputChipElement_handleAvatarSlotChange(e) {
-  setCustomState$1(this, "-with-avatar", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-avatar", hasAssignedNodes$1(e.target));
 };
 _M3eInputChipElement_handleRemoveButtonClick = function _M3eInputChipElement_handleRemoveButtonClick(e) {
   e.stopPropagation();
@@ -6295,7 +6293,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(:state(-with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:state(-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(-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; } }`];
 __decorate([query(".cell")], M3eInputChipElement.prototype, "cell", void 0);
 __decorate([query(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
 __decorate([property({
@@ -6339,7 +6337,7 @@ var _M3eInputChipSetElement_instances, _M3eInputChipSetElement_directionalitySub
  * @attr required - Whether a value is required for the element.
  * @attr vertical - Whether the element is oriented vertically.
  *
- * @fires change - Emitted when a chip is added to, or removed from, the set.
+ * @fires change - Dispatched when a chip is added to, or removed from, the set.
  *
  * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
  */
@@ -6616,7 +6614,7 @@ M3eInputChipSetElement = __decorate([customElement$1("m3e-input-chip-set")], M3e
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -8724,7 +8722,7 @@ function Dirty(base) {
     }
     /** Whether the user has modified the value of the element. */
     get dirty() {
-      return hasCustomState(this, "-dirty");
+      return hasCustomState(this, "--dirty");
     }
     /** Whether the user has not modified the value of the element. */
     get pristine() {
@@ -8743,11 +8741,11 @@ function Dirty(base) {
     }
     /** Marks the element as pristine. */
     markAsPristine() {
-      deleteCustomState(this, "-dirty");
+      deleteCustomState(this, "--dirty");
     }
     /** Marks the element as dirty. */
     markAsDirty() {
-      addCustomState(this, "-dirty");
+      addCustomState(this, "--dirty");
     }
   }
   _a = _eventHandler$2;
@@ -8779,7 +8777,7 @@ function Touched(base) {
     }
     /** Whether the user has interacted when the element. */
     get touched() {
-      return hasCustomState(this, "-touched");
+      return hasCustomState(this, "--touched");
     }
     /** Whether the user has not interacted when the element. */
     get untouched() {
@@ -8802,11 +8800,11 @@ function Touched(base) {
     }
     /** Marks the element as touched. */
     markAsTouched() {
-      addCustomState(this, "-touched");
+      addCustomState(this, "--touched");
     }
     /** Marks the element as untouched. */
     markAsUntouched() {
-      deleteCustomState(this, "-touched");
+      deleteCustomState(this, "--touched");
     }
   }
   _a = _eventHandler$1;
@@ -9525,7 +9523,7 @@ function Labelled(base) {
     [(_a = _eventHandler, updateLabels)]() {
       const focusable = this.hasAttribute("tabindex");
       const disabled = isDisabledMixin(this) && this.disabled || isDisabledInteractiveMixin(this) && this.disabledInteractive;
-      const invalid = isTouchedMixin(this) && this.touched && (this.ariaInvalid || hasCustomState(this, "-invalid"));
+      const invalid = isTouchedMixin(this) && this.touched && (this.ariaInvalid || hasCustomState(this, "--invalid"));
       for (const label of this.labels ?? []) {
         label.style.userSelect = focusable ? "none" : "";
         label.style.cursor = !disabled && focusable ? "pointer" : "";
@@ -9765,7 +9763,7 @@ function ConstraintValidation(base) {
       }
       this[internals].setValidity(validity, validityMessage);
       this.ariaInvalid = invalid ? "true" : null;
-      setCustomState(this, "-invalid", invalid === true);
+      setCustomState(this, "--invalid", invalid === true);
       if (isLabelledMixin(this)) {
         this[updateLabels]?.();
       }
@@ -10437,18 +10435,24 @@ function Role(base, role) {
   return _RoleMixin;
 }
 
+/** A symbol used to define the function called to resume animation. */
+const resumeAnimation = Symbol("resumeAnimation");
 /**
  * Mixin to augment an element with behavior that suppresses initial animations.
  * @template T The type of the base class.
  * @param {T} base The base class.
- * @returns {T} A constructor that implements initial animation suppression.
+ * @returns {Constructor<SuppressInitialAnimationMixin> & T} A constructor that implements initial animation suppression.
  */
 function SuppressInitialAnimation(base) {
   class _SuppressInitialAnimation extends base {
     connectedCallback() {
       super.connectedCallback();
-      addCustomState(this, "-no-animate");
-      requestAnimationFrame(() => deleteCustomState(this, "-no-animate"));
+      addCustomState(this, "--no-animate");
+      this[resumeAnimation]();
+    }
+    /** @internal */
+    [resumeAnimation]() {
+      requestAnimationFrame(() => deleteCustomState(this, "--no-animate"));
     }
   }
   return _SuppressInitialAnimation;
@@ -10544,11 +10548,13 @@ var _M3eCollapsibleElement_instances, _M3eCollapsibleElement_slotChanged, _M3eCo
  * @slot - Renders the collapsible content.
  *
  * @attr open - Whether content is visible.
+ * @attr orientation - Orientation of collapsible content.
+ * @attr no-animate - Whether to disable animation.
  *
- * @fires opening - Emitted when the collapsible begins to open.
- * @fires opened - Emitted when the collapsible has opened.
- * @fires closing - Emitted when the collapsible begins to close.
- * @fires closed - Emitted when the collapsible has closed.
+ * @fires opening - Dispatched when the collapsible begins to open.
+ * @fires opened - Dispatched when the collapsible has opened.
+ * @fires closing - Dispatched when the collapsible begins to close.
+ * @fires closed - Dispatched when the collapsible has closed.
  *
  * @cssprop --m3e-collapsible-animation-duration - The duration of the expand / collapse animation.
  */
@@ -10565,11 +10571,21 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
      * @default false
      */
     this.open = false;
+    /**
+     * Orientation of collapsible content.
+     * @default "vertical"
+     */
+    this.orientation = "vertical";
+    /**
+     * Whether to disable animation.
+     * @default false
+     */
+    this.noAnimate = false;
   }
   /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
-    addCustomState(this, "-no-animate");
+    addCustomState(this, "--no-animate");
     if (!__classPrivateFieldGet(this, _M3eCollapsibleElement_slotChanged, "f")) {
       if (this.open) {
         __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
@@ -10581,26 +10597,26 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
     this.toggleAttribute("inert", !this.open);
     if (this.open) {
       __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
-      if (!prefersReducedMotion()) {
+      if (!(prefersReducedMotion() || this.noAnimate)) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-        setCustomState(this, "-overflows", this.clientHeight < this.scrollHeight);
+        setCustomState(this, "--overflows", this.orientation === "vertical" ? this.clientHeight < this.scrollHeight : this.clientWidth < this.scrollWidth);
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
       }
-      deleteCustomState(this, "-closing");
-      addCustomState(this, "-opening");
+      deleteCustomState(this, "--closing");
+      addCustomState(this, "--opening");
       this.dispatchEvent(new Event("opening"));
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
-      deleteCustomState(this, "-no-animate");
+      deleteCustomState(this, "--no-animate");
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
-      if (prefersReducedMotion()) {
+      if (prefersReducedMotion() || this.noAnimate) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-        deleteCustomState(this, "-opening");
+        deleteCustomState(this, "--opening");
         this.dispatchEvent(new Event("opened"));
       } else {
         this.addEventListener("transitionend", () => {
           if (this.open) {
             __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-            deleteCustomState(this, "-opening");
+            deleteCustomState(this, "--opening");
             this.dispatchEvent(new Event("opened"));
           }
         }, {
@@ -10608,23 +10624,23 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
         });
       }
     } else {
-      deleteCustomState(this, "-opening");
-      addCustomState(this, "-closing");
+      deleteCustomState(this, "--opening");
+      addCustomState(this, "--closing");
       this.dispatchEvent(new Event("closing"));
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
       if (__classPrivateFieldGet(this, _M3eCollapsibleElement_hasOpened, "f")) {
-        deleteCustomState(this, "-no-animate");
+        deleteCustomState(this, "--no-animate");
       }
-      if (prefersReducedMotion()) {
+      if (prefersReducedMotion() || this.noAnimate) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
-        deleteCustomState(this, "-closing");
+        deleteCustomState(this, "--closing");
         this.dispatchEvent(new Event("closed"));
       } else {
         requestAnimationFrame(() => {
           __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
           this.addEventListener("transitionend", () => {
             if (!this.open) {
-              deleteCustomState(this, "-closing");
+              deleteCustomState(this, "--closing");
               this.dispatchEvent(new Event("closed"));
             }
           }, {
@@ -10646,27 +10662,46 @@ _M3eCollapsibleElement_handleSlotChange = function _M3eCollapsibleElement_handle
   __classPrivateFieldSet(this, _M3eCollapsibleElement_slotChanged, true, "f");
 };
 _M3eCollapsibleElement_autoSize = function _M3eCollapsibleElement_autoSize() {
-  this.style.height = "auto";
+  this.style[this.orientation === "vertical" ? "height" : "width"] = "auto";
 };
 _M3eCollapsibleElement_clearSize = function _M3eCollapsibleElement_clearSize() {
-  this.style.height = "";
+  this.style[this.orientation === "vertical" ? "height" : "width"] = "";
 };
 _M3eCollapsibleElement_actualSize = function _M3eCollapsibleElement_actualSize() {
-  this.style.height = `${this.scrollHeight}px`;
+  if (this.orientation === "vertical") {
+    this.style.height = `${this.scrollHeight}px`;
+  } else {
+    this.style.width = `${this.scrollWidth}px`;
+  }
 };
 /** The styles of the element. */
-M3eCollapsibleElement.styles = css`:host { display: block; height: 0px; overflow: hidden; transition: ${unsafeCSS(`visibility var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+M3eCollapsibleElement.styles = css`:host { display: block; overflow: hidden; } :host([orientation="vertical"]) { height: 0px; transition: ${unsafeCSS(`visibility var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
           ${DesignToken.motion.easing.standard},
         height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
           ${DesignToken.motion.easing.standard},
         padding-top var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
           ${DesignToken.motion.easing.standard},
         padding-bottom var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-          ${DesignToken.motion.easing.standard}`)}; } :host(:not(:state(-closing)):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(:state(-no-animate)) { transition-duration: 0ms; } :host(:state(-opening)), :host(:state(-closing)) { overflow-y: hidden !important; } :host(:state(-overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
+          ${DesignToken.motion.easing.standard}`)}; } :host([orientation="horizontal"]) { width: 0px; transition: ${unsafeCSS(`visibility var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard},
+        width var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard},
+        padding-left var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard},
+        padding-right var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--closing), :--closing)):not([open])) { visibility: hidden; } :host([orientation="vertical"]:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host([orientation="horizontal"]:not([open])) { min-width: unset !important; padding-left: 0px !important; padding-right: 0px !important; } :host([no-animate]), :host(:is(:state(--no-animate), :--no-animate)) { transition-duration: 0ms; } :host([orientation="vertical"]:is(:state(--opening), :--opening)), :host([orientation="vertical"]:is(:state(--closing), :--closing)) { overflow-y: hidden !important; } :host([orientation="horizontal"]:is(:state(--opening), :--opening)), :host([orientation="horizontal"]:is(:state(--closing), :--closing)) { overflow-x: hidden !important; } :host(:is(:state(--overflows), :--overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
 __decorate([property({
   type: Boolean,
   reflect: true
 })], M3eCollapsibleElement.prototype, "open", void 0);
+__decorate([property({
+  reflect: true
+})], M3eCollapsibleElement.prototype, "orientation", void 0);
+__decorate([property({
+  attribute: "no-animate",
+  type: Boolean,
+  reflect: true
+})], M3eCollapsibleElement.prototype, "noAnimate", void 0);
 M3eCollapsibleElement = __decorate([customElement("m3e-collapsible")], M3eCollapsibleElement);
 
 /**
@@ -11360,13 +11395,13 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends AttachIn
   _updateScroll() {
     const before = (this.dividers === "above" || this.dividers === "above-below") && this.scrollTop > 0;
     const after = (this.dividers === "below" || this.dividers === "above-below") && this.scrollHeight - this.scrollTop - this.clientHeight > 1;
-    setCustomState(this, "-above", before);
-    setCustomState(this, "-below", after);
+    setCustomState(this, "--above", before);
+    setCustomState(this, "--below", after);
   }
 };
 _M3eScrollContainerElement_scrollHandler = new WeakMap();
 /** The styles of the element. */
-M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible):state(-above)) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible):state(-below)) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible):state(-above)) { border-top-color: GrayText; } :host(:not(:focus-visible):state(-below)) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
+M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible):is(:state(--above), :--above)) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible):is(:state(--below), :--below)) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible):is(:state(--above), :--above)) { border-top-color: GrayText; } :host(:not(:focus-visible):is(:state(--below), :--below)) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
 __decorate([property()], M3eScrollContainerElement.prototype, "dividers", void 0);
 __decorate([property({
   type: Boolean,
@@ -11415,20 +11450,20 @@ let M3eSlideElement = class M3eSlideElement extends AttachInternals(LitElement)
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    addCustomState(this, "-no-animate");
+    addCustomState(this, "--no-animate");
   }
   /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("selectedIndex")) {
       if (this.selectedIndex === null) {
-        addCustomState(this, "-no-animate");
+        addCustomState(this, "--no-animate");
       }
       __classPrivateFieldGet(this, _M3eSlideElement_instances, "m", _M3eSlideElement_updateItems).call(this);
-      if (this.selectedIndex !== null && hasCustomState(this, "-no-animate")) {
+      if (this.selectedIndex !== null && hasCustomState(this, "--no-animate")) {
         requestAnimationFrame(() => {
           if (this.selectedIndex !== null) {
-            deleteCustomState(this, "-no-animate");
+            deleteCustomState(this, "--no-animate");
           }
         });
       }
@@ -11464,7 +11499,7 @@ _M3eSlideElement_updateItems = function _M3eSlideElement_updateItems() {
 };
 /** The styles of the element. */
 M3eSlideElement.styles = css`:host { display: flex; position: relative; overflow: hidden; } ::slotted(*) { width: 100%; top: 0; transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
-        visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } ::slotted(.-before), ::slotted(.-after) { visibility: hidden; position: absolute; } ::slotted(.-before) { inset-inline-start: -100%; } ::slotted(.-after) { inset-inline-start: 100%; } ::slotted(:not(.-before):not(.-after)) { position: relative; inset-inline-start: 0; } :host(:state(-no-animate)) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
+        visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } ::slotted(.-before), ::slotted(.-after) { visibility: hidden; position: absolute; } ::slotted(.-before) { inset-inline-start: -100%; } ::slotted(.-after) { inset-inline-start: 100%; } ::slotted(:not(.-before):not(.-after)) { position: relative; inset-inline-start: 0; } :host(:is(:state(--no-animate), :--no-animate)) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
 __decorate([property({
   attribute: "selected-index",
   type: Number,
@@ -11665,7 +11700,7 @@ var M3eTextHighlightElement_1;
  * @attr mode - The mode in which to highlight text.
  * @attr term - The term to highlight.
  *
- * @fires highlight - Emitted when content is highlighted.
+ * @fires highlight - Dispatched when content is highlighted.
  *
  * @cssprop --m3e-text-highlight-container-color - Background color applied to highlighted text ranges.
  * @cssprop --m3e-text-highlight-color - Foreground color of highlighted text content.
@@ -11930,6 +11965,7 @@ var M3eDatepickerElement_1;
  * @attr date - The selected date.
  * @attr max-date - The maximum date that can be selected.
  * @attr min-date - The minimum date that can be selected.
+ * @attr range - Whether a range of dates can be selected.
  * @attr range-end - End of a date range.
  * @attr range-start - Start of a date range.
  * @attr start-at - A date specifying the period (month or year) to start the calendar in.
@@ -12031,6 +12067,11 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
      * @default null
      */
     this.maxDate = null;
+    /**
+     * Whether a range of dates can be selected.
+     * @default false
+     */
+    this.range = false;
     /**
      * Start of a date range.
      * @default null
@@ -12129,8 +12170,8 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
     this._variant = undefined;
     __classPrivateFieldGet(this, _M3eDatepickerElement_breakpointUnobserve, "f")?.call(this);
     __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearAnchoring).call(this);
-    deleteCustomState$1(this, "-docked");
-    deleteCustomState$1(this, "-modal");
+    deleteCustomState$1(this, "--docked");
+    deleteCustomState$1(this, "--modal");
     this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eDatepickerElement_toggleHandler, "f"));
     document.removeEventListener("click", __classPrivateFieldGet(this, _M3eDatepickerElement_documentClickHandler, "f"));
     document.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eDatepickerElement_documentKeyDownHandler, "f"));
@@ -12213,6 +12254,9 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
     if (["date", "rangeStart", "rangeEnd"].some(x => changedProperties.has(x))) {
       __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
     }
+    if (changedProperties.has("rangeStart") && this.rangeStart) {
+      this.range = true;
+    }
     if (changedProperties.has("rangeStart") && this.rangeStart && !changedProperties.has("date")) {
       this.date = new Date(this.rangeStart);
     }
@@ -12250,12 +12294,20 @@ _M3eDatepickerElement_toggleHandler = new WeakMap();
 _M3eDatepickerElement_instances = new WeakSet();
 _M3eDatepickerElement_renderHeader = function _M3eDatepickerElement_renderHeader() {
   if (this.currentVariant === "docked") return nothing;
+  const rangeStart = this._rangeStart ?? this.rangeStart;
+  const rangeEnd = this._rangeStart ? this._rangeEnd : this._rangeEnd ?? this.rangeEnd;
   const selectedDate = this._date ?? this.date;
-  return html`<div class="supporting-text">${this.label}</div><div class="headline">${selectedDate ? new Intl.DateTimeFormat(navigator.language, {
+  return html`<div class="supporting-text">${this.label}</div>${rangeStart ? html`<div class="headline">${new Intl.DateTimeFormat(navigator.language, {
+    month: "short",
+    day: "numeric"
+  }).format(rangeStart) + " – " + (rangeEnd ? new Intl.DateTimeFormat(navigator.language, {
+    month: "short",
+    day: "numeric"
+  }).format(rangeEnd) : "")}</div>` : html`<div class="headline">${selectedDate ? new Intl.DateTimeFormat(navigator.language, {
     weekday: "short",
     month: "short",
     day: "numeric"
-  }).format(selectedDate) : "––"}</div><div class="divider"></div>`;
+  }).format(selectedDate) : "––"}</div>`}<div class="divider"></div>`;
 };
 _M3eDatepickerElement_handleDocumentClick = function _M3eDatepickerElement_handleDocumentClick(e) {
   if (!e.composedPath().some(x => x instanceof M3eDatepickerElement_1 || x === __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eDatepickerElement_anchor, "f"))) {
@@ -12266,6 +12318,10 @@ _M3eDatepickerElement_handleCalendarChange = function _M3eDatepickerElement_hand
   this._date = this._calendar.date;
   this._rangeStart = this._calendar.rangeStart;
   this._rangeEnd = this._calendar.rangeEnd;
+  if (this.range && !this._rangeStart && this._date) {
+    this._rangeStart = new Date(this._date);
+    this._calendar.rangeStart = this._rangeStart;
+  }
 };
 _M3eDatepickerElement_handleClearClick = function _M3eDatepickerElement_handleClearClick() {
   this.date = null;
@@ -12304,15 +12360,15 @@ _M3eDatepickerElement_updateVariant = function _M3eDatepickerElement_updateVaria
   switch (this.currentVariant) {
     case "docked":
       this.ariaModal = null;
-      deleteCustomState$1(this, "-modal");
-      addCustomState$1(this, "-docked");
+      deleteCustomState$1(this, "--modal");
+      addCustomState$1(this, "--docked");
       __classPrivateFieldGet(this, _M3eDatepickerElement_scrollLockController, "f").unlock();
       __classPrivateFieldGet(this, _M3eDatepickerElement_inertController, "f").unlock();
       break;
     case "modal":
       this.ariaModal = "true";
-      deleteCustomState$1(this, "-docked");
-      addCustomState$1(this, "-modal");
+      deleteCustomState$1(this, "--docked");
+      addCustomState$1(this, "--modal");
       if (this.isOpen) {
         __classPrivateFieldGet(this, _M3eDatepickerElement_scrollLockController, "f").lock();
         __classPrivateFieldGet(this, _M3eDatepickerElement_inertController, "f").lock();
@@ -12333,8 +12389,8 @@ async function _M3eDatepickerElement_updatePosition() {
       flip: true,
       shift: "both"
     }, (x, y, position) => {
-      setCustomState$1(this, "-top", position.includes("top"));
-      setCustomState$1(this, "-bottom", position.includes("bottom"));
+      setCustomState$1(this, "--top", position.includes("top"));
+      setCustomState$1(this, "--bottom", position.includes("bottom"));
       if (M3eDirectionality.current === "rtl") {
         this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
         this.style.left = "";
@@ -12359,14 +12415,14 @@ _M3eDatepickerElement_clearSelectionState = function _M3eDatepickerElement_clear
   this._date = this._rangeStart = this._rangeEnd = undefined;
 };
 /** The styles of the element. */
-M3eDatepickerElement.styles = css`:host { flex-direction: column; margin: unset; border: unset; padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem); padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem); background-color: var(--m3e-datepicker-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .calendar { --m3e-calendar-container-color: transparent; --m3e-calendar-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-calendar-container-shape: ${DesignToken$1.shape.corner.none}; } .headline { color: var(--m3e-datepicker-modal-headline-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var( --m3e-datepicker-modal-headline-font-size, ${DesignToken$1.typescale.standard.headline.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-headline-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-headline-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-headline-tracking, ${DesignToken$1.typescale.standard.headline.large.tracking} ); margin-block-start: 2.25rem; margin-block-end: 0.75rem; margin-inline: 1.5rem; } .supporting-text { color: var(--m3e-datepicker-modal-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var( --m3e-datepicker-modal-supporting-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-supporting-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-supporting-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-supporting-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); margin-block-start: 1rem; margin-inline: 1.5rem; } .divider { height: var(--m3e-divider-thickness, 1px); width: 100%; position: relative; } .divider::before { content: ""; box-sizing: border-box; position: absolute; border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); height: inherit; left: -0.25rem; right: -0.25rem; } .actions { display: flex; align-items: center; column-gap: 0.5rem; padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem); } .spacer { flex: 1 1 auto; } :host(:state(-docked)) { position: absolute; background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken$1.color.surfaceContainer}); border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:state(-modal)) { position: fixed; inset: 0; margin: auto; transform-origin: top; background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken$1.color.surfaceContainerHigh}); border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken$1.shape.corner.extraLarge}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
+M3eDatepickerElement.styles = css`:host { flex-direction: column; margin: unset; border: unset; padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem); padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem); background-color: var(--m3e-datepicker-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .calendar { --m3e-calendar-container-color: transparent; --m3e-calendar-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-calendar-container-shape: ${DesignToken$1.shape.corner.none}; } .headline { color: var(--m3e-datepicker-modal-headline-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var( --m3e-datepicker-modal-headline-font-size, ${DesignToken$1.typescale.standard.headline.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-headline-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-headline-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-headline-tracking, ${DesignToken$1.typescale.standard.headline.large.tracking} ); margin-block-start: 2.25rem; margin-block-end: 0.75rem; margin-inline: 1.5rem; } .supporting-text { color: var(--m3e-datepicker-modal-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var( --m3e-datepicker-modal-supporting-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-supporting-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-supporting-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-supporting-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); margin-block-start: 1rem; margin-inline: 1.5rem; } .divider { height: var(--m3e-divider-thickness, 1px); width: 100%; position: relative; } .divider::before { content: ""; box-sizing: border-box; position: absolute; border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); height: inherit; left: -0.25rem; right: -0.25rem; } .actions { display: flex; align-items: center; column-gap: 0.5rem; padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem); } .spacer { flex: 1 1 auto; } :host(:is(:state(--docked), :--docked)) { position: absolute; background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken$1.color.surfaceContainer}); border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:is(:state(--modal), :--modal)) { position: fixed; inset: 0; margin: auto; transform-origin: top; background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken$1.color.surfaceContainerHigh}); border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken$1.shape.corner.extraLarge}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
         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`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: inline-flex; opacity: 1; } :host(:state(-docked))::backdrop { background-color: transparent; } :host(:state(-modal))::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); margin-inline-end: -20px; } :host(:state(-modal):not(:popover-open))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+        display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: inline-flex; opacity: 1; } :host(:is(:state(--docked), :--docked))::backdrop { background-color: transparent; } :host(:is(:state(--modal), :--modal))::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); margin-inline-end: -20px; } :host(:is(:state(--modal), :--modal):not(:popover-open))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-modal):popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%), transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--modal), :--modal):popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%), transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } :host(:state(-modal):popover-open)::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; border: 1px solid CanvasText; } }`;
+        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } :host(:is(:state(--modal), :--modal):popover-open)::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; border: 1px solid CanvasText; } }`;
 __decorate([state()], M3eDatepickerElement.prototype, "_date", void 0);
 __decorate([state()], M3eDatepickerElement.prototype, "_rangeStart", void 0);
 __decorate([state()], M3eDatepickerElement.prototype, "_rangeEnd", void 0);
@@ -12391,6 +12447,9 @@ __decorate([property({
   attribute: "max-date",
   converter: dateConverter$1
 })], M3eDatepickerElement.prototype, "maxDate", void 0);
+__decorate([property({
+  type: Boolean
+})], M3eDatepickerElement.prototype, "range", void 0);
 __decorate([property({
   attribute: "range-start",
   converter: dateConverter$1
@@ -12531,11 +12590,11 @@ var M3eDialogElement_1;
  * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
  * @attr open - Whether the dialog is open.
  *
- * @fires opening - Emitted when the dialog begins to open.
- * @fires opened - Emitted when the dialog has opened.
- * @fires cancel - Emitted when the dialog is cancelled.
- * @fires closing - Emitted when the dialog begins to close.
- * @fires closed - Emitted when the dialog has closed.
+ * @fires opening - Dispatched when the dialog begins to open.
+ * @fires opened - Dispatched when the dialog has opened.
+ * @fires cancel - Dispatched when the dialog is cancelled.
+ * @fires closing - Dispatched when the dialog begins to close.
+ * @fires closed - Dispatched when the dialog has closed.
  *
  * @cssprop --m3e-dialog-shape - Border radius of the dialog container.
  * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.
@@ -12718,7 +12777,7 @@ _M3eDialogElement_handleActionsSlotChange = function _M3eDialogElement_handleAct
   this._withActions = e.target.assignedNodes({
     flatten: true
   }).length > 0;
-  setCustomState$1(this, "-with-actions", this._withActions);
+  setCustomState$1(this, "--with-actions", this._withActions);
 };
 /** The styles of the element. */
 M3eDialogElement.styles = css`:host { display: contents; } .base { font: inherit; border: unset; outline: unset; padding: unset; display: flex; flex-direction: column; position: fixed; overflow: visible; border-radius: var(--m3e-dialog-shape, ${DesignToken$1.shape.corner.extraLarge}); min-width: var(--m3e-dialog-min-width, 17.5rem); max-width: var(--m3e-dialog-max-width, 35rem); color: var(--m3e-dialog-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-dialog-container-color, ${DesignToken$1.color.surfaceContainerHigh}); visibility: hidden; opacity: 0; transform-origin: top; transform: translateY(-3.125rem) scaleY(0.8); } .base::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); margin-inline-end: -20px; } .base:not([open]) { visibility: hidden; opacity: 0; transform: translateY(-3.125rem) scaleY(0.8); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.emphasized}, 
@@ -12731,7 +12790,7 @@ M3eDialogElement.styles = css`:host { display: contents; } .base { font: inherit
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
         visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .base[open]::backdrop { background-color: color-mix( in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%), transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { .base[open] { opacity: 0; transform: translateY(-3.125rem) scaleY(0.8); } .base[open]::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); } } .header { flex: none; display: flex; align-items: center; padding: 1.5rem 1.5rem 1rem 1.5rem; background-color: var(--m3e-dialog-header-container-color, transparent); } ::slotted([slot="header"]) { margin: unset; flex: 1 1 auto; color: var(--m3e-dialog-header-color, inherit); font-size: var(--m3e-dialog-header-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-dialog-header-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}); } .content { padding-inline: 1.5rem; color: var(--m3e-dialog-content-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-dialog-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-dialog-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .actions { padding: 1.5rem; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } :host(:not(:state(-with-actions))) .content { margin-bottom: 1.5rem; } :host(:not(:state(-with-actions))) .actions { display: none; } .close { margin-inline-start: 0.5rem; } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { .base:not([open])::backdrop, .base[open]::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } } @media (prefers-reduced-motion) { .base:not([open]), .base[open], .base:not([open])::backdrop, .base[open]::backdrop { transition: none; } }`;
+        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { .base[open] { opacity: 0; transform: translateY(-3.125rem) scaleY(0.8); } .base[open]::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); } } .header { flex: none; display: flex; align-items: center; padding: 1.5rem 1.5rem 1rem 1.5rem; background-color: var(--m3e-dialog-header-container-color, transparent); } ::slotted([slot="header"]) { margin: unset; flex: 1 1 auto; color: var(--m3e-dialog-header-color, inherit); font-size: var(--m3e-dialog-header-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-dialog-header-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}); } .content { padding-inline: 1.5rem; color: var(--m3e-dialog-content-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-dialog-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-dialog-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .actions { padding: 1.5rem; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } :host(:not(:is(:state(--with-actions), :--with-actions))) .content { margin-bottom: 1.5rem; } :host(:not(:is(:state(--with-actions), :--with-actions))) .actions { display: none; } .close { margin-inline-start: 0.5rem; } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { .base:not([open])::backdrop, .base[open]::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } } @media (prefers-reduced-motion) { .base:not([open]), .base[open], .base:not([open])::backdrop, .base[open]::backdrop { transition: none; } }`;
 /** @private */
 M3eDialogElement.__nextId = 0;
 __decorate([state()], M3eDialogElement.prototype, "_withActions", void 0);
@@ -12890,9 +12949,9 @@ const DrawerContainerToken = {
 const DrawerContainerStyle = css`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { position: absolute; top: 0; bottom: 0; z-index: 3; outline: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; box-sizing: border-box; background-color: ${DrawerContainerToken.containerColor}; box-shadow: ${DrawerContainerToken.containerElevation}; transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard},
       visibility ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard} allow-discrete,
       background-color ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard},
-      box-shadow ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${DrawerContainerToken.containerWidth}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-start-push)[start]:not(:dir(rtl))) .content, :host(:state(-start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:state(-start-push)[start]:dir(rtl)) .content, :host(:state(-start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:state(-end-push)[end]:not(:dir(rtl))) .content, :host(:state(-end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:state(-end-push)[end]:dir(rtl)) .content, :host(:state(-end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${DesignToken$1.color.scrim}; opacity: 0; visibility: hidden; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard}, 
-        visibility ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:state(-start-push)[start]) .scrim, :host(:state(-end-push)[end]) .scrim, :host(:state(-start-over)[start]) .scrim, :host(:state(-end-over)[end]) .scrim { visibility: visible; opacity: ${DrawerContainerToken.scrimOpacity}; } :host(:state(-start-push)) .start, :host(:state(-start-over)) .start { border-start-end-radius: ${DrawerContainerToken.cornerShape}; border-end-end-radius: ${DrawerContainerToken.cornerShape}; } :host(:state(-end-push)) .end, :host(:state(-end-over)) .end { border-start-start-radius: ${DrawerContainerToken.cornerShape}; border-end-start-radius: ${DrawerContainerToken.cornerShape}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: ${DrawerContainerToken.modalContainerColor}; box-shadow: ${DrawerContainerToken.modalContainerElevation}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${DrawerContainerToken.dividerThickness}; border-inline-end-style: solid; box-sizing: border-box; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: ${DrawerContainerToken.dividerColor}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${DrawerContainerToken.dividerThickness}; border-inline-start-style: solid; box-sizing: border-box; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: ${DrawerContainerToken.dividerColor}; } :host(:state(-no-animate)) .start, :host(:state(-no-animate)) .end, :host(:state(-no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard},
-      visibility ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: GrayText; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;
+      box-shadow ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${DrawerContainerToken.containerWidth}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:is(:state(--start-push), :--start-push)[start]:not(:dir(rtl))) .content, :host(:is(:state(--start-side), :--start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--start-push), :--start-push)[start]:dir(rtl)) .content, :host(:is(:state(--start-side), :--start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--end-push), :--end-push)[end]:not(:dir(rtl))) .content, :host(:is(:state(--end-side), :--end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--end-push), :--end-push)[end]:dir(rtl)) .content, :host(:is(:state(--end-side), :--end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${DesignToken$1.color.scrim}; opacity: 0; visibility: hidden; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard}, 
+        visibility ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:is(:state(--start-push), :--start-push)[start]) .scrim, :host(:is(:state(--end-push), :--end-push)[end]) .scrim, :host(:is(:state(--start-over), :--start-over)[start]) .scrim, :host(:is(:state(--end-over), :--end-over)[end]) .scrim { visibility: visible; opacity: ${DrawerContainerToken.scrimOpacity}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--start-over), :--start-over)) .start { border-start-end-radius: ${DrawerContainerToken.cornerShape}; border-end-end-radius: ${DrawerContainerToken.cornerShape}; } :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--end-over), :--end-over)) .end { border-start-start-radius: ${DrawerContainerToken.cornerShape}; border-end-start-radius: ${DrawerContainerToken.cornerShape}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: ${DrawerContainerToken.modalContainerColor}; box-shadow: ${DrawerContainerToken.modalContainerElevation}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${DrawerContainerToken.dividerThickness}; border-inline-end-style: solid; box-sizing: border-box; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not(:is(:state(--end-push), :--end-push)[end]):not( :is(:state(--end-over), :--end-over)[end] ) ) .start { border-inline-end-color: ${DrawerContainerToken.dividerColor}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${DrawerContainerToken.dividerThickness}; border-inline-start-style: solid; box-sizing: border-box; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: ${DrawerContainerToken.dividerColor}; } :host(:is(:state(--no-animate), :--no-animate)) .start, :host(:is(:state(--no-animate), :--no-animate)) .end, :host(:is(:state(--no-animate), :--no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard},
+      visibility ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not( :is(:state(--end-push), :--end-push)[end] ):not(:is(:state(--end-over), :--end-over)[end]) ) .start { border-inline-end-color: GrayText; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;
 
 var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointUnobserve, _M3eDrawerContainerElement_disableStartFocusTrap, _M3eDrawerContainerElement_disableEndFocusTrap, _M3eDrawerContainerElement_resizeController, _M3eDrawerContainerElement_initialize, _M3eDrawerContainerElement_handleScrimClick, _M3eDrawerContainerElement_handleStartSlotChange, _M3eDrawerContainerElement_handleEndSlotChange, _M3eDrawerContainerElement_handleDrawerResize, _M3eDrawerContainerElement_initBreakpointMonitoring, _M3eDrawerContainerElement_clearMode, _M3eDrawerContainerElement_updateMode;
 /**
@@ -12933,7 +12992,7 @@ var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointU
  * @attr start-mode - The behavior mode of the start drawer.
  * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.
  *
- * @fires change - Emitted when the state of the start or end drawers change.
+ * @fires change - Dispatched when the state of the start or end drawers change.
  *
  * @cssprop --m3e-drawer-container-color - The background color of the drawer container.
  * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.
@@ -13000,7 +13059,7 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends Reconnec
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    addCustomState$1(this, "-no-animate");
+    addCustomState$1(this, "--no-animate");
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -13090,22 +13149,22 @@ _M3eDrawerContainerElement_handleDrawerResize = function _M3eDrawerContainerElem
       this.style.setProperty("--_end-drawer-size", `${borderSize.inlineSize}px`);
     }
   }
-  if (hasCustomState$1(this, "-no-animate")) {
+  if (hasCustomState$1(this, "--no-animate")) {
     // Force synchronous layout flush
     void this.offsetTop;
-    deleteCustomState$1(this, "-no-animate");
+    deleteCustomState$1(this, "--no-animate");
   }
 };
 _M3eDrawerContainerElement_initBreakpointMonitoring = function _M3eDrawerContainerElement_initBreakpointMonitoring() {
   __classPrivateFieldSet(this, _M3eDrawerContainerElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_updateMode).call(this, matches, true)), "f");
 };
 _M3eDrawerContainerElement_clearMode = function _M3eDrawerContainerElement_clearMode() {
-  deleteCustomState$1(this, "-start-over");
-  deleteCustomState$1(this, "-start-push");
-  deleteCustomState$1(this, "-start-side");
-  deleteCustomState$1(this, "-end-over");
-  deleteCustomState$1(this, "-end-push");
-  deleteCustomState$1(this, "-end-side");
+  deleteCustomState$1(this, "--start-over");
+  deleteCustomState$1(this, "--start-push");
+  deleteCustomState$1(this, "--start-side");
+  deleteCustomState$1(this, "--end-over");
+  deleteCustomState$1(this, "--end-push");
+  deleteCustomState$1(this, "--end-side");
 };
 _M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_updateMode(breakpoints, autoClose = false) {
   let autoCloseStart = false,
@@ -13141,8 +13200,8 @@ _M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_upda
     this._endMode = this.endMode;
   }
   __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_clearMode).call(this);
-  addCustomState$1(this, `-start-${this._startMode}`);
-  addCustomState$1(this, `-end-${this._endMode}`);
+  addCustomState$1(this, `--start-${this._startMode}`);
+  addCustomState$1(this, `--end-${this._endMode}`);
   if (autoClose && (autoCloseStart || autoCloseEnd)) {
     if (autoCloseStart) {
       this.start = false;
@@ -13439,7 +13498,7 @@ const ExpansionPanelToken = {
  * @internal
  */
 const ExpansionPanelStyle = css`:host { display: block; } .base { background-color: ${ExpansionPanelToken.containerColor}; transition: ${unsafeCSS(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken$1.motion.duration.medium1})
-        ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${ExpansionPanelToken.textColor}; } :host(:disabled) .base { color: color-mix( in srgb, ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity}, transparent ); } :host(:not([open])) .base { box-shadow: ${ExpansionPanelToken.collapsedElevation}; border-radius: ${ExpansionPanelToken.collapsedShape}; } :host([open]) .base { box-shadow: ${ExpansionPanelToken.expandedElevation}; border-radius: ${ExpansionPanelToken.expandedShape}; margin-block: ${ExpansionPanelToken.expandedSpace}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${ExpansionHeaderToken.toggleIconSize}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${ExpansionPanelToken.contentPadding}; } :host(:not(:state(-with-actions))) .actions { display: none; } .actions { padding: ${ExpansionPanelToken.actionsPadding}; border-top-style: solid; border-top-width: ${ExpansionPanelToken.actionsDividerThickness}; border-top-color: ${ExpansionPanelToken.actionsDividerColor}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${ExpansionPanelToken.actionsSpacing}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { border: 1px solid CanvasText; } :host(:disabled) .base { color: GrayText; } .actions { border-top-color: GrayText; } }`;
+        ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${ExpansionPanelToken.textColor}; } :host(:disabled) .base { color: color-mix( in srgb, ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity}, transparent ); } :host(:not([open])) .base { box-shadow: ${ExpansionPanelToken.collapsedElevation}; border-radius: ${ExpansionPanelToken.collapsedShape}; } :host([open]) .base { box-shadow: ${ExpansionPanelToken.expandedElevation}; border-radius: ${ExpansionPanelToken.expandedShape}; margin-block: ${ExpansionPanelToken.expandedSpace}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${ExpansionHeaderToken.toggleIconSize}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${ExpansionPanelToken.contentPadding}; } :host(:not(:is(:state(--with-actions), :--with-actions))) .actions { display: none; } .actions { padding: ${ExpansionPanelToken.actionsPadding}; border-top-style: solid; border-top-width: ${ExpansionPanelToken.actionsDividerThickness}; border-top-color: ${ExpansionPanelToken.actionsDividerColor}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${ExpansionPanelToken.actionsSpacing}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { border: 1px solid CanvasText; } :host(:disabled) .base { color: GrayText; } .actions { border-top-color: GrayText; } }`;
 
 var _M3eExpansionHeaderElement_instances, _M3eExpansionHeaderElement_renderToggle;
 /**
@@ -13454,7 +13513,7 @@ var _M3eExpansionHeaderElement_instances, _M3eExpansionHeaderElement_renderToggl
  * @attr toggle-direction - The direction of the expansion toggle.
  * @attr toggle-position - The position of the expansion toggle.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
  * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
@@ -13562,10 +13621,10 @@ var M3eExpansionPanelElement_1;
  * @attr toggle-direction - The direction of the expansion toggle.
  * @attr toggle-position - The position of the expansion toggle.
  *
- * @fires opening - Emitted when the expansion panel begins to open.
- * @fires opened - Emitted when the expansion panel has opened.
- * @fires closing - Emitted when the expansion panel begins to close.
- * @fires closed - Emitted when the expansion panel has closed.
+ * @fires opening - Dispatched when the expansion panel begins to open.
+ * @fires opened - Dispatched when the expansion panel has opened.
+ * @fires closing - Dispatched when the expansion panel begins to close.
+ * @fires closed - Dispatched when the expansion panel has closed.
  *
  * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
  * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
@@ -13711,7 +13770,7 @@ _M3eExpansionPanelElement_handleCollapsibleEvent = function _M3eExpansionPanelEl
   }));
 };
 _M3eExpansionPanelElement_handleActionsSlotChange = function _M3eExpansionPanelElement_handleActionsSlotChange(e) {
-  setCustomState$1(this, "-with-actions", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-actions", hasAssignedNodes$1(e.target));
 };
 _M3eExpansionPanelElement_updateHeaderToggleRotation = function _M3eExpansionPanelElement_updateHeaderToggleRotation() {
   if (M3eDirectionality.current === "rtl") {
@@ -13748,7 +13807,7 @@ M3eExpansionPanelElement = M3eExpansionPanelElement_1 = __decorate([customElemen
  * Baseline styles for `M3eFabElement`.
  * @internal
  */
-const FabStyle = 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; } .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; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.with-menu ::slotted([slot="label"]), .base:not(.with-menu) ::slotted([slot="close-icon"]), .base:not(.with-menu) .close-icon, :host([aria-expanded="true"]) .base.with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); } .base.with-menu { transition: height ${DesignToken$1.motion.spring.fastSpatial}; } .base.with-menu .wrapper { transition: padding ${DesignToken$1.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { 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; } :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); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
+const FabStyle = 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; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { white-space: nowrap; 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; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } .base.with-menu ::slotted([slot="label"]), .base:not(.with-menu) ::slotted([slot="close-icon"]), .base:not(.with-menu) .close-icon, :host([aria-expanded="true"]) .base.with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); } .base.with-menu { transition: height ${DesignToken$1.motion.spring.fastSpatial}; } .base.with-menu .wrapper { transition: padding ${DesignToken$1.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { 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; } :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); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the `M3eFabElement` for all size variants.
@@ -14429,7 +14488,7 @@ var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
  * @attr value - The value associated with the element's name when it's submitted with form data.
  * @attr variant - The appearance variant of the button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-fab-container-height - Height of the FAB container for all size variants.
  * @cssprop --m3e-fab-label-text-font-size - Font size for the FAB label text for all size variants.
@@ -14776,7 +14835,7 @@ let M3eFabElement = class M3eFabElement extends KeyboardClick$1(LinkButton$1(For
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?centered="${!this.extended}" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink$1]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot><slot class="icon" aria-hidden="true" name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot></div></div></div>`;
+    return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?centered="${!this.extended}" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink$1]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot><slot class="icon" aria-hidden="true" name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot><m3e-collapsible class="label-wrapper" orientation="horizontal" ?open="${this.extended}"><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot></div></m3e-collapsible></div></div>`;
   }
 };
 _M3eFabElement_instances = new WeakSet();
@@ -14839,7 +14898,7 @@ var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eF
  * @attr rel - The relationship between the `target` of the link button and the document.
  * @attr target - The target of the link button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-fab-menu-item-height - Height of the menu item.
  * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.
@@ -15011,8 +15070,8 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
       flip: true,
       offset: 8
     }, (x, y, position) => {
-      setCustomState$1(this, "-right", position.includes("end"));
-      setCustomState$1(this, "-left", position.includes("start"));
+      setCustomState$1(this, "--right", position.includes("end"));
+      setCustomState$1(this, "--left", position.includes("start"));
       if (M3eDirectionality.current === "rtl") {
         this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
         this.style.left = "";
@@ -15135,10 +15194,10 @@ _M3eFabMenuElement_detachFab = function _M3eFabMenuElement_detachFab() {
   }
 };
 /** The styles of the element. */
-M3eFabMenuElement.styles = css`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.spring.fastEffects}, 
+M3eFabMenuElement.styles = css`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.spring.fastEffects}, 
         transform ${DesignToken$1.motion.spring.fastSpatial},
         overlay ${DesignToken$1.motion.spring.fastEffects} allow-discrete,
-        display ${DesignToken$1.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken$1.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken$1.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken$1.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${DesignToken$1.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken$1.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${DesignToken$1.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`;
+        display ${DesignToken$1.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken$1.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken$1.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken$1.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${DesignToken$1.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken$1.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:is(:state(--left), :--left)) { align-items: flex-start; transform-origin: left; } :host(:is(:state(--right), :--right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${DesignToken$1.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`;
 __decorate([property({
   reflect: true
 })], M3eFabMenuElement.prototype, "variant", void 0);
@@ -15352,10 +15411,10 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback$
       target: null,
       callback: focused => {
         focused = focused && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true);
-        setCustomState$1(this, "-no-animate", false);
+        setCustomState$1(this, "--no-animate", false);
         __classPrivateFieldSet(this, _M3eFormFieldElement_focused, focused, "f");
         if (focused) {
-          setCustomState$1(this, "-float-label", true);
+          setCustomState$1(this, "--float-label", true);
         } else {
           this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
           this.notifyControlStateChange();
@@ -15383,7 +15442,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback$
     /** @private */
     _M3eFormFieldElement_pressedController.set(this, new PressedController$1(this, {
       target: null,
-      callback: pressed => setCustomState$1(this, "-pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
+      callback: pressed => setCustomState$1(this, "--pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
     }));
     /** @private */
     _M3eFormFieldElement_focused.set(this, false);
@@ -15420,7 +15479,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback$
      */
     this.floatLabel = "auto";
     new HoverController$1(this, {
-      callback: () => setCustomState$1(this, "-no-animate", false)
+      callback: () => setCustomState$1(this, "--no-animate", false)
     });
   }
   /** A reference to the element used to anchor dropdown menus. */
@@ -15437,16 +15496,16 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback$
    */
   notifyControlStateChange(checkValidity = false) {
     this._required = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.required === true;
-    setCustomState$1(this, "-required", this._required);
-    setCustomState$1(this, "-disabled", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled === true);
-    setCustomState$1(this, "-readonly", isReadOnlyMixin$1(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").readOnly === true);
+    setCustomState$1(this, "--required", this._required);
+    setCustomState$1(this, "--disabled", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled === true);
+    setCustomState$1(this, "--readonly", isReadOnlyMixin$1(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").readOnly === true);
     if (this.floatLabel === "auto") {
-      setCustomState$1(this, "-float-label", __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "a", _M3eFormFieldElement_shouldFloatLabel_get) || __classPrivateFieldGet(this, _M3eFormFieldElement_focused, "f"));
+      setCustomState$1(this, "--float-label", __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "a", _M3eFormFieldElement_shouldFloatLabel_get) || __classPrivateFieldGet(this, _M3eFormFieldElement_focused, "f"));
     }
     if (checkValidity) {
       this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
     }
-    setCustomState$1(this, "-invalid", this._invalid);
+    setCustomState$1(this, "--invalid", this._invalid);
     this._validationMessage = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.validationMessage ?? "";
     if (!this.isUpdatePending) {
       this.performUpdate();
@@ -15456,7 +15515,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback$
   connectedCallback() {
     super.connectedCallback();
     // Label animations are disabled on initial paint.
-    setCustomState$1(this, "-no-animate", true);
+    setCustomState$1(this, "--no-animate", true);
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -15525,15 +15584,15 @@ _M3eFormFieldElement_handleLabelSlotChange = function _M3eFormFieldElement_handl
   const assignedElements = e.target.assignedElements({
     flatten: true
   });
-  setCustomState$1(this, "-with-label", assignedElements.length > 0);
+  setCustomState$1(this, "--with-label", assignedElements.length > 0);
   this._pseudoLabel = assignedElements[0]?.textContent ?? "";
 };
 _M3eFormFieldElement_handlePrefixSlotChange = function _M3eFormFieldElement_handlePrefixSlotChange(e) {
-  setCustomState$1(this, "-with-prefix", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-prefix", hasAssignedNodes$1(e.target));
   __classPrivateFieldGet(this, _M3eFormFieldElement_resizeController, "f").observe(this._prefix);
 };
 _M3eFormFieldElement_handleSuffixSlotChange = function _M3eFormFieldElement_handleSuffixSlotChange(e) {
-  setCustomState$1(this, "-with-suffix", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-suffix", hasAssignedNodes$1(e.target));
 };
 _M3eFormFieldElement_handlePrefixResize = function _M3eFormFieldElement_handlePrefixResize() {
   if (this.variant === "outlined") {
@@ -15585,8 +15644,8 @@ _M3eFormFieldElement_changeControl = function _M3eFormFieldElement_changeControl
   } else {
     this._base.style.removeProperty("--_form-field-cursor");
   }
-  setCustomState$1(this, "-with-select", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName === "M3E-SELECT");
-  if (hasCustomState$1(this, "-with-select")) {
+  setCustomState$1(this, "--with-select", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName === "M3E-SELECT");
+  if (hasCustomState$1(this, "--with-select")) {
     this._base.style.setProperty("--_form-field-cursor", "pointer");
   }
   if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
@@ -15638,14 +15697,14 @@ _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(:state(-float-label)):state(-with-label) input::placeholder, m3e-form-field[float-label="auto"]:not(:state(-float-label)):state(-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(-2)}) / 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(:state(-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(-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}, 
         font-size ${DesignToken$1.motion.duration.short4}, 
-        line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(:state(-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(:state(-invalid))) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${unsafeCSS(`opacity ${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(:state(-invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:state(-invalid)):state(-pressed)) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(:state(-invalid)) .hint { display: none; } :host(:not(:state(-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(:state(-float-label)):not(:state(-pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:state(-float-label)):state(-with-label)) .prefix-text, :host([float-label="auto"]:not(:state(-float-label)):state(-with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:state(-with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:state(-with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:state(-with-suffix):state(-with-select)) .suffix { margin-inline-start: unset; } :host(:state(-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"]:state(-required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host([variant="outlined"][float-label="auto"]:not(:state(-float-label)):not(:state(-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(:state(-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"]:state(-with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:state(-disabled))) .base:hover .outline, :host([variant="outlined"]:not(:state(-disabled)):focus-within) .outline, :host([variant="outlined"]:not(:state(-disabled)):state(-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(:state(-float-label)):not(:state(-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(:state(-disabled))) .base:hover::before, :host([variant="filled"]:not(:state(-disabled)):focus-within) .base::before, :host([variant="filled"]:not(:state(-disabled)):state(-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(:state(-float-label)):not(:state(-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(:state(-disabled)):not(:focus-within):not(:state(-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(:state(-disabled)):not(:state(-invalid))) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(:state(-disabled)):not(:state(-invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(:state(-disabled)):not(:state(-invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([variant="outlined"]:not(:state(-disabled)):not(:state(-invalid)):focus-within) .base, :host([variant="outlined"]:not(:state(-disabled)):not(:state(-invalid)):state(-pressed)) .base, :host([variant="filled"]:not(:state(-disabled)):not(:state(-invalid)):focus-within) .base, :host([variant="filled"]:not(:state(-disabled)):not(:state(-invalid)):state(-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(:state(-disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(:state(-disabled)):state(-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(:state(-disabled)):state(-invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:state(-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(:state(-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(:state(-no-animate)) *, :host(:state(-no-animate)) *::before, :host(:state(-no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:state(-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; } }`;
+        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; } }`;
 __decorate([query(".base")], M3eFormFieldElement.prototype, "_base", void 0);
 __decorate([query(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
 __decorate([query(".error")], M3eFormFieldElement.prototype, "_error", void 0);
@@ -16207,7 +16266,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(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"]:state(-pressed)) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:state(-connected)[size="${unsafeCSS(size)}"]:state(-pressed)) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); }`;
+  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}); }`;
 }
 /**
  * Size variant styles for `M3eIconButtonElement`.
@@ -16219,8 +16278,8 @@ const IconButtonSizeStyle = [iconButtonStyle("extra-small"), iconButtonStyle("sm
  * Baseline styles for `M3eIconButtonElement`.
  * @internal
  */
-const IconButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${unsafeCSS(`background-color ${DesignToken$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(:state(-grouped):state(-connected)) { flex: 1 1 auto; } :host(:state(-grouped):not(:state(-connected)):not(:state(-adjacent-pressed)):not(:state(-pressed))) { flex-shrink: 0; flex-grow: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) { flex-shrink: 1; min-width: 0; } :host(:state(-grouped):not(:state(-connected)):state(-pressed):not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: border-radius ${DesignToken$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(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .wrapper, .icon { transition: none; } }`;
+const IconButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken$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; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
@@ -16626,7 +16685,7 @@ const IconButtonVariantToken = {
 
 /** @private */
 function iconButtonVariantStyle(variant) {
-  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.iconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${IconButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.containerColor} ${IconButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
+  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host( [variant="${unsafeCSS(variant)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .base { outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.selectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${IconButtonVariantToken[variant].pressed.iconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${IconButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.containerColor} ${IconButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
 }
 /**
  * Appearance variant styles for `M3eIconButtonElement`.
@@ -16684,9 +16743,10 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
  * @attr variant - The appearance variant of the button.
  * @attr width - The width of the button.
  *
+ * @fires beforeinput - Dispatched before a toggle button's selected state changes.
  * @fires input - Dispatched when a toggle button's selected state changes.
  * @fires change - Dispatched when a toggle button's selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-icon-button-container-height - Height of the container for all size variants.
  * @cssprop --m3e-icon-button-outline-thickness - Outline thickness for all size variants.
@@ -17010,7 +17070,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   }
   /** Whether the button is contained by a button group. */
   get grouped() {
-    return hasCustomState$1(this, "-grouped");
+    return hasCustomState$1(this, "--grouped");
   }
   /** @inheritdoc */
   render() {
@@ -17024,11 +17084,11 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => deleteCustomState$1(this, x));
+    ["--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");
-    deleteCustomState$1(this, "-adjacent-pressed");
+    deleteCustomState$1(this, "--adjacent-pressed");
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
   }
   /** @inheritdoc */
@@ -17040,8 +17100,8 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   updated(_changedProperties) {
     super.updated(_changedProperties);
     if (_changedProperties.has("disabled") && this.disabled || _changedProperties.has("disabledInteractive") && this.disabledInteractive) {
-      deleteCustomState$1(this, "-pressed");
-      deleteCustomState$1(this, "-resting");
+      deleteCustomState$1(this, "--pressed");
+      deleteCustomState$1(this, "--resting");
     }
     if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
       this.ariaPressed = this.toggle ? `${this.selected}` : null;
@@ -17054,7 +17114,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   }
   /** @private */
   _handleResize() {
-    if (this.grouped && !hasCustomState$1(this, "-pressed")) {
+    if (this.grouped && !hasCustomState$1(this, "--pressed")) {
       this.style.setProperty("--_button-width", `${this.clientWidth}px`);
       __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this, true);
     }
@@ -17073,8 +17133,8 @@ _M3eIconButtonElement_updateButtonShape = function _M3eIconButtonElement_updateB
   }
 };
 _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handlePressedChange(pressed) {
-  setCustomState$1(this, "-pressed", pressed);
-  setCustomState$1(this, "-resting", !pressed);
+  setCustomState$1(this, "--pressed", pressed);
+  setCustomState$1(this, "--resting", !pressed);
   const group = this.closest("m3e-button-group");
   if (group) {
     const clientWidth = this.getBoundingClientRect().width;
@@ -17084,13 +17144,13 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
       const button = buttons[i];
       if (i === index - 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        setCustomState$1(button, "-adjacent-pressed", pressed);
+        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);
+        setCustomState$1(button, "--adjacent-pressed", pressed);
       } else {
         button.style.removeProperty("--_adjacent-button-width");
-        deleteCustomState$1(button, "-adjacent-pressed");
+        deleteCustomState$1(button, "--adjacent-pressed");
       }
     }
   }
@@ -17101,19 +17161,17 @@ _M3eIconButtonElement_handleClick = function _M3eIconButtonElement_handleClick(e
     e.stopImmediatePropagation();
   }
   if (this.toggle && !e.defaultPrevented) {
-    this.selected = !this.selected;
-    // Dispatch an input event and if not prevented, dispatch a change event.
-    // Otherwise, reset the selected state.
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.selected = !this.selected;
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.selected = !this.selected;
     }
   }
 };
@@ -17278,7 +17336,7 @@ let M3eListItemElement = class M3eListItemElement extends ReconnectedCallback$1(
   _handleLeadingSlotChange(e) {
     const contentType = __classPrivateFieldGet(this, _M3eListItemElement_leadingContentType, "f");
     __classPrivateFieldSet(this, _M3eListItemElement_leadingContentType, __classPrivateFieldGet(this, _M3eListItemElement_instances, "m", _M3eListItemElement_getSlotContentType).call(this, e.target), "f");
-    setCustomState$1(this, "-has-leading", __classPrivateFieldGet(this, _M3eListItemElement_leadingContentType, "f") !== undefined);
+    setCustomState$1(this, "--has-leading", __classPrivateFieldGet(this, _M3eListItemElement_leadingContentType, "f") !== undefined);
     if (contentType !== __classPrivateFieldGet(this, _M3eListItemElement_leadingContentType, "f")) {
       this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyLeadingContentTypeChange(contentType, __classPrivateFieldGet(this, _M3eListItemElement_leadingContentType, "f"));
     }
@@ -17287,7 +17345,7 @@ let M3eListItemElement = class M3eListItemElement extends ReconnectedCallback$1(
   _handleTrailingSlotChange(e) {
     const contentType = __classPrivateFieldGet(this, _M3eListItemElement_trailingContentType, "f");
     __classPrivateFieldSet(this, _M3eListItemElement_trailingContentType, __classPrivateFieldGet(this, _M3eListItemElement_instances, "m", _M3eListItemElement_getSlotContentType).call(this, e.target), "f");
-    setCustomState$1(this, "-has-trailing", __classPrivateFieldGet(this, _M3eListItemElement_trailingContentType, "f") !== undefined);
+    setCustomState$1(this, "--has-trailing", __classPrivateFieldGet(this, _M3eListItemElement_trailingContentType, "f") !== undefined);
     if (contentType !== __classPrivateFieldGet(this, _M3eListItemElement_trailingContentType, "f")) {
       this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyTrailingContentTypeChange(contentType, __classPrivateFieldGet(this, _M3eListItemElement_trailingContentType, "f"));
     }
@@ -17306,9 +17364,9 @@ _M3eListItemElement_initialize = function _M3eListItemElement_initialize() {
 _M3eListItemElement_updateMultiline = function _M3eListItemElement_updateMultiline() {
   const content = this.shadowRoot?.querySelector(".content") ?? null;
   const lines = content === null ? 0 : computeLineCount$1(content);
-  setCustomState$1(this, "-one-line", lines <= 1);
-  setCustomState$1(this, "-two-line", lines == 2);
-  setCustomState$1(this, "-three-line", lines > 2);
+  setCustomState$1(this, "--one-line", lines <= 1);
+  setCustomState$1(this, "--two-line", lines == 2);
+  setCustomState$1(this, "--three-line", lines > 2);
 };
 _M3eListItemElement_getSlotContentType = function _M3eListItemElement_getSlotContentType(slot) {
   const elements = slot.assignedElements({
@@ -17321,7 +17379,7 @@ _M3eListItemElement_getSlotContentType = function _M3eListItemElement_getSlotCon
   return elements.length > 0 ? "text" : undefined;
 };
 /** The styles of the element. */
-M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-one-line)) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(:state(-two-line)) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-two-line)) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(:state(-three-line)) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-three-line)) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(:state(-three-line))) .base { align-items: center; } :host(:state(-three-line)) .base { align-items: flex-start; } :host(:not(:disabled):not([selected])) .base:not(.hover).focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected])) .base.hover, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(:state(-has-leading)) slot[name="leading"], :host(:state(-has-trailing)) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(:state(-has-leading))) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(:state(-has-trailing))) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { .base { transition: none; } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
+M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:is(:state(--one-line), :--one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:is(:state(--one-line), :--one-line)) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(:is(:state(--two-line), :--two-line)) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:is(:state(--two-line), :--two-line)) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(:is(:state(--three-line), :--three-line)) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:is(:state(--three-line), :--three-line)) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(:is(:state(--three-line), :--three-line))) .base { align-items: center; } :host(:is(:state(--three-line), :--three-line)) .base { align-items: flex-start; } :host(:not(:disabled):not([selected])) .base:not(.hover).focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected])) .base.hover, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(:is(:state(--has-leading), :--has-leading)) slot[name="leading"], :host(:is(:state(--has-trailing), :--has-trailing)) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(:is(:state(--has-leading), :--has-leading))) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(:is(:state(--has-trailing), :--has-trailing))) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { .base { transition: none; } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
 M3eListItemElement = __decorate([customElement$1("m3e-list-item")], M3eListItemElement);
 
 var _M3eListElement_instances, _M3eListElement_items, _M3eListElement_leadingContentTypes, _M3eListElement_trailingContentTypes, _M3eListElement_handleSlotChange;
@@ -17430,7 +17488,7 @@ let M3eListElement = class M3eListElement extends AttachInternals$1(Role$1(LitEl
       __classPrivateFieldGet(this, _M3eListElement_leadingContentTypes, "f")[newType]++;
     }
     ["video", "image", "avatar", "icon"].forEach(x => {
-      setCustomState$1(this, `-has-leading-${x}`, this.leadingContentType === x);
+      setCustomState$1(this, `--has-leading-${x}`, this.leadingContentType === x);
     });
   }
   /**
@@ -17445,7 +17503,7 @@ let M3eListElement = class M3eListElement extends AttachInternals$1(Role$1(LitEl
       __classPrivateFieldGet(this, _M3eListElement_trailingContentTypes, "f")[newType]--;
     }
     ["video", "image", "avatar", "icon"].forEach(x => {
-      setCustomState$1(this, `-has-trailing-${x}`, this.trailingContentType === x);
+      setCustomState$1(this, `--has-trailing-${x}`, this.trailingContentType === x);
     });
   }
 };
@@ -17458,13 +17516,13 @@ _M3eListElement_handleSlotChange = function _M3eListElement_handleSlotChange(e)
     flatten: true
   }).filter(x => x instanceof M3eListItemElement), "f");
   __classPrivateFieldGet(this, _M3eListElement_items, "f").forEach((x, i) => {
-    setCustomState$1(x, "-first", i === 0);
-    setCustomState$1(x, "-last", i === __classPrivateFieldGet(this, _M3eListElement_items, "f").length - 1);
+    setCustomState$1(x, "--first", i === 0);
+    setCustomState$1(x, "--last", i === __classPrivateFieldGet(this, _M3eListElement_items, "f").length - 1);
   });
   this.notifyItemsChange();
 };
 /** The styles of the element. */
-M3eListElement.styles = css`:host { display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding-block: var(--m3e-list-block-padding, 0px); --m3e-divider-inset-start-size: var(--m3e-list-divider-inset-start-size, 1rem); --m3e-divider-inset-end-size: var(--m3e-list-divider-inset-end-size, 1.5rem); } :host([variant="standard"]) { --_list-item-leading-video-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-video-outset: var(--m3e-list-item-trailing-space, 1rem); --_expandable-list-item-expanded-toggle-icon-container-color: transparent; } :host([variant="segmented"]) { row-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); } :host([variant="segmented"]) { --m3e-list-item-container-color: var(--m3e-segmented-list-item-container-color, ${DesignToken$1.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${DesignToken$1.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${DesignToken$1.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${DesignToken$1.shape.corner.small}); --m3e-list-item-between-space: var(--m3e-segmented-list-item-spacing, 0.75rem); --_expandable-list-item-items-segment-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); --_expandable-list-item-expanded-top-shape: var( --m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large} ); } :host([variant="segmented"]) ::slotted(:state(-first)), :host([variant="segmented"]) ::slotted(:state(-has-previous-open):not([open])) { --_list-item-top-container-shape: var(--m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large}); } :host([variant="segmented"]) ::slotted(:state(-has-next-open):not([open])), :host([variant="segmented"]) ::slotted(:state(-last)) { --_list-item-bottom-container-shape: var(--m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large}); } :host([variant="segmented"]) ::slotted(m3e-divider) { display: none; } :host(:state(-has-leading-video)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-video-width, 6.25rem); } :host([variant="standard"]:state(-has-leading-video)) { --_list-item-leading-reserved-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-reserved-outset: var(--m3e-list-item-trailing-space, 1rem); } :host(:state(-has-leading-image)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(:state(-has-leading-avatar)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(:state(-has-leading-icon)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-icon-size, 1.5rem); }`;
+M3eListElement.styles = css`:host { display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding-block: var(--m3e-list-block-padding, 0px); --m3e-divider-inset-start-size: var(--m3e-list-divider-inset-start-size, 1rem); --m3e-divider-inset-end-size: var(--m3e-list-divider-inset-end-size, 1.5rem); } :host([variant="standard"]) { --_list-item-leading-video-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-video-outset: var(--m3e-list-item-trailing-space, 1rem); --_expandable-list-item-expanded-toggle-icon-container-color: transparent; } :host([variant="segmented"]) { row-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); } :host([variant="segmented"]) { --m3e-list-item-container-color: var(--m3e-segmented-list-item-container-color, ${DesignToken$1.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${DesignToken$1.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${DesignToken$1.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${DesignToken$1.shape.corner.small}); --m3e-list-item-between-space: var(--m3e-segmented-list-item-spacing, 0.75rem); --_expandable-list-item-items-segment-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); --_expandable-list-item-expanded-top-shape: var( --m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large} ); } :host([variant="segmented"]) ::slotted(:is(:state(--first), :--first)), :host([variant="segmented"]) ::slotted(:is(:state(--has-previous-open), :--has-previous-open):not([open])) { --_list-item-top-container-shape: var(--m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large}); } :host([variant="segmented"]) ::slotted(:is(:state(--has-next-open), :--has-next-open):not([open])), :host([variant="segmented"]) ::slotted(:is(:state(--last), :--last)) { --_list-item-bottom-container-shape: var(--m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large}); } :host([variant="segmented"]) ::slotted(m3e-divider) { display: none; } :host(:is(:state(--has-leading-video), :--has-leading-video)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-video-width, 6.25rem); } :host([variant="standard"]:is(:state(--has-leading-video), :--has-leading-video)) { --_list-item-leading-reserved-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-reserved-outset: var(--m3e-list-item-trailing-space, 1rem); } :host(:is(:state(--has-leading-image), :--has-leading-image)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(:is(:state(--has-leading-avatar), :--has-leading-avatar)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(:is(:state(--has-leading-icon), :--has-leading-icon)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-icon-size, 1.5rem); }`;
 __decorate([property({
   reflect: true
 })], M3eListElement.prototype, "variant", void 0);
@@ -17516,10 +17574,10 @@ var M3eExpandableListItemElement_1;
  * @attr disabled - Whether the element is disabled.
  * @attr open - Whether the item is expanded.
  *
- * @fires opening - Emitted when the item begins to open.
- * @fires opened - Emitted when the item has opened.
- * @fires closing - Emitted when the item begins to close.
- * @fires closed - Emitted when the item has closed.
+ * @fires opening - Dispatched when the item begins to open.
+ * @fires opened - Dispatched when the item has opened.
+ * @fires closing - Dispatched when the item begins to close.
+ * @fires closed - Dispatched when the item has closed.
  *
  * @cssprop --m3e-expandable-list-item-toggle-icon-container-width - Width of the toggle icon container.
  * @cssprop --m3e-expandable-list-item-toggle-icon-container-shape - Border radius of the toggle icon container.
@@ -17630,13 +17688,13 @@ let M3eExpandableListItemElement = M3eExpandableListItemElement_1 = class M3eExp
     if (_changedProperties.has("open")) {
       for (let sibling = this.previousElementSibling; sibling; sibling = sibling.previousElementSibling) {
         if (sibling instanceof M3eListItemElement) {
-          setCustomState$1(sibling, "-has-next-open", this.open);
+          setCustomState$1(sibling, "--has-next-open", this.open);
           break;
         }
       }
       for (let sibling = this.nextElementSibling; sibling; sibling = sibling.nextElementSibling) {
         if (sibling instanceof M3eListItemElement) {
-          setCustomState$1(sibling, "-has-previous-open", this.open);
+          setCustomState$1(sibling, "--has-previous-open", this.open);
           break;
         }
       }
@@ -17840,7 +17898,7 @@ var _M3eListActionElement_instances, _M3eListActionElement_handleClick;
  * @attr rel - The relationship between the `target` of the link button and the document.
  * @attr target - The target of the link button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
  * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
@@ -17962,9 +18020,10 @@ var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOption
  * @attr disabled - Whether the element is disabled.
  * @attr selected - Whether the element is selected.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
  * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
@@ -18105,24 +18164,23 @@ _M3eListOptionElement_handleClick = function _M3eListOptionElement_handleClick(e
   const selectionList = this.closest("m3e-selection-list");
   if (e.defaultPrevented || !selectionList) return;
   if (selectionList.multi || !this.selected) {
-    const selected = this.selected;
-    this.selected = !this.selected;
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.selected = !this.selected;
       selectionList[selectionManager].notifySelectionChange(this);
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.selected = selected;
     }
   }
 };
 /** The styles of the element. */
-M3eListOptionElement.styles = [M3eListItemElement.styles, css`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } .indicator { min-width: 1.5rem; min-height: 1.5rem; display: flex; align-items: center; justify-content: center; } :host(:not(:disabled)) { cursor: pointer; } :host(:state(-three-line)) .indicator { align-self: flex-start; margin-top: var(--m3e-list-item-three-line-top-offset, 0.25rem); } :host([selected]) .base, :host([selected]) .state-layer, :host([selected]) .ripple, :host([selected]) .focus-ring { border-radius: var(--m3e-list-item-selected-container-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:not(:disabled)) .content { color: var(--m3e-list-item-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-selected-disabled-container-opacity, 10%), transparent ); } :host([selected]:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var( --m3e-list-item-selected-hover-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } :host(:state(-hide-selection)) .indicator, :host(:not(:state(-hide-selection))) ::slotted([slot="trailing"]) { display: none; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .content, :host([selected]:not(:disabled)) ::slotted([slot="overline"]), :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]), :host([selected]:not(:disabled)) ::slotted([slot="leading"]), :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: HighlightText; forced-color-adjust: none; } :host([selected]:not(:disabled)) .base { background-color: Highlight; } }`];
+M3eListOptionElement.styles = [M3eListItemElement.styles, css`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } .indicator { min-width: 1.5rem; min-height: 1.5rem; display: flex; align-items: center; justify-content: center; } :host(:not(:disabled)) { cursor: pointer; } :host(:is(:state(--three-line), :--three-line)) .indicator { align-self: flex-start; margin-top: var(--m3e-list-item-three-line-top-offset, 0.25rem); } :host([selected]) .base, :host([selected]) .state-layer, :host([selected]) .ripple, :host([selected]) .focus-ring { border-radius: var(--m3e-list-item-selected-container-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:not(:disabled)) .content { color: var(--m3e-list-item-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-selected-disabled-container-opacity, 10%), transparent ); } :host([selected]:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var( --m3e-list-item-selected-hover-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } :host(:is(:state(--hide-selection), :--hide-selection)) .indicator, :host(:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="trailing"]) { display: none; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .content, :host([selected]:not(:disabled)) ::slotted([slot="overline"]), :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]), :host([selected]:not(:disabled)) ::slotted([slot="leading"]), :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: HighlightText; forced-color-adjust: none; } :host([selected]:not(:disabled)) .base { background-color: Highlight; } }`];
 __decorate([query(".focus-ring")], M3eListOptionElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eListOptionElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eListOptionElement.prototype, "_ripple", void 0);
@@ -18149,8 +18207,9 @@ var _M3eSelectionListElement_instances, _M3eSelectionListElement_keyDownHandler,
  * @attr multi - Whether multiple items can be selected.
  * @attr variant - The appearance variant of the list.
  *
- * @fires input - Emitted when the selected state of an option changes.
- * @fires change - Emitted when the selected state of an option changes.
+ * @fires beforeinput - Dispatched before the selected state of an option changes.
+ * @fires input - Dispatched when the selected state of an option changes.
+ * @fires change - Dispatched when the selected state of an option changes.
  *
  * @cssprop --m3e-list-divider-inset-start-size - Start inset for dividers within the list.
  * @cssprop --m3e-list-divider-inset-end-size - End inset for dividers within the list.
@@ -18244,7 +18303,7 @@ let M3eSelectionListElement = class M3eSelectionListElement extends Labelled$1(D
       this[selectionManager].items.forEach(x => x.requestUpdate());
     }
     if (changedProperties.has("hideSelectionIndicator")) {
-      this[selectionManager].items.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
+      this[selectionManager].items.forEach(x => setCustomState$1(x, "--hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -18252,7 +18311,7 @@ let M3eSelectionListElement = class M3eSelectionListElement extends Labelled$1(D
     const {
       added
     } = this[selectionManager].setItems(this.items.filter(x => x instanceof M3eListOptionElement));
-    added.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
+    added.forEach(x => setCustomState$1(x, "--hide-selection", this.hideSelectionIndicator));
     if (!this[selectionManager].activeItem) {
       this[selectionManager].updateActiveItem(added.find(x => !x.disabled));
     }
@@ -18408,7 +18467,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(:state(-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(:state(-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(:state(-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(:state(-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: 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; } }`;
 __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);
@@ -18587,7 +18646,7 @@ var M3eMenuItemElement_1;
  * @attr rel - The relationship between the `target` of the link button and the document.
  * @attr target - The target of the link button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -18686,10 +18745,10 @@ _M3eMenuItemElement_defaultSlotChangeHandler = function _M3eMenuItemElement_defa
   this._hasSubmenu = __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f") !== undefined;
 };
 _M3eMenuItemElement_iconSlotChangeHandler = function _M3eMenuItemElement_iconSlotChangeHandler(e) {
-  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemElement_trailingIconSlotChangeHandler = function _M3eMenuItemElement_trailingIconSlotChangeHandler(e) {
-  setCustomState$1(this, "-with-trailing-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-trailing-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemElement_handleClick = function _M3eMenuItemElement_handleClick(e) {
   if (!e.defaultPrevented && !this._hasSubmenu) {
@@ -18902,13 +18961,13 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
       offset: !this.submenu ? 4 : undefined
     }, (x, y, position) => {
       if (!this.submenu) {
-        setCustomState$1(this, "-top", position.includes("top"));
-        setCustomState$1(this, "-bottom", position.includes("bottom"));
+        setCustomState$1(this, "--top", position.includes("top"));
+        setCustomState$1(this, "--bottom", position.includes("bottom"));
       } else if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
         const top = __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_getAbsolutePosition).call(this, __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")).y;
-        setCustomState$1(this, "-shift-down", false);
-        setCustomState$1(this, "-shift-up", false);
-        setCustomState$1(this, Math.round(y) === Math.round(top) ? "-shift-down" : "-shift-up", true);
+        setCustomState$1(this, "--shift-down", false);
+        setCustomState$1(this, "--shift-up", false);
+        setCustomState$1(this, Math.round(y) === Math.round(top) ? "--shift-down" : "--shift-up", true);
       }
       if (M3eDirectionality.current === "rtl") {
         this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
@@ -18986,10 +19045,10 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
   _activate() {
     if (this !== M3eMenuElement_1.__activeMenu) {
       if (M3eMenuElement_1.__activeMenu) {
-        deleteCustomState$1(M3eMenuElement_1.__activeMenu, "-active");
+        deleteCustomState$1(M3eMenuElement_1.__activeMenu, "--active");
       }
       M3eMenuElement_1.__activeMenu = this;
-      addCustomState$1(M3eMenuElement_1.__activeMenu, "-active");
+      addCustomState$1(M3eMenuElement_1.__activeMenu, "--active");
     }
   }
 };
@@ -19010,8 +19069,8 @@ _M3eMenuElement_handleSlotChange = function _M3eMenuElement_handleSlotChange() {
     __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").updateActiveItem(added.find(x => !x.disabled));
   }
   __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.forEach((x, i) => {
-    setCustomState$1(x, "-first", i === 0 && !x.previousElementSibling);
-    setCustomState$1(x, "-last", i === __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.length - 1);
+    setCustomState$1(x, "--first", i === 0 && !x.previousElementSibling);
+    setCustomState$1(x, "--last", i === __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.length - 1);
   });
 };
 _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
@@ -19069,7 +19128,7 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
 };
 _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   if (this === M3eMenuElement_1.__activeMenu) {
-    deleteCustomState$1(M3eMenuElement_1.__activeMenu, "-active");
+    deleteCustomState$1(M3eMenuElement_1.__activeMenu, "--active");
     M3eMenuElement_1.__activeMenu = undefined;
   }
 };
@@ -19077,11 +19136,11 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   registerStyleSheet$1(css`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`);
 })();
 /** The styles of the element. */
-M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:state(-active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(:not(:state(-active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken$1.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken$1.shape.corner.extraSmall}; } :host(:state(-active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
+M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken$1.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken$1.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
         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(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } :host(:state(-shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:state(-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(:state(-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); } :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; } }`;
 __decorate([property({
   attribute: "position-x"
 })], M3eMenuElement.prototype, "positionX", void 0);
@@ -19130,7 +19189,7 @@ var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHand
  * @attr disabled - Whether the element is disabled.
  * @attr checked - Whether the element is checked.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -19214,10 +19273,10 @@ _M3eMenuItemCheckboxElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemCheckboxElement_spacePressed = new WeakMap();
 _M3eMenuItemCheckboxElement_instances = new WeakSet();
 _M3eMenuItemCheckboxElement_handleIconSlotChange = function _M3eMenuItemCheckboxElement_handleIconSlotChange(e) {
-  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange = function _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange(e) {
-  setCustomState$1(this, "-with-trailing-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-trailing-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemCheckboxElement_handleClick = function _M3eMenuItemCheckboxElement_handleClick(e) {
   if (!e.defaultPrevented) {
@@ -19246,7 +19305,7 @@ _M3eMenuItemCheckboxElement_handleMouseEnter = function _M3eMenuItemCheckboxElem
   });
 };
 /** The styles of the element. */
-M3eMenuItemCheckboxElement.styles = [MenuItemElementBase.styles, css`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${DesignToken$1.motion.spring.fastEffects}; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; } @media (prefers-reduced-motion) { .icon { transition: none; } }`];
+M3eMenuItemCheckboxElement.styles = [MenuItemElementBase.styles, css`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${DesignToken$1.motion.spring.fastEffects}; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; } @media (prefers-reduced-motion) { .icon { transition: none; } }`];
 M3eMenuItemCheckboxElement = __decorate([customElement$1("m3e-menu-item-checkbox")], M3eMenuItemCheckboxElement);
 
 /**
@@ -19303,7 +19362,7 @@ var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _
  * @attr disabled - Whether the element is disabled.
  * @attr checked - Whether the element is checked.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -19398,10 +19457,10 @@ _M3eMenuItemRadioElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemRadioElement_spacePressed = new WeakMap();
 _M3eMenuItemRadioElement_instances = new WeakSet();
 _M3eMenuItemRadioElement_handleIconSlotChange = function _M3eMenuItemRadioElement_handleIconSlotChange(e) {
-  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemRadioElement_handleTrailingIconSlotChange = function _M3eMenuItemRadioElement_handleTrailingIconSlotChange(e) {
-  setCustomState$1(this, "-with-trailing-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-trailing-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemRadioElement_handleClick = function _M3eMenuItemRadioElement_handleClick(e) {
   if (!e.defaultPrevented) {
@@ -19459,7 +19518,9 @@ var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavB
  *
  * @attr mode - The mode in which items in the bar are presented.
  *
- * @fires change - Emitted when the selected state of an item changes.
+ * @fires beforeinput - Dispatched before the selected state of an item changes.
+ * @fires input - Dispatched when the selected state of an item changes.
+ * @fires change - Dispatched when the selected state of an item changes.
  *
  * @cssprop --m3e-nav-bar-height - Height of the navigation bar.
  * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.
@@ -19531,7 +19592,7 @@ let M3eNavBarElement = class M3eNavBarElement extends ReconnectedCallback$1(Atta
   _updateItems() {
     const orientation = this.currentMode === "compact" ? "vertical" : "horizontal";
     this._updateOrientation(orientation);
-    setCustomState$1(this, "-compact", orientation === "vertical");
+    setCustomState$1(this, "--compact", orientation === "vertical");
   }
   /** @internal */
   _updateOrientation(orientation) {
@@ -19565,7 +19626,7 @@ __decorate([property({
 })], M3eNavBarElement.prototype, "mode", void 0);
 M3eNavBarElement = __decorate([customElement$1("m3e-nav-bar")], M3eNavBarElement);
 
-var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemElement_handleClick, _M3eNavItemElement_handleSelectedIconSlotChange;
+var _M3eNavItemElement_instances, _M3eNavItemElement_inRail, _M3eNavItemElement_clickHandler, _M3eNavItemElement_resizeController, _M3eNavItemElement_handleClick, _M3eNavItemElement_handleSelectedIconSlotChange, _M3eNavItemElement_handleStateLayerResize, _M3eNavItemElement_initResizeObserver;
 /**
  * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.
  *
@@ -19600,9 +19661,10 @@ var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemEl
  * @attr selected - A value indicating whether the element is selected.
  * @attr target - The target of the link button.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.
  * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.
@@ -19633,12 +19695,19 @@ var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemEl
  * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.
  * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.
  */
-let M3eNavItemElement = class M3eNavItemElement extends LinkButton$1(Selected$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(AttachInternals$1(Role$1(LitElement, "button"), true))))))) {
+let M3eNavItemElement = class M3eNavItemElement extends ReconnectedCallback$1(SuppressInitialAnimation$1(LinkButton$1(Selected$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(AttachInternals$1(Role$1(LitElement, "button"), true))))))))) {
   constructor() {
     super(...arguments);
     _M3eNavItemElement_instances.add(this);
     /** @private */
+    _M3eNavItemElement_inRail.set(this, false);
+    /** @private */
     _M3eNavItemElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_handleClick).call(this, e));
+    /** @private */
+    _M3eNavItemElement_resizeController.set(this, new ResizeController$1(this, {
+      target: null,
+      callback: entries => __classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_handleStateLayerResize).call(this, entries)
+    }));
     /**
      * The layout orientation of the item.
      * @default "vertical"
@@ -19649,8 +19718,15 @@ let M3eNavItemElement = class M3eNavItemElement extends LinkButton$1(Selected$1(
   get navBar() {
     return this.closest("m3e-nav-bar") ?? this.closest("m3e-nav-rail") ?? null;
   }
+  /** @internal */
+  [(_M3eNavItemElement_inRail = new WeakMap(), _M3eNavItemElement_clickHandler = new WeakMap(), _M3eNavItemElement_resizeController = new WeakMap(), _M3eNavItemElement_instances = new WeakSet(), resumeAnimation$1)]() {
+    if (__classPrivateFieldGet(this, _M3eNavItemElement_inRail, "f")) {
+      super[resumeAnimation$1]();
+    }
+  }
   /** @inheritdoc */
   connectedCallback() {
+    __classPrivateFieldSet(this, _M3eNavItemElement_inRail, this.closest("m3e-nav-rail") !== null, "f");
     super.connectedCallback();
     this.addEventListener("click", __classPrivateFieldGet(this, _M3eNavItemElement_clickHandler, "f"), {
       capture: true
@@ -19662,6 +19738,12 @@ let M3eNavItemElement = class M3eNavItemElement extends LinkButton$1(Selected$1(
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eNavItemElement_clickHandler, "f"), {
       capture: true
     });
+    __classPrivateFieldSet(this, _M3eNavItemElement_inRail, false, "f");
+  }
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_initResizeObserver).call(this);
   }
   /** @inheritdoc */
   update(changedProperties) {
@@ -19687,39 +19769,49 @@ let M3eNavItemElement = class M3eNavItemElement extends LinkButton$1(Selected$1(
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     [this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
+    __classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_initResizeObserver).call(this);
   }
   /** @inheritdoc */
   render() {
     const disabled = this.disabled || this.disabledInteractive;
-    return html`${this.orientation === "vertical" ? html`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>` : nothing}<div class="outer">${this[renderPseudoLink$1]()}<div class="inner">${this.orientation === "horizontal" ? html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>` : nothing}<m3e-state-layer class="state-layer" ?disabled="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon" aria-hidden="true"><slot name="icon"></slot><slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_handleSelectedIconSlotChange)}"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`;
+    const label = html`<div class="label"><slot></slot></div>`;
+    return html`${this.orientation === "vertical" ? html`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>` : nothing}<div class="outer">${this[renderPseudoLink$1]()}<div class="inner">${this.orientation === "horizontal" ? html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>` : nothing}<m3e-state-layer class="state-layer" ?disabled="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon"><slot name="icon"></slot><slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_handleSelectedIconSlotChange)}"></slot></div></div><m3e-collapsible orientation="horizontal" ?no-animate="${!__classPrivateFieldGet(this, _M3eNavItemElement_inRail, "f")}" ?open="${this.orientation === "horizontal"}">${this.orientation === "horizontal" ? label : nothing}</m3e-collapsible>${this.orientation === "horizontal" ? nothing : label}</div></div></div>`;
   }
 };
-_M3eNavItemElement_clickHandler = new WeakMap();
-_M3eNavItemElement_instances = new WeakSet();
 _M3eNavItemElement_handleClick = function _M3eNavItemElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.selected = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.selected = true;
     this.navBar?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = false;
   }
 };
 _M3eNavItemElement_handleSelectedIconSlotChange = function _M3eNavItemElement_handleSelectedIconSlotChange(e) {
-  setCustomState$1(this, "-with-selected-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-selected-icon", hasAssignedNodes$1(e.target));
+};
+_M3eNavItemElement_handleStateLayerResize = function _M3eNavItemElement_handleStateLayerResize(entries) {
+  if (entries.length === 0 || this.orientation === "vertical") return;
+  this._inner?.style.setProperty("--_expanded-width", `${entries[0].contentRect.width}px`);
+};
+_M3eNavItemElement_initResizeObserver = function _M3eNavItemElement_initResizeObserver() {
+  if (this._stateLayer && __classPrivateFieldGet(this, _M3eNavItemElement_inRail, "f")) {
+    __classPrivateFieldGet(this, _M3eNavItemElement_resizeController, "f").observe(this._stateLayer);
+  }
 };
 /** The styles of the element. */
-M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:state(-with-selected-icon))) slot[name="selected-icon"], :host([selected]:state(-with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive]):not([orientation="horizontal"])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])[orientation="horizontal"]) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
+M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: ${unsafeCSS(`margin-top ${DesignToken$1.motion.duration.short1} ${DesignToken$1.motion.easing.standard}`)}; } .icon { position: absolute; } .label { vertical-align: middle; } :host([orientation="horizontal"]) .label { white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple { transition: ${unsafeCSS(`height ${DesignToken$1.motion.duration.short1} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:is(:state(--with-selected-icon), :--with-selected-icon))) slot[name="selected-icon"], :host([selected]:is(:state(--with-selected-icon), :--with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive]):not([orientation="horizontal"])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])[orientation="horizontal"]) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizongal"]) .base { margin-top: 0; } :host([orientation="vertical"]) .base { margin-top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); margin-bottom: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple { animation: collapse ${DesignToken$1.motion.duration.medium1}; } @keyframes collapse { from { width: var(--_expanded-width, var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)); } to { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .state-layer, :host([orientation="horizontal"]) .ripple, :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); } :host([orientation="horizontal"]) .inner { width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${unsafeCSS(`slide-down ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${unsafeCSS(`slide-up ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } @keyframes slide-down { from { transform: translateY(-4px); } to { transform: translateY(0); } } @keyframes slide-up { from { transform: translateY(4px); } to { transform: translateY(0); } } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label { animation: horizontal-fade-in ${DesignToken$1.motion.duration.medium1}; } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: vertical-fade-in ${DesignToken$1.motion.duration.medium1}; } @keyframes horizontal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vertical-fade-in { from { opacity: 0; } to { opacity: 1; } } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host( :not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"] ) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: none; } } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
 __decorate([query(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
+__decorate([query(".inner")], M3eNavItemElement.prototype, "_inner", void 0);
 __decorate([property({
   reflect: true
 })], M3eNavItemElement.prototype, "orientation", void 0);
@@ -19801,11 +19893,11 @@ var M3eNavMenuItemElement_1;
  * @attr open - Whether the item is expanded.
  * @attr selected - Whether the item is selected.
  *
- * @fires opening - Emitted when the item begins to open.
- * @fires opened - Emitted when the item has opened.
- * @fires closing - Emitted when the item begins to close.
- * @fires closed - Emitted when the item has closed.
- * @fires click - Emitted when the element is clicked.
+ * @fires opening - Dispatched when the item begins to open.
+ * @fires opened - Dispatched when the item has opened.
+ * @fires closing - Dispatched when the item begins to close.
+ * @fires closed - Dispatched when the item has closed.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.
  * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.
@@ -19982,7 +20074,7 @@ _M3eNavMenuItemElement_renderIcon = function _M3eNavMenuItemElement_renderIcon()
   return this.selected && !this.hasChildItems ? html`<slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleIconSlotChange)}">${icon}</slot>` : icon;
 };
 _M3eNavMenuItemElement_handleIconSlotChange = function _M3eNavMenuItemElement_handleIconSlotChange(e) {
-  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eNavMenuItemElement_handleSlotChange = function _M3eNavMenuItemElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eNavMenuItemElement_link, e.target.assignedElements({
@@ -19996,7 +20088,7 @@ _M3eNavMenuItemElement_handleItemSlotChange = function _M3eNavMenuItemElement_ha
   }).filter(x => x instanceof M3eNavMenuItemElement_1), "f");
   const hadChildItems = this._hasChildItems;
   this._hasChildItems = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").length > 0;
-  setCustomState$1(this, "-with-items", this._hasChildItems);
+  setCustomState$1(this, "--with-items", this._hasChildItems);
   if (hadChildItems || this._hasChildItems) {
     this.selected = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").some(x => x.selected);
   }
@@ -20011,7 +20103,7 @@ _M3eNavMenuItemElement_handleClick = function _M3eNavMenuItemElement_handleClick
     const drawerContainer = this.closest("m3e-drawer-container");
     if (drawerContainer) {
       const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end']");
-      if (drawer && (hasCustomState$1(drawerContainer, `-${drawer.slot}-push`) || hasCustomState$1(drawerContainer, `-${drawer.slot}-over`))) {
+      if (drawer && (hasCustomState$1(drawerContainer, `--${drawer.slot}-push`) || hasCustomState$1(drawerContainer, `--${drawer.slot}-over`))) {
         setTimeout(() => {
           drawerContainer.removeAttribute(drawer.slot);
           drawerContainer.dispatchEvent(new Event("change", {
@@ -20036,7 +20128,7 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
 /** The styles of the element. */
 M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
         background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken$1.shape.corner.full}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .icon, .toggle { flex: none; display: flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; } ::slotted([slot="badge"]) { flex: none; position: relative; font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .toggle { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken$1.motion.duration.medium1})
-        ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:state(-with-icon))) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(:state(-with-items))) .toggle, :host(:not(:state(-with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:state(-with-items)):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected]:state(-with-items):not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken$1.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken$1.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: LinkText; } :host([selected]:not(:state(-with-items)):not(:disabled)) .base, :host([selected]:state(-with-items):not(:disabled)) .base { forced-color-adjust: none; background-color: unset; color: Highlight; } :host([selected]:not(:state(-with-items)):not(:disabled)) .base::after { content: ""; position: absolute; inset-inline-start: calc(calc(var(--m3e-nav-menu-item-padding, 1.5rem) / 2) - calc(0.375rem / 2)); inset-block-start: 50%; width: 0.375rem; height: 0.375rem; border-radius: 50%; transform: translateY(-50%); background-color: currentColor; } }`;
+        ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(:is(:state(--with-items), :--with-items))) .toggle, :host(:not(:is(:state(--with-items), :--with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected]):not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected]:is(:state(--with-items), :--with-items):not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken$1.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken$1.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: LinkText; } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base, :host([selected]:is(:state(--with-items), :--with-items):not(:disabled)) .base { forced-color-adjust: none; background-color: unset; color: Highlight; } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base::after { content: ""; position: absolute; inset-inline-start: calc(calc(var(--m3e-nav-menu-item-padding, 1.5rem) / 2) - calc(0.375rem / 2)); inset-block-start: 50%; width: 0.375rem; height: 0.375rem; border-radius: 50%; transform: translateY(-50%); background-color: currentColor; } }`;
 __decorate([query(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
 __decorate([query(".focus-ring")], M3eNavMenuItemElement.prototype, "focusRing", void 0);
 __decorate([query(".ripple")], M3eNavMenuItemElement.prototype, "ripple", void 0);
@@ -20413,12 +20505,12 @@ let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenu
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    setCustomState$1(this, "-divided", this.previousElementSibling?.tagName === "M3E-DIVIDER");
+    setCustomState$1(this, "--divided", this.previousElementSibling?.tagName === "M3E-DIVIDER");
   }
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    deleteCustomState$1(this, "-divided");
+    deleteCustomState$1(this, "--divided");
   }
   /** @inheritdoc */
   render() {
@@ -20446,10 +20538,10 @@ _M3eNavMenuItemGroupElement_handleLabelSlotChange = function _M3eNavMenuItemGrou
       this.removeAttribute("aria-labelledby");
     }
   }
-  setCustomState$1(this, "-with-label", __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f") !== undefined);
+  setCustomState$1(this, "--with-label", __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f") !== undefined);
 };
 /** The styles of the element. */
-M3eNavMenuItemGroupElement.styles = css`:host { display: contents; } :host(:not(:state(-with-label))) .label { display: none; } .label { margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem); margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem); flex: none; } :host(:state(-divided)) .label { margin-block-start: calc( var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem) ); } :host(:not(:state(-divided))) .label { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`;
+M3eNavMenuItemGroupElement.styles = css`:host { display: contents; } :host(:not(:is(:state(--with-label), :--with-label))) .label { display: none; } .label { margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem); margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem); flex: none; } :host(:is(:state(--divided), :--divided)) .label { margin-block-start: calc( var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem) ); } :host(:not(:is(:state(--divided), :--divided))) .label { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`;
 /** @private */
 M3eNavMenuItemGroupElement.__nextId = 0;
 M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = __decorate([customElement$1("m3e-nav-menu-item-group")], M3eNavMenuItemGroupElement);
@@ -20490,19 +20582,24 @@ var _M3eNavRailElement_instances, _M3eNavRailElement_focusKeyManager, _M3eNavRai
  *
  * @attr mode - The mode in which items in the rail are presented.
  *
- * @fires change - Emitted when the selected state of an item changes.
+ * @fires beforeinput - Dispatched before the selected state of an item changes.
+ * @fires input - Dispatched when the selected state of an item changes.
+ * @fires change - Dispatched when the selected state of an item changes.
  *
  * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.
  * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.
  * @cssprop --m3e-nav-rail-compact-width - Width of the nav rail in compact mode.
- * @cssprop --m3e-nav-rail-expanded-inline-padding - Inline padding for expanded nav rail.
- * @cssprop --m3e-nav-rail-expanded-min-width - Minimum width of the nav rail in expanded mode.
- * @cssprop --m3e-nav-rail-expanded-max-width - Maximum width of the nav rail in expanded mode.
+ * @cssprop --m3e-nav-rail-inline-padding - Inline padding for nav rail.
+ * @cssprop --m3e-nav-rail-expanded-width - Width of the nav rail in expanded mode.
  * @cssprop --m3e-nav-rail-expanded-item-height - Height of nav items in expanded mode.
  * @cssprop --m3e-nav-rail-button-item-space - Space below icon buttons and FABs.
- * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Inset for icon buttons in expanded mode.
+ * @cssprop --m3e-nav-rail-icon-button-inset - Inset for icon buttons.
+ * @cssprop --m3e-nav-rail-expanded-inline-padding - Deprecated, use `--m3e-nav-rail-inline-padding`.
+ * @cssprop --m3e-nav-rail-expanded-min-width - Deprecated, use `--m3e-nav-rail-expanded-width`.
+ * @cssprop --m3e-nav-rail-expanded-max-width - Deprecated, use `--m3e-nav-rail-expanded-width`.
+ * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Deprecated, use `--m3e-nav-rail-icon-button-inset`.
  */
-let M3eNavRailElement = class M3eNavRailElement extends M3eNavBarElement$1 {
+let M3eNavRailElement = class M3eNavRailElement extends SuppressInitialAnimation$1(M3eNavBarElement$1) {
   constructor() {
     super();
     _M3eNavRailElement_instances.add(this);
@@ -20526,7 +20623,7 @@ let M3eNavRailElement = class M3eNavRailElement extends M3eNavBarElement$1 {
   }
   /** @inheritdoc @internal */
   _updateItems() {
-    const items = M3eInteractivityChecker.findInteractiveElements(this);
+    const items = M3eInteractivityChecker.findInteractiveElements(this, true);
     const {
       added
     } = __classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").setItems(items);
@@ -20536,6 +20633,7 @@ let M3eNavRailElement = class M3eNavRailElement extends M3eNavBarElement$1 {
         __classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").updateActiveItem(active);
       }
     }
+    this.items.forEach((x, i) => setCustomState$1(x, "--first", i === 0));
     super._updateItems();
   }
   /** @inheritdoc @internal */
@@ -20551,10 +20649,10 @@ _M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e)
   __classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").onKeyDown(e);
 };
 (() => {
-  registerStyleSheet$1(css`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail:not(:state(-compact)) > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-expanded-icon-button-inset, 0.5rem); }`);
+  registerStyleSheet$1(css`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem); }`);
 })();
 /** The styles of the element. */
-M3eNavRailElement.styles = css`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { display: flex; width: 100%; min-width: inherit; max-width: inherit; flex-direction: column; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(:state(-compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:state(-compact)) ::slotted(m3e-fab) { align-self: center; } :host(:not(:state(-compact))) { min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); } :host(:not(:state(-compact))) .base { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } :host(:state(-compact)) ::slotted(m3e-icon-button) { align-self: center; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken$1.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken$1.elevation.level1}; }`;
+M3eNavRailElement.styles = css`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`width ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standard}`)}; } .base { display: flex; width: inherit; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem); } :host(:is(:state(--compact), :--compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:not(:is(:state(--compact), :--compact))) { width: var(--m3e-nav-rail-expanded-width, 13.75rem); } :host(:not(:is(:state(--compact), :--compact))) { --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken$1.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken$1.elevation.level1}; } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } }`;
 M3eNavRailElement = __decorate([customElement$1("m3e-nav-rail")], M3eNavRailElement);
 
 var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_mutationController, _M3eNavRailToggleElement_updateToggle;
@@ -20770,13 +20868,13 @@ let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Atta
 };
 _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eOptionElement_textContent, getTextContent$1(e.target), "f");
-  setCustomState$1(this, "-empty", this.isEmpty);
+  setCustomState$1(this, "--empty", this.isEmpty);
   if (this.selected) {
     this.closest("m3e-select")?.requestUpdate?.();
   }
 };
 /** 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(:state(-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(:state(-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(:state(-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(:state(-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(:state(-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(:state(-empty)) .icon, :host(:state(-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: 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; } }`;
 __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);
@@ -20916,11 +21014,11 @@ let M3eOptionPanelElement = class M3eOptionPanelElement extends Role$1(M3eFloati
 };
 _M3eOptionPanelElement_instances = new WeakSet();
 _M3eOptionPanelElement_handleNoDataSlotChange = function _M3eOptionPanelElement_handleNoDataSlotChange(e) {
-  setCustomState$1(this, "-with-no-data", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-no-data", hasAssignedNodes$1(e.target));
 };
 _M3eOptionPanelElement_handleLoadingSlotChange = function _M3eOptionPanelElement_handleLoadingSlotChange(e) {
-  setCustomState$1(this, "-with-loading", hasAssignedNodes$1(e.target));
-  setCustomState$1(this, "-with-loading-indicator", this.querySelector("m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']") !== null);
+  setCustomState$1(this, "--with-loading", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-loading-indicator", this.querySelector("m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']") !== null);
 };
 _M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMutation() {
   const options = this.querySelectorAll("m3e-option");
@@ -20929,19 +21027,19 @@ _M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMu
   for (let i = 0; i < options.length; i++) {
     const option = options[i];
     if (option.hidden === true) {
-      deleteCustomState$1(option, "-first");
-      deleteCustomState$1(option, "-last");
+      deleteCustomState$1(option, "--first");
+      deleteCustomState$1(option, "--last");
     } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {
-      addCustomState$1(option, "-first");
+      addCustomState$1(option, "--first");
       first = true;
-      addCustomState$1(option, "-last");
+      addCustomState$1(option, "--last");
       last = option;
     } else {
-      deleteCustomState$1(option, "-first");
+      deleteCustomState$1(option, "--first");
       if (last) {
-        deleteCustomState$1(last, "-last");
+        deleteCustomState$1(last, "--last");
       }
-      addCustomState$1(option, "-last");
+      addCustomState$1(option, "--last");
       last = option;
     }
   }
@@ -20950,7 +21048,7 @@ _M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMu
   registerStyleSheet$1(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`);
 })();
 /** The styles of the element. */
-M3eOptionPanelElement.styles = [M3eFloatingPanelElement.styles, css`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`];
+M3eOptionPanelElement.styles = [M3eFloatingPanelElement.styles, css`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } :host(:is(:state(--no-data), :--no-data)) slot:not([name]), :host(:is(:state(--loading), :--loading)) slot:not([name]), :host(:is(:state(--loading), :--loading)) .no-data, :host(:not(:is(:state(--no-data), :--no-data))) .no-data, :host(:not(:is(:state(--with-no-data), :--with-no-data))) .no-data, :host(:not(:is(:state(--loading), :--loading))) .loading, :host(:not(:is(:state(--with-loading), :--with-loading))) .loading { display: none; } :host(:is(:state(--no-data), :--no-data)) .base, :host(:is(:state(--loading), :--loading)) .base { overflow-y: hidden; } :host(:is(:state(--with-loading-indicator), :--with-loading-indicator)) .loading { padding: 0; justify-content: center; }`];
 __decorate([property({
   reflect: true
 })], M3eOptionPanelElement.prototype, "state", void 0);
@@ -21003,7 +21101,7 @@ var M3ePaginatorElement_1;
  * @attr previous-page-label - The accessible label given to the button used to move to the previous page.
  * @attr show-first-last-buttons - Whether to show first/last buttons.
  *
- * @fires page - Emitted when a user selects a different page size or navigates to another page.
+ * @fires page - Dispatched when a user selects a different page size or navigates to another page.
  *
  * @cssprop --m3e-paginator-font-size - The font size used for paginator text.
  * @cssprop --m3e-paginator-font-weight - The font weight used for paginator text.
@@ -21922,9 +22020,10 @@ var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_
  * @attr required - Whether the element is required.
  * @attr value - A string representing the value of the radio.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-radio-container-size - Base size of the radio button container.
  * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.
@@ -22023,18 +22122,18 @@ _M3eRadioElement_renderIcon = function _M3eRadioElement_renderIcon() {
 };
 _M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
   if (e.defaultPrevented || this.checked || this.disabled) return;
-  this.checked = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = true;
     __classPrivateFieldGet(this, _M3eRadioElement_instances, "m", _M3eRadioElement_notifySelectionChange).call(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = false;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -22051,7 +22150,7 @@ _M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelecti
   }
 };
 /** The styles of the element. */
-M3eRadioElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken$1.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken$1.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken$1.color.onSurface}) 38%, transparent); } :host(:state(-touched):state(-invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken$1.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:state(-touched):state(-invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
+M3eRadioElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken$1.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken$1.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken$1.color.onSurface}) 38%, transparent); } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken$1.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
 __decorate([query(".focus-ring")], M3eRadioElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eRadioElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eRadioElement.prototype, "_ripple", void 0);
@@ -22090,7 +22189,9 @@ var _M3eRadioGroupElement_instances, _M3eRadioGroupElement_directionalitySubscri
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr required - Whether the element is required.
  *
- * @fires change - Emitted when the checked state of a radio button changes.
+ * @fires beforeinput - Dispatched before the checked state of a radio button changes.
+ * @fires input - Dispatched when the checked state of a radio button changes.
+ * @fires change - Dispatched when the checked state of a radio button changes.
  */
 let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled$1(RequiredConstraintValidation$1(Dirty$1(Touched$1(Required$1(ConstraintValidation$1(FormAssociated$1(Disabled$1(AttachInternals$1(Role$1(LitElement, "radiogroup")))))))))) {
   constructor() {
@@ -22150,7 +22251,7 @@ let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled$1(Require
         break;
       case "aria-invalid":
         this.radios.forEach(x => {
-          setCustomState$1(x, "-invalid", newValue === "true");
+          setCustomState$1(x, "--invalid", newValue === "true");
           x[updateLabels$1]?.();
         });
         break;
@@ -22239,7 +22340,7 @@ const SearchBarLightDomStyle = css`m3e-search-bar input[slot="input"]::placehold
  * Styles for `M3eSearchBarElement`.
  * @internal
  */
-const SearchBarStyle = css`:host { display: block; height: ${SearchBarToken.containerHeight}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${SearchBarToken.containerShape}; background-color: ${SearchBarToken.containerColor}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:state(-clearable))) .clear { display: none; } :host(:state(-with-leading)) slot[name="leading"], :host(:state(-with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${SearchBarToken.actionsGap}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${SearchBarToken.inputColor}; font-size: ${SearchBarToken.inputTextFontSize}; font-weight: ${SearchBarToken.inputTextFontWeight}; line-height: ${SearchBarToken.inputTextLineHeight}; letter-spacing: ${SearchBarToken.inputTextTracking}; } :host(:state(-with-leading)) .base { padding-inline-start: ${SearchBarToken.leadingSpace}; } :host(:not(:state(-with-leading))) .base { padding-inline-start: ${SearchBarToken.noActionsLeadingSpace}; } :host(:is(:state(-with-trailing), :state(-clearable))) .base { padding-inline-end: ${SearchBarToken.trailingSpace}; } :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base { padding-inline-end: ${SearchBarToken.noActionsTrailingSpace}; } :host(:state(-with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace}; } :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot="input"]) { margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace}; } slot[name="leading"] { color: ${SearchBarToken.leadingIconColor}; --m3e-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } slot[name="trailing"], .clear { color: ${SearchBarToken.trailingIconColor}; --m3e-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${SearchBarToken.iconSize}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`;
+const SearchBarStyle = css`:host { display: block; height: ${SearchBarToken.containerHeight}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${SearchBarToken.containerShape}; background-color: ${SearchBarToken.containerColor}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:is(:state(--clearable), :--clearable))) .clear { display: none; } :host(:is(:state(--with-leading), :--with-leading)) slot[name="leading"], :host(:is(:state(--with-trailing), :--with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${SearchBarToken.actionsGap}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${SearchBarToken.inputColor}; font-size: ${SearchBarToken.inputTextFontSize}; font-weight: ${SearchBarToken.inputTextFontWeight}; line-height: ${SearchBarToken.inputTextLineHeight}; letter-spacing: ${SearchBarToken.inputTextTracking}; } :host(:is(:state(--with-leading), :--with-leading)) .base { padding-inline-start: ${SearchBarToken.leadingSpace}; } :host(:not(:is(:state(--with-leading), :--with-leading))) .base { padding-inline-start: ${SearchBarToken.noActionsLeadingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) .base { padding-inline-end: ${SearchBarToken.trailingSpace}; } :host(:not(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable)))) .base { padding-inline-end: ${SearchBarToken.noActionsTrailingSpace}; } :host(:is(:state(--with-leading), :--with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) ::slotted([slot="input"]) { margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace}; } slot[name="leading"] { color: ${SearchBarToken.leadingIconColor}; --m3e-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } slot[name="trailing"], .clear { color: ${SearchBarToken.trailingIconColor}; --m3e-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${SearchBarToken.iconSize}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`;
 
 /** @internal */
 const SearchViewToken = {
@@ -22276,14 +22377,14 @@ const SearchViewLightDomStyle = css`m3e-search-view input[slot="input"]::placeho
  * Styles for `M3eSearchViewElement`.
  * @internal
  */
-const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
+const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:is(:state(--fullscreen), :--fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .bar, :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:is(:state(--clearable), :--clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:is(:state(--fullscreen), :--fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen):not([open])) .header, :host(:is(:state(--fullscreen), :--fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:is(:state(--fullscreen), :--fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[open]) .header, :host(:is(:state(--docked), :--docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked):not([contained])) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:is(:state(--docked), :--docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:is(:state(--docked), :--docked)) .scroll-container { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; } :host(:is(:state(--docked), :--docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:is(:state(--docked), :--docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:is(:state(--docked), :--docked)) .results { transform-origin: top; transition: ${unsafeCSS(`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`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard},
-      background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+      display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--docked), :--docked):not([open])) .results { transform: scaleY(0.8); } :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(0.8); } } :host(:is(:state(--docked), :--docked)) .view { background-color: transparent; } :host(:is(:state(--docked), :--docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard},
+      background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--docked), :--docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); } } :host(:state(-fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:state(-fullscreen)) .bar, :host(:state(-fullscreen)) .header, :host(:state(-docked)) .results, :host(:state(-docked):not([open])) .view, :host(:state(-docked):not([open])) .view::backdrop, :host(:state(-docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;
+        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); } } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:is(:state(--fullscreen), :--fullscreen)) .bar, :host(:is(:state(--fullscreen), :--fullscreen)) .header, :host(:is(:state(--docked), :--docked)) .results, :host(:is(:state(--docked), :--docked):not([open])) .view, :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop, :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;
 
 var _M3eSearchBarElement_instances, _M3eSearchBarElement_input, _M3eSearchBarElement_inputInputHandler, _M3eSearchBarElement_renderClearButton, _M3eSearchBarElement_handleContainerClick, _M3eSearchBarElement_handleLeadingSlotChange, _M3eSearchBarElement_handleTrailingSlotChange, _M3eSearchBarElement_handleInputSlotChange, _M3eSearchBarElement_handleInputInput, _M3eSearchBarElement_handleClearClick;
 /**
@@ -22386,10 +22487,10 @@ _M3eSearchBarElement_handleContainerClick = function _M3eSearchBarElement_handle
   }
 };
 _M3eSearchBarElement_handleLeadingSlotChange = function _M3eSearchBarElement_handleLeadingSlotChange(e) {
-  setCustomState$1(this, "-with-leading", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-leading", hasAssignedNodes$1(e.target));
 };
 _M3eSearchBarElement_handleTrailingSlotChange = function _M3eSearchBarElement_handleTrailingSlotChange(e) {
-  setCustomState$1(this, "-with-trailing", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-trailing", hasAssignedNodes$1(e.target));
 };
 _M3eSearchBarElement_handleInputSlotChange = function _M3eSearchBarElement_handleInputSlotChange(e) {
   const input = e.target.assignedElements({
@@ -22408,7 +22509,7 @@ _M3eSearchBarElement_handleInputSlotChange = function _M3eSearchBarElement_handl
   }
 };
 _M3eSearchBarElement_handleInputInput = function _M3eSearchBarElement_handleInputInput() {
-  setCustomState$1(this, "-clearable", this.clearable && (__classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.value ?? "").length > 0);
+  setCustomState$1(this, "--clearable", this.clearable && (__classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.value ?? "").length > 0);
 };
 _M3eSearchBarElement_handleClearClick = function _M3eSearchBarElement_handleClearClick() {
   this.clear();
@@ -22720,12 +22821,12 @@ _M3eSearchViewElement_handleInputInput = function _M3eSearchViewElement_handleIn
   }
 };
 _M3eSearchViewElement_updateMode = function _M3eSearchViewElement_updateMode() {
-  setCustomState$1(this, "-fullscreen", this.currentMode === "fullscreen");
-  setCustomState$1(this, "-docked", this.currentMode === "docked");
+  setCustomState$1(this, "--fullscreen", this.currentMode === "fullscreen");
+  setCustomState$1(this, "--docked", this.currentMode === "docked");
 };
 _M3eSearchViewElement_updateClearableState = function _M3eSearchViewElement_updateClearableState() {
   this._clearable = (__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.value ?? "").length > 0;
-  setCustomState$1(this, "-clearable", this._clearable);
+  setCustomState$1(this, "--clearable", this._clearable);
 };
 _M3eSearchViewElement_handleInputFocus = function _M3eSearchViewElement_handleInputFocus() {
   this.open = !__classPrivateFieldGet(this, _M3eSearchViewElement_closeOnInputFocus, "f");
@@ -23047,9 +23148,10 @@ var M3eButtonSegmentElement_1;
  * @attr disabled - Whether the element is disabled.
  * @attr value - A string representing the value of the segment.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-segmented-button-height - Total height of the segmented button.
  * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.
@@ -23147,30 +23249,29 @@ let M3eButtonSegmentElement = M3eButtonSegmentElement_1 = class M3eButtonSegment
 _M3eButtonSegmentElement_clickHandler = new WeakMap();
 _M3eButtonSegmentElement_instances = new WeakSet();
 _M3eButtonSegmentElement_handleIconSlotChange = function _M3eButtonSegmentElement_handleIconSlotChange(e) {
-  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eButtonSegmentElement_handleClick = function _M3eButtonSegmentElement_handleClick(e) {
   if (e.defaultPrevented) return;
   const segmentedButton = this.closest("m3e-segmented-button");
   if (segmentedButton && (segmentedButton.multi || !this.checked)) {
-    const checked = this.checked;
-    this.checked = !this.checked;
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.checked = !this.checked;
       this.closest("m3e-segmented-button")?.[selectionManager].notifySelectionChange(this);
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.checked = checked;
     }
   }
 };
 /** The styles of the element. */
-M3eButtonSegmentElement.styles = css`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken$1.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${DesignToken$1.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:state(-hide-selection))) .wrapper, :host(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken$1.color.onSurface}); } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${DesignToken$1.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`;
+M3eButtonSegmentElement.styles = css`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken$1.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${DesignToken$1.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper, :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken$1.color.onSurface}); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${DesignToken$1.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:is(:state(--hide-selection), :--hide-selection)) .check, :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`;
 __decorate([query(".focus-ring")], M3eButtonSegmentElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eButtonSegmentElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eButtonSegmentElement.prototype, "_ripple", void 0);
@@ -23217,8 +23318,9 @@ var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_directional
  * @attr multi - Whether multiple options can be selected.
  * @attr name - The name that identifies the element when submitting the associated form.
  *
- * @fires input - Emitted when the checked state of a segment changes.
- * @fires change - Emitted when the checked state of a segment changes.
+ * @fires beforeinput - Dispatched before the checked state of a segment changes.
+ * @fires input - Dispatched when the checked state of a segment changes.
+ * @fires change - Dispatched when the checked state of a segment changes.
  *
  * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.
  * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.
@@ -23302,7 +23404,7 @@ let M3eSegmentedButtonElement = class M3eSegmentedButtonElement extends Labelled
       this.ariaDisabled = this.multi && this.disabled ? "true" : null;
     }
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.segments.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
+      this.segments.forEach(x => setCustomState$1(x, "--hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -23314,10 +23416,10 @@ _M3eSegmentedButtonElement_handleSlotChange = function _M3eSegmentedButtonElemen
   const {
     added
   } = this[selectionManager].setItems([...this.querySelectorAll("m3e-button-segment")]);
-  added.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
+  added.forEach(x => setCustomState$1(x, "--hide-selection", this.hideSelectionIndicator));
   this[selectionManager].items.forEach((segment, i) => {
-    setCustomState$1(segment, "-first", i == 0);
-    setCustomState$1(segment, "-last", i == this[selectionManager].items.length - 1);
+    setCustomState$1(segment, "--first", i == 0);
+    setCustomState$1(segment, "--last", i == this[selectionManager].items.length - 1);
   });
 };
 _M3eSegmentedButtonElement_handleKeyDown = function _M3eSegmentedButtonElement_handleKeyDown(e) {
@@ -23332,7 +23434,7 @@ _M3eSegmentedButtonElement_handleChange = function _M3eSegmentedButtonElement_ha
   }));
 };
 /** The styles of the element. */
-M3eSegmentedButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:state(-first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken$1.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken$1.shape.corner.full}); } ::slotted(:state(-last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken$1.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken$1.shape.corner.full}); } ::slotted(:not(:state(-first))) { --_segmented-button-left-border: none; }`;
+M3eSegmentedButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:is(:state(--first), :--first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken$1.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken$1.shape.corner.full}); } ::slotted(:is(:state(--last), :--last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken$1.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken$1.shape.corner.full}); } ::slotted(:not(:is(:state(--first), :--first))) { --_segmented-button-left-border: none; }`;
 __decorate([property({
   type: Boolean
 })], M3eSegmentedButtonElement.prototype, "multi", void 0);
@@ -23385,8 +23487,9 @@ var M3eSelectElement_1;
  * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.
  * @attr required - Whether the element is required.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
  *
  * @cssprop --m3e-form-field-font-size - The font size of the select control.
  * @cssprop --m3e-form-field-font-weight - The font weight of the select control.
@@ -23551,7 +23654,7 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("hideSelectionIndicator")) {
-      __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_options_get).forEach(x => setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator));
+      __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_options_get).forEach(x => setCustomState$1(x, "--hide-selection-indicator", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -23577,7 +23680,7 @@ _M3eSelectElement_handleMutation = function _M3eSelectElement_handleMutation() {
   } = this._listKeyManager.setItems([...__classPrivateFieldGet(this, _M3eSelectElement_clone, "f").querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eSelectElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
-    setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator);
+    setCustomState$1(x, "--hide-selection-indicator", this.hideSelectionIndicator);
   });
   this._options = [...this.querySelectorAll("m3e-option")];
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
@@ -23727,7 +23830,7 @@ _M3eSelectElement_destroyMenu = function _M3eSelectElement_destroyMenu(e) {
   this.removeAttribute("aria-owns");
   this.removeAttribute("aria-activedescendant");
   this.requestUpdate();
-  deleteCustomState$1(this, "-open");
+  deleteCustomState$1(this, "--open");
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
   this.dispatchEvent(new ToggleEvent("toggle", {
     oldState: e.oldState,
@@ -23769,13 +23872,13 @@ _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
   setTimeout(() => {
     __classPrivateFieldGet(this, _M3eSelectElement_menu, "f")?.show(this, __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.menuAnchor);
-    addCustomState$1(this, "-open");
+    addCustomState$1(this, "--open");
   });
 };
 _M3eSelectElement_hideMenu = function _M3eSelectElement_hideMenu() {
   if (!__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").hide();
-  deleteCustomState$1(this, "-open");
+  deleteCustomState$1(this, "--open");
 };
 _M3eSelectElement_activateOption = function _M3eSelectElement_activateOption(option) {
   this.setAttribute("aria-activedescendant", option.id);
@@ -23806,13 +23909,12 @@ _M3eSelectElement_updateSelectionState = function _M3eSelectElement_updateSelect
 _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option) {
   const selected = this.multi ? !option.selected : true;
   if (option.selected === selected) return;
-  option.selected = selected;
-  __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    option.selected = selected;
+    __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
     if (!this.multi) {
       __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_selected_get).filter(x => x !== option).forEach(x => {
         x.selected = false;
@@ -23821,16 +23923,16 @@ _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option)
     }
     this.requestUpdate();
     __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    option.selected = !selected;
-    __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
   }
 };
 /** The styles of the element. */
-M3eSelectElement.styles = css`:host { display: inline-flex; vertical-align: middle; outline: none; position: relative; 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}); min-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); border-radius: var(--m3e-select-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) { color: color-mix( in srgb, var(--m3e-select-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%), transparent ); } .options { display: none; } .base { flex: 1 1 auto; display: inline-flex; align-items: center; overflow: hidden; } .arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: var(--_select-arrow-margin-top); } ::slotted([slot="arrow"]), .arrow { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-select-icon-size, 1.5rem); } :host(:state(-open)) .focus-ring { display: none; }`;
+M3eSelectElement.styles = css`:host { display: inline-flex; vertical-align: middle; outline: none; position: relative; 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}); min-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); border-radius: var(--m3e-select-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) { color: color-mix( in srgb, var(--m3e-select-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%), transparent ); } .options { display: none; } .base { flex: 1 1 auto; display: inline-flex; align-items: center; overflow: hidden; } .arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: var(--_select-arrow-margin-top); } ::slotted([slot="arrow"]), .arrow { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-select-icon-size, 1.5rem); } :host(:is(:state(--open), :--open)) .focus-ring { display: none; }`;
 /** @private */
 M3eSelectElement.__nextId = 0;
 __decorate([query(".focus-ring")], M3eSelectElement.prototype, "_focusRing", void 0);
@@ -24397,9 +24499,10 @@ var _M3eSliderThumbElement_instances, _M3eSliderThumbElement_labelText_get;
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr value - The value of the thumb.
  *
- * @fires input - Emitted when the value changes.
- * @fires change - Emitted when the value changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the value changes.
+ * @fires input - Dispatched when the value changes.
+ * @fires change - Dispatched when the value changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-slider-thumb-width - Width of the slider thumb.
  * @cssprop --m3e-slider-thumb-padding - Horizontal padding around the thumb.
@@ -24472,7 +24575,7 @@ __decorate([property({
 })], M3eSliderThumbElement.prototype, "value", void 0);
 M3eSliderThumbElement = __decorate([customElement$1("m3e-slider-thumb")], M3eSliderThumbElement);
 
-var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _M3eSliderElement_thumbs, _M3eSliderElement_activeThumb, _M3eSliderElement_cachedWidth, _M3eSliderElement_cachedThumbWidth, _M3eSliderElement_cachedLeft, _M3eSliderElement_renderTick, _M3eSliderElement_handleSlotChange, _M3eSliderElement_updateThumbs, _M3eSliderElement_pointFromValue, _M3eSliderElement_valueFromPoint, _M3eSliderElement_updateCachedDimensions, _M3eSliderElement_updateDimensions, _M3eSliderElement_updateTicks, _M3eSliderElement_handlePointerDown, _M3eSliderElement_handlePointerMove, _M3eSliderElement_handlePointerUp, _M3eSliderElement_handleKeyDown, _M3eSliderElement_handleThumbChange, _M3eSliderElement_changeThumb;
+var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _M3eSliderElement_changedThumbs, _M3eSliderElement_thumbs, _M3eSliderElement_activeThumb, _M3eSliderElement_cachedWidth, _M3eSliderElement_cachedThumbWidth, _M3eSliderElement_cachedLeft, _M3eSliderElement_renderTick, _M3eSliderElement_handleSlotChange, _M3eSliderElement_updateThumbs, _M3eSliderElement_pointFromValue, _M3eSliderElement_valueFromPoint, _M3eSliderElement_updateCachedDimensions, _M3eSliderElement_updateDimensions, _M3eSliderElement_updateTicks, _M3eSliderElement_handlePointerDown, _M3eSliderElement_handlePointerMove, _M3eSliderElement_handlePointerUp, _M3eSliderElement_handleKeyDown, _M3eSliderElement_handleKeyUp, _M3eSliderElement_handleThumbChange, _M3eSliderElement_changeThumb, _M3eSliderElement_commitThumb;
 /**
  * Allows for the selection of numeric values from a range.
  *
@@ -24510,6 +24613,10 @@ var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _
  * @attr step - The value at which the thumb will snap.
  * @attr size - The size of the slider.
  *
+ * @fires beforeinput - Dispatched before the value of a thumb changes.
+ * @fires input - Dispatched when the value of a thumb changes.
+ * @fires change - Dispatched when the value of a thumb changes.
+ *
  * @cssprop --m3e-slider-min-width - Minimum inline size of the slider host.
  * @cssprop --m3e-slider-small-height - Height of the slider when size is small or extra-small.
  * @cssprop --m3e-slider-medium-height - Height of the slider when size is medium.
@@ -24554,6 +24661,8 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
     /** @private */
     this._ticks = new Array();
     /** @private */
+    _M3eSliderElement_changedThumbs.set(this, new Set());
+    /** @private */
     _M3eSliderElement_thumbs.set(this, new Array());
     /** @private */
     _M3eSliderElement_activeThumb.set(this, void 0);
@@ -24635,6 +24744,7 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").clear();
     __classPrivateFieldGet(this, _M3eSliderElement_directionalitySubscription, "f")?.call(this);
   }
   /** @inheritdoc */
@@ -24646,10 +24756,11 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base" tabindex="${ifDefined(!this.disabled ? "-1" : undefined)}" @pointerdown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerUp)}" @keydown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyDown)}" @value-change="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleThumbChange)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(x => __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_renderTick).call(this, x))}</div><slot @slotchange="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleSlotChange)}"></slot></div>`;
+    return html`<div class="base" tabindex="${ifDefined(!this.disabled ? "-1" : undefined)}" @pointerdown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerUp)}" @keydown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyDown)}" @keyup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyUp)}" @value-change="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleThumbChange)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(x => __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_renderTick).call(this, x))}</div><slot @slotchange="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleSlotChange)}"></slot></div>`;
   }
 };
 _M3eSliderElement_directionalitySubscription = new WeakMap();
+_M3eSliderElement_changedThumbs = new WeakMap();
 _M3eSliderElement_thumbs = new WeakMap();
 _M3eSliderElement_activeThumb = new WeakMap();
 _M3eSliderElement_cachedWidth = new WeakMap();
@@ -24760,6 +24871,7 @@ _M3eSliderElement_handlePointerDown = function _M3eSliderElement_handlePointerDo
   if (e.target instanceof HTMLElement) {
     e.target.setPointerCapture(e.pointerId);
   }
+  __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").clear();
   __classPrivateFieldSet(this, _M3eSliderElement_activeThumb, e.composedPath().find(x => x instanceof M3eSliderThumbElement), "f");
   if (__classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f")) {
     return;
@@ -24807,8 +24919,8 @@ _M3eSliderElement_handlePointerMove = function _M3eSliderElement_handlePointerMo
   } else if (this.upperThumb) {
     max = Math.min(max, this.upperThumb.value ?? this.max);
   }
-  if (hasCustomState$1(this, "-animating")) {
-    deleteCustomState$1(this, "-animating");
+  if (hasCustomState$1(this, "--animating")) {
+    deleteCustomState$1(this, "--animating");
     __classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f").style.transition = "";
   }
   __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_changeThumb).call(this, __classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f"), Math.min(max, Math.max(min, value)));
@@ -24820,6 +24932,7 @@ _M3eSliderElement_handlePointerUp = function _M3eSliderElement_handlePointerUp(e
     e.target.releasePointerCapture(e.pointerId);
   }
   if (__classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f") && !__classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f").disabled) {
+    __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_commitThumb).call(this, __classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f"));
     __classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f").focus();
   }
 };
@@ -24886,6 +24999,12 @@ _M3eSliderElement_handleKeyDown = function _M3eSliderElement_handleKeyDown(e) {
       break;
   }
 };
+_M3eSliderElement_handleKeyUp = function _M3eSliderElement_handleKeyUp(e) {
+  const activeThumb = e.composedPath().find(x => x instanceof M3eSliderThumbElement);
+  if (activeThumb) {
+    __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_commitThumb).call(this, activeThumb);
+  }
+};
 _M3eSliderElement_handleThumbChange = function _M3eSliderElement_handleThumbChange(e) {
   e.stopPropagation();
   __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_updateThumbs).call(this);
@@ -24893,35 +25012,39 @@ _M3eSliderElement_handleThumbChange = function _M3eSliderElement_handleThumbChan
 };
 _M3eSliderElement_changeThumb = function _M3eSliderElement_changeThumb(thumb, value, animate = false) {
   if (thumb.value === value) return;
-  const prev = thumb.value;
-  if (animate && !prefersReducedMotion$1()) {
-    addCustomState$1(this, "-animating");
-    thumb.addEventListener("transitionend", () => {
-      thumb.style.transition = "";
-      deleteCustomState$1(this, "-animating");
-    }, {
-      once: true
-    });
-    thumb.style.transition = `transform ${DesignToken$1.motion.spring.fastEffects}`;
-  }
-  thumb.value = value;
-  thumb.markAsDirty();
-  thumb.markAsTouched();
-  if (thumb.dispatchEvent(new Event("input", {
+  if (thumb.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    if (animate && !prefersReducedMotion$1()) {
+      addCustomState$1(this, "--animating");
+      thumb.addEventListener("transitionend", () => {
+        thumb.style.transition = "";
+        deleteCustomState$1(this, "--animating");
+      }, {
+        once: true
+      });
+      thumb.style.transition = `transform ${DesignToken$1.motion.spring.fastEffects}`;
+    }
+    __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").add(thumb);
+    thumb.value = value;
+    thumb.markAsDirty();
+    thumb.markAsTouched();
+    thumb.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
+  }
+};
+_M3eSliderElement_commitThumb = function _M3eSliderElement_commitThumb(thumb) {
+  if (__classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").has(thumb)) {
     thumb.dispatchEvent(new Event("change", {
-      bubbles: true,
-      composed: true
+      bubbles: true
     }));
-  } else {
-    thumb.value = prev;
+    __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").delete(thumb);
   }
 };
 /** The styles of the element. */
-M3eSliderElement.styles = css`:host { display: inline-block; vertical-align: middle; min-inline-size: var(--m3e-slider-min-width, 12.5rem); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([disabled])) { cursor: pointer; } :host([size="extra-small"]), :host([size="small"]) { height: var(--m3e-slider-small-height, 2.75rem); } :host(:not(:dir(rtl))[size="extra-small"]) .base, :host(:not(:dir(rtl))[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken$1.shape.corner.smallStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.smallStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${DesignToken$1.shape.corner.smallEnd} ); } :host(:dir(rtl)[size="extra-small"]) .base, :host(:dir(rtl)[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken$1.shape.corner.smallEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.smallEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${DesignToken$1.shape.corner.smallStart} ); } :host([size="extra-small"]) .track { height: calc(var(--m3e-slider-extra-small-track-height, 1rem)); } :host([size="small"]) .track { height: calc(var(--m3e-slider-small-track-height, 1.5rem)); } :host([size="medium"]) { height: var(--m3e-slider-medium-height, 3.25rem); } :host(:not(:dir(rtl))[size="medium"]) .base { --_slider-active-track-shape: var( --m3e-slider-medium-active-track-shape, ${DesignToken$1.shape.corner.mediumStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.mediumStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${DesignToken$1.shape.corner.mediumEnd} ); } :host(:dir(rtl)[size="medium"]) .base { --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${DesignToken$1.shape.corner.mediumEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.mediumEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${DesignToken$1.shape.corner.mediumStart} ); } :host([size="medium"]) .track { height: var(--m3e-slider-medium-track-height, 2.5rem); } :host([size="large"]) { height: var(--m3e-slider-large-height, 4.25rem); } :host(:not(:dir(rtl))[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken$1.shape.corner.largeStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.largeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.largeEnd} ); } :host(:dir(rtl)[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken$1.shape.corner.largeEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.largeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.largeStart} ); } :host([size="large"]) .track { height: var(--m3e-slider-large-track-height, 3.5rem); } :host([size="extra-large"]) { height: var(--m3e-slider-extra-large-height, 6.75rem); } :host(:not(:dir(rtl))[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${DesignToken$1.shape.corner.extraLargeStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.extraLargeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.extraLargeEnd} ); } :host(:dir(rtl)[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${DesignToken$1.shape.corner.extraLargeEnd} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.extraLargeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.extraLargeStart} ); } :host([size="extra-large"]) .track { height: var(--m3e-slider-extra-large-track-height, 6rem); } :host(:state(-animating)) .track-active, :host(:state(-animating)) .track-inactive.start, :host(:state(-animating)) .track-inactive.end { transition: ${unsafeCSS(`margin-inline-start ${DesignToken$1.motion.spring.fastEffects},
+M3eSliderElement.styles = css`:host { display: inline-block; vertical-align: middle; min-inline-size: var(--m3e-slider-min-width, 12.5rem); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([disabled])) { cursor: pointer; } :host([size="extra-small"]), :host([size="small"]) { height: var(--m3e-slider-small-height, 2.75rem); } :host(:not(:dir(rtl))[size="extra-small"]) .base, :host(:not(:dir(rtl))[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken$1.shape.corner.smallStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.smallStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${DesignToken$1.shape.corner.smallEnd} ); } :host(:dir(rtl)[size="extra-small"]) .base, :host(:dir(rtl)[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken$1.shape.corner.smallEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.smallEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${DesignToken$1.shape.corner.smallStart} ); } :host([size="extra-small"]) .track { height: calc(var(--m3e-slider-extra-small-track-height, 1rem)); } :host([size="small"]) .track { height: calc(var(--m3e-slider-small-track-height, 1.5rem)); } :host([size="medium"]) { height: var(--m3e-slider-medium-height, 3.25rem); } :host(:not(:dir(rtl))[size="medium"]) .base { --_slider-active-track-shape: var( --m3e-slider-medium-active-track-shape, ${DesignToken$1.shape.corner.mediumStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.mediumStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${DesignToken$1.shape.corner.mediumEnd} ); } :host(:dir(rtl)[size="medium"]) .base { --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${DesignToken$1.shape.corner.mediumEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.mediumEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${DesignToken$1.shape.corner.mediumStart} ); } :host([size="medium"]) .track { height: var(--m3e-slider-medium-track-height, 2.5rem); } :host([size="large"]) { height: var(--m3e-slider-large-height, 4.25rem); } :host(:not(:dir(rtl))[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken$1.shape.corner.largeStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.largeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.largeEnd} ); } :host(:dir(rtl)[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken$1.shape.corner.largeEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.largeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.largeStart} ); } :host([size="large"]) .track { height: var(--m3e-slider-large-track-height, 3.5rem); } :host([size="extra-large"]) { height: var(--m3e-slider-extra-large-height, 6.75rem); } :host(:not(:dir(rtl))[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${DesignToken$1.shape.corner.extraLargeStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.extraLargeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.extraLargeEnd} ); } :host(:dir(rtl)[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${DesignToken$1.shape.corner.extraLargeEnd} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${DesignToken$1.shape.corner.extraLargeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${DesignToken$1.shape.corner.extraLargeStart} ); } :host([size="extra-large"]) .track { height: var(--m3e-slider-extra-large-track-height, 6rem); } :host(:is(:state(--animating), :--animating)) .track-active, :host(:is(:state(--animating), :--animating)) .track-inactive.start, :host(:is(:state(--animating), :--animating)) .track-inactive.end { transition: ${unsafeCSS(`margin-inline-start ${DesignToken$1.motion.spring.fastEffects},
         width ${DesignToken$1.motion.spring.fastEffects}`)}; } .base { display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: inherit; outline: none; touch-action: none; } .track { position: relative; flex: 1 1 auto; touch-action: none; } .track-inactive, .track-active { position: absolute; height: 100%; touch-action: none; } .track-active { margin-inline-start: var(--_slider-active-track-offset, 0px); width: var(--_slider-active-track-size, 0px); border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape)); } .track-inactive.start { width: var(--_slider-inactive-track-before-size, 0px); border-radius: var(--_slider-inactive-track-start-shape); } .track-inactive.end { margin-inline-start: var(--_slider-inactive-track-after-offset, 0px); width: var(--_slider-inactive-track-after-size, 0px); border-radius: var(--_slider-inactive-track-end-shape); } .ticks { position: absolute; width: 100%; height: var(--m3e-slider-tick-size, 0.25rem); overflow: visible; touch-action: none; } .tick { position: absolute; top: 0; touch-action: none; inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2)); width: var(--m3e-slider-tick-size, 0.25rem); height: var(--m3e-slider-tick-size, 0.25rem); border-radius: var(--m3e-slider-tick-shape, ${DesignToken$1.shape.corner.full}); } :host(:not([disabled])) .track-inactive { background-color: var(--m3e-slider-inactive-track-color, ${DesignToken$1.color.secondaryContainer}); } :host([disabled]) .track-inactive { background-color: color-mix( in srgb, var(--m3e-slider-disabled-inactive-track-color, ${DesignToken$1.color.onSurface}) var(--m3e-slider-disabled-inactive-track-opacity, 12%), transparent ); } :host(:not([disabled])) .track-active { background-color: var(--m3e-slider-active-track-color, ${DesignToken$1.color.primary}); } :host([disabled]) .track-active { background-color: color-mix( in srgb, var(--m3e-slider-disabled-active-track-color, ${DesignToken$1.color.onSurface}) var(--m3e-slider-disabled-active-track-opacity, 38%), transparent ); } :host(:not([disabled])) .tick.active { background-color: var(--m3e-slider-tick-active-color, ${DesignToken$1.color.onPrimary}); } :host([disabled]) .tick.active { background-color: var(--m3e-slider-disabled-tick-active-color, ${DesignToken$1.color.inverseOnSurface}); } :host(:not([disabled])) .tick.inactive { background-color: var(--m3e-slider-tick-inactive-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([disabled]) .tick.inactive { background-color: var(--m3e-slider-disabled-tick-inactive-color, ${DesignToken$1.color.onSurface}); } :host(:not([discrete])) .tick.active { display: none; } :host(:hover[labelled]) .base, :host(:focus-within[labelled]) .base { --_slider-label-visibility: visible; --_slider-label-opacity: 1; --_slider-label-transform: scale(1); } @media (forced-colors: active) { :host(:not([disabled])) .track-inactive { background-color: unset; } :host(:not([disabled])) .base.range .track-inactive.start, :host(:not([disabled])) .track-inactive.end { border: 1px solid CanvasText; box-sizing: border-box; } :host(:not([disabled])) .tick.inactive { background-color: CanvasText; } :host(:not([disabled])) .tick.active { background-color: Canvas; } :host(:not([disabled])) .track-active { background-color: CanvasText; } :host([disabled]) .base.range .track-inactive.start, :host([disabled]) .track-inactive.end { border: 1px solid GrayText; box-sizing: border-box; } :host([disabled]) .track-active { background-color: GrayText; } :host([disabled]) .tick.inactive { background-color: GrayText; } :host([disabled]) .tick.active { background-color: Canvas; } }`;
 __decorate([query(".base")], M3eSliderElement.prototype, "_base", void 0);
 __decorate([state()], M3eSliderElement.prototype, "_ticks", void 0);
@@ -25430,8 +25553,9 @@ var _M3eSplitPaneElement_instances, _M3eSplitPaneElement_breakpointUnobserve, _M
  * @attr value - A fractional value, between 0 and 100, indicating the size of the start pane.
  * @attr wrap-detents - Whether cycling through detents will wrap.
  *
- * @fires input - Fired continuously while the user adjusts the drag handle.
- * @fires change - Fired when the user finishes adjusting the drag handle.
+ * @fires beforeinput - Dispatched continuously before the user adjusts the drag handle.
+ * @fires input - Dispatched continuously while the user adjusts the drag handle.
+ * @fires change - Dispatched when the user finishes adjusting the drag handle.
  *
  * @cssprop --m3e-split-pane-drag-handle-hover-color - Color used for the drag handle hover state.
  * @cssprop --m3e-split-pane-drag-handle-hover-opacity - Opacity used for the drag handle hover state.
@@ -25464,7 +25588,7 @@ let M3eSplitPaneElement = class M3eSplitPaneElement extends FormAssociated$1(Dis
       target: null,
       isPressedKey: key => key === " ",
       minPressedDuration: 150,
-      callback: pressed => setCustomState$1(this, "-pressed", pressed && !this.disabled)
+      callback: pressed => setCustomState$1(this, "--pressed", pressed && !this.disabled)
     }));
     /** @private */
     _M3eSplitPaneElement_startMutationController.set(this, new MutationController$1(this, {
@@ -25627,10 +25751,10 @@ _M3eSplitPaneElement_renderDragHandle = function _M3eSplitPaneElement_renderDrag
   return html`<div id="drag-handle" class="drag-handle" role="separator" tabindex="${ifDefined(this.disabled ? undefined : 0)}" aria-label="${this.label}" aria-controls="start" aria-disabled="${ifDefined(this.disabled ? "true" : undefined)}" aria-orientation="${this.currentOrientation === "horizontal" ? "vertical" : "horizontal"}" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}" aria-valuetext="${ifDefined(this.valueFormatter?.(this.value, this.currentOrientation, M3eDirectionality.current))}" @pointerdown="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerDown)}" @pointerup="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerUp)}" @pointermove="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerMove)}" @keydown="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleKeyDown)}" @dblclick="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_cycleDetent)}">${this.disabled ? nothing : html`<div class="handle"><m3e-focus-ring for="drag-handle"></m3e-focus-ring><m3e-state-layer for="drag-handle"></m3e-state-layer></div><div class="touch"></div>`}</div>`;
 };
 _M3eSplitPaneElement_handleStartSlotChange = function _M3eSplitPaneElement_handleStartSlotChange(e) {
-  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_startMutationController, "f"), "-with-start");
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_startMutationController, "f"), "--with-start");
 };
 _M3eSplitPaneElement_handleEndSlotChange = function _M3eSplitPaneElement_handleEndSlotChange(e) {
-  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_endMutationController, "f"), "-with-end");
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_endMutationController, "f"), "--with-end");
 };
 _M3eSplitPaneElement_handleSlotChange = function _M3eSplitPaneElement_handleSlotChange(slot, mutationController, state) {
   for (const target of mutationController.targets) {
@@ -25645,7 +25769,7 @@ _M3eSplitPaneElement_handleSlotChange = function _M3eSplitPaneElement_handleSlot
   }
 };
 _M3eSplitPaneElement_updatePaneVisibility = function _M3eSplitPaneElement_updatePaneVisibility(pane) {
-  setCustomState$1(this, `-with-${pane}`, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_hasVisibleElements).call(this, this.shadowRoot?.querySelector(`slot[name='${pane}']`)));
+  setCustomState$1(this, `--with-${pane}`, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_hasVisibleElements).call(this, this.shadowRoot?.querySelector(`slot[name='${pane}']`)));
 };
 _M3eSplitPaneElement_hasVisibleElements = function _M3eSplitPaneElement_hasVisibleElements(slot, assignedElements) {
   assignedElements = assignedElements ?? [];
@@ -25664,10 +25788,10 @@ _M3eSplitPaneElement_initBreakpointMonitoring = function _M3eSplitPaneElement_in
   }), "f");
 };
 _M3eSplitPaneElement_updateOrientation = function _M3eSplitPaneElement_updateOrientation() {
-  setCustomState$1(this, "-vertical", this.currentOrientation === "vertical");
+  setCustomState$1(this, "--vertical", this.currentOrientation === "vertical");
 };
 _M3eSplitPaneElement_clearOrientation = function _M3eSplitPaneElement_clearOrientation() {
-  deleteCustomState$1(this, "-vertical");
+  deleteCustomState$1(this, "--vertical");
   this._orientation = undefined;
   __classPrivateFieldGet(this, _M3eSplitPaneElement_breakpointUnobserve, "f")?.call(this);
   __classPrivateFieldSet(this, _M3eSplitPaneElement_breakpointUnobserve, undefined, "f");
@@ -25738,8 +25862,7 @@ _M3eSplitPaneElement_handlePointerUp = function _M3eSplitPaneElement_handlePoint
     }
     if (__classPrivateFieldGet(this, _M3eSplitPaneElement_valueChanged, "f")) {
       this.dispatchEvent(new Event("change", {
-        bubbles: true,
-        composed: true
+        bubbles: true
       }));
       __classPrivateFieldSet(this, _M3eSplitPaneElement_valueChanged, false, "f");
     }
@@ -25875,27 +25998,25 @@ _M3eSplitPaneElement_handleKeyDown = function _M3eSplitPaneElement_handleKeyDown
 };
 _M3eSplitPaneElement_changeValue = function _M3eSplitPaneElement_changeValue(value, emitChange = true, allowOvershoot = false) {
   __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_clearSnapAnimation).call(this);
-  if (!allowOvershoot) {
-    value = Math.max(this.min, Math.min(this.max, value));
-  }
-  if (value != this.value) {
-    const prev = this.value;
-    this.value = value;
-    if (this.dispatchEvent(new Event("input", {
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    }))) {
+  if (this.dispatchEvent(new Event("beforeinput", {
+    bubbles: true,
+    cancelable: true
+  }))) {
+    if (!allowOvershoot) {
+      value = Math.max(this.min, Math.min(this.max, value));
+    }
+    if (value != this.value) {
+      this.value = value;
       this._base.style.setProperty("--_split-pane-value", `${this.value}%`);
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       if (emitChange) {
         this.dispatchEvent(new Event("change", {
-          bubbles: true,
-          composed: true
+          bubbles: true
         }));
       }
       return true;
-    } else {
-      this.value = prev;
     }
   }
   return false;
@@ -25959,7 +26080,7 @@ _M3eSplitPaneElement_snapToValue = function _M3eSplitPaneElement_snapToValue(val
   value = Math.max(this.min, Math.min(this.max, value));
   if (value === this.value) return;
   if (!prefersReducedMotion$1()) {
-    addCustomState$1(this, "-animating");
+    addCustomState$1(this, "--animating");
     __classPrivateFieldSet(this, _M3eSplitPaneElement_snapAnimation, this._base.animate([{
       "--_split-pane-value": `${this.value}%`
     }, {
@@ -25971,7 +26092,7 @@ _M3eSplitPaneElement_snapToValue = function _M3eSplitPaneElement_snapToValue(val
     __classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f").onfinish = () => {
       __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, value, emitChange);
       __classPrivateFieldSet(this, _M3eSplitPaneElement_snapAnimation, undefined, "f");
-      deleteCustomState$1(this, "-animating");
+      deleteCustomState$1(this, "--animating");
     };
   } else {
     __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, value, emitChange);
@@ -25995,8 +26116,8 @@ _M3eSplitPaneElement_cycleDetent = function _M3eSplitPaneElement_cycleDetent() {
   registerStyleSheet$1(css`@property --_split-pane-value { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }</length-percentage>`);
 })();
 /** The styles of the element. */
-M3eSplitPaneElement.styles = css`:host { display: block; } .base { display: flex; width: 100%; height: 100%; overflow: hidden; } :host(:not(:state(-vertical))) .base { flex-direction: row; } :host(:state(-vertical)) .base { flex-direction: column; } :host(:state(-with-start):state(-with-end)) .start { flex: 0 1 calc(var(--_split-pane-value) - calc(var(--m3e-split-pane-drag-handle-container-width, 1.5rem) / 2)); } :host(:not(:state(-with-end))) .start { flex: 1 1 auto; } :host(:state(-with-end)) .end { flex: 1 1 auto; } :host(:not(:state(-with-end))) .end { display: none; } :host(:not(:state(-animating))) .start[inert], :host(:not(:state(-animating))) .end[inert] { visibility: hidden; } .drag-handle { flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --m3e-state-layer-hover-color: var(--m3e-split-pane-drag-handle-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var(--m3e-split-pane-drag-handle-hover-opacity, 8%); --m3e-state-layer-focus-color: var(--m3e-split-pane-drag-handle-focus-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var(--m3e-split-pane-drag-handle-focus-opacity, 10%); } :host(:is(:not(:state(-with-start)), :not(:state(-with-end)))) .drag-handle { display: none; } :host(:not(:state(-pressed))) .drag-handle:not([aria-disabled]) { cursor: grab; } :host(:state(-pressed)) .drag-handle:not([aria-disabled]) { cursor: grabbing; } .handle { position: relative; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
-        width ${DesignToken$1.motion.spring.fastEffects}, height ${DesignToken$1.motion.spring.fastEffects}`)}; } .touch { z-index: 1; position: absolute; height: 3rem; width: 3rem; margin: auto; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:state(-pressed))) .handle { background-color: var(--m3e-split-pane-drag-handle-color, ${DesignToken$1.color.outline}); border-radius: var(--m3e-split-pane-drag-handle-shape, ${DesignToken$1.shape.corner.full}); } :host(:state(-pressed)) .handle { background-color: var(--m3e-split-pane-drag-handle-pressed-color, ${DesignToken$1.color.onSurface}); border-radius: var(--m3e-split-pane-drag-handle-pressed-shape, ${DesignToken$1.shape.corner.medium}); } :host(:not(:state(-vertical))) .drag-handle { flex-direction: column; width: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:not(:state(-vertical)):not(:state(-pressed))) .handle { width: var(--m3e-split-pane-drag-handle-width, 0.25rem); height: var(--m3e-split-pane-drag-handle-height, 3rem); } :host(:not(:state(-vertical)):state(-pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); height: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); } :host(:state(-vertical)) .drag-handle { height: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:state(-vertical):not(:state(-pressed))) .handle { width: var(--m3e-split-pane-drag-handle-height, 3rem); height: var(--m3e-split-pane-drag-handle-width, 0.25rem); } :host(:state(-vertical):state(-pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); height: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); } @media (prefers-reduced-motion) { .handle { transition: none; } } @media (forced-colors: active) { :host(:state(-pressed)) .handle, :host(:not(:state(-pressed))) .handle { background-color: ButtonText; } }`;
+M3eSplitPaneElement.styles = css`:host { display: block; } .base { display: flex; width: 100%; height: 100%; overflow: hidden; } :host(:not(:is(:state(--vertical), :--vertical))) .base { flex-direction: row; } :host(:is(:state(--vertical), :--vertical)) .base { flex-direction: column; } :host(:is(:state(--with-start), :--with-start):is(:state(--with-end), :--with-end)) .start { flex: 0 1 calc(var(--_split-pane-value) - calc(var(--m3e-split-pane-drag-handle-container-width, 1.5rem) / 2)); } :host(:not(:is(:state(--with-end), :--with-end))) .start { flex: 1 1 auto; } :host(:is(:state(--with-end), :--with-end)) .end { flex: 1 1 auto; } :host(:not(:is(:state(--with-end), :--with-end))) .end { display: none; } :host(:not(:is(:state(--animating), :--animating))) .start[inert], :host(:not(:is(:state(--animating), :--animating))) .end[inert] { visibility: hidden; } .drag-handle { flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --m3e-state-layer-hover-color: var(--m3e-split-pane-drag-handle-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var(--m3e-split-pane-drag-handle-hover-opacity, 8%); --m3e-state-layer-focus-color: var(--m3e-split-pane-drag-handle-focus-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var(--m3e-split-pane-drag-handle-focus-opacity, 10%); } :host(:is(:not(:is(:state(--with-start), :--with-start)), :not(:is(:state(--with-end), :--with-end)))) .drag-handle { display: none; } :host(:not(:is(:state(--pressed), :--pressed))) .drag-handle:not([aria-disabled]) { cursor: grab; } :host(:is(:state(--pressed), :--pressed)) .drag-handle:not([aria-disabled]) { cursor: grabbing; } .handle { position: relative; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
+        width ${DesignToken$1.motion.spring.fastEffects}, height ${DesignToken$1.motion.spring.fastEffects}`)}; } .touch { z-index: 1; position: absolute; height: 3rem; width: 3rem; margin: auto; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:is(:state(--pressed), :--pressed))) .handle { background-color: var(--m3e-split-pane-drag-handle-color, ${DesignToken$1.color.outline}); border-radius: var(--m3e-split-pane-drag-handle-shape, ${DesignToken$1.shape.corner.full}); } :host(:is(:state(--pressed), :--pressed)) .handle { background-color: var(--m3e-split-pane-drag-handle-pressed-color, ${DesignToken$1.color.onSurface}); border-radius: var(--m3e-split-pane-drag-handle-pressed-shape, ${DesignToken$1.shape.corner.medium}); } :host(:not(:is(:state(--vertical), :--vertical))) .drag-handle { flex-direction: column; width: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:not(:is(:state(--vertical), :--vertical)):not(:is(:state(--pressed), :--pressed))) .handle { width: var(--m3e-split-pane-drag-handle-width, 0.25rem); height: var(--m3e-split-pane-drag-handle-height, 3rem); } :host(:not(:is(:state(--vertical), :--vertical)):is(:state(--pressed), :--pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); height: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); } :host(:is(:state(--vertical), :--vertical)) .drag-handle { height: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:is(:state(--vertical), :--vertical):not(:is(:state(--pressed), :--pressed))) .handle { width: var(--m3e-split-pane-drag-handle-height, 3rem); height: var(--m3e-split-pane-drag-handle-width, 0.25rem); } :host(:is(:state(--vertical), :--vertical):is(:state(--pressed), :--pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); height: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); } @media (prefers-reduced-motion) { .handle { transition: none; } } @media (forced-colors: active) { :host(:is(:state(--pressed), :--pressed)) .handle, :host(:not(:is(:state(--pressed), :--pressed))) .handle { background-color: ButtonText; } }`;
 __decorate([state()], M3eSplitPaneElement.prototype, "_orientation", void 0);
 __decorate([query(".base")], M3eSplitPaneElement.prototype, "_base", void 0);
 __decorate([query(".drag-handle")], M3eSplitPaneElement.prototype, "_dragHandle", void 0);
@@ -26176,9 +26297,10 @@ var M3eStepElement_1;
  * @attr optional - Whether the step is optional.
  * @attr selected - Whether the element is selected.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-step-shape - Border radius of the step container, defining its visual shape.
  * @cssprop --m3e-step-padding - Internal padding of the step container, used for layout spacing.
@@ -26322,17 +26444,17 @@ _M3eStepElement_handleClick = function _M3eStepElement_handleClick(e) {
     e.stopImmediatePropagation();
   }
   if (e.defaultPrevented || this.selected) return;
-  this.selected = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
-  })) && this.closest("m3e-stepper")?.moveTo(this.index)) {
+  })) && this.closest("m3e-stepper")?._moveTo(this.index)) {
+    this.selected = true;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = false;
   }
 };
 /** The styles of the element. */
@@ -26447,7 +26569,9 @@ var _M3eStepperElement_instances, _M3eStepperElement_breakpointUnobserve, _M3eSt
  * @slot step - Renders a step.
  * @slot panel - Renders a panel.
  *
- * @fires change - Emitted when the selected step changes.
+ * @fires beforeinput - Dispatched before the selected state of a step changes.
+ * @fires input - Dispatched when the selected state of a step changes.
+ * @fires change - Dispatched when the selected step changes.
  *
  * @cssprop --m3e-step-divider-thickness - Thickness of the divider line between steps.
  * @cssprop --m3e-step-divider-color - Color of the divider line between steps.
@@ -26516,6 +26640,16 @@ let M3eStepperElement = class M3eStepperElement extends ReconnectedCallback$1(At
    * @returns {boolean} Whether the stepper moved to the specified `index`.
    */
   moveTo(index) {
+    if (this._moveTo(index)) {
+      this.dispatchEvent(new Event("change", {
+        bubbles: true
+      }));
+      return true;
+    }
+    return false;
+  }
+  /** @internal */
+  _moveTo(index) {
     const selectedStep = this.selectedStep;
     if (selectedStep && selectedStep.index === index) {
       return true;
@@ -26545,16 +26679,10 @@ let M3eStepperElement = class M3eStepperElement extends ReconnectedCallback$1(At
       }
       this._selectedIndex = index;
       this[selectionManager].select(this.selectedStep);
-      this.dispatchEvent(new Event("change", {
-        bubbles: true
-      }));
       return true;
     } else {
       if (selectedStep) {
         this[selectionManager].deselect(selectedStep);
-        this.dispatchEvent(new Event("change", {
-          bubbles: true
-        }));
       }
       return false;
     }
@@ -26574,7 +26702,7 @@ let M3eStepperElement = class M3eStepperElement extends ReconnectedCallback$1(At
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    addCustomState$1(this, "-no-animate");
+    addCustomState$1(this, "--no-animate");
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -26628,7 +26756,9 @@ _M3eStepperElement_renderHeader = function _M3eStepperElement_renderHeader() {
 };
 _M3eStepperElement_handleChange = function _M3eStepperElement_handleChange(e) {
   e.stopPropagation();
-  // Note: change event emitted from moveTo.
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
 };
 _M3eStepperElement_handleSlotChange = function _M3eStepperElement_handleSlotChange() {
   const {
@@ -26672,8 +26802,8 @@ _M3eStepperElement_handleSelectedChange = function _M3eStepperElement_handleSele
   if (selected && this.matches(":focus-within") && !selected.matches(":focus")) {
     selected.focus();
   }
-  if (hasCustomState$1(this, "-no-animate")) {
-    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
+  if (hasCustomState$1(this, "--no-animate")) {
+    requestAnimationFrame(() => deleteCustomState$1(this, "--no-animate"));
   }
 };
 _M3eStepperElement_checkValidity = function _M3eStepperElement_checkValidity() {
@@ -26695,7 +26825,7 @@ _M3eStepperElement_initBreakpointMonitoring = function _M3eStepperElement_initBr
 };
 _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDisplayOrder() {
   this[selectionManager].vertical = (this._orientation ?? this.orientation) === "vertical";
-  setCustomState$1(this, "-vertical", this[selectionManager].vertical);
+  setCustomState$1(this, "--vertical", this[selectionManager].vertical);
   if (!this[selectionManager].vertical) {
     this.steps.forEach(x => {
       x.style.order = "";
@@ -26713,10 +26843,10 @@ _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDispla
   }
 };
 (() => {
-  registerStyleSheet$1(css`m3e-stepper:not(:state(-vertical)) > .-m3e-step-divider::before { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:state(-vertical))[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(:state(-vertical))[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"]:not(:last-of-type) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); }`);
+  registerStyleSheet$1(css`m3e-stepper:not(:is(:state(--vertical), :--vertical)) > .-m3e-step-divider::before { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:is(:state(--vertical), :--vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:is(:state(--vertical), :--vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:is(:state(--vertical), :--vertical) > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:is(:state(--vertical), :--vertical) > [slot="panel"]:not(:last-of-type) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:is(:state(--vertical), :--vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:is(:state(--vertical), :--vertical) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); }`);
 })();
 /** The styles of the element. */
-M3eStepperElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } :host(:not(:state(-vertical))) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(:state(-vertical)):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(:state(-vertical))) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(:state(-vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:state(-vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:state(-vertical))[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(:state(-vertical)) .header { display: contents; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(:state(-vertical))) { --m3e-collapsible-animation-duration: 0ms; } :host(:state(-no-animate)) { --m3e-collapsible-animation-duration: 0ms; }`;
+M3eStepperElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } :host(:not(:is(:state(--vertical), :--vertical))) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(:is(:state(--vertical), :--vertical)):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:is(:state(--vertical), :--vertical))[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(:is(:state(--vertical), :--vertical)) .header { display: contents; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(:is(:state(--vertical), :--vertical))) { --m3e-collapsible-animation-duration: 0ms; } :host(:is(:state(--no-animate), :--no-animate)) { --m3e-collapsible-animation-duration: 0ms; }`;
 __decorate([state()], M3eStepperElement.prototype, "_orientation", void 0);
 __decorate([state()], M3eStepperElement.prototype, "_selectedIndex", void 0);
 __decorate([property({
@@ -26922,9 +27052,10 @@ var _M3eSwitchElement_instances, _M3eSwitchElement_clickHandler, _M3eSwitchEleme
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr value - A string representing the value of the switch.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.
  * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.
@@ -27071,17 +27202,17 @@ _M3eSwitchElement_renderIcon = function _M3eSwitchElement_renderIcon() {
 };
 _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.checked = !this.checked;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = !this.checked;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = !this.checked;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -27133,9 +27264,10 @@ var M3eTabElement_1;
  * @attr for - The identifier of the interactive control to which this element is attached.
  * @attr selected - Whether the element is selected.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-tab-font-size - Font size for tab label.
  * @cssprop --m3e-tab-font-weight - Font weight for tab label.
@@ -27212,18 +27344,18 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
     e.stopImmediatePropagation();
   }
   if (e.defaultPrevented || this.selected) return;
-  this.selected = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.selected = true;
     this.closest("m3e-tabs")?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = false;
   }
 };
 /** The styles of the element. */
@@ -27321,7 +27453,9 @@ const MIN_PRIMARY_TAB_WIDTH = 24;
  * @attr stretch - Whether tabs are stretched to fill the header.
  * @attr variant - The appearance variant of the tabs.
  *
- * @fires change - Emitted when the selected tab changes.
+ * @fires beforeinput - Dispatched before the selected state of a tab changes.
+ * @fires input - Dispatched when the selected state of a tab changes.
+ * @fires change - Dispatched when the selected tab changes.
  *
  * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.
  * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.
@@ -27374,7 +27508,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
     new ResizeController$1(this, {
       skipInitial: true,
       callback: () => {
-        addCustomState$1(this, "-no-animate");
+        addCustomState$1(this, "--no-animate");
         __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
       }
     });
@@ -27404,7 +27538,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    addCustomState$1(this, "-no-animate");
+    addCustomState$1(this, "--no-animate");
     __classPrivateFieldSet(this, _M3eTabsElement_directionalitySubscription, M3eDirectionality.observe(() => {
       this.requestUpdate();
       this[selectionManager].directionality = M3eDirectionality.current;
@@ -27482,13 +27616,13 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
   }
   this._tablist.style.setProperty("--_tabs-active-tab-position", `${left}px`);
   this._tablist.style.setProperty("--_tabs-active-tab-size", `${width}px`);
-  if (width > 0 && hasCustomState$1(this, "-no-animate")) {
-    setTimeout(() => deleteCustomState$1(this, "-no-animate"));
+  if (width > 0 && hasCustomState$1(this, "--no-animate")) {
+    setTimeout(() => deleteCustomState$1(this, "--no-animate"));
   }
 };
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken$1.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
+        width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
 __decorate([query(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([state()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([property({
@@ -32086,7 +32220,7 @@ M3eThemeElement = __decorate([customElement$1("m3e-theme")], M3eThemeElement);
  *
  * @attr disabled - A value indicating whether the element is disabled.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.
  * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.
@@ -32250,7 +32384,7 @@ let M3eTocElement = class M3eTocElement extends HtmlFor$1(AttachInternals$1(Role
       if (this._activeIndicator) {
         const item = __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").selectedItems[0];
         if (!item) {
-          setCustomState$1(this, "-no-animate", true);
+          setCustomState$1(this, "--no-animate", true);
           this._activeIndicator.style.top = `0px`;
           this._activeIndicator.style.height = `0px`;
           this._activeIndicator.style.visibility = "hidden";
@@ -32262,8 +32396,8 @@ let M3eTocElement = class M3eTocElement extends HtmlFor$1(AttachInternals$1(Role
           this._activeIndicator.style.top = `${item.offsetTop}px`;
           this._activeIndicator.style.height = `${item.clientHeight}px`;
           this._activeIndicator.style.visibility = item.clientHeight == 0 ? "hidden" : "";
-          if (hasCustomState$1(this, "-no-animate")) {
-            setTimeout(() => setCustomState$1(this, "-no-animate", false), 40);
+          if (hasCustomState$1(this, "--no-animate")) {
+            setTimeout(() => setCustomState$1(this, "--no-animate", false), 40);
           }
         }
       }
@@ -32345,7 +32479,7 @@ let M3eTocElement = class M3eTocElement extends HtmlFor$1(AttachInternals$1(Role
         removed
       } = __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").setItems([...(this.shadowRoot?.querySelectorAll("m3e-toc-item") ?? [])]);
       if (!__classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").activeItem) {
-        setCustomState$1(this, "-no-animate", true);
+        setCustomState$1(this, "--no-animate", true);
         __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").updateActiveItem(added.find(x => !x.disabled));
       }
       for (const item of added) {
@@ -32379,10 +32513,10 @@ _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>`;
 };
 _M3eTocElement_handleOverlineSlotChange = function _M3eTocElement_handleOverlineSlotChange(e) {
-  setCustomState$1(this, "-with-overline", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-overline", hasAssignedNodes$1(e.target));
 };
 _M3eTocElement_handleTitleSlotChange = function _M3eTocElement_handleTitleSlotChange(e) {
-  setCustomState$1(this, "-with-title", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-title", hasAssignedNodes$1(e.target));
 };
 _M3eTocElement_handleClick = function _M3eTocElement_handleClick(e) {
   if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {
@@ -32404,7 +32538,7 @@ M3eTocElement.styles = css`:host { display: inline-block; position: relative; ov
         height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1})
           ${DesignToken$1.motion.easing.standard},
         top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1})
-          ${DesignToken$1.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:state(-with-overline))) .overline, :host(:not(:state(-with-title))) .title, :host(:not(:state(-with-overline)):not(:state(-with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${DesignToken$1.color.onSurface}); } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`;
+          ${DesignToken$1.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:is(:state(--with-overline), :--with-overline))) .overline, :host(:not(:is(:state(--with-title), :--with-title))) .title, :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${DesignToken$1.color.onSurface}); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`;
 __decorate([state()], M3eTocElement.prototype, "_toc", void 0);
 __decorate([query(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
 __decorate([property({
@@ -32515,9 +32649,10 @@ _M3eToolbarElement_directionalitySubscription = new WeakMap();
 _M3eToolbarElement_focusKeyManager = new WeakMap();
 _M3eToolbarElement_instances = new WeakSet();
 _M3eToolbarElement_handleSlotChange = function _M3eToolbarElement_handleSlotChange() {
+  const items = M3eInteractivityChecker.findInteractiveElements(this, true);
   const {
     added
-  } = __classPrivateFieldGet(this, _M3eToolbarElement_focusKeyManager, "f").setItems(M3eInteractivityChecker.findInteractiveElements(this));
+  } = __classPrivateFieldGet(this, _M3eToolbarElement_focusKeyManager, "f").setItems(items);
   if (!__classPrivateFieldGet(this, _M3eToolbarElement_focusKeyManager, "f").activeItem) {
     const active = added.find(x => !x.hasAttribute("disabled"));
     if (active) {
@@ -33162,14 +33297,14 @@ _M3eTooltipElement_handleSlotChange = function _M3eTooltipElement_handleSlotChan
 _M3eTooltipElement_handleToggle = function _M3eTooltipElement_handleToggle(e) {
   if (e.newState === "open") {
     const multiline = this._base.getBoundingClientRect().height > parseFloat(getComputedStyle(this._base).minHeight);
-    setCustomState$1(this, "-multiline", multiline);
+    setCustomState$1(this, "--multiline", multiline);
   }
 };
 /** The styles of the element. */
-M3eTooltipElement.styles = css`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: anywhere; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken$1.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken$1.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+M3eTooltipElement.styles = css`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: break-word; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken$1.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken$1.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
         transform ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        display ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-multiline)) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
+        display ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--multiline), :--multiline)) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
 __decorate([property()], M3eTooltipElement.prototype, "position", void 0);
 M3eTooltipElement = __decorate([customElement$1("m3e-tooltip")], M3eTooltipElement);
 
@@ -33198,11 +33333,11 @@ var M3eTreeItemElement_1;
  * @attr open - Whether the item is expanded.
  * @attr selected - Whether the item is selected.
  *
- * @fires opening - Emitted when the item begins to open.
- * @fires opened - Emitted when the item has opened.
- * @fires closing - Emitted when the item begins to close.
- * @fires closed - Emitted when the item has closed.
- * @fires click - Emitted when the element is clicked.
+ * @fires opening - Dispatched when the item begins to open.
+ * @fires opened - Dispatched when the item has opened.
+ * @fires closing - Dispatched when the item begins to close.
+ * @fires closed - Dispatched when the item has closed.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-tree-item-font-size - Font size for the item label.
  * @cssprop --m3e-tree-item-font-weight - Font weight for the item label.
@@ -33393,10 +33528,10 @@ _M3eTreeItemElement_renderIcon = function _M3eTreeItemElement_renderIcon() {
   return this.selected && !this.hasChildItems ? html`<slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleIconSlotChange)}">${icon}</slot>` : icon;
 };
 _M3eTreeItemElement_handleOpenToggleIconSlotChange = function _M3eTreeItemElement_handleOpenToggleIconSlotChange(e) {
-  setCustomState$1(this, "-with-open-toggle-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-open-toggle-icon", hasAssignedNodes$1(e.target));
 };
 _M3eTreeItemElement_handleIconSlotChange = function _M3eTreeItemElement_handleIconSlotChange(e) {
-  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "--with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eTreeItemElement_handleSlotChange = function _M3eTreeItemElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eTreeItemElement_link, e.target.assignedElements({
@@ -33410,7 +33545,7 @@ _M3eTreeItemElement_handleItemSlotChange = function _M3eTreeItemElement_handleIt
   }).filter(x => x instanceof M3eTreeItemElement_1), "f");
   const hadChildItems = this._hasChildItems;
   this._hasChildItems = __classPrivateFieldGet(this, _M3eTreeItemElement_items, "f").length > 0;
-  setCustomState$1(this, "-with-items", this._hasChildItems);
+  setCustomState$1(this, "--with-items", this._hasChildItems);
   if (hadChildItems || this._hasChildItems) {
     if (this._multi && __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.cascade) {
       let anySelected = false,
@@ -33434,7 +33569,7 @@ _M3eTreeItemElement_handleItemSlotChange = function _M3eTreeItemElement_handleIt
 };
 _M3eTreeItemElement_handleTreeChange = function _M3eTreeItemElement_handleTreeChange() {
   this._multi = __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.multi === true;
-  setCustomState$1(this, "-multi", this._multi);
+  setCustomState$1(this, "--multi", this._multi);
 };
 _M3eTreeItemElement_handleClick = function _M3eTreeItemElement_handleClick() {
   if (this.disabled) return;
@@ -33473,8 +33608,8 @@ _M3eTreeItemElement_handleCollapsibleEvent = function _M3eTreeItemElement_handle
 };
 /** The styles of the element. */
 M3eTreeItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; height: calc(var(--m3e-tree-item-height, 3rem) + ${DesignToken$1.density.calc(-3)}); padding-inline: var(--m3e-tree-item-padding, 1rem); font-size: var(--m3e-tree-item-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-tree-item-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-tree-item-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-tree-item-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
-        background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-tree-item-shape, ${DesignToken$1.shape.corner.none}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .checkbox { flex: none; margin-inline-end: 0.5rem; } .icon, .toggle { flex: none; align-items: center; justify-content: center; position: relative; vertical-align: middle; margin-inline-end: 0.5rem; } .toggle { display: var(--_tree-item-toggle-display, none); } :host(:not(:state(-with-icon))) .icon { display: none; } .inset { margin-inline-start: calc(var(--m3e-tree-item-inset, 2rem) * var(--_tree-item-level, 0)); } :host([open]) .toggle-icon { transform: rotate(90deg); } :host(:not(:state(-with-items))) .toggle { visibility: hidden; } :host(:not(:state(-with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), ::slotted([slot="open-toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-tree-item-icon-size, 1.5rem); } .toggle-icon { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken$1.motion.duration.medium1})
-        ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-with-open-toggle-icon)[open]) slot[name="toggle-icon"], :host(:state(-with-open-toggle-icon):not([open])) slot[name="open-toggle-icon"] { display: none; } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-tree-item-label-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tree-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tree-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tree-item-selected-label-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-tree-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-tree-item-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-tree-item-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected]):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-tree-item-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-tree-item-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } .state-layer { margin-inline: auto; } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: CanvasText; background-color: Canvas; } :host([selected]:not(:state(-multi)):not(:disabled)) slot[name="icon"], :host([selected]:not(:state(-multi)):not(:disabled)) slot[name="label"] { color: Highlight; } }`;
+        background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-tree-item-shape, ${DesignToken$1.shape.corner.none}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .checkbox { flex: none; margin-inline-end: 0.5rem; } .icon, .toggle { flex: none; align-items: center; justify-content: center; position: relative; vertical-align: middle; margin-inline-end: 0.5rem; } .toggle { display: var(--_tree-item-toggle-display, none); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } .inset { margin-inline-start: calc(var(--m3e-tree-item-inset, 2rem) * var(--_tree-item-level, 0)); } :host([open]) .toggle-icon { transform: rotate(90deg); } :host(:not(:is(:state(--with-items), :--with-items))) .toggle { visibility: hidden; } :host(:not(:is(:state(--with-items), :--with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), ::slotted([slot="open-toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-tree-item-icon-size, 1.5rem); } .toggle-icon { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken$1.motion.duration.medium1})
+        ${DesignToken$1.motion.easing.standard}`)}; } :host(:is(:state(--with-open-toggle-icon), :--with-open-toggle-icon)[open]) slot[name="toggle-icon"], :host(:is(:state(--with-open-toggle-icon), :--with-open-toggle-icon):not([open])) slot[name="open-toggle-icon"] { display: none; } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-tree-item-label-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tree-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tree-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tree-item-selected-label-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-tree-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-tree-item-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-tree-item-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected]):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-tree-item-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-tree-item-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } .state-layer { margin-inline: auto; } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: CanvasText; background-color: Canvas; } :host([selected]:not(:is(:state(--multi), :--multi)):not(:disabled)) slot[name="icon"], :host([selected]:not(:is(:state(--multi), :--multi)):not(:disabled)) slot[name="label"] { color: Highlight; } }`;
 __decorate([query(".state-layer")], M3eTreeItemElement.prototype, "stateLayer", void 0);
 __decorate([query(".focus-ring")], M3eTreeItemElement.prototype, "focusRing", void 0);
 __decorate([query(".ripple")], M3eTreeItemElement.prototype, "ripple", void 0);
@@ -33563,7 +33698,7 @@ var M3eTreeElement_1;
  * @attr multi - Whether multiple items can be selected.
  * @attr cascade -Whether multiple item selection cascades to child items.
  *
- * @fires change - Emitted when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
  *
  * @cssprop --m3e-tree-scrollbar-width - Width of the tree scrollbar.
  * @cssprop --m3e-tree-scrollbar-color - Color of the tree scrollbar.
@@ -33877,7 +34012,7 @@ _M3eTreeElement_cascadeAncestorSelected = function _M3eTreeElement_cascadeAncest
 };
 (() => {
   // NOTE: unsafeCSS used here due to linting error with use of '>'.
-  registerStyleSheet$1(css`${unsafeCSS(`m3e-tree:has(> m3e-tree-item:state(-with-items)) {
+  registerStyleSheet$1(css`${unsafeCSS(`m3e-tree:has(> m3e-tree-item:is(:state(--with-items), :--with-items)) {
         --_tree-item-toggle-display: flex;
       }`)}`);
 })();
@@ -33895,5 +34030,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, 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, 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