@m3e/web 2.0.5 → 2.1.1

package/dist/all.js

@@ -4,16 +4,16 @@
  * 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, customElement as customElement$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 { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, debounce as debounce$1, customElement as customElement$1, hasAssignedNodes as hasAssignedNodes$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, 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, 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, M3eLiveAnnouncer, M3eInteractivityChecker, isModifierAllowed, addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager, ListManager, RovingTabIndexManager, M3eAriaDescriber, typeaheadLabel } from '@m3e/web/core/a11y';
+import { M3eOptGroupElement as M3eOptGroupElement$1 } from '@m3e/web/option';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
-import { positionAnchor } from '@m3e/web/core/anchoring';
+import { positionAnchor, M3eFloatingPanelElement } from '@m3e/web/core/anchoring';
 import { M3eIconButtonElement as M3eIconButtonElement$1 } from '@m3e/web/icon-button';
 import { M3eBreakpointObserver, Breakpoint } from '@m3e/web/core/layout';
 import { M3eNavBarElement as M3eNavBarElement$1 } from '@m3e/web/nav-bar';
 import '@m3e/web/form-field';
 import '@m3e/web/select';
-import '@m3e/web/option';
 import '@m3e/web/tooltip';
 import { M3eButtonElement as M3eButtonElement$1 } from '@m3e/web/button';
 import '@m3e/web/button-group';
@@ -65,9 +65,9 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const t$2 = globalThis,
-  e$7 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
+  e$6 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
   s$1 = Symbol(),
-  o$6 = new WeakMap();
+  o$5 = new WeakMap();
 let n$3 = class n {
   constructor(t, e, o) {
     if (this._$cssResult$ = true, o !== s$1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -76,9 +76,9 @@ let n$3 = class n {
   get styleSheet() {
     let t = this.o;
     const s = this.t;
-    if (e$7 && void 0 === t) {
+    if (e$6 && void 0 === t) {
       const e = void 0 !== s && 1 === s.length;
-      e && (t = o$6.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$6.set(s, t));
+      e && (t = o$5.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$5.set(s, t));
     }
     return t;
   }
@@ -88,13 +88,13 @@ let n$3 = class n {
 };
 const r$4 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$1),
   S$1 = (s, o) => {
-    if (e$7) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
+    if (e$6) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
       const o = document.createElement("style"),
         n = t$2.litNonce;
       void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
     }
   },
-  c$2 = e$7 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
+  c$2 = e$6 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
     let e = "";
     for (const s of t.cssRules) e += s.cssText;
     return r$4(e);
@@ -107,10 +107,10 @@ const r$4 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$1),
  */
 const {
     is: i$2,
-    defineProperty: e$6,
+    defineProperty: e$5,
     getOwnPropertyDescriptor: h$1,
     getOwnPropertyNames: r$3,
-    getOwnPropertySymbols: o$5,
+    getOwnPropertySymbols: o$4,
     getPrototypeOf: n$2
   } = Object,
   a$1 = globalThis,
@@ -171,7 +171,7 @@ class y extends HTMLElement {
     if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
       const i = Symbol(),
         h = this.getPropertyDescriptor(t, i, s);
-      void 0 !== h && e$6(this.prototype, t, h);
+      void 0 !== h && e$5(this.prototype, t, h);
     }
   }
   static getPropertyDescriptor(t, s, i) {
@@ -208,7 +208,7 @@ class y extends HTMLElement {
     if (this.hasOwnProperty(d$1("finalized"))) return;
     if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
       const t = this.properties,
-        s = [...r$3(t), ...o$5(t)];
+        s = [...r$3(t), ...o$4(t)];
       for (const i of s) this.createProperty(i, t[i]);
     }
     const t = this[Symbol.metadata];
@@ -375,14 +375,14 @@ y.elementStyles = [], y.shadowRootOptions = {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o$4 = {
+const o$3 = {
     attribute: true,
     type: String,
     converter: u$1,
     reflect: false,
     hasChanged: f$1
   },
-  r$2 = (t = o$4, e, r) => {
+  r$2 = (t = o$3, e, r) => {
     const {
       kind: n,
       metadata: i
@@ -438,17 +438,17 @@ function r$1(r) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const e$5 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
+const e$4 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function e$4(e, r) {
+function e$3(e, r) {
   return (n, s, i) => {
     const o = t => t.renderRoot?.querySelector(e) ?? null;
-    return e$5(n, s, {
+    return e$4(n, s, {
       get() {
         return o(this);
       }
@@ -461,14 +461,14 @@ function e$4(e, r) {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function o$3(o) {
+function o$2(o) {
   return (e, n) => {
     const {
         slot: r,
         selector: s
       } = o ?? {},
       c = "slot" + (r ? `[name=${r}]` : ":not([name])");
-    return e$5(e, n, {
+    return e$4(e, n, {
       get() {
         const t = this.renderRoot?.querySelector(c),
           e = t?.assignedElements(o) ?? [];
@@ -790,9 +790,9 @@ _M3eAppBarElement_getFrameScrollTop = function _M3eAppBarElement_getFrameScrollT
 };
 /** The styles of the element. */
 M3eAppBarElement.styles = [AppBarStyle, AppBarSizeStyle];
-__decorate([e$4(".base")], M3eAppBarElement.prototype, "_base", void 0);
-__decorate([e$4(".leading-icon")], M3eAppBarElement.prototype, "_leadingIcon", void 0);
-__decorate([e$4(".trailing-icon")], M3eAppBarElement.prototype, "_trailingIcon", void 0);
+__decorate([e$3(".base")], M3eAppBarElement.prototype, "_base", void 0);
+__decorate([e$3(".leading-icon")], M3eAppBarElement.prototype, "_leadingIcon", void 0);
+__decorate([e$3(".trailing-icon")], M3eAppBarElement.prototype, "_trailingIcon", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -803,7 +803,7 @@ __decorate([n$1({
 __decorate([debounce$1(40)], M3eAppBarElement.prototype, "_updateScroll", null);
 M3eAppBarElement = __decorate([customElement$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_instances, _M3eAutocompleteElement_id, _M3eAutocompleteElement_menuId, _M3eAutocompleteElement_clone, _M3eAutocompleteElement_ignoreFocusVisible, _M3eAutocompleteElement_menu, _M3eAutocompleteElement_ignoreHideMenuOnBlur, _M3eAutocompleteElement_inputChanged, _M3eAutocompleteElement_hasFocus, _M3eAutocompleteElement_mutationAbortController, _M3eAutocompleteElement_clickHandler, _M3eAutocompleteElement_formFieldPointerDownHandler, _M3eAutocompleteElement_focusHandler, _M3eAutocompleteElement_blurHandler, _M3eAutocompleteElement_keyDownHandler, _M3eAutocompleteElement_inputHandler, _M3eAutocompleteElement_changeHandler, _M3eAutocompleteElement_menuToggleHandler, _M3eAutocompleteElement_menuPointerDownHandler, _M3eAutocompleteElement_options_get, _M3eAutocompleteElement_input_get, _M3eAutocompleteElement_hasNoDataSlot_get, _M3eAutocompleteElement_hasLoadingSlot_get, _M3eAutocompleteElement_shouldShowMenu_get, _M3eAutocompleteElement_minMenuWidth_get, _M3eAutocompleteElement_formField_get, _M3eAutocompleteElement_handleMutation, _M3eAutocompleteElement_handleClick, _M3eAutocompleteElement_handleFormFieldPointerDown, _M3eAutocompleteElement_handleFocus, _M3eAutocompleteElement_handleBlur, _M3eAutocompleteElement_handleInput, _M3eAutocompleteElement_handleChange, _M3eAutocompleteElement_handleKeyDown, _M3eAutocompleteElement_handleMenuPointerDown, _M3eAutocompleteElement_handleMenuToggle, _M3eAutocompleteElement_destroyMenu, _M3eAutocompleteElement_showMenu, _M3eAutocompleteElement_updateMenuState, _M3eAutocompleteElement_hideMenu, _M3eAutocompleteElement_activateOption, _M3eAutocompleteElement_updateSelectionState, _M3eAutocompleteElement_selectOption, _M3eAutocompleteElement_filterOption, _M3eAutocompleteElement_filterOptions, _M3eAutocompleteElement_announceResults, _M3eAutocompleteElement_autoActivate, _M3eAutocompleteElement_deactivateOption;
 var M3eAutocompleteElement_1;
 /**
  * Enhances a text input with suggested options.
@@ -832,30 +832,49 @@ var M3eAutocompleteElement_1;
  * @tag m3e-autocomplete
  *
  * @attr auto-activate - Whether the first option should be automatically activated.
+ * @attr case-sensitive - Whether filtering is case sensitive.
+ * @attr filter - Mode in which to filter options.
  * @attr hide-selection-indicator - Whether to hide the selection indicator.
+ * @attr hide-loading - Whether to hide the menu when loading options.
+ * @attr hide-no-data - Whether to hide the menu when there are no options to show.
+ * @attr loading - Whether options are being loaded.
+ * @attr loading-label - The text announced and presented when loading options.
+ * @attr no-data-label - The text announced and presented when no options are available for the current term.
  * @attr required - Whether the user is required to make a selection when interacting with the autocomplete.
+ * @attr results-label - The text announced when available options change for the current term.
  *
  * @slot - Renders the options of the autocomplete.
+ * @slot loading - Renders content when loading options.
+ * @slot no-data - Renders content when there are no options to show.
  *
  * @fires toggle - Emitted when the options menu opens or closes.
+ * @fires query - Emitted when the input is focused or when the user modifies its value.
  */
 let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteElement extends HtmlFor$1(LitElement) {
   constructor() {
-    super(...arguments);
+    super();
     _M3eAutocompleteElement_instances.add(this);
     /** @private */
     _M3eAutocompleteElement_id.set(this, `m3e-autocomplete-${M3eAutocompleteElement_1.__nextId}`);
     /** @private */
     _M3eAutocompleteElement_menuId.set(this, `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-menu`);
     /** @private */
+    this._options = new Array();
+    /** @private */
+    _M3eAutocompleteElement_clone.set(this, void 0);
+    /** @private */
     _M3eAutocompleteElement_ignoreFocusVisible.set(this, false);
     /** @private */
     _M3eAutocompleteElement_menu.set(this, void 0);
     /** @private */
-    _M3eAutocompleteElement_textHighlight.set(this, void 0);
-    /** @private */
     _M3eAutocompleteElement_ignoreHideMenuOnBlur.set(this, false);
     /** @private */
+    _M3eAutocompleteElement_inputChanged.set(this, false);
+    /** @private */
+    _M3eAutocompleteElement_hasFocus.set(this, false);
+    /** @private */
+    _M3eAutocompleteElement_mutationAbortController.set(this, void 0);
+    /** @private */
     _M3eAutocompleteElement_clickHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleClick).call(this));
     /** @private */
     _M3eAutocompleteElement_formFieldPointerDownHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleFormFieldPointerDown).call(this));
@@ -874,7 +893,7 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
     /** @private */
     _M3eAutocompleteElement_menuPointerDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMenuPointerDown).call(this, e));
     /** @private */
-    this._listKeyManager = new ListKeyManager().withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(item => item.disabled || item.style.display === "none").onActiveItemChange(() => {
+    this._listKeyManager = new ListKeyManager().withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(item => item.disabled || item.hidden).onActiveItemChange(() => {
       if (this._listKeyManager.activeItem) {
         __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_activateOption).call(this, this._listKeyManager.activeItem);
       }
@@ -894,10 +913,57 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
      * @default false
      */
     this.autoActivate = false;
+    /**
+     * Whether filtering is case sensitive.
+     * @default false
+     */
+    this.caseSensitive = false;
+    /**
+     * Mode in which to filter options.
+     * @default "contains"
+     */
+    this.filter = "contains";
+    /**
+     * Whether options are being loaded.
+     * @default false
+     */
+    this.loading = false;
+    /**
+     * Whether to hide the menu when there are no options to show.
+     * @default false
+     */
+    this.hideNoData = false;
+    /**
+     * Whether to hide the menu when loading options.
+     * @default false
+     */
+    this.hideLoading = false;
+    /**
+     * The text announced and presented when loading options.
+     * @default "Loading..."
+     */
+    this.loadingLabel = "Loading...";
+    /**
+     * The text announced and presented when no options are available for the current term.
+     * @default "No options"
+     */
+    this.noDataLabel = "No options";
+    /**
+     * The text announced when available options change for the current term.
+     * @default (count) => `${count} options`
+     */
+    this.resultsLabel = count => `${count} options`;
+    new MutationController$1(this, {
+      config: {
+        childList: true,
+        subtree: true
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMutation).call(this)
+    });
   }
   /** The options that can be selected. */
   get options() {
-    return this._listKeyManager?.items ?? [];
+    return this._options ?? [];
   }
   /** @inheritdoc */
   attach(control) {
@@ -938,9 +1004,6 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
   clear(restoreFocus = false) {
     if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return;
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
-    if (__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) {
-      __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = "";
-    }
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
     if (restoreFocus) {
       __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).focus();
@@ -949,16 +1012,49 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
     }
   }
   /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMutation).call(this);
+  }
+  /** @inheritdoc */
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has("hideNoData") && this.hideNoData && __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+      setCustomState$1(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "-no-data", false);
+    }
+    if (changedProperties.has("loading")) {
+      if (this.loading) {
+        if (__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) {
+          if (this.loadingLabel) {
+            M3eLiveAnnouncer.announce(this.loadingLabel, "polite");
+          }
+          if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") && __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+            __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
+          }
+        }
+      } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+        __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+      } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+        deleteCustomState$1(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "-loading");
+      } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) {
+        __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
+      }
+    }
+  }
+  /** @inheritdoc */
   render() {
-    return html`<div class="options" role="listbox"><slot @slotchange="${__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleSlotChange)}"></slot></div>`;
+    return html`<div class="options" aria-hidden="true"><slot></slot></div>`;
   }
 };
 _M3eAutocompleteElement_id = new WeakMap();
 _M3eAutocompleteElement_menuId = new WeakMap();
+_M3eAutocompleteElement_clone = new WeakMap();
 _M3eAutocompleteElement_ignoreFocusVisible = new WeakMap();
 _M3eAutocompleteElement_menu = new WeakMap();
-_M3eAutocompleteElement_textHighlight = new WeakMap();
 _M3eAutocompleteElement_ignoreHideMenuOnBlur = new WeakMap();
+_M3eAutocompleteElement_inputChanged = new WeakMap();
+_M3eAutocompleteElement_hasFocus = new WeakMap();
+_M3eAutocompleteElement_mutationAbortController = new WeakMap();
 _M3eAutocompleteElement_clickHandler = new WeakMap();
 _M3eAutocompleteElement_formFieldPointerDownHandler = new WeakMap();
 _M3eAutocompleteElement_focusHandler = new WeakMap();
@@ -969,11 +1065,20 @@ _M3eAutocompleteElement_changeHandler = new WeakMap();
 _M3eAutocompleteElement_menuToggleHandler = new WeakMap();
 _M3eAutocompleteElement_menuPointerDownHandler = new WeakMap();
 _M3eAutocompleteElement_instances = new WeakSet();
+_M3eAutocompleteElement_options_get = function _M3eAutocompleteElement_options_get() {
+  return this._listKeyManager?.items ?? [];
+};
 _M3eAutocompleteElement_input_get = function _M3eAutocompleteElement_input_get() {
   return this.control ? this.control : null;
 };
-_M3eAutocompleteElement_hasVisibleOptions_get = function _M3eAutocompleteElement_hasVisibleOptions_get() {
-  return this.options.some(x => x.style.display !== "none");
+_M3eAutocompleteElement_hasNoDataSlot_get = function _M3eAutocompleteElement_hasNoDataSlot_get() {
+  return (__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelector("[slot='no-data']") ?? null) !== null;
+};
+_M3eAutocompleteElement_hasLoadingSlot_get = function _M3eAutocompleteElement_hasLoadingSlot_get() {
+  return (__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelector("[slot='loading']") ?? null) !== null;
+};
+_M3eAutocompleteElement_shouldShowMenu_get = function _M3eAutocompleteElement_shouldShowMenu_get() {
+  return __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).some(x => !x.hidden) || this.loading && !this.hideLoading && this.loadingLabel.length > 0 || !this.loading && !this.hideNoData && this.noDataLabel.length > 0;
 };
 _M3eAutocompleteElement_minMenuWidth_get = function _M3eAutocompleteElement_minMenuWidth_get() {
   const formField = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get);
@@ -982,15 +1087,43 @@ _M3eAutocompleteElement_minMenuWidth_get = function _M3eAutocompleteElement_minM
 _M3eAutocompleteElement_formField_get = function _M3eAutocompleteElement_formField_get() {
   return this.control?.closest("m3e-form-field") ?? null;
 };
-_M3eAutocompleteElement_handleSlotChange = function _M3eAutocompleteElement_handleSlotChange() {
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) return;
+_M3eAutocompleteElement_handleMutation = /** @private */
+async function _M3eAutocompleteElement_handleMutation() {
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_mutationAbortController, "f")) {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_mutationAbortController, "f").abort();
+  }
+  const mutationAbortController = new AbortController();
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_mutationAbortController, mutationAbortController, "f");
+  const options = [...this.querySelectorAll("m3e-option")];
+  for (const option of options) {
+    if (mutationAbortController.signal.aborted) {
+      break;
+    }
+    if (option.isUpdatePending) {
+      await option.updateComplete;
+    }
+  }
+  if (mutationAbortController.signal.aborted) {
+    return;
+  }
+  this._options = options;
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_clone, this.cloneNode(true), "f");
   const {
     added
-  } = this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);
+  } = this._listKeyManager.setItems([...__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f").querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
     setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator);
   });
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+    const count = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").replaceChildren(...__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f").childNodes);
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+    } else {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateMenuState).call(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), count);
+    }
+  }
 };
 _M3eAutocompleteElement_handleClick = function _M3eAutocompleteElement_handleClick() {
   __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreFocusVisible, true, "f");
@@ -1000,10 +1133,21 @@ _M3eAutocompleteElement_handleFormFieldPointerDown = function _M3eAutocompleteEl
   __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreHideMenuOnBlur, true, "f");
 };
 _M3eAutocompleteElement_handleFocus = function _M3eAutocompleteElement_handleFocus() {
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_hasFocus, true, "f");
   __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreFocusVisible, true, "f");
+  if (this.options.length == 0 && !this.control.readOnly) {
+    this.dispatchEvent(new CustomEvent("query", {
+      detail: {
+        term: __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.value ?? ""
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
 };
 _M3eAutocompleteElement_handleBlur = function _M3eAutocompleteElement_handleBlur() {
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_hasFocus, false, "f");
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_ignoreHideMenuOnBlur, "f")) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
   }
@@ -1011,19 +1155,30 @@ _M3eAutocompleteElement_handleBlur = function _M3eAutocompleteElement_handleBlur
 };
 _M3eAutocompleteElement_handleInput = function _M3eAutocompleteElement_handleInput(e) {
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || e.defaultPrevented) return;
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
-  }
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
-  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
-  } else if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasVisibleOptions_get)) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+  this.dispatchEvent(new CustomEvent("query", {
+    detail: {
+      term: __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value
+    },
+    bubbles: true,
+    composed: true
+  }));
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, true, "f");
+  try {
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
+    } else {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+      if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+        __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+      }
+    }
+  } finally {
+    __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, false, "f");
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
   }
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
 };
 _M3eAutocompleteElement_handleChange = function _M3eAutocompleteElement_handleChange() {
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && this.required && !this.options.some(x => x.selected && !x.disabled)) {
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && this.required && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).some(x => x.selected && !x.disabled)) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
   }
 };
