@m3e/web 2.0.3 → 2.0.4

package/dist/all.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { unsafeCSS, css, LitElement, html, nothing, isServer, noChange, svg } from 'lit';
-import { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, debounce as debounce$1, hasAssignedNodes as hasAssignedNodes$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, prefersReducedMotion as prefersReducedMotion$1, forcedColorsActive as forcedColorsActive$1, ActionElementBase as ActionElementBase$1, EventAttribute as EventAttribute$1, VelocityTracker as VelocityTracker$1, ScrollLockController as ScrollLockController$1, ResizeController as ResizeController$1, focusWhenReady as focusWhenReady$1, computeCssSize as computeCssSize$1, spaceSeparatedStringConverter as spaceSeparatedStringConverter$1, KeyboardClick as KeyboardClick$1, LinkButton as LinkButton$1, FormSubmitter as FormSubmitter$1, Focusable as Focusable$1, DisabledInteractive as DisabledInteractive$1, Disabled as Disabled$1, AttachInternals as AttachInternals$1, FocusController as FocusController$1, PressedController as PressedController$1, renderPseudoLink as renderPseudoLink$1, isSelectedMixin as isSelectedMixin$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, ScrollController as ScrollController$1, MutationController as MutationController$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, 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, debounce as debounce$1, element as element$1, hasAssignedNodes as hasAssignedNodes$1, setCustomState as setCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, deleteCustomState as deleteCustomState$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, EventAttribute as EventAttribute$1, AttachInternals as AttachInternals$1, VelocityTracker as VelocityTracker$1, ScrollLockController as ScrollLockController$1, ResizeController as ResizeController$1, focusWhenReady as focusWhenReady$1, hasCustomState as hasCustomState$1, computeCssSize as computeCssSize$1, spaceSeparatedStringConverter as spaceSeparatedStringConverter$1, KeyboardClick as KeyboardClick$1, LinkButton as LinkButton$1, FormSubmitter as FormSubmitter$1, Focusable as Focusable$1, DisabledInteractive as DisabledInteractive$1, Disabled as Disabled$1, FocusController as FocusController$1, PressedController as PressedController$1, renderPseudoLink as renderPseudoLink$1, isSelectedMixin as isSelectedMixin$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, ScrollController as ScrollController$1, MutationController as MutationController$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, guid as guid$1, IntersectionController as IntersectionController$1, LongPressController as LongPressController$1 } from '@m3e/web/core';
 import { ListKeyManager, M3eInteractivityChecker, isModifierAllowed, addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager, ListManager, RovingTabIndexManager, M3eAriaDescriber, typeaheadLabel } from '@m3e/web/core/a11y';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
 import { positionAnchor } from '@m3e/web/core/anchoring';
@@ -53,17 +53,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$3 = t => (e, o) => {
-  void 0 !== o ? o.addInitializer(() => {
-    customElements.define(t, e);
-  }) : customElements.define(t, e);
-};
-
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -541,7 +530,7 @@ const AppBarSizeToken = {
 
 /** @private */
 function appBarStyle(size) {
-  return css`:host([size="${unsafeCSS(size)}"]) .base:not(.-with-subtitle) { min-height: ${AppBarSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .base.-with-subtitle { min-height: ${AppBarSizeToken[size].containerHeightWithSubtitle ?? AppBarSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .title { font-size: ${AppBarSizeToken[size].titleTextFontSize}; font-weight: ${AppBarSizeToken[size].titleTextFontWeight}; line-height: ${AppBarSizeToken[size].titleTextLineHeight}; letter-spacing: ${AppBarSizeToken[size].titleTextTracking}; } :host([size="${unsafeCSS(size)}"]) .subtitle { font-size: ${AppBarSizeToken[size].subtitleTextFontSize}; font-weight: ${AppBarSizeToken[size].subtitleTextFontWeight}; line-height: ${AppBarSizeToken[size].subtitleTextLineHeight}; letter-spacing: ${AppBarSizeToken[size].subtitleTextTracking}; } :host(:not([centered])[size="${unsafeCSS(size)}"]) .label { padding-inline-start: ${AppBarSizeToken[size].headingPaddingLeft}; padding-inline-end: ${AppBarSizeToken[size].headingPaddingRight}; } :host([centered][size="${unsafeCSS(size)}"]) .label { padding-inline: ${AppBarSizeToken[size].headingPaddingLeft}; } :host([size="${unsafeCSS(size)}"]) .base { padding-block-start: ${AppBarSizeToken[size].paddingTop ?? unsafeCSS("unset")}; padding-block-end: ${AppBarSizeToken[size].paddingBottom ?? unsafeCSS("unset")}; } ${AppBarSizeToken[size].titleMaxLines ? css`:host([size="${unsafeCSS(size)}"]) .title { display: -webkit-box; -webkit-line-clamp: ${AppBarSizeToken[size].titleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${AppBarSizeToken[size].titleMaxLines}; }` : css``} ${AppBarSizeToken[size].subtitleMaxLines ? css`:host([size="${unsafeCSS(size)}"]) .subtitle { display: -webkit-box; -webkit-line-clamp: ${AppBarSizeToken[size].subtitleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${AppBarSizeToken[size].subtitleMaxLines}; }` : css``}`;
+  return css`:host([size="${unsafeCSS(size)}"]) .base:not(.with-subtitle) { min-height: ${AppBarSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .base.with-subtitle { min-height: ${AppBarSizeToken[size].containerHeightWithSubtitle ?? AppBarSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .title { font-size: ${AppBarSizeToken[size].titleTextFontSize}; font-weight: ${AppBarSizeToken[size].titleTextFontWeight}; line-height: ${AppBarSizeToken[size].titleTextLineHeight}; letter-spacing: ${AppBarSizeToken[size].titleTextTracking}; } :host([size="${unsafeCSS(size)}"]) .subtitle { font-size: ${AppBarSizeToken[size].subtitleTextFontSize}; font-weight: ${AppBarSizeToken[size].subtitleTextFontWeight}; line-height: ${AppBarSizeToken[size].subtitleTextLineHeight}; letter-spacing: ${AppBarSizeToken[size].subtitleTextTracking}; } :host(:not([centered])[size="${unsafeCSS(size)}"]) .label { padding-inline-start: ${AppBarSizeToken[size].headingPaddingLeft}; padding-inline-end: ${AppBarSizeToken[size].headingPaddingRight}; } :host([centered][size="${unsafeCSS(size)}"]) .label { padding-inline: ${AppBarSizeToken[size].headingPaddingLeft}; } :host([size="${unsafeCSS(size)}"]) .base { padding-block-start: ${AppBarSizeToken[size].paddingTop ?? unsafeCSS("unset")}; padding-block-end: ${AppBarSizeToken[size].paddingBottom ?? unsafeCSS("unset")}; } ${AppBarSizeToken[size].titleMaxLines ? css`:host([size="${unsafeCSS(size)}"]) .title { display: -webkit-box; -webkit-line-clamp: ${AppBarSizeToken[size].titleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${AppBarSizeToken[size].titleMaxLines}; }` : css``} ${AppBarSizeToken[size].subtitleMaxLines ? css`:host([size="${unsafeCSS(size)}"]) .subtitle { display: -webkit-box; -webkit-line-clamp: ${AppBarSizeToken[size].subtitleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${AppBarSizeToken[size].subtitleMaxLines}; }` : css``}`;
 }
 /**
  * Size variant styles for `M3eAppBarElement`.
@@ -569,7 +558,7 @@ const AppBarToken = {
  * @internal
  */
 const AppBarStyle = css`:host { display: block; flex: none; } :host([size="small"]) .base, :host(:not([size="small"]):not([centered])) .heading { padding-inline-start: ${AppBarToken.paddingLeft}; padding-inline-end: ${AppBarToken.paddingRight}; } .base { box-sizing: border-box; display: flex; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.medium1} ${DesignToken$1.motion.easing.standard},
-      box-shadow ${DesignToken$1.motion.duration.medium1} ${DesignToken$1.motion.easing.standard}`)}; } .base:not(.-on-scroll) { background-color: ${AppBarToken.containerColor}; box-shadow: ${AppBarToken.containerElevation}; } .base.-on-scroll { background-color: ${AppBarToken.containerColorOnScroll}; box-shadow: ${AppBarToken.containerElevationOnScroll}; } .leading-icon, .trailing-icon { display: flex; flex: none; align-items: center; } .leading-icon { min-width: var(--_leading-icon-min-width); } .trailing-icon { min-width: var(--_trailing-icon-min-width); } .heading { display: flex; align-items: center; } :host([size="small"]) .heading { flex: 1 1 auto; } .spacer { flex: 1 1 auto; } .label { display: flex; flex-direction: column; flex: none; } .title { color: ${AppBarToken.titleTextColor}; } .subtitle { color: ${AppBarToken.subtitleTextColor}; } .base:not(.-with-title) .title, .base:not(.-with-subtitle) .subtitle, .base:not(.-with-title):not(.-with-subtitle) .label, .base:not(.-with-trailing-icon) .trailing-icon { display: none; } :host([size="small"]) .base { align-items: center; } :host([size="small"]) .heading { min-width: 0; } :host([size="small"]) .label { flex: 1 1 auto; min-width: 0; } :host([size="small"]) .title, :host([size="small"]) .subtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :host(:not([size="small"])) .base { flex-direction: column; } :host([centered]) .title, :host([centered]) .subtitle { text-align: center; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } .base:not(.-on-scroll), .base.-on-scroll { background-color: Canvas; box-shadow: unset; } .title { color: CanvasText; } .subtitle { color: FieldText; } }`;
+      box-shadow ${DesignToken$1.motion.duration.medium1} ${DesignToken$1.motion.easing.standard}`)}; } .base:not(.on-scroll) { background-color: ${AppBarToken.containerColor}; box-shadow: ${AppBarToken.containerElevation}; } .base.on-scroll { background-color: ${AppBarToken.containerColorOnScroll}; box-shadow: ${AppBarToken.containerElevationOnScroll}; } .leading-icon, .trailing-icon { display: flex; flex: none; align-items: center; } .leading-icon { min-width: var(--_leading-icon-min-width); } .trailing-icon { min-width: var(--_trailing-icon-min-width); } .heading { display: flex; align-items: center; } :host([size="small"]) .heading { flex: 1 1 auto; } .spacer { flex: 1 1 auto; } .label { display: flex; flex-direction: column; flex: none; } .title { color: ${AppBarToken.titleTextColor}; } .subtitle { color: ${AppBarToken.subtitleTextColor}; } .base:not(.with-title) .title, .base:not(.with-subtitle) .subtitle, .base:not(.with-title):not(.with-subtitle) .label, .base:not(.with-trailing-icon) .trailing-icon { display: none; } :host([size="small"]) .base { align-items: center; } :host([size="small"]) .heading { min-width: 0; } :host([size="small"]) .label { flex: 1 1 auto; min-width: 0; } :host([size="small"]) .title, :host([size="small"]) .subtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :host(:not([size="small"])) .base { flex-direction: column; } :host([centered]) .title, :host([centered]) .subtitle { text-align: center; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } .base:not(.on-scroll), .base.on-scroll { background-color: Canvas; box-shadow: unset; } .title { color: CanvasText; } .subtitle { color: FieldText; } }`;
 
 var _M3eAppBarElement_instances, _M3eAppBarElement_scrollHandler, _M3eAppBarElement_frameLoadHandler, _M3eAppBarElement_handleTitleSlotChange, _M3eAppBarElement_handleSubtitleSlotChange, _M3eAppBarElement_handleLeadingIconSlotChange, _M3eAppBarElement_handleTrailingIconsSlotChange, _M3eAppBarElement_clearCentered, _M3eAppBarElement_computeCentered, _M3eAppBarElement_handleFrameLoad, _M3eAppBarElement_getFrameScrollTop;
 /**
@@ -743,26 +732,26 @@ let M3eAppBarElement = class M3eAppBarElement extends HtmlFor$1(Role$1(LitElemen
     } else if (e.target instanceof HTMLElement) {
       scrollTop = e.target.scrollTop;
     }
-    this._base?.classList.toggle("-on-scroll", scrollTop > 0);
+    this._base?.classList.toggle("on-scroll", scrollTop > 0);
   }
 };
 _M3eAppBarElement_scrollHandler = new WeakMap();
 _M3eAppBarElement_frameLoadHandler = new WeakMap();
 _M3eAppBarElement_instances = new WeakSet();
 _M3eAppBarElement_handleTitleSlotChange = function _M3eAppBarElement_handleTitleSlotChange(e) {
-  this._base?.classList.toggle("-with-title", hasAssignedNodes$1(e.target));
+  this._base?.classList.toggle("with-title", hasAssignedNodes$1(e.target));
 };
 _M3eAppBarElement_handleSubtitleSlotChange = function _M3eAppBarElement_handleSubtitleSlotChange(e) {
-  this._base?.classList.toggle("-with-subtitle", hasAssignedNodes$1(e.target));
+  this._base?.classList.toggle("with-subtitle", hasAssignedNodes$1(e.target));
 };
 _M3eAppBarElement_handleLeadingIconSlotChange = function _M3eAppBarElement_handleLeadingIconSlotChange(e) {
-  this._base?.classList.toggle("-with-leading-icon", hasAssignedNodes$1(e.target));
+  this._base?.classList.toggle("with-leading-icon", hasAssignedNodes$1(e.target));
   if (this.centered && this.size === "small") {
     setTimeout(() => __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_computeCentered).call(this), 40);
   }
 };
 _M3eAppBarElement_handleTrailingIconsSlotChange = function _M3eAppBarElement_handleTrailingIconsSlotChange(e) {
-  this._base?.classList.toggle("-with-trailing-icon", hasAssignedNodes$1(e.target));
+  this._base?.classList.toggle("with-trailing-icon", hasAssignedNodes$1(e.target));
   if (this.centered && this.size === "small") {
     setTimeout(() => __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_computeCentered).call(this), 40);
   }
@@ -786,7 +775,7 @@ _M3eAppBarElement_handleFrameLoad = function _M3eAppBarElement_handleFrameLoad()
     this.control.contentDocument?.addEventListener("scroll", __classPrivateFieldGet(this, _M3eAppBarElement_scrollHandler, "f"), {
       passive: true
     });
-    this._base?.classList.toggle("-on-scroll", __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_getFrameScrollTop).call(this, this.control) > 0);
+    this._base?.classList.toggle("on-scroll", __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_getFrameScrollTop).call(this, this.control) > 0);
   }
 };
 _M3eAppBarElement_getFrameScrollTop = function _M3eAppBarElement_getFrameScrollTop(frame) {
@@ -806,7 +795,7 @@ __decorate([n$1({
   reflect: true
 })], M3eAppBarElement.prototype, "size", void 0);
 __decorate([debounce$1(40)], M3eAppBarElement.prototype, "_updateScroll", null);
-M3eAppBarElement = __decorate([t$3("m3e-app-bar")], M3eAppBarElement);
+M3eAppBarElement = __decorate([element$1("m3e-app-bar")], M3eAppBarElement);
 
 var _M3eAutocompleteElement_instances, _M3eAutocompleteElement_id, _M3eAutocompleteElement_menuId, _M3eAutocompleteElement_ignoreFocusVisible, _M3eAutocompleteElement_menu, _M3eAutocompleteElement_textHighlight, _M3eAutocompleteElement_ignoreHideMenuOnBlur, _M3eAutocompleteElement_clickHandler, _M3eAutocompleteElement_formFieldPointerDownHandler, _M3eAutocompleteElement_focusHandler, _M3eAutocompleteElement_blurHandler, _M3eAutocompleteElement_keyDownHandler, _M3eAutocompleteElement_inputHandler, _M3eAutocompleteElement_changeHandler, _M3eAutocompleteElement_menuToggleHandler, _M3eAutocompleteElement_menuPointerDownHandler, _M3eAutocompleteElement_input_get, _M3eAutocompleteElement_hasVisibleOptions_get, _M3eAutocompleteElement_minMenuWidth_get, _M3eAutocompleteElement_formField_get, _M3eAutocompleteElement_handleSlotChange, _M3eAutocompleteElement_handleClick, _M3eAutocompleteElement_handleFormFieldPointerDown, _M3eAutocompleteElement_handleFocus, _M3eAutocompleteElement_handleBlur, _M3eAutocompleteElement_handleInput, _M3eAutocompleteElement_handleChange, _M3eAutocompleteElement_handleKeyDown, _M3eAutocompleteElement_handleMenuPointerDown, _M3eAutocompleteElement_handleMenuToggle, _M3eAutocompleteElement_destroyMenu, _M3eAutocompleteElement_showMenu, _M3eAutocompleteElement_hideMenu, _M3eAutocompleteElement_activateOption, _M3eAutocompleteElement_selectOption, _M3eAutocompleteElement_filterOptions, _M3eAutocompleteElement_autoActivate, _M3eAutocompleteElement_deactivateOption;
 var M3eAutocompleteElement_1;
@@ -994,7 +983,7 @@ _M3eAutocompleteElement_handleSlotChange = function _M3eAutocompleteElement_hand
   } = this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
-    x.classList.toggle("-hide-selection-indicator", this.hideSelectionIndicator);
+    setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator);
   });
 };
 _M3eAutocompleteElement_handleClick = function _M3eAutocompleteElement_handleClick() {
@@ -1046,7 +1035,11 @@ _M3eAutocompleteElement_handleKeyDown = function _M3eAutocompleteElement_handleK
       if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") && this._listKeyManager.activeItem) {
         e.preventDefault();
         __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_selectOption).call(this, this._listKeyManager.activeItem);
-        __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+        if (!prefersReducedMotion$1()) {
+          setTimeout(() => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this), 150);
+        } else {
+          __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+        }
       } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
         setTimeout(() => {
           if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value) {
@@ -1089,7 +1082,11 @@ _M3eAutocompleteElement_handleMenuPointerDown = function _M3eAutocompleteElement
   if (option && !option.disabled) {
     this._listKeyManager.setActiveItem(option);
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_selectOption).call(this, option);
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+    if (!prefersReducedMotion$1()) {
+      setTimeout(() => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this), 150);
+    } else {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+    }
   }
 };
 _M3eAutocompleteElement_handleMenuToggle = function _M3eAutocompleteElement_handleMenuToggle(e) {
@@ -1125,9 +1122,11 @@ _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMe
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
   __classPrivateFieldSet(this, _M3eAutocompleteElement_menu, undefined, "f");
   __classPrivateFieldSet(this, _M3eAutocompleteElement_textHighlight, undefined, "f");
-  this.ariaExpanded = "false";
-  this.removeAttribute("aria-controls");
-  this.removeAttribute("aria-owns");
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).ariaExpanded = "false";
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).removeAttribute("aria-controls");
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).removeAttribute("aria-owns");
+  }
   this.requestUpdate();
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange();
   this.dispatchEvent(new ToggleEvent("toggle", {
@@ -1151,14 +1150,14 @@ _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").append(node);
   }
   (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get) ?? __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)).insertAdjacentElement("afterend", __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"));
-  this.ariaExpanded = "true";
-  this.setAttribute("aria-controls", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
-  this.setAttribute("aria-owns", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).setAttribute("aria-controls", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).setAttribute("aria-owns", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange();
   if (this._listKeyManager.activeItem && this.autoActivate) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_activateOption).call(this, this._listKeyManager.activeItem, true);
   }
-  setTimeout(() => __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.show(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.menuAnchor));
+  const input = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get);
+  setTimeout(() => __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.show(input, __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.menuAnchor));
 };
 _M3eAutocompleteElement_hideMenu = function _M3eAutocompleteElement_hideMenu() {
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.hide();
@@ -1206,16 +1205,19 @@ _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterO
     option.style.display = hidden ? "none" : "";
     if (hidden) {
       __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, option);
-      option.classList.remove("-first");
-      option.classList.remove("-last");
+      deleteCustomState$1(option, "-first");
+      deleteCustomState$1(option, "-last");
     } else if (!first) {
-      option.classList.add("-first");
+      addCustomState$1(option, "-first");
       first = true;
-      option.classList.add("-last");
+      addCustomState$1(option, "-last");
       last = option;
     } else {
-      last?.classList.remove("-last");
-      option.classList.add("-last");
+      deleteCustomState$1(option, "-first");
+      if (last) {
+        deleteCustomState$1(last, "-last");
+      }
+      addCustomState$1(option, "-last");
       last = option;
     }
     if (option.selected && value !== term) {
@@ -1267,7 +1269,7 @@ __decorate([n$1({
   attribute: "auto-activate",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "autoActivate", void 0);
-M3eAutocompleteElement = M3eAutocompleteElement_1 = __decorate([t$3("m3e-autocomplete")], M3eAutocompleteElement);
+M3eAutocompleteElement = M3eAutocompleteElement_1 = __decorate([element$1("m3e-autocomplete")], M3eAutocompleteElement);
 
 /**
  * An image, icon or textual initials representing a user or other identity.
@@ -1323,7 +1325,7 @@ let M3eAvatarElement = class M3eAvatarElement extends LitElement {
 };
 /** The styles of the element. */
 M3eAvatarElement.styles = css`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${DesignToken$1.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${DesignToken$1.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${DesignToken$1.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${DesignToken$1.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${DesignToken$1.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${DesignToken$1.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${DesignToken$1.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`;
-M3eAvatarElement = __decorate([t$3("m3e-avatar")], M3eAvatarElement);
+M3eAvatarElement = __decorate([element$1("m3e-avatar")], M3eAvatarElement);
 
 var _M3eBadgeElement_instances, _M3eBadgeElement_directionalitySubscription, _M3eBadgeElement_anchorCleanup, _M3eBadgeElement_handleSlotChange, _M3eBadgeElement_detach, _M3eBadgeElement_attach;
 /**
@@ -1483,7 +1485,7 @@ __decorate([n$1({
 __decorate([n$1({
   reflect: true
 })], M3eBadgeElement.prototype, "position", void 0);
-M3eBadgeElement = __decorate([t$3("m3e-badge")], M3eBadgeElement);
+M3eBadgeElement = __decorate([element$1("m3e-badge")], M3eBadgeElement);
 
 /**
  * An element, nested within a clickable element, used to close a parenting bottom sheet.
@@ -1497,7 +1499,7 @@ let M3eBottomSheetActionElement = class M3eBottomSheetActionElement extends Acti
     this.closest("m3e-bottom-sheet")?.hide();
   }
 };
-M3eBottomSheetActionElement = __decorate([t$3("m3e-bottom-sheet-action")], M3eBottomSheetActionElement);
+M3eBottomSheetActionElement = __decorate([element$1("m3e-bottom-sheet-action")], M3eBottomSheetActionElement);
 
 var _M3eBottomSheetElement_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_inerts, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _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, _M3eBottomSheetElement_applyInert, _M3eBottomSheetElement_restoreInert;
 var M3eBottomSheetElement_1;
@@ -1598,7 +1600,7 @@ var M3eBottomSheetElement_1;
  * @cssprop --m3e-bottom-sheet-header-line-height - Line height for the sheet header.
  * @cssprop --m3e-bottom-sheet-header-tracking - Letter spacing (tracking) for the sheet header.
  */
-let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElement extends EventAttribute$1(LitElement, "opening", "opened", "cancel", "closing", "closed") {
+let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElement extends EventAttribute$1(AttachInternals$1(LitElement), "opening", "opened", "cancel", "closing", "closed") {
   constructor() {
     super(...arguments);
     _M3eBottomSheetElement_instances.add(this);
@@ -1724,7 +1726,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.add("-no-animate");
+    addCustomState$1(this, "-no-animate");
   }
   /** @inheritdoc */
   update(changedProperties) {
@@ -1748,7 +1750,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
       __classPrivateFieldSet(this, _M3eBottomSheetElement_cachedHeaderHeight, header.clientHeight, "f");
       __classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(header);
     }
-    this.classList.remove("-no-animate");
+    deleteCustomState$1(this, "-no-animate");
   }
   /** @inheritdoc */
   updated(_changedProperties) {
@@ -1847,10 +1849,9 @@ _M3eBottomSheetElement_cachedHeaderHeight = new WeakMap();
 _M3eBottomSheetElement_snapAnimation = new WeakMap();
 _M3eBottomSheetElement_instances = new WeakSet();
 _M3eBottomSheetElement_handleHeaderSlotChange = function _M3eBottomSheetElement_handleHeaderSlotChange(e) {
-  this.classList.toggle("-has-header", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "has-header", hasAssignedNodes$1(e.target));
 };
 _M3eBottomSheetElement_handleHeaderPointerDown = function _M3eBottomSheetElement_handleHeaderPointerDown(e) {
-  if (e.button === 2) return;
   if (e.target instanceof HTMLElement && M3eInteractivityChecker.isFocusable(e.target)) {
     return;
   }
@@ -1950,7 +1951,7 @@ _M3eBottomSheetElement_handleWindowResize = function _M3eBottomSheetElement_hand
     return;
   }
   const maxHeight = __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computeMaxHeight).call(this);
-  if (this.classList.contains("-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);
@@ -2127,7 +2128,7 @@ async function _M3eBottomSheetElement_snapToHeight(height) {
 };
 _M3eBottomSheetElement_updateHeight = function _M3eBottomSheetElement_updateHeight(height) {
   this.style.setProperty("--_bottom-sheet-height", `${height}px`);
-  this.classList.toggle("-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);
@@ -2149,22 +2150,22 @@ _M3eBottomSheetElement_restoreInert = function _M3eBottomSheetElement_restoreIne
   __classPrivateFieldGet(this, _M3eBottomSheetElement_inerts, "f").length = 0;
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(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>`.toString());
     document.adoptedStyleSheets.push(lightDomStyle);
   }
 })();
 /** 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(.-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(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken$1.elevation.level1}); } :host([modal]:not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken$1.elevation.level1}); } :host(.-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(.-full)), :host([modal]:not(.-full):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open].-full), :host([modal].-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(.-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(: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}, 
         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(.-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(:state(-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]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .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; 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(.-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(:state(-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(.-no-animate)), :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-no-animate))::backdrop, :host(:not(.-no-animate)) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-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(: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; } }`;
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -2194,7 +2195,7 @@ __decorate([n$1({
   attribute: "hide-friction",
   type: Number
 })], M3eBottomSheetElement.prototype, "hideFriction", void 0);
-M3eBottomSheetElement = M3eBottomSheetElement_1 = __decorate([t$3("m3e-bottom-sheet")], M3eBottomSheetElement);
+M3eBottomSheetElement = M3eBottomSheetElement_1 = __decorate([element$1("m3e-bottom-sheet")], M3eBottomSheetElement);
 
 /**
  * An element, nested within a clickable element, used to trigger a bottom sheet.
@@ -2260,7 +2261,7 @@ __decorate([n$1({
 __decorate([n$1({
   type: Boolean
 })], M3eBottomSheetTriggerElement.prototype, "secondary", void 0);
-M3eBottomSheetTriggerElement = __decorate([t$3("m3e-bottom-sheet-trigger")], M3eBottomSheetTriggerElement);
+M3eBottomSheetTriggerElement = __decorate([element$1("m3e-bottom-sheet-trigger")], M3eBottomSheetTriggerElement);
 
 /**
  * Component design tokens that control the `M3eButtonElement` for all size variants.
@@ -2356,7 +2357,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)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-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(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${ButtonSizeToken[size].selectedShapeRound}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${ButtonSizeToken[size].shapeSquare}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base { border-radius: ${ButtonSizeToken[size].shapePressedMorph}; } :host(.-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(.-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(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"].-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)}"]: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}); }`;
 }
 /**
  * Size variant styles for `M3eButtonElement`.
@@ -2368,8 +2369,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(.-pressed) .base, :host(.-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(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected)) { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(.-pressed) .base, :host(.-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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-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(.-pressed) .base, :host(.-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(: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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-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; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eButtonElement`.
@@ -2935,7 +2936,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)}"].-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)}"].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].pressed.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].pressed.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected].-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)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].pressed.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].pressed.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected].-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)}"]: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 ); }`;
 }
 /**
  * Appearance variant styles for `M3eButtonElement`.
@@ -3447,7 +3448,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   }
   /** Whether the button is contained by a button group. */
   get grouped() {
-    return this.classList.contains("-grouped");
+    return hasCustomState$1(this, "-grouped");
   }
   /** @inheritdoc */
   render() {
@@ -3461,11 +3462,11 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => this.classList.remove(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");
-    this.classList.remove("-adjacent-pressed");
+    deleteCustomState$1(this, "-adjacent-pressed");
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eButtonElement_clickHandler, "f"));
   }
   /** @inheritdoc */
@@ -3477,8 +3478,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) {
-      this.classList.toggle("-pressed", false);
-      this.classList.toggle("-resting", false);
+      deleteCustomState$1(this, "-pressed");
+      deleteCustomState$1(this, "-resting");
     }
     if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
       this.ariaPressed = this.toggle ? `${this.selected}` : null;
@@ -3491,7 +3492,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
   }
   /** @private */
   _handleResize() {
-    if (this.grouped && !this.classList.contains("-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);
     }
@@ -3535,8 +3536,8 @@ _M3eButtonElement_updateButtonShape = function _M3eButtonElement_updateButtonSha
   }
 };
 _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressedChange(pressed) {
-  this.classList.toggle("-pressed", pressed);
-  this.classList.toggle("-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;
@@ -3546,13 +3547,13 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
       const button = buttons[i];
       if (i === index - 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        button.classList.toggle("-adjacent-pressed", pressed);
+        setCustomState$1(button, "-adjacent-pressed", pressed);
       } else if (i === index + 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        button.classList.toggle("-adjacent-pressed", pressed);
+        setCustomState$1(button, "-adjacent-pressed", pressed);
       } else {
         button.style.removeProperty("--_adjacent-button-width");
-        button.classList.remove("-adjacent-pressed");
+        deleteCustomState$1(button, "-adjacent-pressed");
       }
     }
   }