@@ -1098,7 +1253,7 @@ _M3eAutocompleteElement_handleMenuPointerDown = function _M3eAutocompleteElement
 _M3eAutocompleteElement_handleMenuToggle = function _M3eAutocompleteElement_handleMenuToggle(e) {
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) return;
   if (e.newState !== "closed") {
-    const option = this.options.find(x => x.selected && !x.disabled);
+    const option = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).find(x => x.selected && !x.disabled);
     if (option) {
       this._listKeyManager.setActiveItem(option);
       scrollIntoViewIfNeeded$1(option, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"));
@@ -1120,14 +1275,12 @@ _M3eAutocompleteElement_handleMenuToggle = function _M3eAutocompleteElement_hand
   }
 };
 _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMenu(e) {
-  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) return;
-  [...__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").childNodes].forEach(x => this.append(x));
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").remove();
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) return;
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.replaceChildren(...__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").childNodes);
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").remove();
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").removeEventListener("toggle", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
   __classPrivateFieldSet(this, _M3eAutocompleteElement_menu, undefined, "f");
-  __classPrivateFieldSet(this, _M3eAutocompleteElement_textHighlight, undefined, "f");
   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");
@@ -1141,20 +1294,32 @@ _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMe
   }));
 };
 _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).readOnly || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).disabled || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasVisibleOptions_get)) return;
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).readOnly || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).disabled) return;
+  const count = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) return;
   __classPrivateFieldSet(this, _M3eAutocompleteElement_menu, document.createElement("m3e-option-panel"), "f");
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").id = __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f");
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").style.overflowX = "hidden";
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").style.minWidth = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_minMenuWidth_get);
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("toggle", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
-  __classPrivateFieldSet(this, _M3eAutocompleteElement_textHighlight, document.createElement("m3e-text-highlight"), "f");
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").appendChild(__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f"));
-  for (const node of [...this.childNodes]) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").append(node);
-  }
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")) {
+    const children = [...__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f").childNodes];
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasNoDataSlot_get) && this.noDataLabel) {
+      const noDataSpan = document.createElement("span");
+      noDataSpan.slot = "no-data";
+      noDataSpan.textContent = this.noDataLabel;
+      children.push(noDataSpan);
+    }
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasLoadingSlot_get) && this.loadingLabel) {
+      const loadingSpan = document.createElement("span");
+      loadingSpan.slot = "loading";
+      loadingSpan.textContent = this.loadingLabel;
+      children.push(loadingSpan);
+    }
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").replaceChildren(...children);
+  }
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateMenuState).call(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), count);
   (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get) ?? __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)).insertAdjacentElement("afterend", __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "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"));
@@ -1165,6 +1330,10 @@ _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
   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_updateMenuState = function _M3eAutocompleteElement_updateMenuState(menu, count) {
+  setCustomState$1(menu, "-loading", this.loading);
+  setCustomState$1(menu, "-no-data", count == 0);
+};
 _M3eAutocompleteElement_hideMenu = function _M3eAutocompleteElement_hideMenu() {
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.hide();
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.removeAttribute("aria-activedescendant");
@@ -1178,7 +1347,7 @@ _M3eAutocompleteElement_activateOption = function _M3eAutocompleteElement_activa
       behavior: "instant"
     });
     const focusVisible = forceFocusVisible || !__classPrivateFieldGet(this, _M3eAutocompleteElement_ignoreFocusVisible, "f") && (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).matches(":focus-visible") || forcedColorsActive$1());
-    this.options.forEach(x => {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).forEach(x => {
       const active = x === option && focusVisible;
       if (active) {
         x.focusRing?.show();
@@ -1190,56 +1359,124 @@ _M3eAutocompleteElement_activateOption = function _M3eAutocompleteElement_activa
     });
   }
 };
-_M3eAutocompleteElement_selectOption = function _M3eAutocompleteElement_selectOption(option) {
+_M3eAutocompleteElement_updateSelectionState = /** @private */
+async function _M3eAutocompleteElement_updateSelectionState(clone) {
+  const option = this._options[this._listKeyManager.items.indexOf(clone)];
+  if (option) {
+    option.selected = clone.selected;
+    if (option.isUpdatePending) {
+      await option.updateComplete;
+    }
+  }
+};
+_M3eAutocompleteElement_selectOption = /** @private */
+async function _M3eAutocompleteElement_selectOption(option) {
   if (option.selected) return;
   option.selected = true;
-  option.requestUpdate();
+  await __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateSelectionState).call(this, option);
+  if (option.isUpdatePending) {
+    await option.updateComplete;
+  }
   this.requestUpdate();
+  if (this.isUpdatePending) {
+    await this.updateComplete;
+  }
   if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = option.value;
   }
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
 };
+_M3eAutocompleteElement_filterOption = function _M3eAutocompleteElement_filterOption(clone, option, term, exactTerm) {
+  const value = this.caseSensitive ? option.value : option.value.toLowerCase();
+  switch (this.filter) {
+    case "starts-with":
+      clone.term = exactTerm;
+      clone.highlightMode = this.filter;
+      return value.startsWith(term);
+    case "ends-with":
+      clone.term = exactTerm;
+      clone.highlightMode = this.filter;
+      return value.endsWith(term);
+    case "contains":
+      clone.term = exactTerm;
+      clone.highlightMode = this.filter;
+      return value.includes(term);
+    case "none":
+      clone.disableHighlight = true;
+      return true;
+    default:
+      clone.disableHighlight = true;
+      return this.filter(option, exactTerm);
+  }
+};
 _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterOptions() {
-  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return;
-  const term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value.toLocaleLowerCase();
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return 0;
+  const oldCount = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).filter(x => !x.hidden).length;
+  const shouldAnnounce = !this.loading && __classPrivateFieldGet(this, _M3eAutocompleteElement_inputChanged, "f");
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, false, "f");
+  const exactTerm = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
+  const term = this.caseSensitive ? exactTerm : exactTerm.toLocaleLowerCase();
+  let newCount = 0;
   let first = false;
   let last;
-  for (const option of this.options) {
-    const value = option.value.toLocaleLowerCase();
-    const hidden = !value.includes(term);
-    option.style.display = hidden ? "none" : "";
-    if (hidden) {
-      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, option);
-      deleteCustomState$1(option, "-first");
-      deleteCustomState$1(option, "-last");
-    } else if (!first) {
-      addCustomState$1(option, "-first");
-      first = true;
-      addCustomState$1(option, "-last");
-      last = option;
+  for (let i = 0; i < __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).length; i++) {
+    const clone = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get)[i];
+    const option = this._options[i];
+    clone.hidden = !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOption).call(this, clone, option, term, exactTerm);
+    if (clone.hidden) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, clone);
+      deleteCustomState$1(clone, "-first");
+      deleteCustomState$1(clone, "-last");
     } else {
-      deleteCustomState$1(option, "-first");
-      if (last) {
-        deleteCustomState$1(last, "-last");
+      newCount++;
+      if (!first && !(clone.parentElement instanceof M3eOptGroupElement$1)) {
+        addCustomState$1(clone, "-first");
+        first = true;
+        addCustomState$1(clone, "-last");
+        last = clone;
+      } else {
+        deleteCustomState$1(clone, "-first");
+        if (last) {
+          deleteCustomState$1(last, "-last");
+        }
+        addCustomState$1(clone, "-last");
+        last = clone;
       }
-      addCustomState$1(option, "-last");
-      last = option;
     }
-    if (option.selected && value !== term) {
-      option.selected = false;
+    if (clone.selected && option.value !== exactTerm) {
+      clone.selected = false;
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateSelectionState).call(this, clone);
     }
   }
-  const groups = __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.querySelectorAll("m3e-optgroup") ?? this.querySelectorAll("m3e-optgroup");
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateMenuState).call(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), newCount);
+  }
+  const groups = __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.querySelectorAll("m3e-optgroup") ?? __classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelectorAll("m3e-optgroup") ?? [];
   for (const group of groups) {
-    const hidden = [...group.querySelectorAll("m3e-option")].every(x => x.style.display === "none");
-    group.style.display = hidden ? "none" : "";
+    group.hidden = [...group.querySelectorAll("m3e-option")].every(x => x.hidden);
+  }
+  if (shouldAnnounce) {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_announceResults).call(this, oldCount, newCount);
   }
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_autoActivate).call(this);
+  return newCount;
+};
+_M3eAutocompleteElement_announceResults = function _M3eAutocompleteElement_announceResults(oldCount, newCount) {
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) return;
+  if (newCount == 0) {
+    if (oldCount > 0 && this.noDataLabel) {
+      M3eLiveAnnouncer.announce(this.noDataLabel, "polite");
+    }
+  } else if (oldCount != newCount) {
+    const message = this.resultsLabel instanceof Function ? this.resultsLabel(newCount) : this.resultsLabel;
+    if (message) {
+      M3eLiveAnnouncer.announce(message, "polite");
+    }
+  }
 };
 _M3eAutocompleteElement_autoActivate = function _M3eAutocompleteElement_autoActivate() {
   if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {
-    const option = this.options.find(x => !x.disabled && x.style.display !== "none");
+    const option = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).find(x => !x.disabled && !x.hidden);
     if (option) {
       this._listKeyManager.setActiveItem(option);
       if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
@@ -1275,6 +1512,41 @@ __decorate([n$1({
   attribute: "auto-activate",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "autoActivate", void 0);
+__decorate([n$1({
+  attribute: "case-sensitive",
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "caseSensitive", void 0);
+__decorate([n$1({
+  converter: {
+    fromAttribute(value) {
+      if (value === null) return "contains";
+      if (value === "starts-with" || value === "ends-with" || value === "contains" || value === "none") {
+        return value;
+      }
+      return "contains";
+    }
+  }
+})], M3eAutocompleteElement.prototype, "filter", void 0);
+__decorate([n$1({
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "loading", void 0);
+__decorate([n$1({
+  attribute: "hide-no-data",
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "hideNoData", void 0);
+__decorate([n$1({
+  attribute: "hide-loading",
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "hideLoading", void 0);
+__decorate([n$1({
+  attribute: "loading-label"
+})], M3eAutocompleteElement.prototype, "loadingLabel", void 0);
+__decorate([n$1({
+  attribute: "no-data-label"
+})], M3eAutocompleteElement.prototype, "noDataLabel", void 0);
+__decorate([n$1({
+  attribute: "results-label"
+})], M3eAutocompleteElement.prototype, "resultsLabel", void 0);
 M3eAutocompleteElement = M3eAutocompleteElement_1 = __decorate([customElement$1("m3e-autocomplete")], M3eAutocompleteElement);
 
 /**
@@ -3566,11 +3838,11 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
 };
 /** The styles of the element. */
 M3eButtonElement.styles = [ButtonSizeStyle, ButtonVariantStyle, ButtonStyle];
-__decorate([e$4(".base")], M3eButtonElement.prototype, "_base", void 0);
-__decorate([e$4(".elevation")], M3eButtonElement.prototype, "_elevation", void 0);
-__decorate([e$4(".focus-ring")], M3eButtonElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eButtonElement.prototype, "_stateLayer", void 0);
-__decorate([e$4(".ripple")], M3eButtonElement.prototype, "_ripple", void 0);
+__decorate([e$3(".base")], M3eButtonElement.prototype, "_base", void 0);
+__decorate([e$3(".elevation")], M3eButtonElement.prototype, "_elevation", void 0);
+__decorate([e$3(".focus-ring")], M3eButtonElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eButtonElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eButtonElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eButtonElement.prototype, "variant", void 0);
@@ -3757,7 +4029,7 @@ _M3eButtonGroupElement_handleChange = function _M3eButtonGroupElement_handleChan
 };
 /** The styles of the element. */
 M3eButtonGroupElement.styles = css`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:state(-first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:state(-last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken$1.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken$1.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken$1.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken$1.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken$1.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken$1.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken$1.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken$1.shape.corner.large} ); }`;
-__decorate([e$4(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
+__decorate([e$3(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eButtonGroupElement.prototype, "variant", void 0);
@@ -3767,7 +4039,7 @@ __decorate([n$1({
 __decorate([n$1({
   type: Boolean
 })], M3eButtonGroupElement.prototype, "multi", void 0);
-__decorate([o$3({
+__decorate([o$2({
   slot: "",
   selector: "m3e-button,m3e-icon-button",
   flatten: true
@@ -4138,11 +4410,11 @@ _M3eCardElement_handleClick = function _M3eCardElement_handleClick(e) {
 };
 /** The styles of the element. */
 M3eCardElement.styles = [CardVariantStyle, CardStyle];
-__decorate([e$4(".base")], M3eCardElement.prototype, "_base", void 0);
-__decorate([e$4(".elevation")], M3eCardElement.prototype, "_elevation", void 0);
-__decorate([e$4(".focus-ring")], M3eCardElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eCardElement.prototype, "_stateLayer", void 0);
-__decorate([e$4(".ripple")], M3eCardElement.prototype, "_ripple", void 0);
+__decorate([e$3(".base")], M3eCardElement.prototype, "_base", void 0);
+__decorate([e$3(".elevation")], M3eCardElement.prototype, "_elevation", void 0);
+__decorate([e$3(".focus-ring")], M3eCardElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eCardElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eCardElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   type: Boolean
 })], M3eCardElement.prototype, "inline", void 0);
@@ -4325,9 +4597,9 @@ _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
 };
 /** The styles of the element. */
 M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken$1.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken$1.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken$1.color.error}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken$1.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken$1.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken$1.color.onError}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base, :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper, :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
-__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([e$3(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eCheckboxElement.prototype, "value", void 0);
 M3eCheckboxElement = __decorate([customElement$1("m3e-checkbox")], M3eCheckboxElement);
 
@@ -4401,6 +4673,10 @@ let M3eChipElement = class M3eChipElement extends AttachInternals$1(LitElement)
   set value(value) {
     __classPrivateFieldSet(this, _M3eChipElement_value, value, "f");
   }
+  /** The textual label of the chip. */
+  get label() {
+    return __classPrivateFieldGet(this, _M3eChipElement_textContent, "f");
+  }
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
@@ -4449,10 +4725,10 @@ _M3eChipElement_handleSlotChange = function _M3eChipElement_handleSlotChange(e)
 };
 /** The styles of the element. */
 M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken$1.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken$1.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken$1.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken$1.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:state(-with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:state(-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:state(-with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken$1.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken$1.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
-__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);
-__decorate([e$4(".ripple")], M3eChipElement.prototype, "_ripple", void 0);
+__decorate([e$3(".elevation")], M3eChipElement.prototype, "_elevation", void 0);
+__decorate([e$3(".focus-ring")], M3eChipElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eChipElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eChipElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eChipElement.prototype, "variant", void 0);
@@ -4880,10 +5156,10 @@ const t$1 = globalThis,
   s = i$1 ? i$1.createPolicy("lit-html", {
     createHTML: t => t
   }) : void 0,
-  e$3 = "$lit$",
+  e$2 = "$lit$",
   h = `lit$${Math.random().toFixed(9).slice(2)}$`,
-  o$2 = "?" + h,
-  n = `<${o$2}>`,
+  o$1 = "?" + h,
+  n = `<${o$1}>`,
   r = document,
   l = () => r.createComment(""),
   c = t => null === t || "object" != typeof t && "function" != typeof t,
@@ -4919,7 +5195,7 @@ const V = (t, i) => {
       y = 0;
     for (; y < s.length && (c.lastIndex = y, u = c.exec(s), null !== u);) y = c.lastIndex, c === f ? "!--" === u[1] ? c = v : void 0 !== u[1] ? c = _ : void 0 !== u[2] ? ($.test(u[2]) && (r = RegExp("</" + u[2], "g")), c = m) : void 0 !== u[3] && (c = m) : c === m ? ">" === u[0] ? (c = r ?? f, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? m : '"' === u[3] ? g : p) : c === g || c === p ? c = m : c === v || c === _ ? c = f : (c = m, r = void 0);
     const x = c === m && t[i + 1].startsWith("/>") ? " " : "";
-    l += c === f ? s + n : d >= 0 ? (o.push(a), s.slice(0, d) + e$3 + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
+    l += c === f ? s + n : d >= 0 ? (o.push(a), s.slice(0, d) + e$2 + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
   }
   return [P(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : 3 === i ? "</math>" : "")), o];
 };
@@ -4941,7 +5217,7 @@ class N {
     }
     for (; null !== (r = C.nextNode()) && d.length < u;) {
       if (1 === r.nodeType) {
-        if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e$3)) {
+        if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e$2)) {
           const i = v[a++],
             s = r.getAttribute(t).split(h),
             e = /([.?@])?(.*)/.exec(i);
@@ -4968,7 +5244,7 @@ class N {
             r.append(t[s], l());
           }
         }
-      } else if (8 === r.nodeType) if (r.data === o$2) d.push({
+      } else if (8 === r.nodeType) if (r.data === o$1) d.push({
         type: 2,
         index: c
       });else {
@@ -5167,7 +5443,7 @@ j?.(N, R), (t$1.litHtmlVersions ??= []).push("3.3.1");
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o$1 = o => o ?? E;
+const o = o => o ?? E;
 
 var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange, _M3eInputChipElement_handleRemoveButtonClick, _M3eInputChipElement_handleKeyDown;
 /**
@@ -5275,7 +5551,7 @@ let M3eInputChipElement = class M3eInputChipElement extends EventAttribute$1(Dis
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><m3e-elevation class="elevation" for="cell" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" for="cell" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" for="cell" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" for="cell" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="wrapper"><div id="cell" class="cell" role="gridcell" tabindex="${o$1(this.disabled ? undefined : "-1")}" @keydown="${__classPrivateFieldGet(this, _M3eInputChipElement_instances, "m", _M3eInputChipElement_handleKeyDown)}"><slot name="avatar" @slotchange="${__classPrivateFieldGet(this, _M3eInputChipElement_instances, "m", _M3eInputChipElement_handleAvatarSlotChange)}"></slot>${this._renderIcon()}<div class="label">${this._renderSlot()}</div><div class="touch" aria-hidden="true"></div></div>${this._renderTrailingIcon()}</div></div>`;
+    return html`<div class="base"><m3e-elevation class="elevation" for="cell" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" for="cell" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" for="cell" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" for="cell" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="wrapper"><div id="cell" class="cell" role="gridcell" tabindex="${o(this.disabled ? undefined : "-1")}" @keydown="${__classPrivateFieldGet(this, _M3eInputChipElement_instances, "m", _M3eInputChipElement_handleKeyDown)}"><slot name="avatar" @slotchange="${__classPrivateFieldGet(this, _M3eInputChipElement_instances, "m", _M3eInputChipElement_handleAvatarSlotChange)}"></slot>${this._renderIcon()}<div class="label">${this._renderSlot()}</div><div class="touch" aria-hidden="true"></div></div>${this._renderTrailingIcon()}</div></div>`;
   }
   /** @internal @inheritdoc */
   _renderTrailingIcon() {
@@ -5304,8 +5580,8 @@ _M3eInputChipElement_handleKeyDown = function _M3eInputChipElement_handleKeyDown
 M3eInputChipElement.formAssociated = true;
 /** The styles of the element. */
 M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${DesignToken$1.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}); } :host(:state(-with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:state(-with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
-__decorate([e$4(".cell")], M3eInputChipElement.prototype, "cell", void 0);
-__decorate([e$4(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
+__decorate([e$3(".cell")], M3eInputChipElement.prototype, "cell", void 0);
+__decorate([e$3(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
 __decorate([n$1({
   type: Boolean
 })], M3eInputChipElement.prototype, "removable", void 0);
@@ -5529,8 +5805,13 @@ _M3eInputChipSetElement_handleChipRemove = function _M3eInputChipSetElement_hand
   if (!__classPrivateFieldGet(this, _M3eInputChipSetElement_listKeyManager, "f").activeItem) {
     __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")?.focus();
   }
-  this.dispatchEvent(new Event("change", {
-    bubbles: true
+  this.dispatchEvent(new CustomEvent("change", {
+    bubbles: true,
+    detail: {
+      type: "remove",
+      value: chip.value,
+      chip: chip
+    }
   }));
 };
 _M3eInputChipSetElement_handleChipClick = function _M3eInputChipSetElement_handleChipClick(e) {
@@ -5555,8 +5836,13 @@ async function _M3eInputChipSetElement_handleInputChange() {
       __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, false, "f");
     }
   }
-  this.dispatchEvent(new Event("change", {
-    bubbles: true
+  this.dispatchEvent(new CustomEvent("change", {
+    bubbles: true,
+    detail: {
+      type: "add",
+      value: value,
+      chip: chip
+    }
   }));
 };
 _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_handleInputKeyDown(e) {
@@ -6646,7 +6932,7 @@ _LongPressController_callback = new WeakMap(), _LongPressController_threshold =
   }
 };
 
-var _MutationController_host, _MutationController_callback, _MutationController_skipInitial, _MutationController_config, _MutationController_observer, _MutationController_unobservedUpdate;
+var _MutationController_callback, _MutationController_skipInitial, _MutationController_config, _MutationController_observer, _MutationController_unobservedUpdate;
 /**
  * A `ReactiveController` that integrates a `MutationObserver` with an element's reactive update lifecycle
  * to detect arbitrary changes to DOM, including nodes being added or removed and attributes changing.
@@ -6660,8 +6946,6 @@ class MutationController extends MonitorControllerBase {
   constructor(host, options) {
     super(host, options);
     /** @private */
-    _MutationController_host.set(this, void 0);
-    /** @private */
     _MutationController_callback.set(this, void 0);
     /** @private */
     _MutationController_skipInitial.set(this, false);
@@ -6671,7 +6955,6 @@ class MutationController extends MonitorControllerBase {
     _MutationController_observer.set(this, void 0);
     /** @private */
     _MutationController_unobservedUpdate.set(this, true);
-    __classPrivateFieldSet(this, _MutationController_host, host, "f");
     __classPrivateFieldSet(this, _MutationController_callback, options.callback, "f");
     __classPrivateFieldSet(this, _MutationController_skipInitial, options.skipInitial ?? false, "f");
     __classPrivateFieldSet(this, _MutationController_config, options.config, "f");
@@ -6680,10 +6963,7 @@ class MutationController extends MonitorControllerBase {
       console.warn("MutationController error: the browser does not support MutationObserver.");
       return;
     }
-    __classPrivateFieldSet(this, _MutationController_observer, new MutationObserver((records, observer) => {
-      __classPrivateFieldGet(this, _MutationController_callback, "f").call(this, records, observer);
-      __classPrivateFieldGet(this, _MutationController_host, "f").requestUpdate();
-    }), "f");
+    __classPrivateFieldSet(this, _MutationController_observer, new MutationObserver((records, observer) => __classPrivateFieldGet(this, _MutationController_callback, "f").call(this, records, observer)), "f");
   }
   /** @inheritdoc */
   async hostUpdated() {
@@ -6704,7 +6984,6 @@ class MutationController extends MonitorControllerBase {
   _observe(target) {
     __classPrivateFieldGet(this, _MutationController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _MutationController_config, "f"));
     __classPrivateFieldSet(this, _MutationController_unobservedUpdate, true, "f");
-    __classPrivateFieldGet(this, _MutationController_host, "f").requestUpdate();
   }
   /** @inheritdoc */
   _unobserve() {
@@ -6714,7 +6993,7 @@ class MutationController extends MonitorControllerBase {
     }
   }
 }
-_MutationController_host = new WeakMap(), _MutationController_callback = new WeakMap(), _MutationController_skipInitial = new WeakMap(), _MutationController_config = new WeakMap(), _MutationController_observer = new WeakMap(), _MutationController_unobservedUpdate = new WeakMap();
+_MutationController_callback = new WeakMap(), _MutationController_skipInitial = new WeakMap(), _MutationController_config = new WeakMap(), _MutationController_observer = new WeakMap(), _MutationController_unobservedUpdate = new WeakMap();
 
 var _PressedController_instances, _PressedController_capture, _PressedController_callback, _PressedController_isPressedKey, _PressedController_pressedTargets, _PressedController_minPressedDuration, _PressedController_pointerDownHandler, _PressedController_pointerUpHandler, _PressedController_touchEndHandler, _PressedController_keyDownHandler, _PressedController_keyUpHandler, _PressedController_handlePointerDown, _PressedController_handlePointerUp, _PressedController_handleTouchEnd, _PressedController_handleKeyDown, _PressedController_handleKeyUp, _PressedController_clearPressedTargets;
 /** A `ReactiveController` used to monitor the pressed state of one or more elements. */
@@ -6891,7 +7170,7 @@ _PressedController_capture = new WeakMap(), _PressedController_callback = new We
   }
 };
 
-var _ResizeController_host, _ResizeController_callback, _ResizeController_skipInitial, _ResizeController_config, _ResizeController_observer, _ResizeController_unobservedUpdate;
+var _ResizeController_callback, _ResizeController_skipInitial, _ResizeController_config, _ResizeController_observer, _ResizeController_unobservedUpdate;
 /** A `ReactiveController` used to monitor when an element is resized. */
 class ResizeController extends MonitorControllerBase {
   /**
@@ -6902,8 +7181,6 @@ class ResizeController extends MonitorControllerBase {
   constructor(host, options) {
     super(host, options);
     /** @private */
-    _ResizeController_host.set(this, void 0);
-    /** @private */
     _ResizeController_callback.set(this, void 0);
     /** @private */
     _ResizeController_skipInitial.set(this, void 0);
@@ -6913,7 +7190,6 @@ class ResizeController extends MonitorControllerBase {
     _ResizeController_observer.set(this, void 0);
     /** @private */
     _ResizeController_unobservedUpdate.set(this, true);
-    __classPrivateFieldSet(this, _ResizeController_host, host, "f");
     __classPrivateFieldSet(this, _ResizeController_callback, options.callback, "f");
     __classPrivateFieldSet(this, _ResizeController_skipInitial, options.skipInitial ?? false, "f");
     __classPrivateFieldSet(this, _ResizeController_config, options.config, "f");
@@ -6922,10 +7198,7 @@ class ResizeController extends MonitorControllerBase {
       console.warn("ResizeController error: the browser does not support ResizeObserver.");
       return;
     }
-    __classPrivateFieldSet(this, _ResizeController_observer, new ResizeObserver((entries, observer) => {
-      __classPrivateFieldGet(this, _ResizeController_callback, "f").call(this, entries, observer);
-      __classPrivateFieldGet(this, _ResizeController_host, "f").requestUpdate();
-    }), "f");
+    __classPrivateFieldSet(this, _ResizeController_observer, new ResizeObserver((entries, observer) => __classPrivateFieldGet(this, _ResizeController_callback, "f").call(this, entries, observer)), "f");
   }
   /** @inheritdoc */
   async hostUpdated() {
@@ -6941,7 +7214,6 @@ class ResizeController extends MonitorControllerBase {
   _observe(target) {
     __classPrivateFieldGet(this, _ResizeController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _ResizeController_config, "f"));
     __classPrivateFieldSet(this, _ResizeController_unobservedUpdate, true, "f");
-    __classPrivateFieldGet(this, _ResizeController_host, "f").requestUpdate();
   }
   /**
    * Stops observing the specified element.
@@ -6951,7 +7223,7 @@ class ResizeController extends MonitorControllerBase {
     __classPrivateFieldGet(this, _ResizeController_observer, "f")?.unobserve(target);
   }
 }
-_ResizeController_host = new WeakMap(), _ResizeController_callback = new WeakMap(), _ResizeController_skipInitial = new WeakMap(), _ResizeController_config = new WeakMap(), _ResizeController_observer = new WeakMap(), _ResizeController_unobservedUpdate = 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.
@@ -7151,9 +7423,8 @@ const spaceSeparatedStringConverter = {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const t = {
-    ATTRIBUTE: 1,
-    CHILD: 2},
-  e$2 = t => (...e) => ({
+    ATTRIBUTE: 1},
+  e$1 = t => (...e) => ({
     _$litDirective$: t,
     values: e
   });
@@ -7246,7 +7517,7 @@ class SafeStyleMapDirective extends i {
  * @param styleInfo
  * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
  */
-const safeStyleMap = e$2(SafeStyleMapDirective);
+const safeStyleMap = e$1(SafeStyleMapDirective);
 
 /**
  * Determines whether an object has keys for a given type.
@@ -7270,6 +7541,9 @@ function isAttachInternalsMixin(value) {
   return hasKeys(value, internals);
 }
 const _internals = Symbol("_internals");
+// Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+// a copy of custom state is retained locally so components can correctly read after write.
+const _customState = Symbol("_customState");
 /**
  * Mixin to augment an element with behavior that attaches to `ElementInternals`.
  * @template T The type of the base class.
@@ -7278,9 +7552,17 @@ const _internals = Symbol("_internals");
  * @returns {Constructor<AttachInternalsMixin> & T} A constructor that implements `AttachInternalsMixin`.
  */
 function AttachInternals(base, formAssociated) {
+  var _a;
   class _AttachInternals extends base {
+    constructor() {
+      super(...arguments);
+      // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+      // a copy of custom state is retained locally so components can correctly read after write.
+      /** @private */
+      this[_a] = new Set();
+    }
     /** @internal */
-    get [internals]() {
+    get [(_a = _customState, internals)]() {
       return this[_internals] ?? (this[_internals] = this.attachInternals());
     }
   }
@@ -7295,7 +7577,14 @@ function AttachInternals(base, formAssociated) {
  * @returns {boolean} Whether `element` has `state`.
  */
 function hasCustomState(element, state) {
-  return isServer ? false : element[internals].states.has(state);
+  // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+  // a copy of custom state is retained locally so components can correctly read after write.
+  if (_customState in element) {
+    return element[_customState].has(state);
+  }
+  // This should never get called due to needing a local copy of custom state
+  // since reading after write to flush doesn't work in Safari (affecting all iOS browsers).
+  return element[internals].states.has(state);
 }
 /**
  * Convenience function used to add custom state to an element.
@@ -7303,9 +7592,13 @@ function hasCustomState(element, state) {
  * @param {string} state The custom state to add.
  */
 function addCustomState(element, state) {
-  if (!isServer) {
-    element[internals]?.states.add(state);
+  // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+  // a copy of custom state is retained locally so components can correctly read after write.
+  if (_customState in element) {
+    element[_customState].add(state);
   }
+  element[internals]?.states.add(state);
+  element[internals]?.states.has(state); // flush (even though this doesn't work in Safari)
 }
 /**
  * Convenience function used to delete custom state from an element.
@@ -7314,7 +7607,16 @@ function addCustomState(element, state) {
  * @returns {boolean} Whether `state` was removed from `element`.
  */
 function deleteCustomState(element, state) {
-  return !isServer && element[internals]?.states.delete(state);
+  // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+  // a copy of custom state is retained locally so components can correctly read after write.
+  if (_customState in element) {
+    element[_customState].delete(state);
+  }
+  if (element[internals]?.states.delete(state)) {
+    element[internals]?.states.has(state); // flush (even though this doesn't work in Safari)
+    return true;
+  }
+  return false;
 }
 /**
  * Convenience function used to add or delete custom state for an element.
@@ -9046,7 +9348,7 @@ function LinkButton(base) {
     [(__LinkButtonMixin_instances = new WeakSet(), _a = _clickHandler, renderPseudoLink)]() {
       const disabled = isDisabledMixin(this) && this.disabled;
       const disabledInteractive = isDisabledInteractiveMixin(this) && this.disabledInteractive;
-      return !disabled && !disabledInteractive && this.href ? html`<a href="${this.href}" target="${o$1(this.target || undefined)}" rel="${o$1(this.rel || undefined)}" download="${o$1(this.download || undefined)}" tabindex="-1" aria-hidden="true" @pointerdown="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkPointerDown)}" @focus="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkFocus)}" @blur="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkBlur)}"></a>` : nothing;
+      return !disabled && !disabledInteractive && this.href ? html`<a href="${this.href}" target="${o(this.target || undefined)}" rel="${o(this.rel || undefined)}" download="${o(this.download || undefined)}" tabindex="-1" aria-hidden="true" @pointerdown="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkPointerDown)}" @focus="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkFocus)}" @blur="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkBlur)}"></a>` : nothing;
     }
   }
   __LinkButtonMixin_handleLinkPointerDown = function __LinkButtonMixin_handleLinkPointerDown(e) {
@@ -9592,7 +9894,7 @@ _M3eElevationElement_handlePressedChange = function _M3eElevationElement_handleP
 };
 /** The styles of the element. */
 M3eElevationElement.styles = css`:host { display: block; } :host, .shadow { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } .shadow.resting, .shadow.focus, .shadow.pressed { will-change: box-shadow; transition: ${unsafeCSS(`box-shadow ${ElevationToken.settleDuration} ${ElevationToken.settleEasing};`)}; } .shadow.hover { will-change: box-shadow; transition: ${unsafeCSS(`box-shadow ${ElevationToken.liftDuration} ${ElevationToken.liftEasing};`)}; } .shadow { box-shadow: ${ElevationToken.level}; } .shadow.focus { box-shadow: ${ElevationToken.focusLevel}; } .shadow.hover { box-shadow: ${ElevationToken.hoverLevel}; } .shadow.pressed { box-shadow: ${ElevationToken.pressedLevel}; } :host([level="0"]) .shadow { --m3e-elevation-level: ${DesignToken.elevation.level0}; --m3e-elevation-hover-level: ${DesignToken.elevation.level1}; } :host([level="1"]) .shadow { --m3e-elevation-level: ${DesignToken.elevation.level1}; --m3e-elevation-hover-level: ${DesignToken.elevation.level2}; } :host([level="2"]) .shadow { --m3e-elevation-level: ${DesignToken.elevation.level2}; --m3e-elevation-hover-level: ${DesignToken.elevation.level3}; } :host([level="3"]) .shadow { --m3e-elevation-level: ${DesignToken.elevation.level3}; --m3e-elevation-hover-level: ${DesignToken.elevation.level4}; } :host([level="4"]) .shadow { --m3e-elevation-level: ${DesignToken.elevation.level4}; --m3e-elevation-hover-level: ${DesignToken.elevation.level5}; } :host([level="5"]) .shadow { --m3e-elevation-level: ${DesignToken.elevation.level5}; --m3e-elevation-hover-level: ${ElevationToken.level}; } :host([level]) .shadow { --m3e-elevation-focus-level: ${ElevationToken.level}; --m3e-elevation-pressed-level: ${ElevationToken.level}; } @media (prefers-reduced-motion) { .shadow.resting, .shadow.pressed, .shadow.focus, .shadow.hover { transition: none; } } @media (forced-colors: active) { .shadow { display: none; } }`;
-__decorate([e$4(".shadow")], M3eElevationElement.prototype, "_shadow", void 0);
+__decorate([e$3(".shadow")], M3eElevationElement.prototype, "_shadow", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -9738,7 +10040,7 @@ _M3eFocusRingElement_handleFocusChange = function _M3eFocusRingElement_handleFoc
 };
 /** The styles of the element. */
 M3eFocusRingElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: ${FocusRingToken.outwardOffset}; } :host([inward]) .outline { outline-offset: calc(${FocusRingToken.inwardOffset} - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc( ${FocusRingToken.inwardOffset} - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}) ); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
-__decorate([e$4(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
+__decorate([e$3(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -10385,7 +10687,7 @@ _M3eStateLayerElement_handleFocusChange = function _M3eStateLayerElement_handleF
 };
 /** The styles of the element. */
 M3eStateLayerElement.styles = css`:host { display: block; } :host, .layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } .layer { will-change: background-color; transition: ${unsafeCSS(`background-color ${StateLayerToken.duration} ${StateLayerToken.easing}`)}; } .layer.focused { background-color: color-mix(in srgb, ${StateLayerToken.focusColor} ${StateLayerToken.focusOpacity}, transparent); } .layer.hover { background-color: color-mix(in srgb, ${StateLayerToken.hoverColor} ${StateLayerToken.hoverOpacity}, transparent); } @media (prefers-reduced-motion) { .layer { transition: none; } } @media (forced-colors: active) { .layer { display: none; } }`;
-__decorate([e$4(".layer")], M3eStateLayerElement.prototype, "_layer", void 0);
+__decorate([e$3(".layer")], M3eStateLayerElement.prototype, "_layer", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -10397,41 +10699,6 @@ __decorate([n$1({
 })], M3eStateLayerElement.prototype, "disableHover", void 0);
 M3eStateLayerElement = __decorate([customElement("m3e-state-layer")], M3eStateLayerElement);
 
-/**
- * An inline container which presents an ellipsis when content overflows.
- *
- * @description
- * The `m3e-text-overflow` component truncates inline content with an ellipsis when it
- * exceeds the available width. It's intended for use inside flex or otherwise
- * constrained containers to preserve layout while providing predictable, single-line
- * truncation behavior for long text.
- *
- * @example
- * A typical usage inside a flex container where the heading and trailing actions are
- * constrained, allowing the center text to truncate with an ellipsis.
- *
- * ```html
- * <div style="display:flex;align-items:center;gap:12px;">
- *   <m3e-icon name="menu"></m3e-icon>
- *   <m3e-text-overflow>Very long title or breadcrumb that should truncate gracefully</m3e-text-overflow>
- *   <m3e-icon name="more_vert"></m3e-icon>
- * </div>
- * ```
- *
- * @tag m3e-text-overflow
- *
- * @slot - Renders the content to truncate with an ellipsis.
- */
-let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
-  /** @inheritdoc */
-  render() {
-    return html`<span class="base"><slot></slot></span>`;
-  }
-};
-/** 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([customElement("m3e-text-overflow")], M3eTextOverflowElement);
-
 var _M3eTextHighlightElement_instances, _M3eTextHighlightElement_id, _M3eTextHighlightElement_ranges, _M3eTextHighlightElement_styles, _M3eTextHighlightElement_isTextNode, _M3eTextHighlightElement_findTextNodes, _M3eTextHighlightElement_highlight;
 var M3eTextHighlightElement_1;
 /**
@@ -10455,8 +10722,9 @@ var M3eTextHighlightElement_1;
  *
  * @slot - Renders the content to highlight.
  *
- * @attr case-sensitive - A value indicating whether matching is case sensitive.
+ * @attr case-sensitive - Whether matching is case sensitive.
  * @attr disabled - A value indicating whether text highlighting is disabled.
+ * @attr mode - The mode in which to highlight text.
  * @attr term - The term to highlight.
  *
  * @fires highlight - Emitted when content is highlighted.
@@ -10487,10 +10755,15 @@ let M3eTextHighlightElement = M3eTextHighlightElement_1 = class M3eTextHighlight
      */
     this.term = "";
     /**
-     * A value indicating whether matching is case sensitive.
+     * Whether matching is case sensitive.
      * @default false
      */
     this.caseSensitive = false;
+    /**
+     * The mode in which to highlight text.
+     * @default "contains"
+     */
+    this.mode = "contains";
     if (this.isSupported) {
       __classPrivateFieldSet(this, _M3eTextHighlightElement_styles, new CSSStyleSheet(), "f");
       __classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f").replaceSync(css`::highlight(${unsafeCSS(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"))}) { background-color: var(--m3e-text-highlight-container-color, ${DesignToken.color.secondaryContainer}); color: var(--m3e-text-highlight-color, ${DesignToken.color.onSecondaryContainer}); text-decoration: var(--m3e-text-highlight-decoration); text-shadow: var(--m3e-text-highlight-shadow); }`.toString());
@@ -10528,11 +10801,11 @@ _M3eTextHighlightElement_ranges = new WeakMap();
 _M3eTextHighlightElement_styles = new WeakMap();
 _M3eTextHighlightElement_instances = new WeakSet();
 _M3eTextHighlightElement_isTextNode = function _M3eTextHighlightElement_isTextNode(node) {
-  return /^(\\s|\\n)+$/gi.test(node.data) ? false : true;
+  return !/^\s*$/.test(node.data);
 };
 _M3eTextHighlightElement_findTextNodes = function _M3eTextHighlightElement_findTextNodes(parent, nodes) {
   if (parent instanceof HTMLSlotElement) {
-    parent.assignedElements({
+    parent.assignedNodes({
       flatten: true
     }).forEach(x => {
       switch (x.nodeType) {
@@ -10576,33 +10849,65 @@ _M3eTextHighlightElement_highlight = function _M3eTextHighlightElement_highlight
   }
   const texts = new Array();
   __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_findTextNodes).call(this, this, texts);
-  const term = !this.caseSensitive ? this.term.toLowerCase() : this.term;
-  __classPrivateFieldSet(this, _M3eTextHighlightElement_ranges, texts.map(x => {
-    return {
-      el: x,
-      text: (!this.caseSensitive ? x.textContent?.toLowerCase() : x.textContent) ?? ""
-    };
-  }).map(({
-    el,
-    text
-  }) => {
-    const indices = new Array();
-    let startPos = 0;
-    while (startPos < text.length) {
-      const index = text.indexOf(term, startPos);
-      if (index === -1) break;
-      indices.push(index);
-      startPos = index + term.length;
-    }
-    return indices.map(index => {
-      const range = new Range();
-      range.setStart(el, index);
-      range.setEnd(el, index + term.length);
-      return range;
-    });
-  }).flat(), "f");
-  if (__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").length > 0) {
-    CSS.highlights.set(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"), new Highlight(...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")));
+  if (texts.length > 0) {
+    const term = !this.caseSensitive ? this.term.toLowerCase() : this.term;
+    switch (this.mode) {
+      case "starts-with":
+        {
+          const first = texts[0];
+          const text = (this.caseSensitive ? first.textContent : first.textContent?.toLowerCase()) ?? "";
+          if (text.startsWith(term)) {
+            const range = new Range();
+            range.setStart(first, 0);
+            range.setEnd(first, term.length);
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").push(range);
+          }
+        }
+        break;
+      case "ends-with":
+        {
+          const last = texts[texts.length - 1];
+          const text = (this.caseSensitive ? last.textContent : last.textContent?.toLowerCase()) ?? "";
+          if (text.endsWith(term)) {
+            const start = text.length - term.length;
+            const end = start + term.length;
+            const range = new Range();
+            range.setStart(last, start);
+            range.setEnd(last, end);
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").push(range);
+          }
+        }
+        break;
+      case "contains":
+        __classPrivateFieldSet(this, _M3eTextHighlightElement_ranges, texts.map(x => {
+          return {
+            el: x,
+            text: (!this.caseSensitive ? x.textContent?.toLowerCase() : x.textContent) ?? ""
+          };
+        }).map(({
+          el,
+          text
+        }) => {
+          const indices = new Array();
+          let startPos = 0;
+          while (startPos < text.length) {
+            const index = text.indexOf(term, startPos);
+            if (index === -1) break;
+            indices.push(index);
+            startPos = index + term.length;
+          }
+          return indices.map(index => {
+            const range = new Range();
+            range.setStart(el, index);
+            range.setEnd(el, index + term.length);
+            return range;
+          });
+        }).flat(), "f");
+        break;
+    }
+    if (__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").length > 0) {
+      CSS.highlights.set(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"), new Highlight(...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")));
+    }
   }
   this.dispatchEvent(new CustomEvent("highlight", {
     detail: [...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")],
@@ -10623,8 +10928,44 @@ __decorate([n$1({
   attribute: "case-sensitive",
   type: Boolean
 })], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
+__decorate([n$1()], M3eTextHighlightElement.prototype, "mode", void 0);
 M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([customElement("m3e-text-highlight")], M3eTextHighlightElement);
 
+/**
+ * An inline container which presents an ellipsis when content overflows.
+ *
+ * @description
+ * The `m3e-text-overflow` component truncates inline content with an ellipsis when it
+ * exceeds the available width. It's intended for use inside flex or otherwise
+ * constrained containers to preserve layout while providing predictable, single-line
+ * truncation behavior for long text.
+ *
+ * @example
+ * A typical usage inside a flex container where the heading and trailing actions are
+ * constrained, allowing the center text to truncate with an ellipsis.
+ *
+ * ```html
+ * <div style="display:flex;align-items:center;gap:12px;">
+ *   <m3e-icon name="menu"></m3e-icon>
+ *   <m3e-text-overflow>Very long title or breadcrumb that should truncate gracefully</m3e-text-overflow>
+ *   <m3e-icon name="more_vert"></m3e-icon>
+ * </div>
+ * ```
+ *
+ * @tag m3e-text-overflow
+ *
+ * @slot - Renders the content to truncate with an ellipsis.
+ */
+let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
+  /** @inheritdoc */
+  render() {
+    return html`<span class="base"><slot></slot></span>`;
+  }
+};
+/** 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([customElement("m3e-text-overflow")], M3eTextOverflowElement);
+
 /**
  * An element, nested within a clickable element, used to close a parenting dialog.
  * @tag m3e-dialog-action
@@ -10830,7 +11171,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._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>`;
+    return html`<dialog class="base" role="${o(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();
@@ -10894,8 +11235,8 @@ M3eDialogElement.styles = css`:host { display: contents; } .base { font: inherit
 /** @private */
 M3eDialogElement.__nextId = 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([e$3(".base")], M3eDialogElement.prototype, "_base", void 0);
+__decorate([e$3(".content")], M3eDialogElement.prototype, "_content", void 0);
 __decorate([n$1({
   type: Boolean
 })], M3eDialogElement.prototype, "alert", void 0);
@@ -11648,8 +11989,8 @@ _M3eExpansionHeaderElement_renderToggle = function _M3eExpansionHeaderElement_re
 };
 /** The styles of the element. */
 M3eExpansionHeaderElement.styles = ExpansionHeaderStyle;
-__decorate([e$4(".focus-ring")], M3eExpansionHeaderElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eExpansionHeaderElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".focus-ring")], M3eExpansionHeaderElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eExpansionHeaderElement.prototype, "_stateLayer", void 0);
 __decorate([n$1({
   attribute: "toggle-direction",
   reflect: true
@@ -11864,7 +12205,7 @@ _M3eExpansionPanelElement_updateHeaderToggleRotation = function _M3eExpansionPan
 M3eExpansionPanelElement.styles = ExpansionPanelStyle;
 /** @private */
 M3eExpansionPanelElement.__nextId = 0;
-__decorate([e$4("m3e-expansion-header")], M3eExpansionPanelElement.prototype, "_header", void 0);
+__decorate([e$3("m3e-expansion-header")], M3eExpansionPanelElement.prototype, "_header", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -12925,11 +13266,11 @@ _M3eFabElement_handleSlotChange = function _M3eFabElement_handleSlotChange() {
 };
 /** The styles of the element. */
 M3eFabElement.styles = [FabSizeStyle, FabVariantStyle, FabStyle];
-__decorate([e$4(".base")], M3eFabElement.prototype, "_base", void 0);
-__decorate([e$4(".elevation")], M3eFabElement.prototype, "_elevation", void 0);
-__decorate([e$4(".focus-ring")], M3eFabElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eFabElement.prototype, "_stateLayer", void 0);
-__decorate([e$4(".ripple")], M3eFabElement.prototype, "_ripple", void 0);
+__decorate([e$3(".base")], M3eFabElement.prototype, "_base", void 0);
+__decorate([e$3(".elevation")], M3eFabElement.prototype, "_elevation", void 0);
+__decorate([e$3(".focus-ring")], M3eFabElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eFabElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eFabElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eFabElement.prototype, "variant", void 0);
@@ -13032,10 +13373,10 @@ _M3eFabMenuItemElement_handleClick = function _M3eFabMenuItemElement_handleClick
 };
 /** The styles of the element. */
 M3eFabMenuItemElement.styles = 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}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken$1.shape.corner.full}); } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: var(--_fab-menu-item-color); } :host(:not(:disabled)) .base { background-color: var(--_fab-menu-item-container-color); --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color); --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color); --m3e-ripple-color: var(--_fab-menu-ripple-color); } :host(:disabled) .base { background-color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-fab-menu-item-disabled-container-opacity, 10%), transparent ); } :host(:disabled) .label, :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-fab-menu-item-disabled-opacity, 38%), transparent ); } .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-fab-menu-item-leading-space, 1.5rem); padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem); column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem); } .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 { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { .base, .label, .icon { transition: none; } } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:not(:disabled)) .base { background-color: Menu; } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: MenuText; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } }`;
-__decorate([e$4(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", void 0);
-__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);
+__decorate([e$3(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", void 0);
+__decorate([e$3(".focus-ring")], M3eFabMenuItemElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eFabMenuItemElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eFabMenuItemElement.prototype, "_ripple", void 0);
 M3eFabMenuItemElement = __decorate([customElement$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;
@@ -13788,10 +14129,10 @@ M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: c
         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(: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);
-__decorate([e$4(".hint")], M3eFormFieldElement.prototype, "_hint", void 0);
+__decorate([e$3(".base")], M3eFormFieldElement.prototype, "_base", void 0);
+__decorate([e$3(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
+__decorate([e$3(".error")], M3eFormFieldElement.prototype, "_error", void 0);
+__decorate([e$3(".hint")], M3eFormFieldElement.prototype, "_hint", void 0);
 __decorate([r$1()], M3eFormFieldElement.prototype, "_pseudoLabel", void 0);
 __decorate([r$1()], M3eFormFieldElement.prototype, "_required", void 0);
 __decorate([r$1()], M3eFormFieldElement.prototype, "_invalid", void 0);
@@ -14096,7 +14437,7 @@ let M3eIconElement = class M3eIconElement extends Role$1(LitElement, "img") {
 };
 /** The styles of the element. */
 M3eIconElement.styles = css`:host { display: inline-block; user-select: none; font-size: var(--m3e-icon-size, 1.5rem); width: 1em; vertical-align: middle; overflow: hidden; } .icon { font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; width: inherit; height: inherit; vertical-align: inherit; font-variation-settings: "FILL" var(--_icon-fill, 0), "wght" var(--_icon-weight, 400), "GRAD" var(--_icon-grade, 0), "opsz" var(--_icon-optical-size, 24); } :host([variant="outlined"]) .icon { font-family: "Material Symbols Outlined"; } :host([variant="rounded"]) .icon { font-family: "Material Symbols Rounded"; } :host([variant="sharp"]) .icon { font-family: "Material Symbols Sharp"; }`;
-__decorate([e$4(".icon")], M3eIconElement.prototype, "_icon", void 0);
+__decorate([e$3(".icon")], M3eIconElement.prototype, "_icon", void 0);
 __decorate([n$1()], M3eIconElement.prototype, "name", void 0);
 __decorate([n$1({
   reflect: true
@@ -15124,11 +15465,11 @@ _M3eIconButtonElement_handleSelectedIconSlotChange = function _M3eIconButtonElem
 };
 /** The styles of the element. */
 M3eIconButtonElement.styles = [IconButtonSizeStyle, IconButtonVariantStyle, IconButtonStyle];
-__decorate([e$4(".base")], M3eIconButtonElement.prototype, "_base", void 0);
-__decorate([e$4(".elevation")], M3eIconButtonElement.prototype, "_elevation", void 0);
-__decorate([e$4(".focus-ring")], M3eIconButtonElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eIconButtonElement.prototype, "_stateLayer", void 0);
-__decorate([e$4(".ripple")], M3eIconButtonElement.prototype, "_ripple", void 0);
+__decorate([e$3(".base")], M3eIconButtonElement.prototype, "_base", void 0);
+__decorate([e$3(".elevation")], M3eIconButtonElement.prototype, "_elevation", void 0);
+__decorate([e$3(".focus-ring")], M3eIconButtonElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eIconButtonElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eIconButtonElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eIconButtonElement.prototype, "variant", void 0);
@@ -15688,7 +16029,7 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eExpandableListItemElement.prototype, "open", void 0);
-__decorate([e$4(".header")], M3eExpandableListItemElement.prototype, "button", void 0);
+__decorate([e$3(".header")], M3eExpandableListItemElement.prototype, "button", void 0);
 M3eExpandableListItemElement = M3eExpandableListItemElement_1 = __decorate([customElement$1("m3e-expandable-list-item")], M3eExpandableListItemElement);
 
 var _M3eActionListElement_keyDownHandler, _a$8;
@@ -15881,7 +16222,7 @@ let M3eListActionElement = class M3eListActionElement extends LinkButton$1(M3eLi
   }
   /** @inheritdoc */
   render() {
-    return html`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${o$1(this.href || undefined)}" target="${o$1(this.target || undefined)}" download="${o$1(this.download || undefined)}" rel="${o$1(this.rel || undefined)}" @click="${__classPrivateFieldGet(this, _M3eListActionElement_instances, "m", _M3eListActionElement_handleClick)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing" slot="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot></m3e-list-item-button>`;
+    return html`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${o(this.href || undefined)}" target="${o(this.target || undefined)}" download="${o(this.download || undefined)}" rel="${o(this.rel || undefined)}" @click="${__classPrivateFieldGet(this, _M3eListActionElement_instances, "m", _M3eListActionElement_handleClick)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing" slot="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot></m3e-list-item-button>`;
   }
 };
 _M3eListActionElement_instances = new WeakSet();
@@ -15892,7 +16233,7 @@ _M3eListActionElement_handleClick = function _M3eListActionElement_handleClick(e
 };
 /** The styles of the element. */
 M3eListActionElement.styles = css`:host { display: block; } .button { width: 100%; }`;
-__decorate([e$4(".button")], M3eListActionElement.prototype, "button", void 0);
+__decorate([e$3(".button")], M3eListActionElement.prototype, "button", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -15928,9 +16269,9 @@ let M3eListItemButtonElement = class M3eListItemButtonElement extends KeyboardCl
 };
 /** The styles of the element. */
 M3eListItemButtonElement.styles = [M3eListItemElement.styles, css`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } :host(:not(:disabled)) { cursor: pointer; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } slot[name="trailing"] { align-self: var(--_list-item-button-trailing-align-self, auto); }`];
-__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);
+__decorate([e$3(".focus-ring")], M3eListItemButtonElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eListItemButtonElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eListItemButtonElement.prototype, "_ripple", void 0);
 M3eListItemButtonElement = __decorate([customElement$1("m3e-list-item-button")], M3eListItemButtonElement);
 
 var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOptionElement_textContent, _M3eListOptionElement_clickHandler, _M3eListOptionElement_handleSlotChange, _M3eListOptionElement_handleClick;
@@ -16116,9 +16457,9 @@ _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(: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([e$3(".focus-ring")], M3eListOptionElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eListOptionElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eListOptionElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eListOptionElement.prototype, "value", null);
 M3eListOptionElement = __decorate([customElement$1("m3e-list-option")], M3eListOptionElement);
 
@@ -16345,6 +16686,7 @@ let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Role$1
     super.connectedCallback();
     this.ariaValueMin = this.ariaValueMin || "0";
     this.ariaValueMax = this.ariaValueMax || "100";
+    this._activeIndicator?.classList.toggle("animate", true);
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -16363,7 +16705,7 @@ let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Role$1
 };
 /** The styles of the element. */
 M3eLoadingIndicatorElement.styles = css`:host { display: inline-block; aspect-ratio: 1 / 1; contain: strict; vertical-align: middle; content-visibility: auto; } :host([variant="uncontained"]) { width: ${LoadingIndicatorToken.activeIndicatorSize}; } :host([variant="contained"]) { width: ${LoadingIndicatorToken.containerSize}; } :host([variant="uncontained"]) .active-indicator { background-color: ${LoadingIndicatorToken.activeIndicatorColor}; } :host([variant="contained"]) .active-indicator { background-color: ${LoadingIndicatorToken.containedActiveIndicatorColor}; } :host([variant="contained"]) .container { background-color: ${LoadingIndicatorToken.containedContainerColor}; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: ${LoadingIndicatorToken.containerShape}; } .active-indicator { margin: auto; aspect-ratio: 1 / 1; width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842); transform-origin: center; transition: clip-path ${DesignToken$1.motion.spring.slowEffects}; will-change: transform, clip-path; --_polygon-soft-burst: polygon(${ShapePolygon$1["soft-burst"]}); --_polygon-7-sided-cookie: polygon(${ShapePolygon$1["7-sided-cookie"]}); --_polygon-pentagon: polygon(${ShapePolygon$1["pentagon"]}); --_polygon-pill: polygon(${ShapePolygon$1["pill"]}); --_polygon-very-sunny: polygon(${ShapePolygon$1["very-sunny"]}); --_polygon-4-sided-cookie: polygon(${ShapePolygon$1["4-sided-cookie"]}); --_polygon-oval: polygon(${ShapePolygon$1["oval"]}); } .active-indicator.animate { animation: rotate 4998ms infinite; } @keyframes rotate { 0% { clip-path: var(--_polygon-soft-burst); transform: rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 14% { clip-path: var(--_polygon-7-sided-cookie); transform: rotate(154deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 29% { clip-path: var(--_polygon-pentagon); transform: rotate(309deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 43% { clip-path: var(--_polygon-pill); transform: rotate(463deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 57% { clip-path: var(--_polygon-very-sunny); transform: rotate(617deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 71% { clip-path: var(--_polygon-4-sided-cookie); transform: rotate(771deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 83% { clip-path: var(--_polygon-oval); transform: rotate(926deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 100% { clip-path: var(--_polygon-soft-burst); transform: rotate(1080deg); } } @media (forced-colors: active) { .active-indicator { background-color: CanvasText !important; } }`;
-__decorate([e$4(".active-indicator")], M3eLoadingIndicatorElement.prototype, "_activeIndicator", void 0);
+__decorate([e$3(".active-indicator")], M3eLoadingIndicatorElement.prototype, "_activeIndicator", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eLoadingIndicatorElement.prototype, "variant", void 0);
@@ -16396,10 +16738,10 @@ 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(: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);
+MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([checked]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([checked]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
+__decorate([e$3(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
 
 /**
  * An element, nested within a clickable element, used to open a menu.
@@ -17702,9 +18044,9 @@ _M3eNavItemElement_handleClick = function _M3eNavItemElement_handleClick(e) {
 };
 /** The styles of the element. */
 M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
-__decorate([e$4(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
-__decorate([e$4(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
+__decorate([e$3(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eNavItemElement.prototype, "orientation", void 0);
@@ -17956,7 +18298,7 @@ let M3eNavMenuItemElement = M3eNavMenuItemElement_1 = class M3eNavMenuItemElemen
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleClick)}"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_renderIcon).call(this)}</div><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleSlotChange)}"></slot></div><slot name="badge"></slot><div aria-hidden="true" class="toggle"><slot name="toggle-icon"><svg class="toggle-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><m3e-collapsible class="group" role="group" aria-hidden="${o$1(this._hasChildItems ? undefined : "true")}" ?open="${this._hasChildItems && this.open}" @opening="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}" @opened="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}" @closing="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}" @closed="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleItemSlotChange)}"></slot></m3e-collapsible>`;
+    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleClick)}"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_renderIcon).call(this)}</div><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleSlotChange)}"></slot></div><slot name="badge"></slot><div aria-hidden="true" class="toggle"><slot name="toggle-icon"><svg class="toggle-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><m3e-collapsible class="group" role="group" aria-hidden="${o(this._hasChildItems ? undefined : "true")}" ?open="${this._hasChildItems && this.open}" @opening="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}" @opened="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}" @closing="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}" @closed="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleItemSlotChange)}"></slot></m3e-collapsible>`;
   }
 };
 _M3eNavMenuItemElement_items = new WeakMap();
@@ -18028,10 +18370,10 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
 M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
         background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken$1.shape.corner.full}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .icon, .toggle { flex: none; display: flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; } ::slotted([slot="badge"]) { flex: none; position: relative; font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .toggle { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken$1.motion.duration.medium1})
         ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:state(-with-icon))) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(:state(-with-items))) .toggle, :host(:not(:state(-with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:state(-with-items)):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected]:state(-with-items):not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken$1.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken$1.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not([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);
-__decorate([e$4(".base")], M3eNavMenuItemElement.prototype, "_base", void 0);
+__decorate([e$3(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
+__decorate([e$3(".focus-ring")], M3eNavMenuItemElement.prototype, "focusRing", void 0);
+__decorate([e$3(".ripple")], M3eNavMenuItemElement.prototype, "ripple", void 0);
+__decorate([e$3(".base")], M3eNavMenuItemElement.prototype, "_base", void 0);
 __decorate([r$1()], M3eNavMenuItemElement.prototype, "_hasChildItems", void 0);
 __decorate([n$1({
   type: Boolean,
@@ -18668,7 +19010,10 @@ var _M3eOptionElement_instances, _M3eOptionElement_value, _M3eOptionElement_text
  * @slot - Renders the label of the option.
  *
  * @attr disabled - Whether the element is disabled.
+ * @attr disable-highlight - Whether text highlighting is disabled.
+ * @attr highlight-mode - The mode in which to highlight a term.
  * @attr selected - Whether the element is selected.
+ * @attr term - The search term to highlight.
  * @attr value - A string representing the value of the option.
  *
  * @cssprop --m3e-option-container-height - The height of the option container.
@@ -18705,6 +19050,21 @@ let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Atta
     _M3eOptionElement_value.set(this, void 0);
     /** @private */
     _M3eOptionElement_textContent.set(this, "");
+    /**
+     * The search term to highlight.
+     * @default ""
+     */
+    this.term = "";
+    /**
+     * The mode in which to highlight a term.
+     * @default "contains"
+     */
+    this.highlightMode = "contains";
+    /**
+     * Whether text highlighting is disabled.
+     * @default false
+     */
+    this.disableHighlight = false;
   }
   /** A string representing the value of the option. */
   get value() {
@@ -18713,9 +19073,13 @@ let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Atta
   set value(value) {
     __classPrivateFieldSet(this, _M3eOptionElement_value, value, "f");
   }
+  /** The textual label of the option. */
+  get label() {
+    return __classPrivateFieldGet(this, _M3eOptionElement_textContent, "f");
+  }
   /** @internal */
   [(_M3eOptionElement_value = new WeakMap(), _M3eOptionElement_textContent = new WeakMap(), _M3eOptionElement_instances = new WeakSet(), typeaheadLabel)]() {
-    return __classPrivateFieldGet(this, _M3eOptionElement_textContent, "f");
+    return this.label;
   }
   /** Whether the option represents an empty option. */
   get isEmpty() {
@@ -18735,7 +19099,7 @@ let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Atta
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("selected") && this.selected) {
-      const panel = this.closest("[role='listbox']") ?? this.closest("m3e-select");
+      const panel = this.closest("[role='listbox']") ?? this.closest("m3e-autocomplete") ?? this.closest("m3e-select");
       if (panel && panel.ariaMultiSelectable !== "true" && !panel.hasAttribute("multi")) {
         panel.querySelectorAll("m3e-option").forEach(x => {
           if (x !== this && x.selected) {
@@ -18747,7 +19111,7 @@ let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Atta
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionElement_instances, "m", _M3eOptionElement_handleSlotChange)}"></slot></m3e-text-overflow></div></div>`;
+    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><m3e-text-highlight term="${this.term}" mode="${this.highlightMode}" ?disabled="${this.disableHighlight}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionElement_instances, "m", _M3eOptionElement_handleSlotChange)}"></slot></m3e-text-highlight></m3e-text-overflow></div></div>`;
   }
 };
 _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange(e) {
@@ -18756,10 +19120,18 @@ _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange
 };
 /** The styles of the element. */
 M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-disabled="true"]):not(: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([e$3(".focus-ring")], M3eOptionElement.prototype, "focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eOptionElement.prototype, "value", null);
+__decorate([n$1()], M3eOptionElement.prototype, "term", void 0);
+__decorate([n$1({
+  attribute: "highlight-mode"
+})], M3eOptionElement.prototype, "highlightMode", void 0);
+__decorate([n$1({
+  attribute: "disable-highlight",
+  type: Boolean
+})], M3eOptionElement.prototype, "disableHighlight", void 0);
 M3eOptionElement = __decorate([customElement$1("m3e-option")], M3eOptionElement);
 
 var _M3eOptGroupElement_instances, _M3eOptGroupElement_labelId, _M3eOptGroupElement_label, _M3eOptGroupElement_handleLabelSlotChange;
@@ -18829,8 +19201,7 @@ M3eOptGroupElement.styles = css`:host { display: block; --_option-padding-start:
 M3eOptGroupElement.__nextId = 0;
 M3eOptGroupElement = M3eOptGroupElement_1 = __decorate([customElement$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;
+var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_scrollController, _M3eOptionPanelElement_handleNoDataSlotChange, _M3eOptionPanelElement_handleLoadingSlotChange, _M3eOptionPanelElement_handleMutation;
 /**
  * Presents a list of options on a temporary surface.
  *
@@ -18859,151 +19230,96 @@ var M3eOptionPanelElement_1;
  * @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 AttachInternals$1(Role$1(LitElement, "listbox")) {
+let M3eOptionPanelElement = class M3eOptionPanelElement extends Role$1(M3eFloatingPanelElement, "listbox") {
   constructor() {
-    super(...arguments);
+    super();
     _M3eOptionPanelElement_instances.add(this);
     /** @private */
-    _M3eOptionPanelElement_trigger.set(this, void 0);
-    /** @private */
-    _M3eOptionPanelElement_anchor.set(this, void 0);
-    /** @private */
-    _M3eOptionPanelElement_anchorCleanup.set(this, void 0);
-    /** @private */
-    _M3eOptionPanelElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleDocumentClick).call(this, e));
-    /** @private */
     _M3eOptionPanelElement_scrollController.set(this, new ScrollController$1(this, {
       target: null,
       callback: () => this.hide(false)
     }));
-    /** @private */
-    _M3eOptionPanelElement_toggleHandler.set(this, e => {
-      if (e.newState === "closed") {
-        __classPrivateFieldGet(this, _M3eOptionPanelElement_anchorCleanup, "f")?.call(this);
-        __classPrivateFieldSet(this, _M3eOptionPanelElement_anchorCleanup, undefined, "f");
-      }
+    /**
+     * The state for which to present content.
+     * @default "content"
+     */
+    this.state = "content";
+    new MutationController$1(this, {
+      config: {
+        childList: true,
+        subtree: true
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleMutation).call(this)
     });
   }
-  /** Whether the panel is open. */
-  get isOpen() {
-    return __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") !== undefined;
-  }
-  /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    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"));
-  }
   /** @inheritdoc */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eOptionPanelElement_toggleHandler, "f"));
-    document.removeEventListener("click", __classPrivateFieldGet(this, _M3eOptionPanelElement_documentClickHandler, "f"));
-  }
-  /**
-   * 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) {
-      this.hide();
-    }
-    __classPrivateFieldSet(this, _M3eOptionPanelElement_anchorCleanup, await positionAnchor(this, anchor ?? trigger, {
-      position: "bottom-start",
-      inline: true,
-      flip: true
-    }, (x, y, position) => {
-      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 = "";
-      } else {
-        this.style.left = `${x}px`;
-        this.style.right = "";
-      }
-      this.style.top = `${y}px`;
-    }), "f");
-    this.showPopover();
-    __classPrivateFieldSet(this, _M3eOptionPanelElement_trigger, trigger, "f");
-    __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f").ariaExpanded = "true";
-    __classPrivateFieldSet(this, _M3eOptionPanelElement_anchor, anchor, "f");
-    __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f"));
-  }
-  /**
-   * Hides the panel.
-   * @param {boolean} [restoreFocus=false] Whether to restore focus to the panel's trigger.
-   */
-  hide(restoreFocus = false) {
-    this.hidePopover();
-    if (__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f")) {
-      __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f").ariaExpanded = "false";
-      if (restoreFocus) {
-        __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f").focus();
-      }
-      __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").unobserve(__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f"));
-      __classPrivateFieldSet(this, _M3eOptionPanelElement_trigger, undefined, "f");
-    }
+    await super.show(trigger, anchor);
+    __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").observe(trigger);
   }
-  /**
-   * 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")) {
-      this.hide();
-    } else {
-      await this.show(trigger, anchor);
+  /** @inheritdoc */
+  hide(restoreFocus) {
+    if (this.trigger) {
+      __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").unobserve(this.trigger);
     }
+    super.hide(restoreFocus);
   }
   /** @inheritdoc */
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleMutation).call(this);
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleSlotChange)}"></slot></div>`;
+    return html`<div class="base"><slot></slot><div class="no-data" aria-hidden="true"><slot name="no-data" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleNoDataSlotChange)}"></slot></div><div class="loading" aria-hidden="true"><slot name="loading" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleLoadingSlotChange)}"></slot></div></div>`;
   }
 };
-_M3eOptionPanelElement_trigger = new WeakMap();
-_M3eOptionPanelElement_anchor = new WeakMap();
-_M3eOptionPanelElement_anchorCleanup = new WeakMap();
-_M3eOptionPanelElement_documentClickHandler = new WeakMap();
 _M3eOptionPanelElement_scrollController = new WeakMap();
-_M3eOptionPanelElement_toggleHandler = new WeakMap();
 _M3eOptionPanelElement_instances = new WeakSet();
-_M3eOptionPanelElement_handleSlotChange = function _M3eOptionPanelElement_handleSlotChange() {
-  const options = [...this.querySelectorAll("m3e-option")];
-  options.forEach((x, i) => {
-    setCustomState$1(x, "-first", i === 0 && !(x.parentElement instanceof M3eOptGroupElement));
-    setCustomState$1(x, "-last", i === options.length - 1);
-  });
+_M3eOptionPanelElement_handleNoDataSlotChange = function _M3eOptionPanelElement_handleNoDataSlotChange(e) {
+  setCustomState$1(this, "-with-no-data", hasAssignedNodes$1(e.target));
 };
-_M3eOptionPanelElement_handleDocumentClick = function _M3eOptionPanelElement_handleDocumentClick(e) {
-  if (!e.composedPath().some(x => x instanceof M3eOptionPanelElement_1 || x === __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eOptionPanelElement_anchor, "f"))) {
-    this.hide();
+_M3eOptionPanelElement_handleLoadingSlotChange = function _M3eOptionPanelElement_handleLoadingSlotChange(e) {
+  setCustomState$1(this, "-with-loading", hasAssignedNodes$1(e.target));
+  setCustomState$1(this, "-with-loading-indicator", this.querySelector("m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']") !== null);
+};
+_M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMutation() {
+  const options = this.querySelectorAll("m3e-option");
+  let first = false;
+  let last;
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+    if (option.hidden) {
+      deleteCustomState$1(option, "-first");
+      deleteCustomState$1(option, "-last");
+    } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {
+      addCustomState$1(option, "-first");
+      first = true;
+      addCustomState$1(option, "-last");
+      last = option;
+    } else {
+      deleteCustomState$1(option, "-first");
+      if (last) {
+        deleteCustomState$1(last, "-last");
+      }
+      addCustomState$1(option, "-last");
+      last = option;
+    }
   }
 };
 (() => {
   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());
+    lightDomStyle.replaceSync(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`.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(: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(: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([customElement$1("m3e-option-panel")], M3eOptionPanelElement);
+M3eOptionPanelElement.styles = [M3eFloatingPanelElement.styles, css`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`];
+__decorate([n$1({
+  reflect: true
+})], M3eOptionPanelElement.prototype, "state", void 0);
+M3eOptionPanelElement = __decorate([customElement$1("m3e-option-panel")], M3eOptionPanelElement);
 
 /**
  * Adapted from Angular Material Paginator
@@ -19294,7 +19610,7 @@ M3ePaginatorElement = M3ePaginatorElement_1 = __decorate([customElement$1("m3e-p
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const e$1 = e$2(class extends i {
+const e = e$1(class extends i {
   constructor(t$1) {
     if (super(t$1), t$1.type !== t.ATTRIBUTE || "class" !== t$1.name || t$1.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
   }
@@ -19432,6 +19748,7 @@ let M3eCircularProgressIndicatorElement = M3eCircularProgressIndicatorElement_1
       callback: () => {
         __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_updateDiameterAndStroke).call(this);
         __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_updateAmplitudeAndWavelength).call(this);
+        queueMicrotask(() => this.requestUpdate());
       }
     }));
     /** @private */
@@ -19570,9 +19887,9 @@ _M3eCircularProgressIndicatorElement_renderWavyIndicator = function _M3eCircular
             />
           </mask>
         </defs>` : nothing}
-        <g class="active-track" mask="${o$1(amplitude > 0 ? resolveFragmentUrl$1(__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_maskId, "f")) : undefined)}">
+        <g class="active-track" mask="${o(amplitude > 0 ? resolveFragmentUrl$1(__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_maskId, "f")) : undefined)}">
           <path
-            class="${e$1({
+            class="${e({
     wave: amplitude > 0
   })}"
             d="${active.path}"
@@ -19810,6 +20127,7 @@ let M3eLinearProgressIndicatorElement = M3eLinearProgressIndicatorElement_1 = cl
       callback: () => {
         __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_updateStroke).call(this);
         __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_updateAmplitudeAndWavelength).call(this);
+        queueMicrotask(() => this.requestUpdate());
       }
     }));
     /**
@@ -20111,9 +20429,9 @@ _M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelecti
 };
 /** The styles of the element. */
 M3eRadioElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken$1.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken$1.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken$1.color.onSurface}) 38%, transparent); } :host(:state(-touched):state(-invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken$1.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:state(-touched):state(-invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
-__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([e$3(".focus-ring")], M3eRadioElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eRadioElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eRadioElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eRadioElement.prototype, "value", void 0);
 M3eRadioElement = __decorate([customElement$1("m3e-radio")], M3eRadioElement);
 
@@ -20427,9 +20745,9 @@ _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(: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([e$3(".focus-ring")], M3eButtonSegmentElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eButtonSegmentElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eButtonSegmentElement.prototype, "_ripple", void 0);
 __decorate([n$1()], M3eButtonSegmentElement.prototype, "value", void 0);
 M3eButtonSegmentElement = M3eButtonSegmentElement_1 = __decorate([customElement$1("m3e-button-segment")], M3eButtonSegmentElement);
 
@@ -20598,33 +20916,7 @@ __decorate([n$1({
 })], M3eSegmentedButtonElement.prototype, "hideSelectionIndicator", void 0);
 M3eSegmentedButtonElement = __decorate([customElement$1("m3e-segmented-button")], M3eSegmentedButtonElement);
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class e extends i {
-  constructor(i) {
-    if (super(i), this.it = E, i.type !== t.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
-  }
-  render(r) {
-    if (r === E || null == r) return this._t = void 0, this.it = r;
-    if (r === T) return r;
-    if ("string" != typeof r) throw Error(this.constructor.directiveName + "() called with a non-string value");
-    if (r === this.it) return this._t;
-    this.it = r;
-    const s = [r];
-    return s.raw = s, this._t = {
-      _$litType$: this.constructor.resultType,
-      strings: s,
-      values: []
-    };
-  }
-}
-e.directiveName = "unsafeHTML", e.resultType = 1;
-const o = e$2(e);
-
-var _M3eSelectElement_instances, _M3eSelectElement_menu, _M3eSelectElement_ignoreKeyUp, _M3eSelectElement_ignoreFocusVisible, _M3eSelectElement_id, _M3eSelectElement_listId, _M3eSelectElement_clickHandler, _M3eSelectElement_keyDownHandler, _M3eSelectElement_keyUpHandler, _M3eSelectElement_menuToggleHandler, _M3eSelectElement_menuPointerDownHandler, _M3eSelectElement_minMenuWidth_get, _M3eSelectElement_formField_get, _M3eSelectElement_handleSlotChange, _M3eSelectElement_handleClick, _M3eSelectElement_handleKeyDown, _M3eSelectElement_handleKeyUp, _M3eSelectElement_handleMenuPointerDown, _M3eSelectElement_handleMenuToggle, _M3eSelectElement_destroyMenu, _M3eSelectElement_toggleMenu, _M3eSelectElement_showMenu, _M3eSelectElement_hideMenu, _M3eSelectElement_activateOption, _M3eSelectElement_selectOption;
+var _M3eSelectElement_instances, _M3eSelectElement_clone, _M3eSelectElement_menu, _M3eSelectElement_ignoreKeyUp, _M3eSelectElement_ignoreFocusVisible, _M3eSelectElement_id, _M3eSelectElement_listId, _M3eSelectElement_clickHandler, _M3eSelectElement_keyDownHandler, _M3eSelectElement_keyUpHandler, _M3eSelectElement_menuToggleHandler, _M3eSelectElement_menuPointerDownHandler, _M3eSelectElement_options_get, _M3eSelectElement_selected_get, _M3eSelectElement_minMenuWidth_get, _M3eSelectElement_formField_get, _M3eSelectElement_handleMutation, _M3eSelectElement_handleClick, _M3eSelectElement_handleKeyDown, _M3eSelectElement_handleKeyUp, _M3eSelectElement_handleMenuPointerDown, _M3eSelectElement_handleMenuToggle, _M3eSelectElement_destroyMenu, _M3eSelectElement_toggleMenu, _M3eSelectElement_showMenu, _M3eSelectElement_hideMenu, _M3eSelectElement_activateOption, _M3eSelectElement_updateSelectionState, _M3eSelectElement_selectOption;
 var M3eSelectElement_1;
 /**
  * A form control that allows users to select a value from a set of predefined options.
@@ -20683,6 +20975,10 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
     super();
     _M3eSelectElement_instances.add(this);
     /** @private */
+    this._options = new Array();
+    /** @private */
+    _M3eSelectElement_clone.set(this, void 0);
+    /** @private */
     _M3eSelectElement_menu.set(this, void 0);
     /** @private */
     _M3eSelectElement_ignoreKeyUp.set(this, false);
@@ -20725,15 +21021,22 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
         }
       }
     });
+    new MutationController$1(this, {
+      config: {
+        childList: true,
+        subtree: true
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_handleMutation).call(this)
+    });
+  }
+  /** The options that can be selected. */
+  get options() {
+    return this._options ?? [];
   }
   /** The selected option(s). */
   get selected() {
     return this.options.filter(x => x.selected);
   }
-  /** The options that can be selected. */
-  get options() {
-    return this._listKeyManager?.items ?? [];
-  }
   /** The selected (enabled) value(s). */
   get value() {
     const values = this.selected.filter(x => !x.disabled).map(x => x.value);
@@ -20747,7 +21050,11 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
     }
   }
   /** @inheritdoc @internal */
-  get [(_M3eSelectElement_menu = new WeakMap(), _M3eSelectElement_ignoreKeyUp = new WeakMap(), _M3eSelectElement_ignoreFocusVisible = new WeakMap(), _M3eSelectElement_id = new WeakMap(), _M3eSelectElement_listId = new WeakMap(), _M3eSelectElement_clickHandler = new WeakMap(), _M3eSelectElement_keyDownHandler = new WeakMap(), _M3eSelectElement_keyUpHandler = new WeakMap(), _M3eSelectElement_menuToggleHandler = new WeakMap(), _M3eSelectElement_menuPointerDownHandler = new WeakMap(), _M3eSelectElement_instances = new WeakSet(), formValue$1)]() {
+  get [(_M3eSelectElement_clone = new WeakMap(), _M3eSelectElement_menu = new WeakMap(), _M3eSelectElement_ignoreKeyUp = new WeakMap(), _M3eSelectElement_ignoreFocusVisible = new WeakMap(), _M3eSelectElement_id = new WeakMap(), _M3eSelectElement_listId = new WeakMap(), _M3eSelectElement_clickHandler = new WeakMap(), _M3eSelectElement_keyDownHandler = new WeakMap(), _M3eSelectElement_keyUpHandler = new WeakMap(), _M3eSelectElement_menuToggleHandler = new WeakMap(), _M3eSelectElement_menuPointerDownHandler = new WeakMap(), _M3eSelectElement_instances = new WeakSet(), _M3eSelectElement_options_get = function _M3eSelectElement_options_get() {
+    return this._listKeyManager?.items ?? [];
+  }, _M3eSelectElement_selected_get = function _M3eSelectElement_selected_get() {
+    return __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_options_get).filter(x => x.selected);
+  }, formValue$1)]() {
     const values = this.value;
     if (Array.isArray(values)) {
       const data = new FormData();
@@ -20775,10 +21082,13 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
    * @param [restoreFocus=false] Whether to restore input focus.
    */
   clear(restoreFocus = false) {
-    const selected = this.selected;
+    const selected = __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_selected_get);
     const willChange = selected.length > 0;
     if (willChange) {
-      selected.forEach(x => x.selected = false);
+      selected.forEach(x => {
+        x.selected = false;
+        __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, x);
+      });
       this.requestUpdate();
     }
     __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_hideMenu).call(this);
@@ -20799,6 +21109,7 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
     this.addEventListener("click", __classPrivateFieldGet(this, _M3eSelectElement_clickHandler, "f"));
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eSelectElement_keyDownHandler, "f"));
     this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eSelectElement_keyUpHandler, "f"));
+    __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_handleMutation).call(this);
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -20811,7 +21122,7 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.options.forEach(x => setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator));
+      __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_options_get).forEach(x => setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -20824,7 +21135,7 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
   }
   /** @inheritdoc */
   render() {
-    return html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="base"><m3e-text-overflow><slot name="value">${this.selected.filter(x => !x.isEmpty).map((x, i) => i > 0 ? html`<span>, </span>${o(x.innerHTML)}` : o(x.innerHTML))}</slot></m3e-text-overflow><div class="arrow-wrapper" aria-hidden="true"><slot name="arrow"><svg class="arrow" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><div class="options" role="listbox" aria-multiselectable="${this.multi}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_handleSlotChange)}"></slot></div>`;
+    return html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="base"><m3e-text-overflow><slot name="value">${this.selected.filter(x => !x.isEmpty).map((x, i) => i > 0 ? html`<span>, </span>${x[typeaheadLabel]()}` : x[typeaheadLabel]())}</slot></m3e-text-overflow><div class="arrow-wrapper" aria-hidden="true"><slot name="arrow"><svg class="arrow" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><div class="options" aria-hidden="true"><slot></slot></div>`;
   }
 };
 _M3eSelectElement_minMenuWidth_get = function _M3eSelectElement_minMenuWidth_get() {
@@ -20834,16 +21145,23 @@ _M3eSelectElement_minMenuWidth_get = function _M3eSelectElement_minMenuWidth_get
 _M3eSelectElement_formField_get = function _M3eSelectElement_formField_get() {
   return this.closest("m3e-form-field");
 };
-_M3eSelectElement_handleSlotChange = function _M3eSelectElement_handleSlotChange() {
-  if (__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
+_M3eSelectElement_handleMutation = function _M3eSelectElement_handleMutation() {
+  __classPrivateFieldSet(this, _M3eSelectElement_clone, this.cloneNode(true), "f");
   const {
     added
-  } = this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);
+  } = this._listKeyManager.setItems([...__classPrivateFieldGet(this, _M3eSelectElement_clone, "f").querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eSelectElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
     setCustomState$1(x, "-hide-selection-indicator", this.hideSelectionIndicator);
   });
+  this._options = [...this.querySelectorAll("m3e-option")];
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
+  if (__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) {
+    __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").replaceChildren(...__classPrivateFieldGet(this, _M3eSelectElement_clone, "f").childNodes);
+    if (this._options.length == 0) {
+      __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_hideMenu).call(this);
+    }
+  }
 };
 _M3eSelectElement_handleClick = function _M3eSelectElement_handleClick(e) {
   if (e.defaultPrevented || this.disabled) return;
@@ -20936,7 +21254,7 @@ _M3eSelectElement_handleMenuPointerDown = function _M3eSelectElement_handleMenuP
 _M3eSelectElement_handleMenuToggle = function _M3eSelectElement_handleMenuToggle(e) {
   if (!__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
   if (e.newState !== "closed") {
-    const option = this.selected.find(x => !x.disabled) ?? this._listKeyManager.items.find(x => !x.disabled);
+    const option = __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_selected_get).find(x => !x.disabled) ?? this._listKeyManager.items.find(x => !x.disabled);
     this._listKeyManager.setActiveItem(option);
     if (option) {
       scrollIntoViewIfNeeded$1(option, __classPrivateFieldGet(this, _M3eSelectElement_menu, "f"), {
@@ -20960,7 +21278,7 @@ _M3eSelectElement_handleMenuToggle = function _M3eSelectElement_handleMenuToggle
 };
 _M3eSelectElement_destroyMenu = function _M3eSelectElement_destroyMenu(e) {
   if (!__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
-  [...__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").childNodes].forEach(x => this.append(x));
+  __classPrivateFieldGet(this, _M3eSelectElement_clone, "f")?.replaceChildren(...__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").childNodes);
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").remove();
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").removeEventListener("toggle", __classPrivateFieldGet(this, _M3eSelectElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eSelectElement_menuPointerDownHandler, "f"));
@@ -20985,7 +21303,7 @@ _M3eSelectElement_toggleMenu = function _M3eSelectElement_toggleMenu() {
   }
 };
 _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
-  if (__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
+  if (__classPrivateFieldGet(this, _M3eSelectElement_menu, "f") || this._options.length == 0) return;
   __classPrivateFieldSet(this, _M3eSelectElement_menu, document.createElement("m3e-option-panel"), "f");
   if (this.multi) {
     __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").ariaMultiSelectable = "true";
@@ -20995,8 +21313,8 @@ _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").style.minWidth = __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_minMenuWidth_get);
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").addEventListener("toggle", __classPrivateFieldGet(this, _M3eSelectElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eSelectElement_menuPointerDownHandler, "f"));
-  for (const node of [...this.childNodes]) {
-    __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").append(node);
+  if (__classPrivateFieldGet(this, _M3eSelectElement_clone, "f")) {
+    __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").replaceChildren(...__classPrivateFieldGet(this, _M3eSelectElement_clone, "f").childNodes);
   }
   (__classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get) ?? this).insertAdjacentElement("afterend", __classPrivateFieldGet(this, _M3eSelectElement_menu, "f"));
   this.ariaExpanded = "true";
@@ -21022,7 +21340,7 @@ _M3eSelectElement_activateOption = function _M3eSelectElement_activateOption(opt
       behavior: "instant"
     });
     const focusVisible = !__classPrivateFieldGet(this, _M3eSelectElement_ignoreFocusVisible, "f") && (this.matches(":focus-visible") || forcedColorsActive$1());
-    this.options.forEach(x => {
+    __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_options_get).forEach(x => {
       const active = x === option && focusVisible;
       if (active) {
         x.focusRing?.show();
@@ -21034,17 +21352,27 @@ _M3eSelectElement_activateOption = function _M3eSelectElement_activateOption(opt
     });
   }
 };
+_M3eSelectElement_updateSelectionState = function _M3eSelectElement_updateSelectionState(clone) {
+  const option = this._options[this._listKeyManager.items.indexOf(clone)];
+  if (option) {
+    option.selected = clone.selected;
+  }
+};
 _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option) {
   const selected = this.multi ? !option.selected : true;
   if (option.selected === selected) return;
   option.selected = selected;
+  __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
   if (this.dispatchEvent(new Event("input", {
     bubbles: true,
     composed: true,
     cancelable: true
   }))) {
     if (!this.multi) {
-      this.selected.filter(x => x !== option).forEach(x => x.selected = false);
+      __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_selected_get).filter(x => x !== option).forEach(x => {
+        x.selected = false;
+        __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, x);
+      });
     }
     this.requestUpdate();
     __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
@@ -21053,13 +21381,14 @@ _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option)
     }));
   } else {
     option.selected = !selected;
+    __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
   }
 };
 /** The styles of the element. */
 M3eSelectElement.styles = css`:host { display: inline-flex; vertical-align: middle; outline: none; position: relative; font-size: var(--m3e-form-field-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); min-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); border-radius: var(--m3e-select-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) { color: color-mix( in srgb, var(--m3e-select-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%), transparent ); } .options { display: none; } .base { flex: 1 1 auto; display: inline-flex; align-items: center; overflow: hidden; } .arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: var(--_select-arrow-margin-top); } ::slotted([slot="arrow"]), .arrow { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-select-icon-size, 1.5rem); } :host(:state(-open)) .focus-ring { display: none; }`;
 /** @private */
 M3eSelectElement.__nextId = 0;
-__decorate([e$4(".focus-ring")], M3eSelectElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".focus-ring")], M3eSelectElement.prototype, "_focusRing", void 0);
 __decorate([n$1({
   attribute: "hide-selection-indicator",
   type: Boolean
@@ -21375,7 +21704,7 @@ _M3eSlideGroupElement_pageEnd = function _M3eSlideGroupElement_pageEnd() {
 };
 /** The styles of the element. */
 M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; overflow: hidden; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; overflow: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); }`;
-__decorate([e$4(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
+__decorate([e$3(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
 __decorate([r$1()], M3eSlideGroupElement.prototype, "_canPage", void 0);
 __decorate([r$1()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);
 __decorate([r$1()], M3eSlideGroupElement.prototype, "_canPageEnd", void 0);
@@ -21499,7 +21828,7 @@ _M3eSliderThumbElement_labelText_get = function _M3eSliderThumbElement_labelText
 M3eSliderThumbElement.styles = css`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${DesignToken$1.shape.corner.full}); 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%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { top: calc(0px - var(--m3e-focus-ring-thickness, 3px)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px)); left: var(--m3e-focus-ring-thickness, 3px); right: var(--m3e-focus-ring-thickness, 3px); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
           transform ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
           visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-slider-label-color, ${DesignToken$1.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${unsafeCSS(`width ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 2px); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken$1.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`;
-__decorate([e$4(".focus-ring")], M3eSliderThumbElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".focus-ring")], M3eSliderThumbElement.prototype, "_focusRing", void 0);
 __decorate([n$1({
   type: Number,
   reflect: true
@@ -21678,7 +22007,7 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base" tabindex="${o$1(!this.disabled ? "-1" : undefined)}" @pointerdown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerUp)}" @keydown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyDown)}" @value-change="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleThumbChange)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(x => __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_renderTick).call(this, x))}</div><slot @slotchange="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleSlotChange)}"></slot></div>`;
+    return html`<div class="base" tabindex="${o(!this.disabled ? "-1" : undefined)}" @pointerdown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerUp)}" @keydown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyDown)}" @value-change="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleThumbChange)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(x => __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_renderTick).call(this, x))}</div><slot @slotchange="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleSlotChange)}"></slot></div>`;
   }
 };
 _M3eSliderElement_directionalitySubscription = new WeakMap();
@@ -21955,7 +22284,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(: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([e$3(".base")], M3eSliderElement.prototype, "_base", void 0);
 __decorate([r$1()], M3eSliderElement.prototype, "_ticks", void 0);
 __decorate([n$1({
   reflect: true
@@ -22403,7 +22732,7 @@ _M3eSplitButtonElement_updateButtonShape = function _M3eSplitButtonElement_updat
 };
 /** The styles of the element. */
 M3eSplitButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(0)} ); --m3e-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(0)} ); --m3e-icon-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(-1)} ); --m3e-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken$1.density.calc(-1)} ); --m3e-icon-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken$1.density.calc(-2)} ); --m3e-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken$1.density.calc(-2)} ); --m3e-icon-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken$1.density.calc(-3)} ); --m3e-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken$1.density.calc(-3)} ); --m3e-icon-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken$1.density.calc(-3)} ); --m3e-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken$1.density.calc(-3)} ); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`;
-__decorate([e$4(".base")], M3eSplitButtonElement.prototype, "_base", void 0);
+__decorate([e$3(".base")], M3eSplitButtonElement.prototype, "_base", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eSplitButtonElement.prototype, "variant", void 0);
@@ -22722,9 +23051,9 @@ _M3eStepElement_handleClick = function _M3eStepElement_handleClick(e) {
 M3eStepElement.styles = css`:host { display: block; outline: none; min-width: 0px; position: relative; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { min-width: inherit; position: relative; border-radius: var(--m3e-step-shape, ${DesignToken$1.shape.corner.medium}); padding: var(--m3e-step-padding, 1.5rem); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .icon { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--m3e-step-icon-shape, 50%); width: var(--m3e-step-icon-size, 1.5rem); height: var(--m3e-step-icon-size, 1.5rem); } .icon svg, ::slotted([slot="icon"]), ::slotted([slot="edit-icon"]), ::slotted([slot="done-icon"]), ::slotted([slot="error-icon"]) { width: 1em; font-size: var(--m3e-step-icon-size, 1.5rem) !important; } :host(:not([aria-disabled="true"])[selected]) .icon { background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-step-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host(:not([aria-disabled="true"])[completed]:not([invalid])) .icon { background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-step-completed-icon-color, ${DesignToken$1.color.onPrimary}); } :host(:not([aria-disabled="true"]):not([selected]):not([completed]):not([invalid])) .icon { background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-step-unselected-icon-color, ${DesignToken$1.color.inverseOnSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .icon { color: var(--m3e-step-icon-error-color, ${DesignToken$1.color.error}); } :host([aria-disabled="true"]) .icon { background-color: color-mix( in srgb, var(--m3e-step-disabled-icon-container-color, ${DesignToken$1.color.onSurface}) 10%, transparent ); color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken$1.color.onSurface}) 38%, transparent); } :host(:not([aria-disabled="true"])) .label { color: var(--m3e-step-label-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .label { color: var(--m3e-step-label-error-color, ${DesignToken$1.color.error}); } :host([aria-disabled="true"]) .label { color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken$1.color.onSurface}) 38%, transparent); } .wrapper { display: flex; align-items: center; height: 100%; border-radius: inherit; font-size: var(--m3e-step-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-step-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-step-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-step-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); flex-direction: var(--_step-direction, row); gap: var(--m3e-step-icon-label-space, 0.5rem); justify-content: flex-start; } .label { display: flex; flex-direction: column; align-items: var(--_step-label-align-items, flex-start); } ::slotted([slot="hint"]), .hint, ::slotted([slot="error"]) { font-size: var(--m3e-step-hint-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-step-hint-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-step-hint-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } :host(:not([aria-disabled="true"]):not([invalid])) ::slotted([slot="hint"]), :host(:not([aria-disabled="true"]):not([invalid])) .hint { color: var(--m3e-step-hint-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([aria-disabled="true"]) ::slotted([slot="hint"]), :host([aria-disabled="true"]) .hint { color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken$1.color.onSurface}) 38%, transparent); }`;
 /** @private */
 M3eStepElement.__nextId = 0;
-__decorate([e$4(".focus-ring")], M3eStepElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eStepElement.prototype, "_stateLayer", void 0);
-__decorate([e$4(".ripple")], M3eStepElement.prototype, "_ripple", void 0);
+__decorate([e$3(".focus-ring")], M3eStepElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eStepElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eStepElement.prototype, "_ripple", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -22994,7 +23323,7 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals$1(LitEle
       }
     }
     if (!this[selectionManager].vertical) {
-      return html`${this.headerPosition === "above" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}<m3e-slide class="steps" selected-index="${o$1(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "below" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}`;
+      return html`${this.headerPosition === "above" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}<m3e-slide class="steps" selected-index="${o(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "below" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}`;
     }
     return html`${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this)}<slot name="panel"></slot>`;
   }