@@ -3582,7 +3583,7 @@ __decorate([n$1({
   reflect: true
 })], M3eButtonElement.prototype, "selected", void 0);
 __decorate([debounce$1(40)], M3eButtonElement.prototype, "_handleResize", null);
-M3eButtonElement = __decorate([t$3("m3e-button")], M3eButtonElement);
+M3eButtonElement = __decorate([element$1("m3e-button")], M3eButtonElement);
 
 var _M3eButtonGroupElement_instances, _M3eButtonGroupElement_pressedController, _M3eButtonGroupElement_updateButtons, _M3eButtonGroupElement_handleChange;
 /**
@@ -3719,10 +3720,10 @@ _M3eButtonGroupElement_updateButtons = function _M3eButtonGroupElement_updateBut
   const buttonRole = this.role === "radiogroup" ? "radio" : "button";
   buttons.forEach((button, i) => {
     __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").observe(button);
-    button.classList.toggle("-connected", this.variant === "connected");
-    button.classList.add("-grouped");
-    button.classList.toggle("-first", i == 0);
-    button.classList.toggle("-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;
@@ -3749,7 +3750,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(.-first[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(.-first):not(.-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(.-last[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(.-first):not(.-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(.-first[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(.-first):not(.-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(.-last[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(.-first):not(.-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(.-first[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(.-first):not(.-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(.-last[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(.-first):not(.-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(.-first[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(.-first):not(.-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(.-last[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(.-first):not(.-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(.-first[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(.-first):not(.-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(.-last[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(.-first):not(.-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(: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} ); }`;
 __decorate([e$4(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
 __decorate([n$1({
   reflect: true
@@ -3765,7 +3766,7 @@ __decorate([o$3({
   selector: "m3e-button,m3e-icon-button",
   flatten: true
 })], M3eButtonGroupElement.prototype, "buttons", void 0);
-M3eButtonGroupElement = __decorate([t$3("m3e-button-group")], M3eButtonGroupElement);
+M3eButtonGroupElement = __decorate([element$1("m3e-button-group")], M3eButtonGroupElement);
 
 /**
  * Component design tokens for `M3eCardElement`.
@@ -4148,7 +4149,7 @@ __decorate([n$1({
 __decorate([n$1({
   reflect: true
 })], M3eCardElement.prototype, "orientation", void 0);
-M3eCardElement = __decorate([t$3("m3e-card")], M3eCardElement);
+M3eCardElement = __decorate([element$1("m3e-card")], M3eCardElement);
 
 var _M3eCheckboxElement_instances, _M3eCheckboxElement_clickHandler, _M3eCheckboxElement_hoverController, _M3eCheckboxElement_pressedController, _M3eCheckboxElement_renderIcon, _M3eCheckboxElement_handleClick;
 /**
@@ -4317,12 +4318,12 @@ _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(.-touched.-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(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-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(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-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(.-touched.-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(.-touched.-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"]).-touched.-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"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-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"]).-touched.-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(.-touched.-invalid):not([indeterminate]):not([checked])) .base, :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-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(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-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"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-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(: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; } }`;
 __decorate([e$4(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eCheckboxElement.prototype, "value", void 0);
-M3eCheckboxElement = __decorate([t$3("m3e-checkbox")], M3eCheckboxElement);
+M3eCheckboxElement = __decorate([element$1("m3e-checkbox")], M3eCheckboxElement);
 
 var _M3eChipElement_instances, _M3eChipElement_value, _M3eChipElement_textContent, _M3eChipElement_renderContent, _M3eChipElement_handleIconSlotChange, _M3eChipElement_handleTrailingIconSlotChange, _M3eChipElement_handleSlotChange;
 /**
@@ -4373,7 +4374,7 @@ var _M3eChipElement_instances, _M3eChipElement_value, _M3eChipElement_textConten
  * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
  * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
  */
-let M3eChipElement = class M3eChipElement extends LitElement {
+let M3eChipElement = class M3eChipElement extends AttachInternals$1(LitElement) {
   constructor() {
     super(...arguments);
     _M3eChipElement_instances.add(this);
@@ -4432,16 +4433,16 @@ _M3eChipElement_renderContent = function _M3eChipElement_renderContent() {
   return html`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`;
 };
 _M3eChipElement_handleIconSlotChange = function _M3eChipElement_handleIconSlotChange(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eChipElement_handleTrailingIconSlotChange = function _M3eChipElement_handleTrailingIconSlotChange(e) {
-  this.classList.toggle("-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(.-with-icon) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(.-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(.-with-trailing-icon) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(.-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(: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; } }`;
 __decorate([e$4(".elevation")], M3eChipElement.prototype, "_elevation", void 0);
 __decorate([e$4(".focus-ring")], M3eChipElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eChipElement.prototype, "_stateLayer", void 0);
@@ -4450,7 +4451,7 @@ __decorate([n$1({
   reflect: true
 })], M3eChipElement.prototype, "variant", void 0);
 __decorate([n$1()], M3eChipElement.prototype, "value", null);
-M3eChipElement = __decorate([t$3("m3e-chip")], M3eChipElement);
+M3eChipElement = __decorate([element$1("m3e-chip")], M3eChipElement);
 
 /**
  * A chip users interact with to perform a smart or automated action that can span multiple applications.
@@ -4522,13 +4523,15 @@ M3eChipElement = __decorate([t$3("m3e-chip")], M3eChipElement);
  * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
  * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
  */
-let M3eAssistChipElement = class M3eAssistChipElement extends FormSubmitter$1(AttachInternals$1(LinkButton$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(Role$1(M3eChipElement, "button")))))), true)) {
+let M3eAssistChipElement = class M3eAssistChipElement extends FormSubmitter$1(LinkButton$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(Role$1(M3eChipElement, "button"))))))) {
   /** @internal @inheritdoc */
   _renderTrailingIcon() {
     return nothing;
   }
 };
-M3eAssistChipElement = __decorate([t$3("m3e-assist-chip")], M3eAssistChipElement);
+/** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+M3eAssistChipElement.formAssociated = true;
+M3eAssistChipElement = __decorate([element$1("m3e-assist-chip")], M3eAssistChipElement);
 
 /**
  * A container used to organize chips into a cohesive unit.
@@ -4565,7 +4568,7 @@ let M3eChipSetElement = class M3eChipSetElement extends Vertical$1(LitElement) {
 };
 /** The styles of the element. */
 M3eChipSetElement.styles = css`:host { display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--m3e-chip-set-spacing, 0.5rem); outline: none; } :host([vertical]) { flex-direction: column; }`;
-M3eChipSetElement = __decorate([t$3("m3e-chip-set")], M3eChipSetElement);
+M3eChipSetElement = __decorate([element$1("m3e-chip-set")], M3eChipSetElement);
 
 var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFilterChipElement_handleClick;
 /**
@@ -4650,7 +4653,7 @@ var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFil
  * @cssprop --m3e-chip-unselected-leading-icon-color - Leading icon color in unselected state.
  * @cssprop --m3e-chip-unselected-trailing-icon-color - Trailing icon color in unselected state.
  */