@@ -23003,7 +23332,7 @@ _M3eStepperElement_breakpointUnobserve = new WeakMap();
 _M3eStepperElement_instances = new WeakSet();
 _a$3 = selectionManager;
 _M3eStepperElement_renderHeader = function _M3eStepperElement_renderHeader() {
-  return html`<div class="header" role="tablist" aria-orientation="${o$1(this[selectionManager].vertical ? "vertical" : undefined)}" @change="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleChange)}"><slot name="step" @slotchange="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleKeyDown)}"></slot></div>`;
+  return html`<div class="header" role="tablist" aria-orientation="${o(this[selectionManager].vertical ? "vertical" : undefined)}" @change="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleChange)}"><slot name="step" @slotchange="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleKeyDown)}"></slot></div>`;
 };
 _M3eStepperElement_handleChange = function _M3eStepperElement_handleChange(e) {
   e.stopPropagation();
@@ -23467,9 +23796,9 @@ _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
 };
 /** The styles of the element. */
 M3eSwitchElement.styles = [SwitchStyle, SwitchStateLayerStyle, SwitchTrackStyle, SwitchHandleStyle, SwitchIconStyle];
-__decorate([e$4(".track")], M3eSwitchElement.prototype, "_track", void 0);
-__decorate([e$4(".focus-ring")], M3eSwitchElement.prototype, "_focusRing", void 0);
-__decorate([e$4(".state-layer")], M3eSwitchElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".track")], M3eSwitchElement.prototype, "_track", void 0);
+__decorate([e$3(".focus-ring")], M3eSwitchElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eSwitchElement.prototype, "_stateLayer", void 0);
 __decorate([n$1({
   reflect: true
 })], M3eSwitchElement.prototype, "icons", void 0);
@@ -23607,10 +23936,10 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
 M3eTabElement.styles = css`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken$1.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken$1.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${DesignToken$1.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${DesignToken$1.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${DesignToken$1.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
 /** @private */
 M3eTabElement.__nextId = 0;
-__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);
+__decorate([e$3(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0);
+__decorate([e$3(".state-layer")], M3eTabElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".ripple")], M3eTabElement.prototype, "_ripple", void 0);
+__decorate([e$3(".label")], M3eTabElement.prototype, "label", void 0);
 M3eTabElement = M3eTabElement_1 = __decorate([customElement$1("m3e-tab")], M3eTabElement);
 
 /**
@@ -23808,7 +24137,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
         panelIndex = undefined;
       }
     }
-    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${o$1(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
+    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${o(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
   }
 };
 _M3eTabsElement_directionalitySubscription = new WeakMap();
@@ -23866,7 +24195,7 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken$1.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
         width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
-__decorate([e$4(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
+__decorate([e$3(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([r$1()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([n$1({
   attribute: "disable-pagination",
@@ -27503,8 +27832,8 @@ let M3eTocItemElement = class M3eTocItemElement extends Selected$1(Disabled$1(At
 };
 /** The styles of the element. */
 M3eTocItemElement.styles = css`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${DesignToken$1.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { padding-inline-start: calc( var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0)) ); padding-inline-end: var(--m3e-toc-item-padding, 1rem); transition: ${unsafeCSS(`color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1}) ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken$1.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken$1.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken$1.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken$1.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${DesignToken$1.color.onSecondaryContainer}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`;
-__decorate([e$4(".base")], M3eTocItemElement.prototype, "_base", void 0);
-__decorate([e$4(".state-layer")], M3eTocItemElement.prototype, "_stateLayer", void 0);
+__decorate([e$3(".base")], M3eTocItemElement.prototype, "_base", void 0);
+__decorate([e$3(".state-layer")], M3eTocItemElement.prototype, "_stateLayer", void 0);
 __decorate([r$1()], M3eTocItemElement.prototype, "node", void 0);
 M3eTocItemElement = __decorate([customElement$1("m3e-toc-item")], M3eTocItemElement);
 
@@ -27768,7 +28097,6 @@ _M3eTocElement_handleClick = function _M3eTocElement_handleClick(e) {
 };
 _M3eTocElement_generateToc = function _M3eTocElement_generateToc() {
   this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];
-  this.requestUpdate();
 };
 /** The styles of the element. */
 M3eTocElement.styles = css`:host { display: inline-block; position: relative; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; width: var(--m3e-toc-width, 9.75rem); } ul { list-style: none; padding-inline-start: unset; margin-block-start: unset; margin-block-end: unset; } ul, li { display: flex; flex-direction: column; align-items: stretch; } m3e-toc-item { flex: none; } .active-indicator { position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; border-radius: var(--m3e-toc-item-shape, ${DesignToken$1.shape.corner.largeIncreased}); border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken$1.color.outline}); transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1})
@@ -27778,7 +28106,7 @@ M3eTocElement.styles = css`:host { display: inline-block; position: relative; ov
         top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1})
           ${DesignToken$1.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:state(-with-overline))) .overline, :host(:not(:state(-with-title))) .title, :host(:not(:state(-with-overline)):not(:state(-with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${DesignToken$1.color.onSurface}); } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`;
 __decorate([r$1()], M3eTocElement.prototype, "_toc", void 0);
-__decorate([e$4(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
+__decorate([e$3(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
 __decorate([n$1({
   attribute: "max-depth",
   type: Number
@@ -28130,7 +28458,7 @@ _a = TooltipElementBase, _TooltipElementBase_for = new WeakMap(), _TooltipElemen
 };
 /** @private */
 TooltipElementBase.__openTooltips = new Array();
-__decorate([e$4(".base")], TooltipElementBase.prototype, "_base", void 0);
+__decorate([e$3(".base")], TooltipElementBase.prototype, "_base", void 0);
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -28266,7 +28594,7 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
   /** @inheritdoc */
   render() {
     const subheadId = this._interactive && this._hasSubhead ? `m3e-rich-tooltip-${__classPrivateFieldGet(this, _M3eRichTooltipElement_id, "f")}-subhead` : undefined;
-    return html`<div class="base" popover="manual" role="${o$1(this._interactive ? "dialog" : undefined)}" aria-labelledby="${o$1(subheadId)}" @keydown="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleKeyDown)}" @beforetoggle="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleBeforeToggle)}" @toggle="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleToggle)}"><m3e-elevation level="3"></m3e-elevation><div class="subhead" id="${o$1(subheadId)}"><slot name="subhead" @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleSubheadSlotChange)}"></slot></div><div class="content"><slot @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleContentSlotChange)}"></slot></div><div class="actions"><slot name="actions" @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleActionsSlotChange)}"></slot></div></div>`;
+    return html`<div class="base" popover="manual" role="${o(this._interactive ? "dialog" : undefined)}" aria-labelledby="${o(subheadId)}" @keydown="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleKeyDown)}" @beforetoggle="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleBeforeToggle)}" @toggle="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleToggle)}"><m3e-elevation level="3"></m3e-elevation><div class="subhead" id="${o(subheadId)}"><slot name="subhead" @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleSubheadSlotChange)}"></slot></div><div class="content"><slot @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleContentSlotChange)}"></slot></div><div class="actions"><slot name="actions" @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleActionsSlotChange)}"></slot></div></div>`;
   }
   /** @inheritdoc */
   show() {