-let M3eFilterChipElement = class M3eFilterChipElement extends Selected$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(AttachInternals$1(Role$1(M3eChipElement, "radio"), true)))))) {
+let M3eFilterChipElement = class M3eFilterChipElement extends Selected$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(Role$1(M3eChipElement, "radio")))))) {
   constructor() {
     super(...arguments);
     _M3eFilterChipElement_instances.add(this);
@@ -4698,9 +4701,11 @@ _M3eFilterChipElement_handleClick = function _M3eFilterChipElement_handleClick(e
     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(.-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(.-hide-selection) .check, :host(.-hide-selection:not(.-with-icon)) .icon { display: none; } :host(:not(.-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(.-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(.-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([t$3("m3e-filter-chip")], M3eFilterChipElement);
+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 = __decorate([element$1("m3e-filter-chip")], M3eFilterChipElement);
 
 var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalitySubscription, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _M3eFilterChipSetElement_updateChipRole, _a$9;
 /**
@@ -4821,7 +4826,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 => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
+      this.chips.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -4833,7 +4838,7 @@ _M3eFilterChipSetElement_handleSlotChange = function _M3eFilterChipSetElement_ha
   const {
     added
   } = this[selectionManager].setItems([...this.querySelectorAll("m3e-filter-chip")]);
-  added.forEach(x => x.classList.toggle("-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) {
@@ -4857,7 +4862,7 @@ __decorate([n$1({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eFilterChipSetElement.prototype, "hideSelectionIndicator", void 0);
-M3eFilterChipSetElement = __decorate([t$3("m3e-filter-chip-set")], M3eFilterChipSetElement);
+M3eFilterChipSetElement = __decorate([element$1("m3e-filter-chip-set")], M3eFilterChipSetElement);
 
 /**
  * @license
@@ -5226,10 +5231,15 @@ var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange,
  * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
  * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
  * @cssprop --m3e-chip-avatar-size - Font size of the avatar slot content.
+ * @cssprop --m3e-chip-avatar-icon-size - Size of the icon displayed inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-font-size - Font size of text initials inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-font-weight - Font weight of text initials inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-line-height - Line height of text initials inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-tracking - Letter spacing (tracking) of text initials inside the avatar when used in a chip.
  * @cssprop --m3e-chip-disabled-avatar-opacity - Opacity applied to the avatar when disabled.
  * @cssprop --m3e-chip-with-avatar-padding-start - Start padding when an avatar is present.
  */
-let M3eInputChipElement = class M3eInputChipElement extends EventAttribute$1(DisabledInteractive$1(Disabled$1(AttachInternals$1(Role$1(M3eChipElement, "row"), true))), "remove") {
+let M3eInputChipElement = class M3eInputChipElement extends EventAttribute$1(DisabledInteractive$1(Disabled$1(Role$1(M3eChipElement, "row"))), "remove") {
   constructor() {
     super(...arguments);
     _M3eInputChipElement_instances.add(this);
@@ -5254,7 +5264,7 @@ let M3eInputChipElement = class M3eInputChipElement extends EventAttribute$1(Dis
     super.update(changedProperties);
     this.removeAttribute("tabindex");
     if (changedProperties.has("removable")) {
-      this.classList.toggle("-with-trailing-icon", this.removable);
+      setCustomState$1(this, "-with-trailing-icon", this.removable);
     }
   }
   /** @inheritdoc */
@@ -5268,7 +5278,7 @@ let M3eInputChipElement = class M3eInputChipElement extends EventAttribute$1(Dis
 };
 _M3eInputChipElement_instances = new WeakSet();
 _M3eInputChipElement_handleAvatarSlotChange = function _M3eInputChipElement_handleAvatarSlotChange(e) {
-  this.classList.toggle("-with-avatar", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-avatar", hasAssignedNodes$1(e.target));
 };
 _M3eInputChipElement_handleRemoveButtonClick = function _M3eInputChipElement_handleRemoveButtonClick(e) {
   e.stopPropagation();
@@ -5284,8 +5294,10 @@ _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); } :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(.-with-avatar) ::slotted([slot="icon"]) { display: none; } :host(.-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(: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; } }`];
 __decorate([e$4(".cell")], M3eInputChipElement.prototype, "cell", void 0);
 __decorate([e$4(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
 __decorate([n$1({
@@ -5294,7 +5306,7 @@ __decorate([n$1({
 __decorate([n$1({
   attribute: "remove-label"
 })], M3eInputChipElement.prototype, "removeLabel", void 0);
-M3eInputChipElement = __decorate([t$3("m3e-input-chip")], M3eInputChipElement);
+M3eInputChipElement = __decorate([element$1("m3e-input-chip")], M3eInputChipElement);
 
 var _M3eInputChipSetElement_instances, _M3eInputChipSetElement_directionalitySubscription, _M3eInputChipSetElement_inputChangeHandler, _M3eInputChipSetElement_inputKeyDownHandler, _M3eInputChipSetElement_focusHandler, _M3eInputChipSetElement_focusInHandler, _M3eInputChipSetElement_focusOutHandler, _M3eInputChipSetElement_chipRemoveHandler, _M3eInputChipSetElement_chipClickHandler, _M3eInputChipSetElement_listManager, _M3eInputChipSetElement_listKeyManager, _M3eInputChipSetElement_ignoreInputChange, _M3eInputChipSetElement_input, _M3eInputChipSetElement_tabindex, _M3eInputChipSetElement_handleKeyDown, _M3eInputChipSetElement_handleSlotChange, _M3eInputChipSetElement_handleInputSlotChange, _M3eInputChipSetElement_handleFocus, _M3eInputChipSetElement_handleFocusIn, _M3eInputChipSetElement_handleFocusOut, _M3eInputChipSetElement_handleChipRemove, _M3eInputChipSetElement_handleChipClick, _M3eInputChipSetElement_handleInputChange, _M3eInputChipSetElement_handleInputKeyDown;
 /**
@@ -5518,28 +5530,28 @@ _M3eInputChipSetElement_handleChipRemove = function _M3eInputChipSetElement_hand
 _M3eInputChipSetElement_handleChipClick = function _M3eInputChipSetElement_handleChipClick(e) {
   __classPrivateFieldGet(this, _M3eInputChipSetElement_listKeyManager, "f").updateActiveItem(e.composedPath().find(x => x instanceof M3eInputChipElement)?.cell);
 };
-_M3eInputChipSetElement_handleInputChange = function _M3eInputChipSetElement_handleInputChange() {
+_M3eInputChipSetElement_handleInputChange = /** @private */
+async function _M3eInputChipSetElement_handleInputChange() {
   const value = __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")?.value;
   if (!value) return;
-  setTimeout(() => {
-    const value = __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")?.value;
-    if (!value) return;
-    const chip = document.createElement("m3e-input-chip");
-    chip.removable = true;
-    chip.appendChild(document.createTextNode(value));
-    this.appendChild(chip);
-    if (__classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")) {
-      try {
-        __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, true, "f");
-        __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f").value = "";
-      } finally {
-        __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, false, "f");
-      }
+  const chip = document.createElement("m3e-input-chip");
+  chip.removable = true;
+  chip.appendChild(document.createTextNode(value));
+  this.appendChild(chip);
+  if (chip.isUpdatePending) {
+    await chip.updateComplete;
+  }
+  if (__classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")) {
+    try {
+      __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, true, "f");
+      __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f").value = "";
+    } finally {
+      __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, false, "f");
     }
-    this.dispatchEvent(new Event("change", {
-      bubbles: true
-    }));
-  });
+  }
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
 };
 _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_handleInputKeyDown(e) {
   if (e.key === "Backspace" && !__classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")?.value) {
@@ -5550,7 +5562,7 @@ _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_ha
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
@@ -5558,7 +5570,7 @@ _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_ha
 })();
 /** The styles of the element. */
 M3eInputChipSetElement.styles = [M3eChipSetElement.styles, css`::slotted([slot="input"]) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(m3e-input-chip) { min-width: 0; } span[role="row"], span[role="gridcell"] { display: contents; }`];
-M3eInputChipSetElement = __decorate([t$3("m3e-input-chip-set")], M3eInputChipSetElement);
+M3eInputChipSetElement = __decorate([element$1("m3e-input-chip-set")], M3eInputChipSetElement);
 
 /**
  * A chip used to help narrow a user's intent by presenting dynamically generated suggestions, such as
@@ -5631,13 +5643,15 @@ M3eInputChipSetElement = __decorate([t$3("m3e-input-chip-set")], M3eInputChipSet
  * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
  * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
  */
-let M3eSuggestionChipElement = class M3eSuggestionChipElement extends FormSubmitter$1(AttachInternals$1(LinkButton$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(Role$1(M3eChipElement, "button")))))), true)) {
+let M3eSuggestionChipElement = class M3eSuggestionChipElement extends FormSubmitter$1(LinkButton$1(KeyboardClick$1(Focusable$1(DisabledInteractive$1(Disabled$1(Role$1(M3eChipElement, "button"))))))) {
   /** @internal @inheritdoc */
   _renderTrailingIcon() {
     return nothing;
   }
 };
-M3eSuggestionChipElement = __decorate([t$3("m3e-suggestion-chip")], M3eSuggestionChipElement);
+/** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+M3eSuggestionChipElement.formAssociated = true;
+M3eSuggestionChipElement = __decorate([element$1("m3e-suggestion-chip")], M3eSuggestionChipElement);
 
 var _AnimationLoopController_frameId, _AnimationLoopController_lastTime, _AnimationLoopController_running, _AnimationLoopController_callback, _AnimationLoopController_loop;
 /** A `ReactiveController` used to execute a function in an animation loop. */
@@ -6443,6 +6457,7 @@ class HoverController extends MonitorControllerBase {
   _observe(target) {
     target.addEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
     target.addEventListener("pointerleave", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
+    target.addEventListener("touchend", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
   }
   /**
    * Stops observing the specified element.
@@ -6451,6 +6466,7 @@ class HoverController extends MonitorControllerBase {
   _unobserve(target) {
     target.removeEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
     target.removeEventListener("pointerleave", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
+    target.removeEventListener("touchend", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
   }
 }
 _HoverController_callback = new WeakMap(), _HoverController_startDelays = new WeakMap(), _HoverController_endDelays = new WeakMap(), _HoverController_pointerInHandler = new WeakMap(), _HoverController_pointerLeaveHandler = new WeakMap(), _HoverController_instances = new WeakSet(), _HoverController_clearDelays = function _HoverController_clearDelays(target) {
@@ -6500,7 +6516,7 @@ _HoverController_callback = new WeakMap(), _HoverController_startDelays = new We
   }
 };
 
-var _IntersectionController_host, _IntersectionController_callback, _IntersectionController_skipInitial, _IntersectionController_observer, _IntersectionController_unobservedUpdate;
+var _IntersectionController_callback, _IntersectionController_skipInitial, _IntersectionController_observer, _IntersectionController_unobservedUpdate;
 /** A `ReactiveController` used to monitor changes in the intersection of a target element with an ancestor element. */
 class IntersectionController extends MonitorControllerBase {
   /**
@@ -6511,8 +6527,6 @@ class IntersectionController extends MonitorControllerBase {
   constructor(host, options) {
     super(host, options);
     /** @private */
-    _IntersectionController_host.set(this, void 0);
-    /** @private */
     _IntersectionController_callback.set(this, void 0);
     /** @private */
     _IntersectionController_skipInitial.set(this, false);
@@ -6520,7 +6534,6 @@ class IntersectionController extends MonitorControllerBase {
     _IntersectionController_observer.set(this, void 0);
     /** @private */
     _IntersectionController_unobservedUpdate.set(this, true);
-    __classPrivateFieldSet(this, _IntersectionController_host, host, "f");
     __classPrivateFieldSet(this, _IntersectionController_callback, options.callback, "f");
     __classPrivateFieldSet(this, _IntersectionController_skipInitial, options.skipInitial ?? false, "f");
     if (isServer) return;
@@ -6530,7 +6543,6 @@ class IntersectionController extends MonitorControllerBase {
     }
     __classPrivateFieldSet(this, _IntersectionController_observer, new IntersectionObserver((entries, observer) => {
       __classPrivateFieldGet(this, _IntersectionController_callback, "f").call(this, entries, observer);
-      __classPrivateFieldGet(this, _IntersectionController_host, "f").requestUpdate();
     }, options.init), "f");
   }
   /** @inheritdoc */
@@ -6547,7 +6559,6 @@ class IntersectionController extends MonitorControllerBase {
   _observe(target) {
     __classPrivateFieldGet(this, _IntersectionController_observer, "f")?.observe(target);
     __classPrivateFieldSet(this, _IntersectionController_unobservedUpdate, true, "f");
-    __classPrivateFieldGet(this, _IntersectionController_host, "f").requestUpdate();
   }
   /**
    * Stops observing the specified element.
@@ -6557,7 +6568,7 @@ class IntersectionController extends MonitorControllerBase {
     __classPrivateFieldGet(this, _IntersectionController_observer, "f")?.unobserve(target);
   }
 }
-_IntersectionController_host = new WeakMap(), _IntersectionController_callback = new WeakMap(), _IntersectionController_skipInitial = new WeakMap(), _IntersectionController_observer = new WeakMap(), _IntersectionController_unobservedUpdate = new WeakMap();
+_IntersectionController_callback = new WeakMap(), _IntersectionController_skipInitial = new WeakMap(), _IntersectionController_observer = new WeakMap(), _IntersectionController_unobservedUpdate = new WeakMap();
 
 var _LongPressController_instances, _LongPressController_callback, _LongPressController_threshold, _LongPressController_pressedTargets, _LongPressController_pressedTimeouts, _LongPressController_touchStartHandler, _LongPressController_touchEndOrCancelHandler, _LongPressController_handleTouchStart, _LongPressController_handleTouchEndOrCancel;
 /** A `ReactiveController` used to detect a long press gesture. */
@@ -6936,6 +6947,32 @@ class ResizeController extends MonitorControllerBase {
 }
 _ResizeController_host = new WeakMap(), _ResizeController_callback = new WeakMap(), _ResizeController_skipInitial = new WeakMap(), _ResizeController_config = new WeakMap(), _ResizeController_observer = new WeakMap(), _ResizeController_unobservedUpdate = new WeakMap();
 
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ *
+ * ```js
+ * @element('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @param {string} tagName The tag name of the custom element to define.
+ */
+const element = tagName => (classOrTarget, context) => {
+  const define = () => {
+    if (typeof window !== "undefined" && !customElements.get(tagName)) {
+      customElements.define(tagName, classOrTarget);
+    }
+  };
+  if (context) {
+    context.addInitializer(define);
+  } else {
+    define();
+  }
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * A decorator that runs a function once after a given "cooldown" period.
@@ -7245,6 +7282,47 @@ function AttachInternals(base, formAssociated) {
   _AttachInternals.formAssociated = formAssociated;
   return _AttachInternals;
 }
+/**
+ * Convenience function used to test whether an element has a given custom state.
+ * @param {AttachInternalsMixin} element The element to test.
+ * @param {string} state The custom state to test.
+ * @returns {boolean} Whether `element` has `state`.
+ */
+function hasCustomState(element, state) {
+  return isServer ? false : element[internals].states.has(state);
+}
+/**
+ * Convenience function used to add custom state to an element.
+ * @param {AttachInternalsMixin} element The element to which to add custom state.
+ * @param {string} state The custom state to add.
+ */
+function addCustomState(element, state) {
+  if (!isServer) {
+    element[internals]?.states.add(state);
+  }
+}
+/**
+ * Convenience function used to delete custom state from an element.
+ * @param {AttachInternalsMixin} element The element from which to delete custom state.
+ * @param {string} state The custom state to delete.
+ * @returns {boolean} Whether `state` was removed from `element`.
+ */
+function deleteCustomState(element, state) {
+  return !isServer && element[internals]?.states.delete(state);
+}
+/**
+ * Convenience function used to add or delete custom state for an element.
+ * @param {AttachInternalsMixin} element The element for which to add or delete custom state.
+ * @param {string} state The custom state to add or delete.
+ * @param {boolean} value Whether to add or delete `state` from `element`.
+ */
+function setCustomState(element, state, value) {
+  if (value) {
+    addCustomState(element, state);
+  } else {
+    deleteCustomState(element, state);
+  }
+}
 
 /**
  * Determines whether a value is a `CheckedMixin`.
@@ -7435,7 +7513,7 @@ function Dirty(base) {
     }
     /** Whether the user has modified the value of the element. */
     get dirty() {
-      return this.classList.contains("-dirty");
+      return hasCustomState(this, "-dirty");
     }
     /** Whether the user has not modified the value of the element. */
     get pristine() {
@@ -7454,11 +7532,11 @@ function Dirty(base) {
     }
     /** Marks the element as pristine. */
     markAsPristine() {
-      this.classList.toggle("-dirty", false);
+      deleteCustomState(this, "-dirty");
     }
     /** Marks the element as dirty. */
     markAsDirty() {
-      this.classList.toggle("-dirty", true);
+      addCustomState(this, "-dirty");
     }
   }
   _a = _eventHandler$2;
@@ -7490,7 +7568,7 @@ function Touched(base) {
     }
     /** Whether the user has interacted when the element. */
     get touched() {
-      return this.classList.contains("-touched");
+      return hasCustomState(this, "-touched");
     }
     /** Whether the user has not interacted when the element. */
     get untouched() {
@@ -7513,11 +7591,11 @@ function Touched(base) {
     }
     /** Marks the element as touched. */
     markAsTouched() {
-      this.classList.toggle("-touched", true);
+      addCustomState(this, "-touched");
     }
     /** Marks the element as untouched. */
     markAsUntouched() {
-      this.classList.toggle("-touched", false);
+      deleteCustomState(this, "-touched");
     }
   }
   _a = _eventHandler$1;
@@ -8236,7 +8314,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 || this.classList.contains("-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" : "";
@@ -8476,7 +8554,7 @@ function ConstraintValidation(base) {
       }
       this[internals].setValidity(validity, validityMessage);
       this.ariaInvalid = invalid ? "true" : null;
-      this.classList.toggle("-invalid", invalid === true);
+      setCustomState(this, "-invalid", invalid === true);
       if (isLabelledMixin(this)) {
         this[updateLabels]?.();
       }
@@ -8724,20 +8802,35 @@ const _firstUpdated = Symbol("_firstUpdated");
  * @returns {Constructor<HtmlForMixin> & T} A constructor extends `base` and implements `HtmlForMixin`.
  */
 function HtmlFor(base) {
-  var _a, _b;
+  var _a;
   class _HtmlForMixin extends base {
     constructor() {
       super(...arguments);
       /** @private */
-      this[_a] = null;
-      /** @private */
-      this[_b] = false;
+      this[_a] = false;
       /** The identifier of the interactive control to which this element is attached. */
       this.htmlFor = null;
     }
     /** The interactive element to which this element is attached. */
     get control() {
-      return this[_control];
+      return this[_control]?.deref() ?? null;
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+      super.connectedCallback();
+      const control = this[_control]?.deref();
+      if (control) {
+        this.attach(control);
+      }
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      const control = this[_control];
+      if (control) {
+        this.detach();
+        this[_control] = control;
+      }
     }
     /** @inheritdoc */
     firstUpdated(_changedProperties) {
@@ -8772,14 +8865,14 @@ function HtmlFor(base) {
      * @param {HTMLElement} control The element that controls the attachable element.
      */
     attach(control) {
-      this[_control] = control;
+      this[_control] = new WeakRef(control);
     }
     /** Detaches the element from its current interactive control. */
     detach() {
-      this[_control] = null;
+      this[_control] = undefined;
     }
   }
-  _a = _control, _b = _firstUpdated;
+  _a = _firstUpdated;
   __decorate([n$1({
     attribute: "for"
   })], _HtmlForMixin.prototype, "htmlFor", void 0);
@@ -9215,7 +9308,7 @@ var _M3eCollapsibleElement_instances, _M3eCollapsibleElement_slotChanged, _M3eCo
  *
  * @cssprop --m3e-collapsible-animation-duration - The duration of the expand / collapse animation.
  */
-let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(LitElement, "opening", "opened", "closing", "closed") {
+let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(AttachInternals(LitElement), "opening", "opened", "closing", "closed") {
   constructor() {
     super(...arguments);
     _M3eCollapsibleElement_instances.add(this);
@@ -9232,7 +9325,7 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
   /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
-    this.classList.toggle("-no-animate", true);
+    addCustomState(this, "-no-animate");
     if (!__classPrivateFieldGet(this, _M3eCollapsibleElement_slotChanged, "f")) {
       if (this.open) {
         __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
@@ -9246,24 +9339,24 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
       __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
       if (!prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-        this.classList.toggle("-overflows", this.clientHeight < this.scrollHeight);
+        setCustomState(this, "-overflows", this.clientHeight < this.scrollHeight);
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
       }
-      this.classList.toggle("-closing", false);
-      this.classList.toggle("-opening", true);
+      deleteCustomState(this, "-closing");
+      addCustomState(this, "-opening");
       this.dispatchEvent(new Event("opening"));
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
-      this.classList.toggle("-no-animate", false);
+      deleteCustomState(this, "-no-animate");
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
       if (prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-        this.classList.toggle("-opening", false);
+        deleteCustomState(this, "-opening");
         this.dispatchEvent(new Event("opened"));
       } else {
         this.addEventListener("transitionend", () => {
           if (this.open) {
             __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-            this.classList.toggle("-opening", false);
+            deleteCustomState(this, "-opening");
             this.dispatchEvent(new Event("opened"));
           }
         }, {
@@ -9271,23 +9364,23 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
         });
       }
     } else {
-      this.classList.toggle("-opening", false);
-      this.classList.toggle("-closing", true);
+      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")) {
-        this.classList.toggle("-no-animate", false);
+        deleteCustomState(this, "-no-animate");
       }
       if (prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
-        this.classList.toggle("-closing", false);
+        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) {
-              this.classList.toggle("-closing", false);
+              deleteCustomState(this, "-closing");
               this.dispatchEvent(new Event("closed"));
             }
           }, {
@@ -9325,12 +9418,12 @@ M3eCollapsibleElement.styles = css`:host { display: block; height: 0px; overflow
         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(.-closing):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(.-no-animate) { transition-duration: 0ms; } :host(.-opening), :host(.-closing) { overflow-y: hidden !important; } :host(.-overflows) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
+          ${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; } }`;
 __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eCollapsibleElement.prototype, "open", void 0);
-M3eCollapsibleElement = __decorate([t$3("m3e-collapsible")], M3eCollapsibleElement);
+M3eCollapsibleElement = __decorate([element("m3e-collapsible")], M3eCollapsibleElement);
 
 /**
  * Component design tokens that control the `M3eElevationElement`.
@@ -9502,7 +9595,7 @@ __decorate([n$1({
   type: Number,
   reflect: true
 })], M3eElevationElement.prototype, "level", void 0);
-M3eElevationElement = __decorate([t$3("m3e-elevation")], M3eElevationElement);
+M3eElevationElement = __decorate([element("m3e-elevation")], M3eElevationElement);
 
 /**
  * Component design tokens that control the `M3eFocusRingElement`.
@@ -9648,7 +9741,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eFocusRingElement.prototype, "disabled", void 0);
-M3eFocusRingElement = __decorate([t$3("m3e-focus-ring")], M3eFocusRingElement);
+M3eFocusRingElement = __decorate([element("m3e-focus-ring")], M3eFocusRingElement);
 
 /**
  * An element which looks like a checkbox.
@@ -9701,7 +9794,7 @@ let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedInd
 };
 /** The styles of the element. */
 M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); }`;
-M3ePseudoCheckboxElement = __decorate([t$3("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
+M3ePseudoCheckboxElement = __decorate([element("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
 
 /**
  * An element which looks like a radio button.
@@ -9739,7 +9832,7 @@ let M3ePseudoRadioElement = class M3ePseudoRadioElement extends Checked(Disabled
 };
 /** The styles of the element. */
 M3ePseudoRadioElement.styles = css`:host { display: inline-block; vertical-align: middle; box-sizing: border-box; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); flex: none; } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) { color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) { color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([disabled]) { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); }`;
-M3ePseudoRadioElement = __decorate([t$3("m3e-pseudo-radio")], M3ePseudoRadioElement);
+M3ePseudoRadioElement = __decorate([element("m3e-pseudo-radio")], M3ePseudoRadioElement);
 
 /**
  * Component design tokens that control the `M3eRippleElement`.
@@ -9949,7 +10042,7 @@ __decorate([n$1({
 __decorate([n$1({
   type: Number
 })], M3eRippleElement.prototype, "radius", void 0);
-M3eRippleElement = __decorate([t$3("m3e-ripple")], M3eRippleElement);
+M3eRippleElement = __decorate([element("m3e-ripple")], M3eRippleElement);
 
 var _M3eScrollContainerElement_scrollHandler;
 /**
@@ -9982,7 +10075,7 @@ var _M3eScrollContainerElement_scrollHandler;
  * @cssprop --m3e-focus-ring-factor - Animation factor for focus ring thickness.
  * @cssprop --m3e-focus-ring-duration - Duration of the focus ring animation.
  */
-let M3eScrollContainerElement = class M3eScrollContainerElement extends LitElement {
+let M3eScrollContainerElement = class M3eScrollContainerElement extends AttachInternals(LitElement) {
   constructor() {
     super(...arguments);
     /** @private */
@@ -10023,20 +10116,20 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends LitEleme
   _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;
-    this.classList.toggle("-above", before);
-    this.classList.toggle("-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).-above) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible).-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).-above) { border-top-color: GrayText; } :host(:not(:focus-visible).-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):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; } }`;
 __decorate([n$1()], M3eScrollContainerElement.prototype, "dividers", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eScrollContainerElement.prototype, "thin", void 0);
 __decorate([debounce(40)], M3eScrollContainerElement.prototype, "_updateScroll", null);
-M3eScrollContainerElement = __decorate([t$3("m3e-scroll-container")], M3eScrollContainerElement);
+M3eScrollContainerElement = __decorate([element("m3e-scroll-container")], M3eScrollContainerElement);
 
 var _M3eSlideElement_instances, _M3eSlideElement_items, _M3eSlideElement_handleSlotChange, _M3eSlideElement_updateItems;
 /**
@@ -10061,7 +10154,7 @@ var _M3eSlideElement_instances, _M3eSlideElement_items, _M3eSlideElement_handleS
  *
  * @cssprop --m3e-slide-animation-duration - The duration of transitions between slotted items.
  */
-let M3eSlideElement = class M3eSlideElement extends LitElement {
+let M3eSlideElement = class M3eSlideElement extends AttachInternals(LitElement) {
   constructor() {
     super(...arguments);
     _M3eSlideElement_instances.add(this);
@@ -10076,20 +10169,20 @@ let M3eSlideElement = class M3eSlideElement extends LitElement {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.toggle("-no-animate", true);
+    addCustomState(this, "-no-animate");
   }
   /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("selectedIndex")) {
       if (this.selectedIndex === null) {
-        this.classList.toggle("-no-animate", true);
+        addCustomState(this, "-no-animate");
       }
       __classPrivateFieldGet(this, _M3eSlideElement_instances, "m", _M3eSlideElement_updateItems).call(this);
-      if (this.selectedIndex !== null && this.classList.contains("-no-animate")) {
+      if (this.selectedIndex !== null && hasCustomState(this, "-no-animate")) {
         requestAnimationFrame(() => {
           if (this.selectedIndex !== null) {
-            this.classList.toggle("-no-animate", false);
+            deleteCustomState(this, "-no-animate");
           }
         });
       }
@@ -10125,13 +10218,13 @@ _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(.-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(:state(-no-animate)) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
 __decorate([n$1({
   attribute: "selected-index",
   type: Number,
   reflect: true
 })], M3eSlideElement.prototype, "selectedIndex", void 0);
-M3eSlideElement = __decorate([t$3("m3e-slide")], M3eSlideElement);
+M3eSlideElement = __decorate([element("m3e-slide")], M3eSlideElement);
 
 /**
  * Component design tokens that control the `M3eStateLayerElement`.
@@ -10296,7 +10389,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eStateLayerElement.prototype, "disableHover", void 0);
-M3eStateLayerElement = __decorate([t$3("m3e-state-layer")], M3eStateLayerElement);
+M3eStateLayerElement = __decorate([element("m3e-state-layer")], M3eStateLayerElement);
 
 /**
  * An inline container which presents an ellipsis when content overflows.
@@ -10331,7 +10424,7 @@ let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
 };
 /** The styles of the element. */
 M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
-M3eTextOverflowElement = __decorate([t$3("m3e-text-overflow")], M3eTextOverflowElement);
+M3eTextOverflowElement = __decorate([element("m3e-text-overflow")], M3eTextOverflowElement);
 
 var _M3eTextHighlightElement_instances, _M3eTextHighlightElement_id, _M3eTextHighlightElement_ranges, _M3eTextHighlightElement_styles, _M3eTextHighlightElement_isTextNode, _M3eTextHighlightElement_findTextNodes, _M3eTextHighlightElement_highlight;
 var M3eTextHighlightElement_1;
@@ -10524,7 +10617,7 @@ __decorate([n$1({
   attribute: "case-sensitive",
   type: Boolean
 })], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
-M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([t$3("m3e-text-highlight")], M3eTextHighlightElement);
+M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([element("m3e-text-highlight")], M3eTextHighlightElement);
 
 /**
  * An element, nested within a clickable element, used to close a parenting dialog.
@@ -10551,7 +10644,7 @@ let M3eDialogActionElement = class M3eDialogActionElement extends ActionElementB
 __decorate([n$1({
   attribute: "return-value"
 })], M3eDialogActionElement.prototype, "returnValue", void 0);
-M3eDialogActionElement = __decorate([t$3("m3e-dialog-action")], M3eDialogActionElement);
+M3eDialogActionElement = __decorate([element$1("m3e-dialog-action")], M3eDialogActionElement);
 
 var _M3eDialogElement_instances, _M3eDialogElement_id, _M3eDialogElement_open, _M3eDialogElement_escapePressedWithoutCancel, _M3eDialogElement_scrollLockController, _M3eDialogElement_renderCloseButton, _M3eDialogElement_handleClose, _M3eDialogElement_handleCancel, _M3eDialogElement_handleClick, _M3eDialogElement_handleKeyDown, _M3eDialogElement_handleActionsSlotChange;
 var M3eDialogElement_1;
@@ -10616,7 +10709,7 @@ var M3eDialogElement_1;
  * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.
  * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.
  */
-let M3eDialogElement = M3eDialogElement_1 = class M3eDialogElement extends EventAttribute$1(LitElement, "opening", "opened", "cancel", "closing", "closed") {
+let M3eDialogElement = M3eDialogElement_1 = class M3eDialogElement extends EventAttribute$1(AttachInternals$1(LitElement), "opening", "opened", "cancel", "closing", "closed") {
   constructor() {
     super(...arguments);
     _M3eDialogElement_instances.add(this);
@@ -10627,7 +10720,7 @@ let M3eDialogElement = M3eDialogElement_1 = class M3eDialogElement extends Event
     /** @private */
     _M3eDialogElement_escapePressedWithoutCancel.set(this, false);
     /** @private */
-    this._hasActions = false;
+    this._withActions = false;
     /** @private */
     _M3eDialogElement_scrollLockController.set(this, new ScrollLockController$1(this));
     /**
@@ -10731,7 +10824,7 @@ let M3eDialogElement = M3eDialogElement_1 = class M3eDialogElement extends Event
   }
   /** @inheritdoc */
   render() {
-    return html`<dialog class="base" role="${o$1(this.alert ? "alertdialog" : undefined)}" aria-labelledby="m3e-dialog-${__classPrivateFieldGet(this, _M3eDialogElement_id, "f")}-header" .returnvalue="${this.returnValue}" @close="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleClose)}" @cancel="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleCancel)}" @click="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleClick)}" @keydown="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleKeyDown)}"><m3e-elevation level="3"></m3e-elevation><m3e-focus-trap ?disabled="${this.noFocusTrap}"><div class="header"><slot name="header" id="m3e-dialog-${__classPrivateFieldGet(this, _M3eDialogElement_id, "f")}-header"></slot>${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_renderCloseButton).call(this)}</div><m3e-scroll-container class="content" dividers="${this._hasActions ? "above-below" : "above"}"><slot></slot></m3e-scroll-container><div class="actions"><slot name="actions" @slotchange="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleActionsSlotChange)}"></slot></div></m3e-focus-trap></dialog>`;
+    return html`<dialog class="base" role="${o$1(this.alert ? "alertdialog" : undefined)}" aria-labelledby="m3e-dialog-${__classPrivateFieldGet(this, _M3eDialogElement_id, "f")}-header" .returnvalue="${this.returnValue}" @close="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleClose)}" @cancel="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleCancel)}" @click="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleClick)}" @keydown="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleKeyDown)}"><m3e-elevation level="3"></m3e-elevation><m3e-focus-trap ?disabled="${this.noFocusTrap}"><div class="header"><slot name="header" id="m3e-dialog-${__classPrivateFieldGet(this, _M3eDialogElement_id, "f")}-header"></slot>${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_renderCloseButton).call(this)}</div><m3e-scroll-container class="content" dividers="${this._withActions ? "above-below" : "above"}"><slot></slot></m3e-scroll-container><div class="actions"><slot name="actions" @slotchange="${__classPrivateFieldGet(this, _M3eDialogElement_instances, "m", _M3eDialogElement_handleActionsSlotChange)}"></slot></div></m3e-focus-trap></dialog>`;
   }
 };
 _M3eDialogElement_id = new WeakMap();
@@ -10775,10 +10868,10 @@ _M3eDialogElement_handleKeyDown = function _M3eDialogElement_handleKeyDown(e) {
   }
 };
 _M3eDialogElement_handleActionsSlotChange = function _M3eDialogElement_handleActionsSlotChange(e) {
-  this._hasActions = e.target.assignedNodes({
+  this._withActions = e.target.assignedNodes({
     flatten: true
   }).length > 0;
-  this.classList.toggle("-has-actions", this._hasActions);
+  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}, 
@@ -10791,10 +10884,10 @@ 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(.-has-actions)) .content { margin-bottom: 1.5rem; } :host(:not(.-has-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(: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; } }`;
 /** @private */
 M3eDialogElement.__nextId = 0;
-__decorate([r$1()], M3eDialogElement.prototype, "_hasActions", void 0);
+__decorate([r$1()], M3eDialogElement.prototype, "_withActions", void 0);
 __decorate([e$4(".base")], M3eDialogElement.prototype, "_base", void 0);
 __decorate([e$4(".content")], M3eDialogElement.prototype, "_content", void 0);
 __decorate([n$1({
@@ -10818,7 +10911,7 @@ __decorate([n$1({
 __decorate([n$1({
   attribute: "close-label"
 })], M3eDialogElement.prototype, "closeLabel", void 0);
-M3eDialogElement = M3eDialogElement_1 = __decorate([t$3("m3e-dialog")], M3eDialogElement);
+M3eDialogElement = M3eDialogElement_1 = __decorate([element$1("m3e-dialog")], M3eDialogElement);
 
 /**
  * An element, nested within a clickable element, used to open a dialog.
@@ -10846,7 +10939,7 @@ let M3eDialogTriggerElement = class M3eDialogTriggerElement extends HtmlFor$1(Ac
     }
   }
 };
-M3eDialogTriggerElement = __decorate([t$3("m3e-dialog-trigger")], M3eDialogTriggerElement);
+M3eDialogTriggerElement = __decorate([element$1("m3e-dialog-trigger")], M3eDialogTriggerElement);
 
 /**
  * A thin line that separates content in lists or other containers.
@@ -10925,7 +11018,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eDividerElement.prototype, "insetEnd", void 0);
-M3eDividerElement = __decorate([t$3("m3e-divider")], M3eDividerElement);
+M3eDividerElement = __decorate([element$1("m3e-divider")], M3eDividerElement);
 
 /**
  * Component design tokens that control `M3eDrawerContainerElement`.
@@ -10947,12 +11040,12 @@ const DrawerContainerToken = {
  * Styles for `M3eDrawerContainerElement`.
  * @internal
  */
-const DrawerContainerStyle = css`:host { 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-inline ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard},
+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; margin-inline-start: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([start]) .start { margin-inline-start: 0; } :host(:not([end])) .end { visibility: hidden; margin-inline-end: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([end]) .end { margin-inline-end: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${DrawerContainerToken.containerWidth}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-inline-start: 0; margin-inline-end: 0; transition: ${unsafeCSS(`margin-inline ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard}`)}; } :host(.-start-push[start]) .content, :host(.-start-side[start]) .content { margin-inline-start: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(.-end-push[end]) .content, :host(.-end-side[end]) .content { margin-inline-end: 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(.-start-push[start]) .scrim, :host(.-end-push[end]) .scrim, :host(.-start-over[start]) .scrim, :host(.-end-over[end]) .scrim { visibility: visible; opacity: ${DrawerContainerToken.scrimOpacity}; } :host(.-start-push) .start, :host(.-start-over) .start { border-start-end-radius: ${DrawerContainerToken.cornerShape}; border-end-end-radius: ${DrawerContainerToken.cornerShape}; } :host(.-end-push) .end, :host(.-end-over) .end { border-start-start-radius: ${DrawerContainerToken.cornerShape}; border-end-start-radius: ${DrawerContainerToken.cornerShape}; } :host(.-start-push) .start, :host(.-end-push) .end, :host(.-start-over) .start, :host(.-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].-start-side[start]:not(.-end-push[end]):not(.-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].-end-side[end]:not(.-start-push[start]):not(.-start-over[start])) .end { border-inline-start-color: ${DrawerContainerToken.dividerColor}; } :host(.-no-animate) .start, :host(.-no-animate) .end, :host(.-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(.-start-push) .start, :host(.-end-push) .end, :host(.-start-over) .start, :host(.-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].-start-side[start]:not(.-end-push[end]):not(.-end-over[end])) .start { border-inline-end-color: GrayText; } :host([end-divider].-end-side[end]:not(.-start-push[start]):not(.-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(: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; } }`;
 
 var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointUnobserve, _M3eDrawerContainerElement_disableStartFocusTrap, _M3eDrawerContainerElement_disableEndFocusTrap, _M3eDrawerContainerElement_resizeController, _M3eDrawerContainerElement_handleScrimClick, _M3eDrawerContainerElement_handleStartSlotChange, _M3eDrawerContainerElement_handleEndSlotChange, _M3eDrawerContainerElement_handleDrawerResize, _M3eDrawerContainerElement_clearMode, _M3eDrawerContainerElement_updateMode;
 /**
@@ -11006,7 +11099,7 @@ var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointU
  * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.
  * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.
  */
-let M3eDrawerContainerElement = class M3eDrawerContainerElement extends LitElement {
+let M3eDrawerContainerElement = class M3eDrawerContainerElement extends AttachInternals$1(LitElement) {
   constructor() {
     super(...arguments);
     _M3eDrawerContainerElement_instances.add(this);
@@ -11060,7 +11153,7 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends LitEleme
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.add("-no-animate");
+    addCustomState$1(this, "-no-animate");
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -11139,19 +11232,19 @@ _M3eDrawerContainerElement_handleDrawerResize = function _M3eDrawerContainerElem
       this.style.setProperty("--_end-drawer-size", `${borderSize.inlineSize}px`);
     }
   }
-  if (this.classList.contains("-no-animate")) {
+  if (hasCustomState$1(this, "-no-animate")) {
     // Force synchronous layout flush
     void this.offsetTop;
-    this.classList.remove("-no-animate");
+    deleteCustomState$1(this, "-no-animate");
   }
 };
 _M3eDrawerContainerElement_clearMode = function _M3eDrawerContainerElement_clearMode() {
-  this.classList.remove("-start-over");
-  this.classList.remove("-start-push");
-  this.classList.remove("-start-side");
-  this.classList.remove("-end-over");
-  this.classList.remove("-end-push");
-  this.classList.remove("-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,
@@ -11187,8 +11280,8 @@ _M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_upda
     this._endMode = this.endMode;
   }
   __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_clearMode).call(this);
-  this.classList.add(`-start-${this._startMode}`);
-  this.classList.add(`-end-${this._endMode}`);
+  addCustomState$1(this, `-start-${this._startMode}`);
+  addCustomState$1(this, `-end-${this._endMode}`);
   if (autoClose && (autoCloseStart || autoCloseEnd)) {
     if (autoCloseStart) {
       this.start = false;
@@ -11231,7 +11324,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eDrawerContainerElement.prototype, "endDivider", void 0);
-M3eDrawerContainerElement = __decorate([t$3("m3e-drawer-container")], M3eDrawerContainerElement);
+M3eDrawerContainerElement = __decorate([element$1("m3e-drawer-container")], M3eDrawerContainerElement);
 
 var _M3eDrawerToggleElement_instances, _M3eDrawerToggleElement_drawerContainerChangeHandler, _M3eDrawerToggleElement_togglingDrawer, _M3eDrawerToggleElement_handleDrawerContainerChange, _M3eDrawerToggleElement_toggleDrawer, _M3eDrawerToggleElement_updateToggle;
 /**
@@ -11350,7 +11443,7 @@ async function _M3eDrawerToggleElement_updateToggle(container, syncToggle) {
     this.parentElement.ariaPressed = null;
   }
 };
-M3eDrawerToggleElement = __decorate([t$3("m3e-drawer-toggle")], M3eDrawerToggleElement);
+M3eDrawerToggleElement = __decorate([element$1("m3e-drawer-toggle")], M3eDrawerToggleElement);
 
 var _M3eAccordionElement_instances, _M3eAccordionElement_panels, _M3eAccordionElement_handleSlotChange, _M3eAccordionElement_handleOpening;
 /**
@@ -11432,7 +11525,7 @@ M3eAccordionElement.styles = css`:host { display: block; } ::slotted(m3e-expansi
 __decorate([n$1({
   type: Boolean
 })], M3eAccordionElement.prototype, "multi", void 0);
-M3eAccordionElement = __decorate([t$3("m3e-accordion")], M3eAccordionElement);
+M3eAccordionElement = __decorate([element$1("m3e-accordion")], M3eAccordionElement);
 
 /**
  * Component design tokens for `M3eExpansionHeaderElement`.
@@ -11485,7 +11578,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(.-has-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(: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; } }`;
 
 var _M3eExpansionHeaderElement_instances, _M3eExpansionHeaderElement_renderToggle;
 /**
@@ -11564,7 +11657,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eExpansionHeaderElement.prototype, "hideToggle", void 0);
-M3eExpansionHeaderElement = __decorate([t$3("m3e-expansion-header")], M3eExpansionHeaderElement);
+M3eExpansionHeaderElement = __decorate([element$1("m3e-expansion-header")], M3eExpansionHeaderElement);
 
 /* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
 var _M3eExpansionPanelElement_instances, _M3eExpansionPanelElement_id, _M3eExpansionPanelElement_contentId, _M3eExpansionPanelElement_headerId, _M3eExpansionPanelElement_directionalitySubscription, _M3eExpansionPanelElement_renderToggleIcon, _M3eExpansionPanelElement_handleHeaderClick, _M3eExpansionPanelElement_handleKeyDown, _M3eExpansionPanelElement_handleCollapsibleEvent, _M3eExpansionPanelElement_handleActionsSlotChange, _M3eExpansionPanelElement_updateHeaderToggleRotation;
@@ -11752,7 +11845,7 @@ _M3eExpansionPanelElement_handleCollapsibleEvent = function _M3eExpansionPanelEl
   }));
 };
 _M3eExpansionPanelElement_handleActionsSlotChange = function _M3eExpansionPanelElement_handleActionsSlotChange(e) {
-  this.classList.toggle("-has-actions", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-actions", hasAssignedNodes$1(e.target));
 };
 _M3eExpansionPanelElement_updateHeaderToggleRotation = function _M3eExpansionPanelElement_updateHeaderToggleRotation() {
   if (M3eDirectionality.current === "rtl") {
@@ -11783,13 +11876,13 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eExpansionPanelElement.prototype, "hideToggle", void 0);
-M3eExpansionPanelElement = M3eExpansionPanelElement_1 = __decorate([t$3("m3e-expansion-panel")], M3eExpansionPanelElement);
+M3eExpansionPanelElement = M3eExpansionPanelElement_1 = __decorate([element$1("m3e-expansion-panel")], M3eExpansionPanelElement);
 
 /**
  * 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 { 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; } }`;
 
 /**
  * Component design tokens that control the `M3eFabElement` for all size variants.
@@ -12822,7 +12915,7 @@ let M3eFabElement = class M3eFabElement extends KeyboardClick$1(LinkButton$1(For
 };
 _M3eFabElement_instances = new WeakSet();
 _M3eFabElement_handleSlotChange = function _M3eFabElement_handleSlotChange() {
-  this._base?.classList.toggle("-with-menu", this.querySelector("m3e-fab-menu-trigger") !== null);
+  this._base?.classList.toggle("with-menu", this.querySelector("m3e-fab-menu-trigger") !== null);
 };
 /** The styles of the element. */
 M3eFabElement.styles = [FabSizeStyle, FabVariantStyle, FabStyle];
@@ -12845,7 +12938,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eFabElement.prototype, "extended", void 0);
-M3eFabElement = __decorate([t$3("m3e-fab")], M3eFabElement);
+M3eFabElement = __decorate([element$1("m3e-fab")], M3eFabElement);
 
 var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eFabMenuItemElement_handleClick;
 /**
@@ -12937,7 +13030,7 @@ __decorate([e$4(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", v
 __decorate([e$4(".focus-ring")], M3eFabMenuItemElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eFabMenuItemElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eFabMenuItemElement.prototype, "_ripple", void 0);
-M3eFabMenuItemElement = __decorate([t$3("m3e-fab-menu-item")], M3eFabMenuItemElement);
+M3eFabMenuItemElement = __decorate([element$1("m3e-fab-menu-item")], M3eFabMenuItemElement);
 
 var _M3eFabMenuElement_instances, _M3eFabMenuElement_fabTabIndex, _M3eFabMenuElement_trigger, _M3eFabMenuElement_anchoringCleanup, _M3eFabMenuElement_listManager, _M3eFabMenuElement_keyDownHandler, _M3eFabMenuElement_documentClickHandler, _M3eFabMenuElement_scrollController, _M3eFabMenuElement_toggleHandler, _M3eFabMenuElement_handleSlotChange, _M3eFabMenuElement_handleKeyDown, _M3eFabMenuElement_handleDocumentClick, _M3eFabMenuElement_attachFab, _M3eFabMenuElement_detachFab;
 /**
@@ -12993,7 +13086,7 @@ var _M3eFabMenuElement_instances, _M3eFabMenuElement_fabTabIndex, _M3eFabMenuEle
  * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.
  * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.
  */
-let M3eFabMenuElement = class M3eFabMenuElement extends Role$1(LitElement, "menu") {
+let M3eFabMenuElement = class M3eFabMenuElement extends AttachInternals$1(Role$1(LitElement, "menu")) {
   constructor() {
     super(...arguments);
     _M3eFabMenuElement_instances.add(this);
@@ -13052,8 +13145,8 @@ let M3eFabMenuElement = class M3eFabMenuElement extends Role$1(LitElement, "menu
       flip: true,
       offset: 8
     }, (x, y, position) => {
-      this.classList.toggle("-right", position.includes("end"));
-      this.classList.toggle("-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 = "";
@@ -13104,7 +13197,7 @@ let M3eFabMenuElement = class M3eFabMenuElement extends Role$1(LitElement, "menu
     super.connectedCallback();
     this.tabIndex = -1;
     this.setAttribute("popover", "manual");
-    this.classList.add("-no-animate");
+    addCustomState$1(this, "-no-animate");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eFabMenuElement_keyDownHandler, "f"));
     this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eFabMenuElement_toggleHandler, "f"));
     document.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuElement_documentClickHandler, "f"));
@@ -13119,7 +13212,7 @@ let M3eFabMenuElement = class M3eFabMenuElement extends Role$1(LitElement, "menu
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => this.classList.remove("-no-animate"));
+    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
   }
   /** @inheritdoc */
   render() {
@@ -13182,14 +13275,14 @@ _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(.-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(:state(-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(.-left) { align-items: flex-start; transform-origin: left; } :host(.-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(.-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(: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; } }`;
 __decorate([n$1({
   reflect: true
 })], M3eFabMenuElement.prototype, "variant", void 0);
-M3eFabMenuElement = __decorate([t$3("m3e-fab-menu")], M3eFabMenuElement);
+M3eFabMenuElement = __decorate([element$1("m3e-fab-menu")], M3eFabMenuElement);
 
 /**
  * An element, nested within a clickable element, used to open a floating action button (FAB) menu.
@@ -13248,7 +13341,7 @@ let M3eFabMenuTriggerElement = class M3eFabMenuTriggerElement extends HtmlFor$1(
     }
   }
 };
-M3eFabMenuTriggerElement = __decorate([t$3("m3e-fab-menu-trigger")], M3eFabMenuTriggerElement);
+M3eFabMenuTriggerElement = __decorate([element$1("m3e-fab-menu-trigger")], M3eFabMenuTriggerElement);
 
 /**
  * Adapted from Angular Material Form Field Control
@@ -13399,10 +13492,10 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
       target: null,
       callback: focused => {
         focused = focused && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true);
-        this.classList.toggle("-no-animate", false);
+        setCustomState$1(this, "-no-animate", false);
         __classPrivateFieldSet(this, _M3eFormFieldElement_focused, focused, "f");
         if (focused) {
-          this.classList.toggle("-float-label", true);
+          setCustomState$1(this, "-float-label", true);
         } else {
           this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
           this.notifyControlStateChange();
@@ -13430,7 +13523,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
     /** @private */
     _M3eFormFieldElement_pressedController.set(this, new PressedController$1(this, {
       target: null,
-      callback: pressed => this.classList.toggle("-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);
@@ -13467,7 +13560,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
      */
     this.floatLabel = "auto";
     new HoverController$1(this, {
-      callback: () => this.classList.toggle("-no-animate", false)
+      callback: () => setCustomState$1(this, "-no-animate", false)
     });
   }
   /** A reference to the element used to anchor dropdown menus. */
@@ -13484,16 +13577,16 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
    */
   notifyControlStateChange(checkValidity = false) {
     this._required = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.required === true;
-    this.classList.toggle("-required", this._required);
-    this.classList.toggle("-disabled", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled === true);
-    this.classList.toggle("-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") {
-      this.classList.toggle("-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);
     }
-    this.classList.toggle("-invalid", this._invalid);
+    setCustomState$1(this, "-invalid", this._invalid);
     this._validationMessage = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.validationMessage ?? "";
     if (!this.isUpdatePending) {
       this.performUpdate();
@@ -13503,7 +13596,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
   connectedCallback() {
     super.connectedCallback();
     // Label animations are disabled on initial paint.
-    this.classList.toggle("-no-animate", true);
+    setCustomState$1(this, "-no-animate", true);
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -13564,15 +13657,15 @@ _M3eFormFieldElement_handleLabelSlotChange = function _M3eFormFieldElement_handl
   const assignedElements = e.target.assignedElements({
     flatten: true
   });
-  this.classList.toggle("-with-label", assignedElements.length > 0);
+  setCustomState$1(this, "-with-label", assignedElements.length > 0);
   this._pseudoLabel = assignedElements[0]?.textContent ?? "";
 };
 _M3eFormFieldElement_handlePrefixSlotChange = function _M3eFormFieldElement_handlePrefixSlotChange(e) {
-  this.classList.toggle("-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) {
-  this.classList.toggle("-with-suffix", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-suffix", hasAssignedNodes$1(e.target));
 };
 _M3eFormFieldElement_handlePrefixResize = function _M3eFormFieldElement_handlePrefixResize() {
   if (this.variant === "outlined") {
@@ -13624,8 +13717,8 @@ _M3eFormFieldElement_changeControl = function _M3eFormFieldElement_changeControl
   } else {
     this._base.style.removeProperty("--_form-field-cursor");
   }
-  this.classList.toggle("-with-select", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName === "M3E-SELECT");
-  if (this.classList.contains("-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")) {
@@ -13677,18 +13770,18 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(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(.-float-label).-with-label input::placeholder, m3e-form-field[float-label="auto"]:not(.-float-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; } }`.toString());
+    lightDomStyle.replaceSync(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; } }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
   }
 })();
 /** 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(.-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(: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}, 
         font-size ${DesignToken$1.motion.duration.short4}, 
-        line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(.-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(.-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(: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}, 
         margin-top ${DesignToken$1.motion.duration.short4}, 
-        margin-bottom ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-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: initial; 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(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-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"].-required:not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-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(.-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"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-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(.-float-label):not(.-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(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-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(.-float-label):not(.-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(.-disabled):not(:focus-within):not(.-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(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-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(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-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(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(.-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(.-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(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-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(: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; } }`;
 __decorate([e$4(".base")], M3eFormFieldElement.prototype, "_base", void 0);
 __decorate([e$4(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
 __decorate([e$4(".error")], M3eFormFieldElement.prototype, "_error", void 0);
@@ -13713,7 +13806,7 @@ __decorate([n$1({
   attribute: "float-label",
   reflect: true
 })], M3eFormFieldElement.prototype, "floatLabel", void 0);
-M3eFormFieldElement = __decorate([t$3("m3e-form-field")], M3eFormFieldElement);
+M3eFormFieldElement = __decorate([element$1("m3e-form-field")], M3eFormFieldElement);
 
 /**
  * A heading to a page or section.
@@ -13900,7 +13993,7 @@ __decorate([n$1({
 __decorate([n$1({
   type: Number
 })], M3eHeadingElement.prototype, "level", void 0);
-M3eHeadingElement = __decorate([t$3("m3e-heading")], M3eHeadingElement);
+M3eHeadingElement = __decorate([element$1("m3e-heading")], M3eHeadingElement);
 
 /**
  * A small symbol used to easily identify an action or category.
@@ -14014,7 +14107,7 @@ __decorate([n$1({
   attribute: "optical-size",
   type: Number
 })], M3eIconElement.prototype, "opticalSize", void 0);
-M3eIconElement = __decorate([t$3("m3e-icon")], M3eIconElement);
+M3eIconElement = __decorate([element$1("m3e-icon")], M3eIconElement);
 
 /**
  * Component design tokens that control the `M3eIconButtonElement` for all size variants.
@@ -14110,7 +14203,7 @@ const IconButtonSizeToken = {
 
 /** @private */
 function iconButtonStyle(size) {
-  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${IconButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${IconButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness}); outline-width: ${IconButtonSizeToken[size].outlineThickness}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); }`;
+  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${IconButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${IconButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness}); outline-width: ${IconButtonSizeToken[size].outlineThickness}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${unsafeCSS(size)}"]:state(-pressed)) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); } :host(:state(-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:state(-connected)[size="${unsafeCSS(size)}"]:state(-pressed)) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); }`;
 }
 /**
  * Size variant styles for `M3eIconButtonElement`.
@@ -14122,8 +14215,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(.-pressed) .base, :host(.-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(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${DesignToken$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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`;
+const IconButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken$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(-adjacent-pressed):not(:state(-pressed))) .label { text-overflow: clip; } :host(:state(-grouped):not(:state(-connected)):state(-pressed):not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: border-radius ${DesignToken$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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .wrapper, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
@@ -14529,7 +14622,7 @@ const IconButtonVariantToken = {
 
 /** @private */
 function iconButtonVariantStyle(variant) {
-  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.containerColor} ${IconButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
+  return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.iconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor}; } :host( [variant="${unsafeCSS(variant)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${IconButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.containerColor} ${IconButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
 }
 /**
  * Appearance variant styles for `M3eIconButtonElement`.
@@ -14913,7 +15006,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   }
   /** Whether the button is contained by a button group. */
   get grouped() {
-    return this.classList.contains("-grouped");
+    return hasCustomState$1(this, "-grouped");
   }
   /** @inheritdoc */
   render() {
@@ -14927,11 +15020,11 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => this.classList.remove(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");
-    this.classList.remove("-adjacent-pressed");
+    deleteCustomState$1(this, "-adjacent-pressed");
     this.removeEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
   }
   /** @inheritdoc */
@@ -14943,8 +15036,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) {
-      this.classList.toggle("-pressed", false);
-      this.classList.toggle("-resting", false);
+      deleteCustomState$1(this, "-pressed");
+      deleteCustomState$1(this, "-resting");
     }
     if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
       this.ariaPressed = this.toggle ? `${this.selected}` : null;
@@ -14957,7 +15050,7 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
   }
   /** @private */
   _handleResize() {
-    if (this.grouped && !this.classList.contains("-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);
     }
@@ -14976,8 +15069,8 @@ _M3eIconButtonElement_updateButtonShape = function _M3eIconButtonElement_updateB
   }
 };
 _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handlePressedChange(pressed) {
-  this.classList.toggle("-pressed", pressed);
-  this.classList.toggle("-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;
@@ -14987,13 +15080,13 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
       const button = buttons[i];
       if (i === index - 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        button.classList.toggle("-adjacent-pressed", pressed);
+        setCustomState$1(button, "-adjacent-pressed", pressed);
       } else if (i === index + 1) {
         button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-        button.classList.toggle("-adjacent-pressed", pressed);
+        setCustomState$1(button, "-adjacent-pressed", pressed);
       } else {
         button.style.removeProperty("--_adjacent-button-width");
-        button.classList.remove("-adjacent-pressed");
+        deleteCustomState$1(button, "-adjacent-pressed");
       }
     }
   }
@@ -15051,7 +15144,7 @@ __decorate([n$1({
   reflect: true
 })], M3eIconButtonElement.prototype, "selected", void 0);
 __decorate([debounce$1(40)], M3eIconButtonElement.prototype, "_handleResize", null);
-M3eIconButtonElement = __decorate([t$3("m3e-icon-button")], M3eIconButtonElement);
+M3eIconButtonElement = __decorate([element$1("m3e-icon-button")], M3eIconButtonElement);
 
 var _M3eListItemElement_instances, _M3eListItemElement_resizeController, _M3eListItemElement_leadingContentType, _M3eListItemElement_trailingContentType, _M3eListItemElement_updateMultiline, _M3eListItemElement_getSlotContentType;
 /**
@@ -15137,7 +15230,7 @@ var _M3eListItemElement_instances, _M3eListItemElement_resizeController, _M3eLis
  * @cssprop --m3e-list-item-two-line-height - Minimum height of a two line list item.
  * @cssprop --m3e-list-item-three-line-height - Minimum height of a three line list item.
  */
-let M3eListItemElement = class M3eListItemElement extends Role$1(LitElement, "listitem") {
+let M3eListItemElement = class M3eListItemElement extends AttachInternals$1(Role$1(LitElement, "listitem")) {
   constructor() {
     super(...arguments);
     _M3eListItemElement_instances.add(this);
@@ -15179,7 +15272,7 @@ let M3eListItemElement = class M3eListItemElement extends Role$1(LitElement, "li
   _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");
-    this.classList.toggle("-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"));
     }
@@ -15188,7 +15281,7 @@ let M3eListItemElement = class M3eListItemElement extends Role$1(LitElement, "li
   _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");
-    this.classList.toggle("-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"));
     }
@@ -15201,9 +15294,9 @@ _M3eListItemElement_instances = new WeakSet();
 _M3eListItemElement_updateMultiline = function _M3eListItemElement_updateMultiline() {
   const content = this.shadowRoot?.querySelector(".content") ?? null;
   const lines = content === null ? 0 : computeLineCount$1(content);
-  this.classList.toggle("-one-line", lines <= 1);
-  this.classList.toggle("-two-line", lines == 2);
-  this.classList.toggle("-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({
@@ -15216,8 +15309,8 @@ _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(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-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(.-two-line) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-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(.-three-line) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-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(.-three-line)) .base { align-items: center; } :host(.-three-line) .base { align-items: flex-start; } :host(:not(:disabled):not([selected]:not(:hover))) .base.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]):hover) .base, :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(.-has-leading) slot[name="leading"], :host(.-has-trailing) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(.-has-leading)) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(.-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) { :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([t$3("m3e-list-item")], M3eListItemElement);
+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) { :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([element$1("m3e-list-item")], M3eListItemElement);
 
 var _M3eListElement_instances, _M3eListElement_items, _M3eListElement_leadingContentTypes, _M3eListElement_trailingContentTypes, _M3eListElement_handleSlotChange;
 /**
@@ -15264,7 +15357,7 @@ var _M3eListElement_instances, _M3eListElement_items, _M3eListElement_leadingCon
  * @cssprop --m3e-segmented-list-item-focus-container-shape - Border radius of items in segmented variant on focus.
  * @cssprop --m3e-segmented-list-item-selected-container-shape - Border radius of items in segmented variant when selected.
  */
-let M3eListElement = class M3eListElement extends Role$1(LitElement, "list") {
+let M3eListElement = class M3eListElement extends AttachInternals$1(Role$1(LitElement, "list")) {
   constructor() {
     super(...arguments);
     _M3eListElement_instances.add(this);
@@ -15325,7 +15418,7 @@ let M3eListElement = class M3eListElement extends Role$1(LitElement, "list") {
       __classPrivateFieldGet(this, _M3eListElement_leadingContentTypes, "f")[newType]++;
     }
     ["video", "image", "avatar", "icon"].forEach(x => {
-      this.classList.toggle(`-has-leading-${x}`, this.leadingContentType === x);
+      setCustomState$1(this, `-has-leading-${x}`, this.leadingContentType === x);
     });
   }
   /**
@@ -15340,7 +15433,7 @@ let M3eListElement = class M3eListElement extends Role$1(LitElement, "list") {
       __classPrivateFieldGet(this, _M3eListElement_trailingContentTypes, "f")[newType]--;
     }
     ["video", "image", "avatar", "icon"].forEach(x => {
-      this.classList.toggle(`-has-trailing-${x}`, this.trailingContentType === x);
+      setCustomState$1(this, `-has-trailing-${x}`, this.trailingContentType === x);
     });
   }
 };
@@ -15353,17 +15446,17 @@ _M3eListElement_handleSlotChange = function _M3eListElement_handleSlotChange(e)
     flatten: true
   }).filter(x => x instanceof M3eListItemElement), "f");
   __classPrivateFieldGet(this, _M3eListElement_items, "f").forEach((x, i) => {
-    x.classList.toggle("-first", i === 0);
-    x.classList.toggle("-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(.-first), :host([variant="segmented"]) ::slotted(.-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(.-has-next-open:not([open])), :host([variant="segmented"]) ::slotted(.-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(.-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"].-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(.-has-leading-image) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(.-has-leading-avatar) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(.-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(: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); }`;
 __decorate([n$1({
   reflect: true
 })], M3eListElement.prototype, "variant", void 0);
-M3eListElement = __decorate([t$3("m3e-list")], M3eListElement);
+M3eListElement = __decorate([element$1("m3e-list")], M3eListElement);
 
 var _M3eExpandableListItemElement_instances, _M3eExpandableListItemElement_id, _M3eExpandableListItemElement_contentId, _M3eExpandableListItemElement_headerId, _M3eExpandableListItemElement_items, _M3eExpandableListItemElement_handleHeaderClick, _M3eExpandableListItemElement_handleCollapsibleEvent, _M3eExpandableListItemElement_handleSlotChange;
 var M3eExpandableListItemElement_1;
@@ -15525,13 +15618,13 @@ let M3eExpandableListItemElement = M3eExpandableListItemElement_1 = class M3eExp
     if (_changedProperties.has("open")) {
       for (let sibling = this.previousElementSibling; sibling; sibling = sibling.previousElementSibling) {
         if (sibling instanceof M3eListItemElement) {
-          sibling.classList.toggle("-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) {
-          sibling.classList.toggle("-has-previous-open", this.open);
+          setCustomState$1(sibling, "-has-previous-open", this.open);
           break;
         }
       }
@@ -15590,7 +15683,7 @@ __decorate([n$1({
   reflect: true
 })], M3eExpandableListItemElement.prototype, "open", void 0);
 __decorate([e$4(".header")], M3eExpandableListItemElement.prototype, "button", void 0);
-M3eExpandableListItemElement = M3eExpandableListItemElement_1 = __decorate([t$3("m3e-expandable-list-item")], M3eExpandableListItemElement);
+M3eExpandableListItemElement = M3eExpandableListItemElement_1 = __decorate([element$1("m3e-expandable-list-item")], M3eExpandableListItemElement);
 
 var _M3eActionListElement_keyDownHandler, _a$8;
 /**
@@ -15675,7 +15768,7 @@ let M3eActionListElement = class M3eActionListElement extends M3eListElement {
 };
 _M3eActionListElement_keyDownHandler = new WeakMap();
 _a$8 = selectionManager;
-M3eActionListElement = __decorate([t$3("m3e-action-list")], M3eActionListElement);
+M3eActionListElement = __decorate([element$1("m3e-action-list")], M3eActionListElement);
 
 var _M3eListActionElement_instances, _M3eListActionElement_handleClick;
 /**
@@ -15798,7 +15891,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eListActionElement.prototype, "disabled", void 0);
-M3eListActionElement = __decorate([t$3("m3e-list-action")], M3eListActionElement);
+M3eListActionElement = __decorate([element$1("m3e-list-action")], M3eListActionElement);
 
 /**
  * @internal
@@ -15813,6 +15906,9 @@ let M3eListItemButtonElement = class M3eListItemButtonElement extends KeyboardCl
     new PressedController$1(this, {
       callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
     });
+    new HoverController$1(this, {
+      callback: hovering => this.shadowRoot?.querySelector(".base")?.classList.toggle("hover", hovering)
+    });
   }
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
@@ -15829,7 +15925,7 @@ M3eListItemButtonElement.styles = [M3eListItemElement.styles, css`:host { outlin
 __decorate([e$4(".focus-ring")], M3eListItemButtonElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eListItemButtonElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eListItemButtonElement.prototype, "_ripple", void 0);
-M3eListItemButtonElement = __decorate([t$3("m3e-list-item-button")], M3eListItemButtonElement);
+M3eListItemButtonElement = __decorate([element$1("m3e-list-item-button")], M3eListItemButtonElement);
 
 var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOptionElement_textContent, _M3eListOptionElement_clickHandler, _M3eListOptionElement_handleSlotChange, _M3eListOptionElement_handleClick;
 /**
@@ -15944,6 +16040,9 @@ let M3eListOptionElement = class M3eListOptionElement extends KeyboardClick$1(Fo
     new PressedController$1(this, {
       callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
     });
+    new HoverController$1(this, {
+      callback: hovering => this.shadowRoot?.querySelector(".base")?.classList.toggle("hover", hovering)
+    });
   }
   /** A string representing the value of the option. */
   get value() {
@@ -16010,12 +16109,12 @@ _M3eListOptionElement_handleClick = function _M3eListOptionElement_handleClick(e
   }
 };
 /** 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(.-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)) .base { 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(.-hide-selection) .indicator, :host(:not(.-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(: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)) .base { 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; } }`];
 __decorate([e$4(".focus-ring")], M3eListOptionElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eListOptionElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eListOptionElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eListOptionElement.prototype, "value", null);
-M3eListOptionElement = __decorate([t$3("m3e-list-option")], M3eListOptionElement);
+M3eListOptionElement = __decorate([element$1("m3e-list-option")], M3eListOptionElement);
 
 var _M3eSelectionListElement_instances, _M3eSelectionListElement_keyDownHandler, _M3eSelectionListElement_changeHandler, _M3eSelectionListElement_handleChange, _a$7;
 /**
@@ -16132,7 +16231,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 => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
+      this[selectionManager].items.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -16140,7 +16239,7 @@ let M3eSelectionListElement = class M3eSelectionListElement extends Labelled$1(D
     const {
       added
     } = this[selectionManager].setItems(this.items.filter(x => x instanceof M3eListOptionElement));
-    added.forEach(x => x.classList.toggle("-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));
     }
@@ -16162,7 +16261,7 @@ __decorate([n$1({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eSelectionListElement.prototype, "hideSelectionIndicator", void 0);
-M3eSelectionListElement = __decorate([t$3("m3e-selection-list")], M3eSelectionListElement);
+M3eSelectionListElement = __decorate([element$1("m3e-selection-list")], M3eSelectionListElement);
 
 const LoadingIndicatorToken = {
   activeIndicatorSize: unsafeCSS(`var(--m3e-loading-indicator-size, 2.375rem)`),
@@ -16262,7 +16361,7 @@ __decorate([e$4(".active-indicator")], M3eLoadingIndicatorElement.prototype, "_a
 __decorate([n$1({
   reflect: true
 })], M3eLoadingIndicatorElement.prototype, "variant", void 0);
-M3eLoadingIndicatorElement = __decorate([t$3("m3e-loading-indicator")], M3eLoadingIndicatorElement);
+M3eLoadingIndicatorElement = __decorate([element$1("m3e-loading-indicator")], M3eLoadingIndicatorElement);
 
 /** A base implementation for an item of a menu. This class must be inherited. */
 class MenuItemElementBase extends KeyboardClick$1(Focusable$1(AttachInternals$1(Disabled$1(LitElement), true))) {
@@ -16291,7 +16390,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):not([aria-expanded="true"])) .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(.-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(.-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(.-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(.-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):not([aria-expanded="true"])) .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; } }`;
 __decorate([e$4(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
@@ -16399,7 +16498,7 @@ let M3eMenuTriggerElement = class M3eMenuTriggerElement extends HtmlFor$1(Action
     }
   }
 };
-M3eMenuTriggerElement = __decorate([t$3("m3e-menu-trigger")], M3eMenuTriggerElement);
+M3eMenuTriggerElement = __decorate([element$1("m3e-menu-trigger")], M3eMenuTriggerElement);
 
 var _M3eMenuItemElement_instances, _M3eMenuItemElement_clickHandler, _M3eMenuItemElement_keyDownHandler, _M3eMenuItemElement_mouseEnterHandler, _M3eMenuItemElement_submenuTrigger, _M3eMenuItemElement_defaultSlotChangeHandler, _M3eMenuItemElement_iconSlotChangeHandler, _M3eMenuItemElement_trailingIconSlotChangeHandler, _M3eMenuItemElement_handleClick, _M3eMenuItemElement_handleKeyDown, _M3eMenuItemElement_handleMouseEnter;
 var M3eMenuItemElement_1;
@@ -16569,10 +16668,10 @@ _M3eMenuItemElement_defaultSlotChangeHandler = function _M3eMenuItemElement_defa
   this._hasSubmenu = __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f") !== undefined;
 };
 _M3eMenuItemElement_iconSlotChangeHandler = function _M3eMenuItemElement_iconSlotChangeHandler(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemElement_trailingIconSlotChangeHandler = function _M3eMenuItemElement_trailingIconSlotChangeHandler(e) {
-  this.classList.toggle("-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) {
@@ -16606,7 +16705,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
   });
 };
 __decorate([r$1()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
-M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([t$3("m3e-menu-item")], M3eMenuItemElement);
+M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([element$1("m3e-menu-item")], M3eMenuItemElement);
 
 var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
 var M3eMenuElement_1;
@@ -16687,7 +16786,7 @@ var M3eMenuElement_1;
  * @cssprop --m3e-menu-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.
  * @cssprop --m3e-menu-gap - Gap between content in the menu.
  */
-let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitElement, "menu") {
+let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends AttachInternals$1(Role$1(LitElement, "menu")) {
   constructor() {
     super(...arguments);
     _M3eMenuElement_instances.add(this);
@@ -16749,7 +16848,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitE
   connectedCallback() {
     super.connectedCallback();
     this.tabIndex = -1;
-    this.classList.add("-no-animate");
+    addCustomState$1(this, "-no-animate");
     this.setAttribute("popover", "manual");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
     this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuElement_mouseEnterHandler, "f"));
@@ -16786,13 +16885,13 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitE
       offset: !this.submenu ? 4 : undefined
     }, (x, y, position) => {
       if (!this.submenu) {
-        this.classList.toggle("-top", position.includes("top"));
-        this.classList.toggle("-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;
-        this.classList.toggle("-shift-down", false);
-        this.classList.toggle("-shift-up", false);
-        this.classList.toggle(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`;
@@ -16869,14 +16968,16 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitE
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => this.classList.remove("-no-animate"));
+    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
   }
   /** @internal */
   _activate() {
     if (this !== M3eMenuElement_1.__activeMenu) {
-      M3eMenuElement_1.__activeMenu?.classList.remove("-active");
+      if (M3eMenuElement_1.__activeMenu) {
+        deleteCustomState$1(M3eMenuElement_1.__activeMenu, "-active");
+      }
       M3eMenuElement_1.__activeMenu = this;
-      M3eMenuElement_1.__activeMenu?.classList.add("-active");
+      addCustomState$1(M3eMenuElement_1.__activeMenu, "-active");
     }
   }
 };
@@ -16897,8 +16998,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) => {
-    x.classList.toggle("-first", i === 0);
-    x.classList.toggle("-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) {
@@ -16956,23 +17057,23 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
 };
 _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   if (this === M3eMenuElement_1.__activeMenu) {
-    M3eMenuElement_1.__activeMenu.classList.remove("-active");
+    deleteCustomState$1(M3eMenuElement_1.__activeMenu, "-active");
     M3eMenuElement_1.__activeMenu = undefined;
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
   }
 })();
 /** 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(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(:not(.-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(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(.-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(: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}, 
         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(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } :host(.-shift-down) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(.-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(.-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(: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; } }`;
 __decorate([n$1({
   attribute: "position-x"
 })], M3eMenuElement.prototype, "positionX", void 0);
@@ -16986,7 +17087,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eMenuElement.prototype, "submenu", void 0);
-M3eMenuElement = M3eMenuElement_1 = __decorate([t$3("m3e-menu")], M3eMenuElement);
+M3eMenuElement = M3eMenuElement_1 = __decorate([element$1("m3e-menu")], M3eMenuElement);
 
 var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHandler, _M3eMenuItemCheckboxElement_keyDownHandler, _M3eMenuItemCheckboxElement_keyUpHandler, _M3eMenuItemCheckboxElement_mouseEnterHandler, _M3eMenuItemCheckboxElement_spacePressed, _M3eMenuItemCheckboxElement_handleIconSlotChange, _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange, _M3eMenuItemCheckboxElement_handleClick, _M3eMenuItemCheckboxElement_handleKeyDown, _M3eMenuItemCheckboxElement_handleKeyUp, _M3eMenuItemCheckboxElement_handleMouseEnter;
 /**
@@ -17105,10 +17206,10 @@ _M3eMenuItemCheckboxElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemCheckboxElement_spacePressed = new WeakMap();
 _M3eMenuItemCheckboxElement_instances = new WeakSet();
 _M3eMenuItemCheckboxElement_handleIconSlotChange = function _M3eMenuItemCheckboxElement_handleIconSlotChange(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange = function _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange(e) {
-  this.classList.toggle("-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) {
@@ -17137,8 +17238,8 @@ _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(.-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([t$3("m3e-menu-item-checkbox")], M3eMenuItemCheckboxElement);
+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 = __decorate([element$1("m3e-menu-item-checkbox")], M3eMenuItemCheckboxElement);
 
 /**
  * Groups related items (such a radios) in a menu.
@@ -17160,7 +17261,7 @@ let M3eMenuItemGroupElement = class M3eMenuItemGroupElement extends Role$1(LitEl
 };
 /** The styles of the element. */
 M3eMenuItemGroupElement.styles = css`:host { display: contents; }`;
-M3eMenuItemGroupElement = __decorate([t$3("m3e-menu-item-group")], M3eMenuItemGroupElement);
+M3eMenuItemGroupElement = __decorate([element$1("m3e-menu-item-group")], M3eMenuItemGroupElement);
 
 var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _M3eMenuItemRadioElement_keyDownHandler, _M3eMenuItemRadioElement_keyUpHandler, _M3eMenuItemRadioElement_mouseEnterHandler, _M3eMenuItemRadioElement_spacePressed, _M3eMenuItemRadioElement_handleIconSlotChange, _M3eMenuItemRadioElement_handleTrailingIconSlotChange, _M3eMenuItemRadioElement_handleClick, _M3eMenuItemRadioElement_handleKeyDown, _M3eMenuItemRadioElement_handleKeyUp, _M3eMenuItemRadioElement_handleMouseEnter;
 /**
@@ -17289,10 +17390,10 @@ _M3eMenuItemRadioElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemRadioElement_spacePressed = new WeakMap();
 _M3eMenuItemRadioElement_instances = new WeakSet();
 _M3eMenuItemRadioElement_handleIconSlotChange = function _M3eMenuItemRadioElement_handleIconSlotChange(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
 };
 _M3eMenuItemRadioElement_handleTrailingIconSlotChange = function _M3eMenuItemRadioElement_handleTrailingIconSlotChange(e) {
-  this.classList.toggle("-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) {
@@ -17322,7 +17423,7 @@ _M3eMenuItemRadioElement_handleMouseEnter = function _M3eMenuItemRadioElement_ha
 };
 /** The styles of the element. */
 M3eMenuItemRadioElement.styles = M3eMenuItemCheckboxElement.styles;
-M3eMenuItemRadioElement = __decorate([t$3("m3e-menu-item-radio")], M3eMenuItemRadioElement);
+M3eMenuItemRadioElement = __decorate([element$1("m3e-menu-item-radio")], M3eMenuItemRadioElement);
 
 var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavBarElement_handleSlotChange, _M3eNavBarElement_handleChange, _a$6;
 /**
@@ -17356,7 +17457,7 @@ var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavB
  * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.
  * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.
  */
-let M3eNavBarElement = class M3eNavBarElement extends Role$1(LitElement, "navigation") {
+let M3eNavBarElement = class M3eNavBarElement extends AttachInternals$1(Role$1(LitElement, "navigation")) {
   constructor() {
     super(...arguments);
     _M3eNavBarElement_instances.add(this);
@@ -17418,7 +17519,7 @@ let M3eNavBarElement = class M3eNavBarElement extends Role$1(LitElement, "naviga
   _updateItems() {
     const orientation = this.currentMode === "compact" ? "vertical" : "horizontal";
     this._updateOrientation(orientation);
-    this.classList.toggle("-compact", orientation === "vertical");
+    setCustomState$1(this, "-compact", orientation === "vertical");
   }
   /** @internal */
   _updateOrientation(orientation) {
@@ -17444,7 +17545,7 @@ __decorate([r$1()], M3eNavBarElement.prototype, "_mode", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eNavBarElement.prototype, "mode", void 0);
-M3eNavBarElement = __decorate([t$3("m3e-nav-bar")], M3eNavBarElement);
+M3eNavBarElement = __decorate([element$1("m3e-nav-bar")], M3eNavBarElement);
 
 var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemElement_handleClick;
 /**
@@ -17601,7 +17702,7 @@ __decorate([e$4(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eNavItemElement.prototype, "orientation", void 0);
-M3eNavItemElement = __decorate([t$3("m3e-nav-item")], M3eNavItemElement);
+M3eNavItemElement = __decorate([element$1("m3e-nav-item")], M3eNavItemElement);
 
 var _M3eNavMenuItemElement_instances, _M3eNavMenuItemElement_items, _M3eNavMenuItemElement_menu, _M3eNavMenuItemElement_path, _M3eNavMenuItemElement_link, _M3eNavMenuItemElement_renderIcon, _M3eNavMenuItemElement_handleIconSlotChange, _M3eNavMenuItemElement_handleSlotChange, _M3eNavMenuItemElement_handleItemSlotChange, _M3eNavMenuItemElement_handleClick, _M3eNavMenuItemElement_handleCollapsibleEvent;
 var M3eNavMenuItemElement_1;
@@ -17862,7 +17963,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) {
-  this.classList.toggle("-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({
@@ -17876,7 +17977,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;
-  this.classList.toggle("-has-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);
   }
@@ -17890,8 +17991,8 @@ _M3eNavMenuItemElement_handleClick = function _M3eNavMenuItemElement_handleClick
     __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f")?.click();
     const drawerContainer = this.closest("m3e-drawer-container");
     if (drawerContainer) {
-      const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end')");
-      if (drawer && (drawerContainer.classList.contains(`-${drawer.slot}-push`) || drawerContainer.classList.contains(`-${drawer.slot}-over`))) {
+      const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end']");
+      if (drawer && (hasCustomState$1(drawerContainer, `-${drawer.slot}-push`) || hasCustomState$1(drawerContainer, `-${drawer.slot}-over`))) {
         setTimeout(() => {
           drawerContainer.removeAttribute(drawer.slot);
           drawerContainer.dispatchEvent(new Event("change", {
@@ -17911,7 +18012,7 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
   }));
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
@@ -17920,7 +18021,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(.-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(.-has-items)) .toggle, :host(:not(.-has-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(.-has-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(.-has-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].-has-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([selected]):not(:disabled)) .base { color: ButtonText; } :host([selected]:not(.-has-items):not(:disabled)) .base { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([selected].-has-items:not(:disabled)) .base { background-color: unset; color: ButtonText; } }`;
+        ${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([selected]):not(:disabled)) .base { color: ButtonText; } :host([selected]:not(:state(-with-items)):not(:disabled)) .base { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([selected]:state(-with-items):not(:disabled)) .base { background-color: unset; color: ButtonText; } }`;
 __decorate([e$4(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
 __decorate([e$4(".focus-ring")], M3eNavMenuItemElement.prototype, "focusRing", void 0);
 __decorate([e$4(".ripple")], M3eNavMenuItemElement.prototype, "ripple", void 0);
@@ -17930,7 +18031,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eNavMenuItemElement.prototype, "open", void 0);
-M3eNavMenuItemElement = M3eNavMenuItemElement_1 = __decorate([t$3("m3e-nav-menu-item")], M3eNavMenuItemElement);
+M3eNavMenuItemElement = M3eNavMenuItemElement_1 = __decorate([element$1("m3e-nav-menu-item")], M3eNavMenuItemElement);
 
 var _M3eNavMenuElement_instances, _M3eNavMenuElement_ignoreFocusVisible, _M3eNavMenuElement_ignoreFocus, _M3eNavMenuElement_keyDownHandler, _M3eNavMenuElement_keyUpHandler, _M3eNavMenuElement_pointerDownHandler, _M3eNavMenuElement_handleSlotChange, _M3eNavMenuElement_handleKeyDown, _M3eNavMenuElement_handleKeyUp, _M3eNavMenuElement_handlePointerDown, _M3eNavMenuElement_activateItem, _M3eNavMenuElement_updateFocusVisible, _M3eNavMenuElement_updateItemFocusVisible, _b;
 var M3eNavMenuElement_1;
@@ -18139,7 +18240,7 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
         item.ripple.show(0, 0, true);
       }
       if (item.hasChildItems) {
-        item.toggle();
+        requestAnimationFrame(() => item.toggle());
       } else if (!item.selected) {
         this[selectionManager].select(item);
         item.link?.click();
@@ -18154,12 +18255,14 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
       e.preventDefault();
       if (M3eDirectionality.current === "ltr") {
         if (item.hasChildItems && item.open) {
-          item.collapse();
+          requestAnimationFrame(() => item.collapse());
         } else {
           const parent = item.parentItem;
           if (parent) {
-            parent.collapse();
-            this[selectionManager].setActiveItem(parent);
+            requestAnimationFrame(() => {
+              parent.collapse();
+              this[selectionManager].setActiveItem(parent);
+            });
           }
         }
       } else if (item.hasChildItems && !item.open) {
@@ -18171,12 +18274,14 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
       e.preventDefault();
       if (M3eDirectionality.current === "rtl") {
         if (item.hasChildItems && item.open) {
-          item.collapse();
+          requestAnimationFrame(() => item.collapse());
         } else {
           const parent = item.parentItem;
           if (parent) {
-            parent.collapse();
-            this[selectionManager].setActiveItem(parent);
+            requestAnimationFrame(() => {
+              parent.collapse();
+              this[selectionManager].setActiveItem(parent);
+            });
           }
         }
       } else if (item.hasChildItems && !item.open) {
@@ -18234,7 +18339,7 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
@@ -18244,7 +18349,7 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
 M3eNavMenuElement.styles = css`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken$1.scrollbar.width}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
 /** @private */
 M3eNavMenuElement.__nextId = 0;
-M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([t$3("m3e-nav-menu")], M3eNavMenuElement);
+M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([element$1("m3e-nav-menu")], M3eNavMenuElement);
 
 var _M3eNavMenuItemGroupElement_instances, _M3eNavMenuItemGroupElement_labelId, _M3eNavMenuItemGroupElement_label, _M3eNavMenuItemGroupElement_handleLabelSlotChange;
 var M3eNavMenuItemGroupElement_1;
@@ -18290,7 +18395,7 @@ var M3eNavMenuItemGroupElement_1;
  * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.
  * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.
  */
-let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenuItemGroupElement extends Role$1(LitElement, "group") {
+let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenuItemGroupElement extends AttachInternals$1(Role$1(LitElement, "group")) {
   constructor() {
     super(...arguments);
     _M3eNavMenuItemGroupElement_instances.add(this);
@@ -18302,12 +18407,12 @@ let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenu
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.toggle("-divided", this.previousElementSibling?.tagName === "M3E-DIVIDER");
+    setCustomState$1(this, "-divided", this.previousElementSibling?.tagName === "M3E-DIVIDER");
   }
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.classList.remove("-divided");
+    deleteCustomState$1(this, "-divided");
   }
   /** @inheritdoc */
   render() {
@@ -18335,13 +18440,13 @@ _M3eNavMenuItemGroupElement_handleLabelSlotChange = function _M3eNavMenuItemGrou
       this.removeAttribute("aria-labelledby");
     }
   }
-  this.classList.toggle("-has-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(.-has-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(.-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(.-divided)) .label { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`;
+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); }`;
 /** @private */
 M3eNavMenuItemGroupElement.__nextId = 0;
-M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = __decorate([t$3("m3e-nav-menu-item-group")], M3eNavMenuItemGroupElement);
+M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = __decorate([element$1("m3e-nav-menu-item-group")], M3eNavMenuItemGroupElement);
 
 var _M3eNavRailElement_instances, _M3eNavRailElement_focusKeyManager, _M3eNavRailElement_keyDownHandler, _M3eNavRailElement_handleKeyDown;
 /**
@@ -18440,15 +18545,15 @@ _M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e)
   __classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").onKeyDown(e);
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(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(.-compact) > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-expanded-icon-button-inset, 0.5rem); }`.toString());
+    lightDomStyle.replaceSync(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); }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
   }
 })();
 /** 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(.-compact) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(.-compact) ::slotted(m3e-fab) { align-self: center; } :host(:not(.-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(.-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(.-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 = __decorate([t$3("m3e-nav-rail")], M3eNavRailElement);
+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 = __decorate([element$1("m3e-nav-rail")], M3eNavRailElement);
 
 var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_mutationController, _M3eNavRailToggleElement_updateToggle;
 /**
@@ -18539,7 +18644,7 @@ async function _M3eNavRailToggleElement_updateToggle() {
     this.parentElement.ariaPressed = null;
   }
 };
-M3eNavRailToggleElement = __decorate([t$3("m3e-nav-rail-toggle")], M3eNavRailToggleElement);
+M3eNavRailToggleElement = __decorate([element$1("m3e-nav-rail-toggle")], M3eNavRailToggleElement);
 
 var _M3eOptionElement_instances, _M3eOptionElement_value, _M3eOptionElement_textContent, _M3eOptionElement_handleSlotChange;
 /**
@@ -18585,9 +18690,8 @@ var _M3eOptionElement_instances, _M3eOptionElement_value, _M3eOptionElement_text
  * @cssprop --m3e-option-selected-shape - Shape used for a selected option.
  * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.
  * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.
-
  */
-let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Role$1(LitElement, "option"))) {
+let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(AttachInternals$1(Role$1(LitElement, "option")))) {
   constructor() {
     super(...arguments);
     _M3eOptionElement_instances.add(this);
@@ -18642,15 +18746,15 @@ let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Role
 };
 _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eOptionElement_textContent, getTextContent$1(e.target), "f");
-  this.classList.toggle("-empty", this.isEmpty);
+  setCustomState$1(this, "-empty", this.isEmpty);
 };
 /** 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(.-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(.-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(.-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(.-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(.-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(.-empty) .icon, :host(.-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(: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; } }`;
 __decorate([e$4(".focus-ring")], M3eOptionElement.prototype, "focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eOptionElement.prototype, "value", null);
-M3eOptionElement = __decorate([t$3("m3e-option")], M3eOptionElement);
+M3eOptionElement = __decorate([element$1("m3e-option")], M3eOptionElement);
 
 var _M3eOptGroupElement_instances, _M3eOptGroupElement_labelId, _M3eOptGroupElement_label, _M3eOptGroupElement_handleLabelSlotChange;
 var M3eOptGroupElement_1;
@@ -18717,7 +18821,7 @@ _M3eOptGroupElement_handleLabelSlotChange = function _M3eOptGroupElement_handleL
 M3eOptGroupElement.styles = css`:host { display: block; --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2); } .label { height: var(--m3e-option-height, 3rem); font-size: var(--m3e-option-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); padding-inline-start: var(--m3e-option-padding-start, 0.75rem); color: var(--m3e-option-color, ${DesignToken$1.color.onSurface}); flex: none; }`;
 /** @private */
 M3eOptGroupElement.__nextId = 0;
-M3eOptGroupElement = M3eOptGroupElement_1 = __decorate([t$3("m3e-optgroup")], M3eOptGroupElement);
+M3eOptGroupElement = M3eOptGroupElement_1 = __decorate([element$1("m3e-optgroup")], M3eOptGroupElement);
 
 var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_trigger, _M3eOptionPanelElement_anchor, _M3eOptionPanelElement_anchorCleanup, _M3eOptionPanelElement_documentClickHandler, _M3eOptionPanelElement_scrollController, _M3eOptionPanelElement_toggleHandler, _M3eOptionPanelElement_handleSlotChange, _M3eOptionPanelElement_handleDocumentClick;
 var M3eOptionPanelElement_1;
@@ -18748,9 +18852,8 @@ var M3eOptionPanelElement_1;
  * @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.
  * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.
  * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.
-
  */
-let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElement extends Role$1(LitElement, "listbox") {
+let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElement extends AttachInternals$1(Role$1(LitElement, "listbox")) {
   constructor() {
     super(...arguments);
     _M3eOptionPanelElement_instances.add(this);
@@ -18775,14 +18878,14 @@ let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElemen
       }
     });
   }
-  /** Whether the menu is open. */
+  /** Whether the panel is open. */
   get isOpen() {
     return __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") !== undefined;
   }
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.add("-no-animate");
+    addCustomState$1(this, "-no-animate");
     this.setAttribute("popover", "manual");
     this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eOptionPanelElement_toggleHandler, "f"));
     document.addEventListener("click", __classPrivateFieldGet(this, _M3eOptionPanelElement_documentClickHandler, "f"));
@@ -18794,10 +18897,10 @@ let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElemen
     document.removeEventListener("click", __classPrivateFieldGet(this, _M3eOptionPanelElement_documentClickHandler, "f"));
   }
   /**
-   * Opens the menu.
-   * @param {HTMLElement} trigger The element that triggered the menu.
-   * @param {HTMLElement | undefined} anchor The element used to position the menu.
-   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.
+   * Opens the panel.
+   * @param {HTMLElement} trigger The element that triggered the panel.
+   * @param {HTMLElement | undefined} anchor The element used to position the panel.
+   * @returns {Promise<void>} A `Promise` that resolves when the panel is opened.
    */
   async show(trigger, anchor) {
     if (__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") && __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") !== trigger) {
@@ -18808,8 +18911,8 @@ let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElemen
       inline: true,
       flip: true
     }, (x, y, position) => {
-      this.classList.toggle("-top", position.includes("top"));
-      this.classList.toggle("-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 = "";
@@ -18826,8 +18929,8 @@ let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElemen
     __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f"));
   }
   /**
-   * Hides the menu.
-   * @param {boolean} [restoreFocus=false] Whether to restore focus to the menu's trigger.
+   * Hides the panel.
+   * @param {boolean} [restoreFocus=false] Whether to restore focus to the panel's trigger.
    */
   hide(restoreFocus = false) {
     this.hidePopover();
@@ -18841,10 +18944,10 @@ let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElemen
     }
   }
   /**
-   * Toggles the menu.
-   * @param {HTMLElement} trigger The element that triggered the menu.
-   * @param {HTMLElement | undefined} anchor The element used to position the menu.
-   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.
+   * Toggles the panel.
+   * @param {HTMLElement} trigger The element that triggered the panel.
+   * @param {HTMLElement | undefined} anchor The element used to position the panel.
+   * @returns {Promise<void>} A `Promise` that resolves when the panel is opened or closed.
    */
   async toggle(trigger, anchor) {
     if (__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f")) {
@@ -18856,7 +18959,7 @@ let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElemen
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => this.classList.remove("-no-animate"));
+    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
   }
   /** @inheritdoc */
   render() {
@@ -18873,8 +18976,8 @@ _M3eOptionPanelElement_instances = new WeakSet();
 _M3eOptionPanelElement_handleSlotChange = function _M3eOptionPanelElement_handleSlotChange() {
   const options = [...this.querySelectorAll("m3e-option")];
   options.forEach((x, i) => {
-    x.classList.toggle("-first", i === 0);
-    x.classList.toggle("-last", i === options.length - 1);
+    setCustomState$1(x, "-first", i === 0 && !(x.parentElement instanceof M3eOptGroupElement));
+    setCustomState$1(x, "-last", i === options.length - 1);
   });
 };
 _M3eOptionPanelElement_handleDocumentClick = function _M3eOptionPanelElement_handleDocumentClick(e) {
@@ -18883,18 +18986,18 @@ _M3eOptionPanelElement_handleDocumentClick = function _M3eOptionPanelElement_han
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
   }
 })();
 /** The styles of the element. */
-M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --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; } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
+M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --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; } :host(:not(:state(-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: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(.-no-animate)) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
-M3eOptionPanelElement = M3eOptionPanelElement_1 = __decorate([t$3("m3e-option-panel")], M3eOptionPanelElement);
+        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: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } @starting-style { :host(: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; } }`;
+M3eOptionPanelElement = M3eOptionPanelElement_1 = __decorate([element$1("m3e-option-panel")], M3eOptionPanelElement);
 
 /**
  * Adapted from Angular Material Paginator
@@ -18949,7 +19052,6 @@ var M3ePaginatorElement_1;
  * @cssprop --m3e-paginator-font-weight - The font weight used for paginator text.
  * @cssprop --m3e-paginator-line-height - The line height used for paginator text.
  * @cssprop --m3e-paginator-tracking - The letter-spacing used for paginator text.
- *
  */
 let M3ePaginatorElement = M3ePaginatorElement_1 = class M3ePaginatorElement extends EventAttribute$1(Role$1(LitElement, "group"), "page") {
   constructor() {
@@ -19179,7 +19281,7 @@ __decorate([n$1({
 __decorate([n$1({
   attribute: "page-size-variant"
 })], M3ePaginatorElement.prototype, "pageSizeVariant", void 0);
-M3ePaginatorElement = M3ePaginatorElement_1 = __decorate([t$3("m3e-paginator")], M3ePaginatorElement);
+M3ePaginatorElement = M3ePaginatorElement_1 = __decorate([element$1("m3e-paginator")], M3ePaginatorElement);
 
 /**
  * @license
@@ -19642,7 +19744,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eCircularProgressIndicatorElement.prototype, "indeterminate", void 0);
-M3eCircularProgressIndicatorElement = M3eCircularProgressIndicatorElement_1 = __decorate([t$3("m3e-circular-progress-indicator")], M3eCircularProgressIndicatorElement);
+M3eCircularProgressIndicatorElement = M3eCircularProgressIndicatorElement_1 = __decorate([element$1("m3e-circular-progress-indicator")], M3eCircularProgressIndicatorElement);
 
 var _M3eLinearProgressIndicatorElement_instances, _M3eLinearProgressIndicatorElement_maskId, _M3eLinearProgressIndicatorElement_strokeWidth, _M3eLinearProgressIndicatorElement_amplitude, _M3eLinearProgressIndicatorElement_wavelength, _M3eLinearProgressIndicatorElement_resizeController, _M3eLinearProgressIndicatorElement_renderWave, _M3eLinearProgressIndicatorElement_renderResizeObservedElements, _M3eLinearProgressIndicatorElement_updateStroke, _M3eLinearProgressIndicatorElement_updateAmplitudeAndWavelength, _M3eLinearProgressIndicatorElement_drawWavyPath;
 var M3eLinearProgressIndicatorElement_1;
@@ -19837,7 +19939,7 @@ __decorate([n$1({
   type: Number,
   reflect: true
 })], M3eLinearProgressIndicatorElement.prototype, "bufferValue", void 0);
-M3eLinearProgressIndicatorElement = M3eLinearProgressIndicatorElement_1 = __decorate([t$3("m3e-linear-progress-indicator")], M3eLinearProgressIndicatorElement);
+M3eLinearProgressIndicatorElement = M3eLinearProgressIndicatorElement_1 = __decorate([element$1("m3e-linear-progress-indicator")], M3eLinearProgressIndicatorElement);
 
 var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_hoverController, _M3eRadioElement_pressedController, _M3eRadioElement_renderIcon, _M3eRadioElement_handleClick, _M3eRadioElement_notifySelectionChange;
 /**
@@ -20002,12 +20104,12 @@ _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(.-touched.-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(.-touched.-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(: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; } }`;
 __decorate([e$4(".focus-ring")], M3eRadioElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eRadioElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eRadioElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eRadioElement.prototype, "value", void 0);
-M3eRadioElement = __decorate([t$3("m3e-radio")], M3eRadioElement);
+M3eRadioElement = __decorate([element$1("m3e-radio")], M3eRadioElement);
 
 var _M3eRadioGroupElement_instances, _M3eRadioGroupElement_directionalitySubscription, _M3eRadioGroupElement_focusOutHandler, _M3eRadioGroupElement_handleSlotChange, _M3eRadioGroupElement_handleKeyDown, _M3eRadioGroupElement_handleChange, _a$5;
 /**
@@ -20101,7 +20203,7 @@ let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled$1(Require
         break;
       case "aria-invalid":
         this.radios.forEach(x => {
-          x.classList.toggle("-invalid", newValue === "true");
+          setCustomState$1(x, "-invalid", newValue === "true");
           x[updateLabels$1]?.();
         });
         break;
@@ -20152,7 +20254,7 @@ _M3eRadioGroupElement_handleChange = function _M3eRadioGroupElement_handleChange
 };
 /** The styles of the element. */
 M3eRadioGroupElement.styles = css`:host { display: inline-flex; }`;
-M3eRadioGroupElement = __decorate([t$3("m3e-radio-group")], M3eRadioGroupElement);
+M3eRadioGroupElement = __decorate([element$1("m3e-radio-group")], M3eRadioGroupElement);
 
 var _M3eButtonSegmentElement_instances, _M3eButtonSegmentElement_clickHandler, _M3eButtonSegmentElement_handleIconSlotChange, _M3eButtonSegmentElement_handleClick;
 var M3eButtonSegmentElement_1;
@@ -20295,7 +20397,7 @@ let M3eButtonSegmentElement = M3eButtonSegmentElement_1 = class M3eButtonSegment
 _M3eButtonSegmentElement_clickHandler = new WeakMap();
 _M3eButtonSegmentElement_instances = new WeakSet();
 _M3eButtonSegmentElement_handleIconSlotChange = function _M3eButtonSegmentElement_handleIconSlotChange(e) {
-  this.classList.toggle("-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;
@@ -20318,12 +20420,12 @@ _M3eButtonSegmentElement_handleClick = function _M3eButtonSegmentElement_handleC
   }
 };
 /** 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(.-hide-selection)) .wrapper, :host(.-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(.-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(.-hide-selection) .check, :host(.-hide-selection:not(.-with-icon)) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(.-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(: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; } }`;
 __decorate([e$4(".focus-ring")], M3eButtonSegmentElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eButtonSegmentElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eButtonSegmentElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eButtonSegmentElement.prototype, "value", void 0);
-M3eButtonSegmentElement = M3eButtonSegmentElement_1 = __decorate([t$3("m3e-button-segment")], M3eButtonSegmentElement);
+M3eButtonSegmentElement = M3eButtonSegmentElement_1 = __decorate([element$1("m3e-button-segment")], M3eButtonSegmentElement);
 
 var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_directionalitySubscription, _M3eSegmentedButtonElement_handleSlotChange, _M3eSegmentedButtonElement_handleKeyDown, _M3eSegmentedButtonElement_handleChange, _a$4;
 /**
@@ -20450,7 +20552,7 @@ let M3eSegmentedButtonElement = class M3eSegmentedButtonElement extends Labelled
       this.ariaDisabled = this.multi && this.disabled ? "true" : null;
     }
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.segments.forEach(x => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
+      this.segments.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -20462,10 +20564,10 @@ _M3eSegmentedButtonElement_handleSlotChange = function _M3eSegmentedButtonElemen
   const {
     added
   } = this[selectionManager].setItems([...this.querySelectorAll("m3e-button-segment")]);
-  added.forEach(x => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
+  added.forEach(x => setCustomState$1(x, "-hide-selection", this.hideSelectionIndicator));
   this[selectionManager].items.forEach((segment, i) => {
-    segment.classList.toggle("-first", i == 0);
-    segment.classList.toggle("-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) {
@@ -20480,7 +20582,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(.-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(.-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(.-first)) { --_segmented-button-left-border: none; }`;
+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; }`;
 __decorate([n$1({
   type: Boolean
 })], M3eSegmentedButtonElement.prototype, "multi", void 0);
@@ -20488,7 +20590,7 @@ __decorate([n$1({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eSegmentedButtonElement.prototype, "hideSelectionIndicator", void 0);
-M3eSegmentedButtonElement = __decorate([t$3("m3e-segmented-button")], M3eSegmentedButtonElement);
+M3eSegmentedButtonElement = __decorate([element$1("m3e-segmented-button")], M3eSegmentedButtonElement);
 
 /**
  * @license
@@ -20703,7 +20805,7 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.options.forEach(x => x.classList.toggle("-hide-selection-indicator", this.hideSelectionIndicator));
+      this.options.forEach(x => setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -20733,7 +20835,7 @@ _M3eSelectElement_handleSlotChange = function _M3eSelectElement_handleSlotChange
   } = this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eSelectElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
-    x.classList.toggle("-hide-selection-indicator", this.hideSelectionIndicator);
+    setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator);
   });
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
 };
@@ -20861,7 +20963,7 @@ _M3eSelectElement_destroyMenu = function _M3eSelectElement_destroyMenu(e) {
   this.removeAttribute("aria-controls");
   this.removeAttribute("aria-owns");
   this.requestUpdate();
-  this.classList.toggle("-open", false);
+  deleteCustomState$1(this, "-open");
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
   this.dispatchEvent(new ToggleEvent("toggle", {
     oldState: e.oldState,
@@ -20897,14 +20999,14 @@ _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);
-    this.classList.toggle("-open", true);
+    addCustomState$1(this, "-open");
   });
 };
 _M3eSelectElement_hideMenu = function _M3eSelectElement_hideMenu() {
   if (!__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").hide();
   this.removeAttribute("aria-activedescendant");
-  this.classList.toggle("-open", false);
+  deleteCustomState$1(this, "-open");
 };
 _M3eSelectElement_activateOption = function _M3eSelectElement_activateOption(option) {
   this.setAttribute("aria-activedescendant", option.id);
@@ -20948,7 +21050,7 @@ _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(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(.-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(:state(-open)) .focus-ring { display: none; }`;
 /** @private */
 M3eSelectElement.__nextId = 0;
 __decorate([e$4(".focus-ring")], M3eSelectElement.prototype, "_focusRing", void 0);
@@ -20959,7 +21061,7 @@ __decorate([n$1({
 __decorate([n$1({
   type: Boolean
 })], M3eSelectElement.prototype, "multi", void 0);
-M3eSelectElement = M3eSelectElement_1 = __decorate([t$3("m3e-select")], M3eSelectElement);
+M3eSelectElement = M3eSelectElement_1 = __decorate([element$1("m3e-select")], M3eSelectElement);
 
 /**
  * Component design tokens that control the `M3eShapeElement` for all variants.
@@ -21092,7 +21194,7 @@ M3eShapeElement.styles = [ShapeStyle, ShapeNameStyle];
 __decorate([n$1({
   reflect: true
 })], M3eShapeElement.prototype, "name", void 0);
-M3eShapeElement = __decorate([t$3("m3e-shape")], M3eShapeElement);
+M3eShapeElement = __decorate([element$1("m3e-shape")], M3eShapeElement);
 
 var _M3eSlideGroupElement_instances, _M3eSlideGroupElement_directionalitySubscription, _M3eSlideGroupElement_resizeController, _M3eSlideGroupElement_pageStart, _M3eSlideGroupElement_pageEnd;
 /**
@@ -21289,7 +21391,7 @@ __decorate([n$1({
   attribute: "next-page-label"
 })], M3eSlideGroupElement.prototype, "nextPageLabel", void 0);
 __decorate([debounce$1(40)], M3eSlideGroupElement.prototype, "_updatePaging", null);
-M3eSlideGroupElement = __decorate([t$3("m3e-slide-group")], M3eSlideGroupElement);
+M3eSlideGroupElement = __decorate([element$1("m3e-slide-group")], M3eSlideGroupElement);
 
 var _M3eSliderThumbElement_instances, _M3eSliderThumbElement_labelText_get;
 /**
@@ -21396,7 +21498,7 @@ __decorate([n$1({
   type: Number,
   reflect: true
 })], M3eSliderThumbElement.prototype, "value", void 0);
-M3eSliderThumbElement = __decorate([t$3("m3e-slider-thumb")], M3eSliderThumbElement);
+M3eSliderThumbElement = __decorate([element$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;
 /**
@@ -21469,7 +21571,7 @@ var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _
  * @cssprop --m3e-slider-tick-inactive-color - Color of inactive ticks when enabled.
  * @cssprop --m3e-slider-disabled-tick-inactive-color - Color of inactive ticks when disabled.
  */
-let M3eSliderElement = class M3eSliderElement extends LitElement {
+let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitElement) {
   constructor() {
     super();
     _M3eSliderElement_instances.add(this);
@@ -21731,8 +21833,8 @@ _M3eSliderElement_handlePointerMove = function _M3eSliderElement_handlePointerMo
   } else if (this.upperThumb) {
     max = Math.min(max, this.upperThumb.value ?? this.max);
   }
-  if (this.classList.contains("-animating")) {
-    this.classList.toggle("-animating", false);
+  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)));
@@ -21819,10 +21921,10 @@ _M3eSliderElement_changeThumb = function _M3eSliderElement_changeThumb(thumb, va
   if (thumb.value === value) return;
   const prev = thumb.value;
   if (animate && !prefersReducedMotion$1()) {
-    this.classList.toggle("-animating", true);
+    addCustomState$1(this, "-animating");
     thumb.addEventListener("transitionend", () => {
       thumb.style.transition = "";
-      this.classList.toggle("-animating", false);
+      deleteCustomState$1(this, "-animating");
     }, {
       once: true
     });
@@ -21845,7 +21947,7 @@ _M3eSliderElement_changeThumb = function _M3eSliderElement_changeThumb(thumb, va
   }
 };
 /** 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(.-animating) .track-active, :host(.-animating) .track-inactive.start, :host(.-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(: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},
         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([e$4(".base")], M3eSliderElement.prototype, "_base", void 0);
 __decorate([r$1()], M3eSliderElement.prototype, "_ticks", void 0);
@@ -21875,7 +21977,7 @@ __decorate([n$1({
 __decorate([n$1({
   attribute: false
 })], M3eSliderElement.prototype, "displayWith", void 0);
-M3eSliderElement = __decorate([t$3("m3e-slider")], M3eSliderElement);
+M3eSliderElement = __decorate([element$1("m3e-slider")], M3eSliderElement);
 
 /* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
 var _M3eSnackbarElement_instances, _M3eSnackbarElement_timeoutId, _M3eSnackbarElement_actionTaken, _M3eSnackbarElement_beforeToggleHandler, _M3eSnackbarElement_renderActionButton, _M3eSnackbarElement_renderCloseButton, _M3eSnackbarElement_handleActionClick, _M3eSnackbarElement_handleBeforeToggle;
@@ -21995,7 +22097,7 @@ _M3eSnackbarElement_handleBeforeToggle = function _M3eSnackbarElement_handleBefo
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-snackbar { margin-inline: auto; }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
@@ -22019,7 +22121,7 @@ __decorate([n$1({
 __decorate([n$1({
   attribute: "close-label"
 })], M3eSnackbarElement.prototype, "closeLabel", void 0);
-M3eSnackbarElement = M3eSnackbarElement_1 = __decorate([t$3("m3e-snackbar")], M3eSnackbarElement);
+M3eSnackbarElement = M3eSnackbarElement_1 = __decorate([element$1("m3e-snackbar")], M3eSnackbarElement);
 
 /**
  * Presents short updates about application processes at the bottom of the screen from anywhere in an application.
@@ -22302,7 +22404,7 @@ __decorate([n$1({
 __decorate([n$1({
   reflect: true
 })], M3eSplitButtonElement.prototype, "size", void 0);
-M3eSplitButtonElement = __decorate([t$3("m3e-split-button")], M3eSplitButtonElement);
+M3eSplitButtonElement = __decorate([element$1("m3e-split-button")], M3eSplitButtonElement);
 
 /**
  * A panel presented for a step in a wizard-like workflow.
@@ -22380,7 +22482,7 @@ let M3eStepPanelElement = class M3eStepPanelElement extends Role$1(LitElement, "
 /** The styles of the element. */
 M3eStepPanelElement.styles = css`:host { display: block; } .content { display: flex; flex-direction: column; padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem); row-gap: var(--m3e-step-panel-spacing, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: var(--m3e-step-panel-actions-height, 3rem); } ::slotted([slot="actions"][end]) { justify-content: flex-end; }`;
 __decorate([r$1()], M3eStepPanelElement.prototype, "active", void 0);
-M3eStepPanelElement = __decorate([t$3("m3e-step-panel")], M3eStepPanelElement);
+M3eStepPanelElement = __decorate([element$1("m3e-step-panel")], M3eStepPanelElement);
 
 var _M3eStepElement_instances, _M3eStepElement_clickHandler, _M3eStepElement_renderIcon, _M3eStepElement_handleClick;
 var M3eStepElement_1;
@@ -22634,7 +22736,7 @@ __decorate([n$1({
   reflect: true
 })], M3eStepElement.prototype, "invalid", void 0);
 __decorate([r$1()], M3eStepElement.prototype, "index", void 0);
-M3eStepElement = M3eStepElement_1 = __decorate([t$3("m3e-step")], M3eStepElement);
+M3eStepElement = M3eStepElement_1 = __decorate([element$1("m3e-step")], M3eStepElement);
 
 var _StepperButtonElementBase_action;
 /** A base implementation for a button used to move to a step in a stepper. This class must be inherited. */
@@ -22849,7 +22951,7 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals$1(LitEle
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.toggle("-no-animate", true);
+    addCustomState$1(this, "-no-animate");
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -22943,8 +23045,8 @@ _M3eStepperElement_handleSelectedChange = function _M3eStepperElement_handleSele
   if (selected && this.matches(":focus-within") && !selected.matches(":focus")) {
     selected.focus();
   }
-  if (this.classList.contains("-no-animate")) {
-    requestAnimationFrame(() => this.classList.toggle("-no-animate", false));
+  if (hasCustomState$1(this, "-no-animate")) {
+    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
   }
 };
 _M3eStepperElement_checkValidity = function _M3eStepperElement_checkValidity() {
@@ -22960,7 +23062,7 @@ _M3eStepperElement_checkValidity = function _M3eStepperElement_checkValidity() {
 };
 _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDisplayOrder() {
   this[selectionManager].vertical = (this._orientation ?? this.orientation) === "vertical";
-  this.classList.toggle("-vertical", this[selectionManager].vertical);
+  setCustomState$1(this, "-vertical", this[selectionManager].vertical);
   if (!this[selectionManager].vertical) {
     this.steps.forEach(x => {
       x.style.order = "";
@@ -22978,14 +23080,14 @@ _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDispla
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-stepper:not(.-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(.-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(.-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(.-vertical)[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(.-vertical)[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(.-vertical)[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(.-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.-vertical > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper.-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.-vertical > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper.-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}); }`.toString());
+    lightDomStyle.replaceSync(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}); }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
   }
 })();
 /** The styles of the element. */
-M3eStepperElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } :host(:not(.-vertical)) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(.-vertical):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(.-vertical)) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(.-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(.-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(.-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(.-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(.-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(.-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(.-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(.-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(.-vertical)[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(.-vertical) .header { display: contents; } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(.-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(.-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(.-vertical)) { --m3e-collapsible-animation-duration: 0ms; } :host(.-no-animate) { --m3e-collapsible-animation-duration: 0ms; }`;
+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; }`;
 __decorate([r$1()], M3eStepperElement.prototype, "_orientation", void 0);
 __decorate([r$1()], M3eStepperElement.prototype, "_selectedIndex", void 0);
 __decorate([n$1({
@@ -23003,7 +23105,7 @@ __decorate([n$1({
 __decorate([n$1({
   reflect: true
 })], M3eStepperElement.prototype, "orientation", void 0);
-M3eStepperElement = __decorate([t$3("m3e-stepper")], M3eStepperElement);
+M3eStepperElement = __decorate([element$1("m3e-stepper")], M3eStepperElement);
 
 /**
  * An element, nested within a clickable element, used to move a stepper to the next step.
@@ -23016,7 +23118,7 @@ let M3eStepperNextElement = class M3eStepperNextElement extends StepperButtonEle
     super("next");
   }
 };
-M3eStepperNextElement = __decorate([t$3("m3e-stepper-next")], M3eStepperNextElement);
+M3eStepperNextElement = __decorate([element$1("m3e-stepper-next")], M3eStepperNextElement);
 
 /**
  * An element, nested within a clickable element, used to move a stepper to the previous step.
@@ -23029,7 +23131,7 @@ let M3eStepperPreviousElement = class M3eStepperPreviousElement extends StepperB
     super("previous");
   }
 };
-M3eStepperPreviousElement = __decorate([t$3("m3e-stepper-previous")], M3eStepperPreviousElement);
+M3eStepperPreviousElement = __decorate([element$1("m3e-stepper-previous")], M3eStepperPreviousElement);
 
 /**
  * An element, nested within a clickable element, used to reset a stepper to its initial state.
@@ -23042,7 +23144,7 @@ let M3eStepperResetElement = class M3eStepperResetElement extends StepperButtonE
     super("reset");
   }
 };
-M3eStepperResetElement = __decorate([t$3("m3e-stepper-reset")], M3eStepperResetElement);
+M3eStepperResetElement = __decorate([element$1("m3e-stepper-reset")], M3eStepperResetElement);
 
 /**
  * Component design tokens that control `M3eSwitchElement`.
@@ -23366,7 +23468,7 @@ __decorate([n$1({
   reflect: true
 })], M3eSwitchElement.prototype, "icons", void 0);
 __decorate([n$1()], M3eSwitchElement.prototype, "value", void 0);
-M3eSwitchElement = __decorate([t$3("m3e-switch")], M3eSwitchElement);
+M3eSwitchElement = __decorate([element$1("m3e-switch")], M3eSwitchElement);
 
 var _M3eTabElement_instances, _M3eTabElement_clickHandler, _M3eTabElement_handleClick;
 var M3eTabElement_1;
@@ -23503,7 +23605,7 @@ __decorate([e$4(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eTabElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eTabElement.prototype, "_ripple", void 0);
 __decorate([e$4(".label")], M3eTabElement.prototype, "label", void 0);
-M3eTabElement = M3eTabElement_1 = __decorate([t$3("m3e-tab")], M3eTabElement);
+M3eTabElement = M3eTabElement_1 = __decorate([element$1("m3e-tab")], M3eTabElement);
 
 /**
  * A panel presented for a tab.
@@ -23546,7 +23648,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role$1(LitElement, "ta
 };
 /** The styles of the element. */
 M3eTabPanelElement.styles = css`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.width}; scrollbar-color: ${DesignToken$1.scrollbar.color}; }`;
-M3eTabPanelElement = __decorate([t$3("m3e-tab-panel")], M3eTabPanelElement);
+M3eTabPanelElement = __decorate([element$1("m3e-tab-panel")], M3eTabPanelElement);
 
 var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_updateInkBar, _a$2;
 const MIN_PRIMARY_TAB_WIDTH = 24;
@@ -23643,7 +23745,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
     new ResizeController$1(this, {
       skipInitial: true,
       callback: () => {
-        this.classList.toggle("-no-animate", true);
+        addCustomState$1(this, "-no-animate");
         __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
       }
     });
@@ -23673,7 +23775,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.toggle("-no-animate", true);
+    addCustomState$1(this, "-no-animate");
     __classPrivateFieldSet(this, _M3eTabsElement_directionalitySubscription, M3eDirectionality.observe(() => {
       this.requestUpdate();
       this[selectionManager].directionality = M3eDirectionality.current;
@@ -23751,13 +23853,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 && this.classList.contains("-no-animate")) {
-    setTimeout(() => this.classList.toggle("-no-animate", false));
+  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(.-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(: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; } }`;
 __decorate([e$4(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([r$1()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([n$1({
@@ -23781,7 +23883,7 @@ __decorate([n$1({
 __decorate([n$1({
   attribute: "next-page-label"
 })], M3eTabsElement.prototype, "nextPageLabel", void 0);
-M3eTabsElement = __decorate([t$3("m3e-tabs")], M3eTabsElement);
+M3eTabsElement = __decorate([element$1("m3e-tabs")], M3eTabsElement);
 
 /**
  * Adapted from Angular Material CDK Text Field
@@ -24048,7 +24150,7 @@ __decorate([n$1({
   reflect: true
 })], M3eTextareaAutosizeElement.prototype, "disabled", void 0);
 __decorate([debounce$1(16)], M3eTextareaAutosizeElement.prototype, "_handleWindowResize", null);
-M3eTextareaAutosizeElement = __decorate([t$3("m3e-textarea-autosize")], M3eTextareaAutosizeElement);
+M3eTextareaAutosizeElement = __decorate([element$1("m3e-textarea-autosize")], M3eTextareaAutosizeElement);
 
 /**
  * @license
@@ -27339,7 +27441,7 @@ __decorate([n$1({
   type: Number
 })], M3eThemeElement.prototype, "density", void 0);
 __decorate([n$1()], M3eThemeElement.prototype, "motion", void 0);
-M3eThemeElement = __decorate([t$3("m3e-theme")], M3eThemeElement);
+M3eThemeElement = __decorate([element$1("m3e-theme")], M3eThemeElement);
 
 /**
  * An item in a table of contents.
@@ -27398,7 +27500,7 @@ M3eTocItemElement.styles = css`:host { display: inline-block; position: relative
 __decorate([e$4(".base")], M3eTocItemElement.prototype, "_base", void 0);
 __decorate([e$4(".state-layer")], M3eTocItemElement.prototype, "_stateLayer", void 0);
 __decorate([r$1()], M3eTocItemElement.prototype, "node", void 0);
-M3eTocItemElement = __decorate([t$3("m3e-toc-item")], M3eTocItemElement);
+M3eTocItemElement = __decorate([element$1("m3e-toc-item")], M3eTocItemElement);
 
 var _a$1, _TocGenerator_getHeaderLevel;
 /** Provides functionality used to generate a table of contents used for in-page navigation. */
@@ -27513,7 +27615,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) {
-          this.classList.toggle("-no-animate", true);
+          setCustomState$1(this, "-no-animate", true);
           this._activeIndicator.style.top = `0px`;
           this._activeIndicator.style.height = `0px`;
           this._activeIndicator.style.visibility = "hidden";
@@ -27525,8 +27627,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 (this.classList.contains("-no-animate")) {
-            setTimeout(() => this.classList.toggle("-no-animate", false), 40);
+          if (hasCustomState$1(this, "-no-animate")) {
+            setTimeout(() => setCustomState$1(this, "-no-animate", false), 40);
           }
         }
       }
@@ -27608,7 +27710,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) {
-        this.classList.toggle("-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) {
@@ -27642,10 +27744,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) {
-  this.classList.toggle("-with-overline", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-overline", hasAssignedNodes$1(e.target));
 };
 _M3eTocElement_handleTitleSlotChange = function _M3eTocElement_handleTitleSlotChange(e) {
-  this.classList.toggle("-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) {
@@ -27668,7 +27770,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(.-with-overline)) .overline, :host(:not(.-with-title)) .title, :host(:not(.-with-overline):not(.-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(.-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(: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; } }`;
 __decorate([r$1()], M3eTocElement.prototype, "_toc", void 0);
 __decorate([e$4(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
 __decorate([n$1({
@@ -27676,7 +27778,7 @@ __decorate([n$1({
   type: Number
 })], M3eTocElement.prototype, "maxDepth", void 0);
 __decorate([debounce$1(40)], M3eTocElement.prototype, "_updateToc", null);
-M3eTocElement = __decorate([t$3("m3e-toc")], M3eTocElement);
+M3eTocElement = __decorate([element$1("m3e-toc")], M3eTocElement);
 
 var _M3eToolbarElement_instances, _M3eToolbarElement_directionalitySubscription, _M3eToolbarElement_focusKeyManager, _M3eToolbarElement_handleSlotChange, _M3eToolbarElement_handleKeyDown, _M3eToolbarElement_handleClick;
 /**
@@ -27810,7 +27912,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eToolbarElement.prototype, "elevated", void 0);
-M3eToolbarElement = __decorate([t$3("m3e-toolbar")], M3eToolbarElement);
+M3eToolbarElement = __decorate([element$1("m3e-toolbar")], M3eToolbarElement);
 
 /**
  * An element, nested within a clickable element, used to dismiss a parenting rich tooltip.
@@ -27835,7 +27937,7 @@ __decorate([n$1({
   attribute: "disable-restore-focus",
   type: Boolean
 })], M3eRichTooltipActionElement.prototype, "disableRestoreFocus", void 0);
-M3eRichTooltipActionElement = __decorate([t$3("m3e-rich-tooltip-action")], M3eRichTooltipActionElement);
+M3eRichTooltipActionElement = __decorate([element$1("m3e-rich-tooltip-action")], M3eRichTooltipActionElement);
 
 var _TooltipElementBase_instances, _a, _TooltipElementBase_for, _TooltipElementBase_anchorCleanup, _TooltipElementBase_tooltipHovering, _TooltipElementBase_controlClickHandler, _TooltipElementBase_hoverController, _TooltipElementBase_longPressController, _TooltipElementBase_handleControlClick, _TooltipElementBase_disableNativeGesturesIfNecessary;
 /** The space, in pixels, between the tooltip and anchor. */
@@ -27843,7 +27945,7 @@ const TOOLTIP_OFFSET = 4;
 /** The default time, in milliseconds, before hiding a tooltip. */
 const TOOLTIP_HIDE_DELAY = 200;
 /** Provides a base implementation for a tooltip. This class must be inherited. */
-class TooltipElementBase extends HtmlFor$1(LitElement) {
+class TooltipElementBase extends HtmlFor$1(AttachInternals$1(LitElement)) {
   constructor() {
     super(...arguments);
     _TooltipElementBase_instances.add(this);
@@ -28305,7 +28407,7 @@ M3eRichTooltipElement.__nextId = 0;
 __decorate([r$1()], M3eRichTooltipElement.prototype, "_hasSubhead", void 0);
 __decorate([r$1()], M3eRichTooltipElement.prototype, "_interactive", void 0);
 __decorate([n$1()], M3eRichTooltipElement.prototype, "position", void 0);
-M3eRichTooltipElement = M3eRichTooltipElement_1 = __decorate([t$3("m3e-rich-tooltip")], M3eRichTooltipElement);
+M3eRichTooltipElement = M3eRichTooltipElement_1 = __decorate([element$1("m3e-rich-tooltip")], M3eRichTooltipElement);
 
 var _M3eTooltipElement_instances, _M3eTooltipElement_message, _M3eTooltipElement_handleSlotChange, _M3eTooltipElement_handleToggle;
 /**
@@ -28419,16 +28521,16 @@ _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);
-    this.classList.toggle("-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}, 
         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(.-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(: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; } }`;
 __decorate([n$1()], M3eTooltipElement.prototype, "position", void 0);
-M3eTooltipElement = __decorate([t$3("m3e-tooltip")], M3eTooltipElement);
+M3eTooltipElement = __decorate([element$1("m3e-tooltip")], M3eTooltipElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, 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, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, checkOrSelect, computeCssSize, computeLineCount, debounce, defaultValue, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, 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, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, spaceSeparatedStringConverter, updateLabels, validate };
+export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, 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, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, debounce, defaultValue, deleteCustomState, element, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, 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, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate };
 //# sourceMappingURL=all.js.map