@m3e/web 2.1.1 → 2.1.3

package/dist/all.js

@@ -3,481 +3,28 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
+import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
 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, 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 { query, property, queryAssignedElements, state } from 'lit/decorators.js';
+import { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, hasAssignedNodes as hasAssignedNodes$1, debounce as debounce$1, customElement as customElement$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, EventAttribute as EventAttribute$1, ReconnectedCallback as ReconnectedCallback$1, SuppressInitialAnimation as SuppressInitialAnimation$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, M3eFloatingPanelElement } from '@m3e/web/core/anchoring';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { directive, Directive, PartType } from 'lit/directive.js';
 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/tooltip';
+import { classMap } from 'lit/directives/class-map.js';
 import { M3eButtonElement as M3eButtonElement$1 } from '@m3e/web/button';
 import '@m3e/web/button-group';
 import '@m3e/web/slide-group';
 import { M3ePlatform } from '@m3e/web/core/platform';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-function __decorate(decorators, target, key, desc) {
-  var c = arguments.length,
-    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-    d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-function __classPrivateFieldGet(receiver, state, kind, f) {
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-  if (kind === "m") throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$2 = globalThis,
-  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$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.");
-    this.cssText = t, this.t = e;
-  }
-  get styleSheet() {
-    let t = this.o;
-    const s = this.t;
-    if (e$6 && void 0 === t) {
-      const e = void 0 !== s && 1 === s.length;
-      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;
-  }
-  toString() {
-    return this.cssText;
-  }
-};
-const r$4 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$1),
-  S$1 = (s, 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$6 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
-    let e = "";
-    for (const s of t.cssRules) e += s.cssText;
-    return r$4(e);
-  })(t) : t;
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const {
-    is: i$2,
-    defineProperty: e$5,
-    getOwnPropertyDescriptor: h$1,
-    getOwnPropertyNames: r$3,
-    getOwnPropertySymbols: o$4,
-    getPrototypeOf: n$2
-  } = Object,
-  a$1 = globalThis,
-  c$1 = a$1.trustedTypes,
-  l$1 = c$1 ? c$1.emptyScript : "",
-  p$1 = a$1.reactiveElementPolyfillSupport,
-  d$1 = (t, s) => t,
-  u$1 = {
-    toAttribute(t, s) {
-      switch (s) {
-        case Boolean:
-          t = t ? l$1 : null;
-          break;
-        case Object:
-        case Array:
-          t = null == t ? t : JSON.stringify(t);
-      }
-      return t;
-    },
-    fromAttribute(t, s) {
-      let i = t;
-      switch (s) {
-        case Boolean:
-          i = null !== t;
-          break;
-        case Number:
-          i = null === t ? null : Number(t);
-          break;
-        case Object:
-        case Array:
-          try {
-            i = JSON.parse(t);
-          } catch (t) {
-            i = null;
-          }
-      }
-      return i;
-    }
-  },
-  f$1 = (t, s) => !i$2(t, s),
-  b = {
-    attribute: true,
-    type: String,
-    converter: u$1,
-    reflect: false,
-    useDefault: false,
-    hasChanged: f$1
-  };
-Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= new WeakMap();
-class y extends HTMLElement {
-  static addInitializer(t) {
-    this._$Ei(), (this.l ??= []).push(t);
-  }
-  static get observedAttributes() {
-    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
-  }
-  static createProperty(t, s = b) {
-    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$5(this.prototype, t, h);
-    }
-  }
-  static getPropertyDescriptor(t, s, i) {
-    const {
-      get: e,
-      set: r
-    } = h$1(this.prototype, t) ?? {
-      get() {
-        return this[s];
-      },
-      set(t) {
-        this[s] = t;
-      }
-    };
-    return {
-      get: e,
-      set(s) {
-        const h = e?.call(this);
-        r?.call(this, s), this.requestUpdate(t, h, i);
-      },
-      configurable: true,
-      enumerable: true
-    };
-  }
-  static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? b;
-  }
-  static _$Ei() {
-    if (this.hasOwnProperty(d$1("elementProperties"))) return;
-    const t = n$2(this);
-    t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
-  }
-  static finalize() {
-    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$4(t)];
-      for (const i of s) this.createProperty(i, t[i]);
-    }
-    const t = this[Symbol.metadata];
-    if (null !== t) {
-      const s = litPropertyMetadata.get(t);
-      if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
-    }
-    this._$Eh = new Map();
-    for (const [t, s] of this.elementProperties) {
-      const i = this._$Eu(t, s);
-      void 0 !== i && this._$Eh.set(i, t);
-    }
-    this.elementStyles = this.finalizeStyles(this.styles);
-  }
-  static finalizeStyles(s) {
-    const i = [];
-    if (Array.isArray(s)) {
-      const e = new Set(s.flat(1 / 0).reverse());
-      for (const s of e) i.unshift(c$2(s));
-    } else void 0 !== s && i.push(c$2(s));
-    return i;
-  }
-  static _$Eu(t, s) {
-    const i = s.attribute;
-    return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
-  }
-  constructor() {
-    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
-  }
-  _$Ev() {
-    this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
-  }
-  addController(t) {
-    (this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
-  }
-  removeController(t) {
-    this._$EO?.delete(t);
-  }
-  _$E_() {
-    const t = new Map(),
-      s = this.constructor.elementProperties;
-    for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
-    t.size > 0 && (this._$Ep = t);
-  }
-  createRenderRoot() {
-    const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return S$1(t, this.constructor.elementStyles), t;
-  }
-  connectedCallback() {
-    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
-  }
-  enableUpdating(t) {}
-  disconnectedCallback() {
-    this._$EO?.forEach(t => t.hostDisconnected?.());
-  }
-  attributeChangedCallback(t, s, i) {
-    this._$AK(t, i);
-  }
-  _$ET(t, s) {
-    const i = this.constructor.elementProperties.get(t),
-      e = this.constructor._$Eu(t, i);
-    if (void 0 !== e && true === i.reflect) {
-      const h = (void 0 !== i.converter?.toAttribute ? i.converter : u$1).toAttribute(s, i.type);
-      this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
-    }
-  }
-  _$AK(t, s) {
-    const i = this.constructor,
-      e = i._$Eh.get(t);
-    if (void 0 !== e && this._$Em !== e) {
-      const t = i.getPropertyOptions(e),
-        h = "function" == typeof t.converter ? {
-          fromAttribute: t.converter
-        } : void 0 !== t.converter?.fromAttribute ? t.converter : u$1;
-      this._$Em = e;
-      const r = h.fromAttribute(s, t.type);
-      this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
-    }
-  }
-  requestUpdate(t, s, i) {
-    if (void 0 !== t) {
-      const e = this.constructor,
-        h = this[t];
-      if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f$1)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
-      this.C(t, s, i);
-    }
-    false === this.isUpdatePending && (this._$ES = this._$EP());
-  }
-  C(t, s, {
-    useDefault: i,
-    reflect: e,
-    wrapped: h
-  }, r) {
-    i && !(this._$Ej ??= new Map()).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ??= new Set()).add(t));
-  }
-  async _$EP() {
-    this.isUpdatePending = true;
-    try {
-      await this._$ES;
-    } catch (t) {
-      Promise.reject(t);
-    }
-    const t = this.scheduleUpdate();
-    return null != t && (await t), !this.isUpdatePending;
-  }
-  scheduleUpdate() {
-    return this.performUpdate();
-  }
-  performUpdate() {
-    if (!this.isUpdatePending) return;
-    if (!this.hasUpdated) {
-      if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
-        for (const [t, s] of this._$Ep) this[t] = s;
-        this._$Ep = void 0;
-      }
-      const t = this.constructor.elementProperties;
-      if (t.size > 0) for (const [s, i] of t) {
-        const {
-            wrapped: t
-          } = i,
-          e = this[s];
-        true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
-      }
-    }
-    let t = false;
-    const s = this._$AL;
-    try {
-      t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
-    } catch (s) {
-      throw t = false, this._$EM(), s;
-    }
-    t && this._$AE(s);
-  }
-  willUpdate(t) {}
-  _$AE(t) {
-    this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
-  }
-  _$EM() {
-    this._$AL = new Map(), this.isUpdatePending = false;
-  }
-  get updateComplete() {
-    return this.getUpdateComplete();
-  }
-  getUpdateComplete() {
-    return this._$ES;
-  }
-  shouldUpdate(t) {
-    return true;
-  }
-  update(t) {
-    this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
-  }
-  updated(t) {}
-  firstUpdated(t) {}
-}
-y.elementStyles = [], y.shadowRootOptions = {
-  mode: "open"
-}, y[d$1("elementProperties")] = new Map(), y[d$1("finalized")] = new Map(), p$1?.({
-  ReactiveElement: y
-}), (a$1.reactiveElementVersions ??= []).push("2.1.1");
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const o$3 = {
-    attribute: true,
-    type: String,
-    converter: u$1,
-    reflect: false,
-    hasChanged: f$1
-  },
-  r$2 = (t = o$3, e, r) => {
-    const {
-      kind: n,
-      metadata: i
-    } = r;
-    let s = globalThis.litPropertyMetadata.get(i);
-    if (void 0 === s && globalThis.litPropertyMetadata.set(i, s = new Map()), "setter" === n && ((t = Object.create(t)).wrapped = true), s.set(r.name, t), "accessor" === n) {
-      const {
-        name: o
-      } = r;
-      return {
-        set(r) {
-          const n = e.get.call(this);
-          e.set.call(this, r), this.requestUpdate(o, n, t);
-        },
-        init(e) {
-          return void 0 !== e && this.C(o, void 0, t, e), e;
-        }
-      };
-    }
-    if ("setter" === n) {
-      const {
-        name: o
-      } = r;
-      return function (r) {
-        const n = this[o];
-        e.call(this, r), this.requestUpdate(o, n, t);
-      };
-    }
-    throw Error("Unsupported decorator location: " + n);
-  };
-function n$1(t) {
-  return (e, o) => "object" == typeof o ? r$2(t, e, o) : ((t, e, o) => {
-    const r = e.hasOwnProperty(o);
-    return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
-  })(t, e, o);
-}
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function r$1(r) {
-  return n$1({
-    ...r,
-    state: true,
-    attribute: false
-  });
-}
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-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$3(e, r) {
-  return (n, s, i) => {
-    const o = t => t.renderRoot?.querySelector(e) ?? null;
-    return e$4(n, s, {
-      get() {
-        return o(this);
-      }
-    });
-  };
-}
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function o$2(o) {
-  return (e, n) => {
-    const {
-        slot: r,
-        selector: s
-      } = o ?? {},
-      c = "slot" + (r ? `[name=${r}]` : ":not([name])");
-    return e$4(e, n, {
-      get() {
-        const t = this.renderRoot?.querySelector(c),
-          e = t?.assignedElements(o) ?? [];
-        return void 0 === s ? e : e.filter(t => t.matches(s));
-      }
-    });
-  };
-}
-
 /**
  * Component design tokens that control the `M3eAppBarElement` for all size variants.
  * @internal
@@ -790,20 +337,20 @@ _M3eAppBarElement_getFrameScrollTop = function _M3eAppBarElement_getFrameScrollT
 };
 /** The styles of the element. */
 M3eAppBarElement.styles = [AppBarStyle, AppBarSizeStyle];
-__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({
+__decorate([query(".base")], M3eAppBarElement.prototype, "_base", void 0);
+__decorate([query(".leading-icon")], M3eAppBarElement.prototype, "_leadingIcon", void 0);
+__decorate([query(".trailing-icon")], M3eAppBarElement.prototype, "_trailingIcon", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eAppBarElement.prototype, "centered", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eAppBarElement.prototype, "size", void 0);
 __decorate([debounce$1(40)], M3eAppBarElement.prototype, "_updateScroll", null);
 M3eAppBarElement = __decorate([customElement$1("m3e-app-bar")], M3eAppBarElement);
 
-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_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_projectClone, _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.
@@ -840,6 +387,7 @@ var M3eAutocompleteElement_1;
  * @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 panel-class - Class or list of classes to be applied to the autocomplete's overlay panel.
  * @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.
  *
@@ -953,6 +501,11 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
      * @default (count) => `${count} options`
      */
     this.resultsLabel = count => `${count} options`;
+    /**
+     * Class or list of classes to be applied to the autocomplete's overlay panel.
+     * @default ""
+     */
+    this.panelClass = "";
     new MutationController$1(this, {
       config: {
         childList: true,
@@ -1117,7 +670,7 @@ async function _M3eAutocompleteElement_handleMutation() {
   });
   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);
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_projectClone).call(this);
     if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
       __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
     } else {
@@ -1299,26 +852,17 @@ _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
   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");
+  if (this.panelClass) {
+    for (const klass of this.panelClass.split(/\s+/).map(d => d.trim()).filter(Boolean)) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").classList.add(klass);
+    }
+  }
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").scrollStrategy = "reposition";
   __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"));
-  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_projectClone).call(this);
   __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"));
@@ -1330,6 +874,23 @@ _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_projectClone = function _M3eAutocompleteElement_projectClone() {
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) return;
+  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);
+};
 _M3eAutocompleteElement_updateMenuState = function _M3eAutocompleteElement_updateMenuState(menu, count) {
   setCustomState$1(menu, "-loading", this.loading);
   setCustomState$1(menu, "-no-data", count == 0);
@@ -1500,23 +1061,23 @@ _M3eAutocompleteElement_deactivateOption = function _M3eAutocompleteElement_deac
 M3eAutocompleteElement.styles = css`:host { display: contents; } .options { display: none; }`;
 /** @private */
 M3eAutocompleteElement.__nextId = 0;
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "hideSelectionIndicator", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eAutocompleteElement.prototype, "required", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "auto-activate",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "autoActivate", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "case-sensitive",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "caseSensitive", void 0);
-__decorate([n$1({
+__decorate([property({
   converter: {
     fromAttribute(value) {
       if (value === null) return "contains";
@@ -1527,26 +1088,29 @@ __decorate([n$1({
     }
   }
 })], M3eAutocompleteElement.prototype, "filter", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eAutocompleteElement.prototype, "loading", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-no-data",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "hideNoData", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-loading",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "hideLoading", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "loading-label"
 })], M3eAutocompleteElement.prototype, "loadingLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "no-data-label"
 })], M3eAutocompleteElement.prototype, "noDataLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "results-label"
 })], M3eAutocompleteElement.prototype, "resultsLabel", void 0);
+__decorate([property({
+  attribute: "panel-class"
+})], M3eAutocompleteElement.prototype, "panelClass", void 0);
 M3eAutocompleteElement = M3eAutocompleteElement_1 = __decorate([customElement$1("m3e-autocomplete")], M3eAutocompleteElement);
 
 /**
@@ -1757,10 +1321,10 @@ async function _M3eBadgeElement_attach() {
 };
 /** The styles of the element. */
 M3eBadgeElement.styles = css`:host { display: inline-block; vertical-align: baseline; } .base { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${DesignToken$1.shape.corner.full}); color: var(--m3e-badge-color, ${DesignToken$1.color.onError}); background-color: var(--m3e-badge-container-color, ${DesignToken$1.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`;
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eBadgeElement.prototype, "size", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eBadgeElement.prototype, "position", void 0);
 M3eBadgeElement = __decorate([customElement$1("m3e-badge")], M3eBadgeElement);
@@ -1779,7 +1343,7 @@ let M3eBottomSheetActionElement = class M3eBottomSheetActionElement extends Acti
 };
 M3eBottomSheetActionElement = __decorate([customElement$1("m3e-bottom-sheet-action")], M3eBottomSheetActionElement);
 
-var _M3eBottomSheetElement_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_inerts, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _M3eBottomSheetElement_handleHeaderSlotChange, _M3eBottomSheetElement_handleHeaderPointerDown, _M3eBottomSheetElement_handleHeaderPointerMove, _M3eBottomSheetElement_handleHeaderPointerUp, _M3eBottomSheetElement_handleDocumentClick, _M3eBottomSheetElement_handleDocumentKeyDown, _M3eBottomSheetElement_handleWindowResize, _M3eBottomSheetElement_handleDragHandleClick, _M3eBottomSheetElement_handleDragHandleKeyDown, _M3eBottomSheetElement_getNextHigherDetent, _M3eBottomSheetElement_getNextLowerDetent, _M3eBottomSheetElement_getClosestDetent, _M3eBottomSheetElement_computeDetentHeight, _M3eBottomSheetElement_computeMaxHeight, _M3eBottomSheetElement_computeMinHeight, _M3eBottomSheetElement_computePeekHeight, _M3eBottomSheetElement_computeFitHeight, _M3eBottomSheetElement_handleSectionResize, _M3eBottomSheetElement_snapToDetent, _M3eBottomSheetElement_snapToHeight, _M3eBottomSheetElement_updateHeight, _M3eBottomSheetElement_applyInert, _M3eBottomSheetElement_restoreInert;
+var _M3eBottomSheetElement_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_inerts, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _M3eBottomSheetElement_initialize, _M3eBottomSheetElement_handleHeaderSlotChange, _M3eBottomSheetElement_handleHeaderPointerDown, _M3eBottomSheetElement_handleHeaderPointerMove, _M3eBottomSheetElement_handleHeaderPointerUp, _M3eBottomSheetElement_handleDocumentClick, _M3eBottomSheetElement_handleDocumentKeyDown, _M3eBottomSheetElement_handleWindowResize, _M3eBottomSheetElement_handleDragHandleClick, _M3eBottomSheetElement_handleDragHandleKeyDown, _M3eBottomSheetElement_getNextHigherDetent, _M3eBottomSheetElement_getNextLowerDetent, _M3eBottomSheetElement_getClosestDetent, _M3eBottomSheetElement_computeDetentHeight, _M3eBottomSheetElement_computeMaxHeight, _M3eBottomSheetElement_computeMinHeight, _M3eBottomSheetElement_computePeekHeight, _M3eBottomSheetElement_computeFitHeight, _M3eBottomSheetElement_handleSectionResize, _M3eBottomSheetElement_snapToDetent, _M3eBottomSheetElement_snapToHeight, _M3eBottomSheetElement_updateHeight, _M3eBottomSheetElement_applyInert, _M3eBottomSheetElement_restoreInert;
 var M3eBottomSheetElement_1;
 /**
  * A sheet used to show secondary content anchored to the bottom of the screen.
@@ -1878,7 +1442,7 @@ var M3eBottomSheetElement_1;
  * @cssprop --m3e-bottom-sheet-header-line-height - Line height for the sheet header.
  * @cssprop --m3e-bottom-sheet-header-tracking - Letter spacing (tracking) for the sheet header.
  */
-let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElement extends EventAttribute$1(AttachInternals$1(LitElement), "opening", "opened", "cancel", "closing", "closed") {
+let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElement extends EventAttribute$1(ReconnectedCallback$1(SuppressInitialAnimation$1(AttachInternals$1(LitElement))), "opening", "opened", "cancel", "closing", "closed") {
   constructor() {
     super(...arguments);
     _M3eBottomSheetElement_instances.add(this);
@@ -2002,11 +1566,6 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
     }
   }
   /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    addCustomState$1(this, "-no-animate");
-  }
-  /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("modal")) {
@@ -2016,19 +1575,14 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
     }
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_initialize).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    const content = this.shadowRoot?.querySelector(".content");
-    if (content) {
-      __classPrivateFieldSet(this, _M3eBottomSheetElement_cachedContentHeight, content.clientHeight, "f");
-      __classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(content);
-    }
-    const header = this.shadowRoot?.querySelector(".header");
-    if (header) {
-      __classPrivateFieldSet(this, _M3eBottomSheetElement_cachedHeaderHeight, header.clientHeight, "f");
-      __classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(header);
-    }
-    deleteCustomState$1(this, "-no-animate");
+    __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_initialize).call(this);
   }
   /** @inheritdoc */
   updated(_changedProperties) {
@@ -2126,6 +1680,18 @@ _M3eBottomSheetElement_cachedContentHeight = new WeakMap();
 _M3eBottomSheetElement_cachedHeaderHeight = new WeakMap();
 _M3eBottomSheetElement_snapAnimation = new WeakMap();
 _M3eBottomSheetElement_instances = new WeakSet();
+_M3eBottomSheetElement_initialize = function _M3eBottomSheetElement_initialize() {
+  const content = this.shadowRoot?.querySelector(".content");
+  if (content) {
+    __classPrivateFieldSet(this, _M3eBottomSheetElement_cachedContentHeight, content.clientHeight, "f");
+    __classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(content);
+  }
+  const header = this.shadowRoot?.querySelector(".header");
+  if (header) {
+    __classPrivateFieldSet(this, _M3eBottomSheetElement_cachedHeaderHeight, header.clientHeight, "f");
+    __classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(header);
+  }
+};
 _M3eBottomSheetElement_handleHeaderSlotChange = function _M3eBottomSheetElement_handleHeaderSlotChange(e) {
   setCustomState$1(this, "has-header", hasAssignedNodes$1(e.target));
 };
@@ -2444,32 +2010,32 @@ M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left
         padding ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         height ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))), :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop, :host(:not(:state(-no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eBottomSheetElement.prototype, "modal", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eBottomSheetElement.prototype, "open", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eBottomSheetElement.prototype, "handle", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "handle-label"
 })], M3eBottomSheetElement.prototype, "handleLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "detents",
   converter: spaceSeparatedStringConverter$1
 })], M3eBottomSheetElement.prototype, "detents", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eBottomSheetElement.prototype, "detent", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eBottomSheetElement.prototype, "hideable", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-friction",
   type: Number
 })], M3eBottomSheetElement.prototype, "hideFriction", void 0);
@@ -2533,10 +2099,10 @@ let M3eBottomSheetTriggerElement = class M3eBottomSheetTriggerElement extends Ht
     }
   }
 };
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eBottomSheetTriggerElement.prototype, "detent", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eBottomSheetTriggerElement.prototype, "secondary", void 0);
 M3eBottomSheetTriggerElement = __decorate([customElement$1("m3e-bottom-sheet-trigger")], M3eBottomSheetTriggerElement);
@@ -3838,25 +3404,25 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
 };
 /** The styles of the element. */
 M3eButtonElement.styles = [ButtonSizeStyle, ButtonVariantStyle, ButtonStyle];
-__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({
+__decorate([query(".base")], M3eButtonElement.prototype, "_base", void 0);
+__decorate([query(".elevation")], M3eButtonElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eButtonElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eButtonElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eButtonElement.prototype, "_ripple", void 0);
+__decorate([property({
   reflect: true
 })], M3eButtonElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eButtonElement.prototype, "shape", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eButtonElement.prototype, "size", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eButtonElement.prototype, "toggle", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eButtonElement.prototype, "selected", void 0);
@@ -4029,17 +3595,17 @@ _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$3(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
-__decorate([n$1({
+__decorate([query(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
+__decorate([property({
   reflect: true
 })], M3eButtonGroupElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eButtonGroupElement.prototype, "size", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eButtonGroupElement.prototype, "multi", void 0);
-__decorate([o$2({
+__decorate([queryAssignedElements({
   slot: "",
   selector: "m3e-button,m3e-icon-button",
   flatten: true
@@ -4128,6 +3694,7 @@ const CardVariantToken = {
   },
   outlined: {
     textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
+    containerColor: unsafeCSS(`var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surface}))`),
     containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level0}))`),
     outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken$1.color.outlineVariant}))`),
     outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),
@@ -4284,6 +3851,7 @@ var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_han
  * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.
  * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.
  * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.
+ * @cssprop --m3e-outlined-card-container-color - Background color of the outlined card container.
  * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.
  * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.
  * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.
@@ -4410,21 +3978,23 @@ _M3eCardElement_handleClick = function _M3eCardElement_handleClick(e) {
 };
 /** The styles of the element. */
 M3eCardElement.styles = [CardVariantStyle, CardStyle];
-__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
+__decorate([query(".base")], M3eCardElement.prototype, "_base", void 0);
+__decorate([query(".elevation")], M3eCardElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eCardElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eCardElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eCardElement.prototype, "_ripple", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
 })], M3eCardElement.prototype, "inline", void 0);
-__decorate([n$1({
-  type: Boolean
+__decorate([property({
+  type: Boolean,
+  reflect: true
 })], M3eCardElement.prototype, "actionable", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eCardElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eCardElement.prototype, "orientation", void 0);
 M3eCardElement = __decorate([customElement$1("m3e-card")], M3eCardElement);
@@ -4597,10 +4167,10 @@ _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$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);
+__decorate([query(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);
+__decorate([property()], M3eCheckboxElement.prototype, "value", void 0);
 M3eCheckboxElement = __decorate([customElement$1("m3e-checkbox")], M3eCheckboxElement);
 
 var _M3eChipElement_instances, _M3eChipElement_value, _M3eChipElement_textContent, _M3eChipElement_renderContent, _M3eChipElement_handleIconSlotChange, _M3eChipElement_handleTrailingIconSlotChange, _M3eChipElement_handleSlotChange;
@@ -4725,14 +4295,14 @@ _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$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({
+__decorate([query(".elevation")], M3eChipElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eChipElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eChipElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eChipElement.prototype, "_ripple", void 0);
+__decorate([property({
   reflect: true
 })], M3eChipElement.prototype, "variant", void 0);
-__decorate([n$1()], M3eChipElement.prototype, "value", null);
+__decorate([property()], M3eChipElement.prototype, "value", null);
 M3eChipElement = __decorate([customElement$1("m3e-chip")], M3eChipElement);
 
 /**
@@ -5137,314 +4707,15 @@ _M3eFilterChipSetElement_handleChange = function _M3eFilterChipSetElement_handle
 _M3eFilterChipSetElement_updateChipRole = function _M3eFilterChipSetElement_updateChipRole() {
   this.chips.forEach(x => x.role = this.multi ? "button" : "radio");
 };
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eFilterChipSetElement.prototype, "multi", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eFilterChipSetElement.prototype, "hideSelectionIndicator", void 0);
 M3eFilterChipSetElement = __decorate([customElement$1("m3e-filter-chip-set")], M3eFilterChipSetElement);
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$1 = globalThis,
-  i$1 = t$1.trustedTypes,
-  s = i$1 ? i$1.createPolicy("lit-html", {
-    createHTML: t => t
-  }) : void 0,
-  e$2 = "$lit$",
-  h = `lit$${Math.random().toFixed(9).slice(2)}$`,
-  o$1 = "?" + h,
-  n = `<${o$1}>`,
-  r = document,
-  l = () => r.createComment(""),
-  c = t => null === t || "object" != typeof t && "function" != typeof t,
-  a = Array.isArray,
-  u = t => a(t) || "function" == typeof t?.[Symbol.iterator],
-  d = "[ \t\n\f\r]",
-  f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
-  v = /-->/g,
-  _ = />/g,
-  m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
-  p = /'/g,
-  g = /"/g,
-  $ = /^(?:script|style|textarea|title)$/i,
-  T = Symbol.for("lit-noChange"),
-  E = Symbol.for("lit-nothing"),
-  A = new WeakMap(),
-  C = r.createTreeWalker(r, 129);
-function P(t, i) {
-  if (!a(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return void 0 !== s ? s.createHTML(i) : i;
-}
-const V = (t, i) => {
-  const s = t.length - 1,
-    o = [];
-  let r,
-    l = 2 === i ? "<svg>" : 3 === i ? "<math>" : "",
-    c = f;
-  for (let i = 0; i < s; i++) {
-    const s = t[i];
-    let a,
-      u,
-      d = -1,
-      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$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];
-};
-class N {
-  constructor({
-    strings: t,
-    _$litType$: s
-  }, n) {
-    let r;
-    this.parts = [];
-    let c = 0,
-      a = 0;
-    const u = t.length - 1,
-      d = this.parts,
-      [f, v] = V(t, s);
-    if (this.el = N.createElement(f, n), C.currentNode = this.el.content, 2 === s || 3 === s) {
-      const t = this.el.content.firstChild;
-      t.replaceWith(...t.childNodes);
-    }
-    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$2)) {
-          const i = v[a++],
-            s = r.getAttribute(t).split(h),
-            e = /([.?@])?(.*)/.exec(i);
-          d.push({
-            type: 1,
-            index: c,
-            name: e[2],
-            strings: s,
-            ctor: "." === e[1] ? H : "?" === e[1] ? I : "@" === e[1] ? L : k
-          }), r.removeAttribute(t);
-        } else t.startsWith(h) && (d.push({
-          type: 6,
-          index: c
-        }), r.removeAttribute(t));
-        if ($.test(r.tagName)) {
-          const t = r.textContent.split(h),
-            s = t.length - 1;
-          if (s > 0) {
-            r.textContent = i$1 ? i$1.emptyScript : "";
-            for (let i = 0; i < s; i++) r.append(t[i], l()), C.nextNode(), d.push({
-              type: 2,
-              index: ++c
-            });
-            r.append(t[s], l());
-          }
-        }
-      } else if (8 === r.nodeType) if (r.data === o$1) d.push({
-        type: 2,
-        index: c
-      });else {
-        let t = -1;
-        for (; -1 !== (t = r.data.indexOf(h, t + 1));) d.push({
-          type: 7,
-          index: c
-        }), t += h.length - 1;
-      }
-      c++;
-    }
-  }
-  static createElement(t, i) {
-    const s = r.createElement("template");
-    return s.innerHTML = t, s;
-  }
-}
-function S(t, i, s = t, e) {
-  if (i === T) return i;
-  let h = void 0 !== e ? s._$Co?.[e] : s._$Cl;
-  const o = c(i) ? void 0 : i._$litDirective$;
-  return h?.constructor !== o && (h?._$AO?.(false), void 0 === o ? h = void 0 : (h = new o(t), h._$AT(t, s, e)), void 0 !== e ? (s._$Co ??= [])[e] = h : s._$Cl = h), void 0 !== h && (i = S(t, h._$AS(t, i.values), h, e)), i;
-}
-class M {
-  constructor(t, i) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
-  }
-  get parentNode() {
-    return this._$AM.parentNode;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  u(t) {
-    const {
-        el: {
-          content: i
-        },
-        parts: s
-      } = this._$AD,
-      e = (t?.creationScope ?? r).importNode(i, true);
-    C.currentNode = e;
-    let h = C.nextNode(),
-      o = 0,
-      n = 0,
-      l = s[0];
-    for (; void 0 !== l;) {
-      if (o === l.index) {
-        let i;
-        2 === l.type ? i = new R(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new z(h, this, t)), this._$AV.push(i), l = s[++n];
-      }
-      o !== l?.index && (h = C.nextNode(), o++);
-    }
-    return C.currentNode = r, e;
-  }
-  p(t) {
-    let i = 0;
-    for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
-  }
-}
-class R {
-  get _$AU() {
-    return this._$AM?._$AU ?? this._$Cv;
-  }
-  constructor(t, i, s, e) {
-    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cv = e?.isConnected ?? true;
-  }
-  get parentNode() {
-    let t = this._$AA.parentNode;
-    const i = this._$AM;
-    return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t;
-  }
-  get startNode() {
-    return this._$AA;
-  }
-  get endNode() {
-    return this._$AB;
-  }
-  _$AI(t, i = this) {
-    t = S(this, t, i), c(t) ? t === E || null == t || "" === t ? (this._$AH !== E && this._$AR(), this._$AH = E) : t !== this._$AH && t !== T && this._(t) : void 0 !== t._$litType$ ? this.$(t) : void 0 !== t.nodeType ? this.T(t) : u(t) ? this.k(t) : this._(t);
-  }
-  O(t) {
-    return this._$AA.parentNode.insertBefore(t, this._$AB);
-  }
-  T(t) {
-    this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
-  }
-  _(t) {
-    this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t : this.T(r.createTextNode(t)), this._$AH = t;
-  }
-  $(t) {
-    const {
-        values: i,
-        _$litType$: s
-      } = t,
-      e = "number" == typeof s ? this._$AC(t) : (void 0 === s.el && (s.el = N.createElement(P(s.h, s.h[0]), this.options)), s);
-    if (this._$AH?._$AD === e) this._$AH.p(i);else {
-      const t = new M(e, this),
-        s = t.u(this.options);
-      t.p(i), this.T(s), this._$AH = t;
-    }
-  }
-  _$AC(t) {
-    let i = A.get(t.strings);
-    return void 0 === i && A.set(t.strings, i = new N(t)), i;
-  }
-  k(t) {
-    a(this._$AH) || (this._$AH = [], this._$AR());
-    const i = this._$AH;
-    let s,
-      e = 0;
-    for (const h of t) e === i.length ? i.push(s = new R(this.O(l()), this.O(l()), this, this.options)) : s = i[e], s._$AI(h), e++;
-    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
-  }
-  _$AR(t = this._$AA.nextSibling, i) {
-    for (this._$AP?.(false, true, i); t !== this._$AB;) {
-      const i = t.nextSibling;
-      t.remove(), t = i;
-    }
-  }
-  setConnected(t) {
-    void 0 === this._$AM && (this._$Cv = t, this._$AP?.(t));
-  }
-}
-class k {
-  get tagName() {
-    return this.element.tagName;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  constructor(t, i, s, e, h) {
-    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = h, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = E;
-  }
-  _$AI(t, i = this, s, e) {
-    const h = this.strings;
-    let o = false;
-    if (void 0 === h) t = S(this, t, i, 0), o = !c(t) || t !== this._$AH && t !== T, o && (this._$AH = t);else {
-      const e = t;
-      let n, r;
-      for (t = h[0], n = 0; n < h.length - 1; n++) r = S(this, e[s + n], i, n), r === T && (r = this._$AH[n]), o ||= !c(r) || r !== this._$AH[n], r === E ? t = E : t !== E && (t += (r ?? "") + h[n + 1]), this._$AH[n] = r;
-    }
-    o && !e && this.j(t);
-  }
-  j(t) {
-    t === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
-  }
-}
-class H extends k {
-  constructor() {
-    super(...arguments), this.type = 3;
-  }
-  j(t) {
-    this.element[this.name] = t === E ? void 0 : t;
-  }
-}
-class I extends k {
-  constructor() {
-    super(...arguments), this.type = 4;
-  }
-  j(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== E);
-  }
-}
-class L extends k {
-  constructor(t, i, s, e, h) {
-    super(t, i, s, e, h), this.type = 5;
-  }
-  _$AI(t, i = this) {
-    if ((t = S(this, t, i, 0) ?? E) === T) return;
-    const s = this._$AH,
-      e = t === E && s !== E || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive,
-      h = t !== E && (s === E || e);
-    e && this.element.removeEventListener(this.name, this, s), h && this.element.addEventListener(this.name, this, t), this._$AH = t;
-  }
-  handleEvent(t) {
-    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
-  }
-}
-class z {
-  constructor(t, i, s) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t) {
-    S(this, t);
-  }
-}
-const j = t$1.litHtmlPolyfillSupport;
-j?.(N, R), (t$1.litHtmlVersions ??= []).push("3.3.1");
-
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const o = o => o ?? E;
-
 var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange, _M3eInputChipElement_handleRemoveButtonClick, _M3eInputChipElement_handleKeyDown;
 /**
  * A chip which represents a discrete piece of information entered by a user.
@@ -5551,7 +4822,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(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="${ifDefined(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() {
@@ -5580,12 +4851,12 @@ _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$3(".cell")], M3eInputChipElement.prototype, "cell", void 0);
-__decorate([e$3(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
-__decorate([n$1({
+__decorate([query(".cell")], M3eInputChipElement.prototype, "cell", void 0);
+__decorate([query(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
+__decorate([property({
   type: Boolean
 })], M3eInputChipElement.prototype, "removable", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "remove-label"
 })], M3eInputChipElement.prototype, "removeLabel", void 0);
 M3eInputChipElement = __decorate([customElement$1("m3e-input-chip")], M3eInputChipElement);
@@ -7417,42 +6688,15 @@ const spaceSeparatedStringConverter = {
   }
 };
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t = {
-    ATTRIBUTE: 1},
-  e$1 = t => (...e) => ({
-    _$litDirective$: t,
-    values: e
-  });
-class i {
-  constructor(t) {}
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(t, e, i) {
-    this._$Ct = t, this._$AM = e, this._$Ci = i;
-  }
-  _$AS(t, e) {
-    return this.update(t, e);
-  }
-  update(t, e) {
-    return this.render(...e);
-  }
-}
-
 const important = "important";
 // The leading space is important
 const importantFlag = " !" + important;
 // How many characters to remove from a value, as a negative number
 const flagTrim = 0 - importantFlag.length;
-class SafeStyleMapDirective extends i {
+class SafeStyleMapDirective extends Directive {
   constructor(partInfo) {
     super(partInfo);
-    if (partInfo.type !== t.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
+    if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
       throw new Error("The `styleMap` directive must be used in the `style` attribute " + "and must be the only part in the attribute.");
     }
   }
@@ -7517,7 +6761,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$1(SafeStyleMapDirective);
+const safeStyleMap = directive(SafeStyleMapDirective);
 
 /**
  * Determines whether an object has keys for a given type.
@@ -7670,7 +6914,7 @@ function Checked(base) {
       }
     }
   }
-  __decorate([n$1({
+  __decorate([property({
     type: Boolean,
     reflect: true
   })], _CheckedMixin.prototype, "checked", void 0);
@@ -7709,7 +6953,7 @@ function CheckedIndeterminate(base) {
       }
     }
   }
-  __decorate([n$1({
+  __decorate([property({
     type: Boolean,
     reflect: true
   })], _CheckedIndeterminateMixin.prototype, "indeterminate", void 0);
@@ -7760,7 +7004,7 @@ function Selected(base) {
       }
     }
   }
-  __decorate([n$1({
+  __decorate([property({
     type: Boolean,
     reflect: true
   })], _SelectedMixin.prototype, "selected", void 0);
@@ -8495,7 +7739,7 @@ function Disabled(base, reflect = true) {
       }
     }
   }
-  __decorate([n$1({
+  __decorate([property({
     type: Boolean,
     reflect: reflect
   })], _DisabledMixin.prototype, "disabled", void 0);
@@ -8560,7 +7804,7 @@ function DisabledInteractive(base) {
     }
   }
   _a = _suppressedEventHandler;
-  __decorate([n$1({
+  __decorate([property({
     attribute: "disabled-interactive",
     type: Boolean,
     reflect: true
@@ -8756,10 +8000,10 @@ function FormAssociated(base) {
   }
   /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
   _FormAssociatedMixin.formAssociated = true;
-  __decorate([n$1({
+  __decorate([property({
     noAccessor: true
   })], _FormAssociatedMixin.prototype, "name", null);
-  __decorate([n$1({
+  __decorate([property({
     type: Boolean
   })], _FormAssociatedMixin.prototype, "disabled", null);
   return _FormAssociatedMixin;
@@ -9087,9 +8331,9 @@ function FormSubmitter(base) {
   _a = _clickHandler$1;
   /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
   _FormSubmitterMixin.formAssociated = true;
-  __decorate([n$1()], _FormSubmitterMixin.prototype, "name", null);
-  __decorate([n$1()], _FormSubmitterMixin.prototype, "value", null);
-  __decorate([n$1()], _FormSubmitterMixin.prototype, "type", void 0);
+  __decorate([property()], _FormSubmitterMixin.prototype, "name", null);
+  __decorate([property()], _FormSubmitterMixin.prototype, "value", null);
+  __decorate([property()], _FormSubmitterMixin.prototype, "type", void 0);
   return _FormSubmitterMixin;
 }
 
@@ -9181,7 +8425,7 @@ function HtmlFor(base) {
     }
   }
   _a = _firstUpdated;
-  __decorate([n$1({
+  __decorate([property({
     attribute: "for"
   })], _HtmlForMixin.prototype, "htmlFor", void 0);
   return _HtmlForMixin;
@@ -9348,7 +8592,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(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;
+      return !disabled && !disabledInteractive && this.href ? html`<a href="${this.href}" target="${ifDefined(this.target || undefined)}" rel="${ifDefined(this.rel || undefined)}" download="${ifDefined(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) {
@@ -9369,10 +8613,10 @@ function LinkButton(base) {
   }, __LinkButtonMixin_handleLinkBlur = function __LinkButtonMixin_handleLinkBlur(e) {
     e.target.setAttribute("aria-hidden", "true");
   };
-  __decorate([n$1()], _LinkButtonMixin.prototype, "href", void 0);
-  __decorate([n$1()], _LinkButtonMixin.prototype, "target", void 0);
-  __decorate([n$1()], _LinkButtonMixin.prototype, "rel", void 0);
-  __decorate([n$1({
+  __decorate([property()], _LinkButtonMixin.prototype, "href", void 0);
+  __decorate([property()], _LinkButtonMixin.prototype, "target", void 0);
+  __decorate([property()], _LinkButtonMixin.prototype, "rel", void 0);
+  __decorate([property({
     reflect: false
   })], _LinkButtonMixin.prototype, "download", null);
   return _LinkButtonMixin;
@@ -9411,7 +8655,7 @@ function ReadOnly(base, reflect = true) {
       }
     }
   }
-  __decorate([n$1({
+  __decorate([property({
     attribute: "readonly",
     type: Boolean,
     reflect: reflect
@@ -9419,6 +8663,40 @@ function ReadOnly(base, reflect = true) {
   return _ReadOnlyMixin;
 }
 
+const _wasConnected = Symbol("_wasConnected");
+/**
+ * Mixin to augment an element with behavior that supports reconnection logic.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<ReconnectedCallbackMixin> & T} A constructor that implements `ReconnectedCallbackMixin`.
+ */
+function ReconnectedCallback(base) {
+  var _a;
+  class _ReconnectedCallbackMixin extends base {
+    constructor() {
+      super(...arguments);
+      /** @private */
+      this[_a] = false;
+    }
+    /** @inheritdoc */
+    reconnectedCallback() {}
+    /** @inheritdoc */
+    connectedCallback() {
+      super.connectedCallback();
+      if (this[_wasConnected]) {
+        this.reconnectedCallback();
+      }
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this[_wasConnected] = true;
+    }
+  }
+  _a = _wasConnected;
+  return _ReconnectedCallbackMixin;
+}
+
 /**
  * Determines whether a value is a `RequiredMixin`.
  * @param {unknown} value The value to test.
@@ -9455,7 +8733,7 @@ function Required(base) {
       }
     }
   }
-  __decorate([n$1({
+  __decorate([property({
     type: Boolean,
     reflect: true
   })], _RequiredMixin.prototype, "required", void 0);
@@ -9518,6 +8796,23 @@ function Role(base, role) {
   return _RoleMixin;
 }
 
+/**
+ * Mixin to augment an element with behavior that suppresses initial animations.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {T} A constructor that implements initial animation suppression.
+ */
+function SuppressInitialAnimation(base) {
+  class _SuppressInitialAnimation extends base {
+    connectedCallback() {
+      super.connectedCallback();
+      addCustomState(this, "-no-animate");
+      requestAnimationFrame(() => deleteCustomState(this, "-no-animate"));
+    }
+  }
+  return _SuppressInitialAnimation;
+}
+
 /**
  * Determines whether a value is a `VerticalMixin`.
  * @param {unknown} value The value to test.
@@ -9550,7 +8845,7 @@ function Vertical(base) {
       }
     }
   }
-  __decorate([n$1({
+  __decorate([property({
     type: Boolean,
     reflect: true
   })], _VerticalMixin.prototype, "vertical", void 0);
@@ -9727,7 +9022,7 @@ M3eCollapsibleElement.styles = css`:host { display: block; height: 0px; overflow
           ${DesignToken.motion.easing.standard},
         padding-bottom var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
           ${DesignToken.motion.easing.standard}`)}; } :host(:not(:state(-closing)):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(:state(-no-animate)) { transition-duration: 0ms; } :host(:state(-opening)), :host(:state(-closing)) { overflow-y: hidden !important; } :host(:state(-overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eCollapsibleElement.prototype, "open", void 0);
@@ -9894,12 +9189,12 @@ _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$3(".shadow")], M3eElevationElement.prototype, "_shadow", void 0);
-__decorate([n$1({
+__decorate([query(".shadow")], M3eElevationElement.prototype, "_shadow", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eElevationElement.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number,
   reflect: true
 })], M3eElevationElement.prototype, "level", void 0);
@@ -10040,12 +9335,12 @@ _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$3(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
-__decorate([n$1({
+__decorate([query(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eFocusRingElement.prototype, "inward", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eFocusRingElement.prototype, "disabled", void 0);
@@ -10335,19 +9630,19 @@ _M3eRippleElement_handlePressedChange = function _M3eRippleElement_handlePressed
 };
 /** The styles of the element. */
 M3eRippleElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } :host(:not([unbounded])) { overflow: hidden; } .ripple { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; transform: scale(0); border-radius: ${DesignToken.shape.corner.full}; background-color: color-mix(in srgb, ${RippleToken.color} ${RippleToken.opacity}, transparent); will-change: background-color, opacity; animation: ripple ${RippleToken.enterDuration} linear; } .ripple.persistent.pressed { transform: scale(${RippleToken.scaleFactor}); } .ripple.exit { transition: opacity ${RippleToken.exitDuration} cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; } @keyframes ripple { to { transform: scale(${RippleToken.scaleFactor}); } } @media (prefers-reduced-motion) { .ripple { transform: scale(${RippleToken.scaleFactor}); animation-duration: 90ms; } .ripple.exit { transition-duration: 10ms; } } @media (forced-colors: active) { .ripple { display: none; } }`;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eRippleElement.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eRippleElement.prototype, "centered", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eRippleElement.prototype, "unbounded", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eRippleElement.prototype, "radius", void 0);
 M3eRippleElement = __decorate([customElement("m3e-ripple")], M3eRippleElement);
@@ -10431,8 +9726,8 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends AttachIn
 _M3eScrollContainerElement_scrollHandler = new WeakMap();
 /** The styles of the element. */
 M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible):state(-above)) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible):state(-below)) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible):state(-above)) { border-top-color: GrayText; } :host(:not(:focus-visible):state(-below)) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
-__decorate([n$1()], M3eScrollContainerElement.prototype, "dividers", void 0);
-__decorate([n$1({
+__decorate([property()], M3eScrollContainerElement.prototype, "dividers", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eScrollContainerElement.prototype, "thin", void 0);
@@ -10527,7 +9822,7 @@ _M3eSlideElement_updateItems = function _M3eSlideElement_updateItems() {
 /** The styles of the element. */
 M3eSlideElement.styles = css`:host { display: flex; position: relative; overflow: hidden; } ::slotted(*) { width: 100%; top: 0; transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
         visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } ::slotted(.-before), ::slotted(.-after) { visibility: hidden; position: absolute; } ::slotted(.-before) { inset-inline-start: -100%; } ::slotted(.-after) { inset-inline-start: 100%; } ::slotted(:not(.-before):not(.-after)) { position: relative; inset-inline-start: 0; } :host(:state(-no-animate)) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
-__decorate([n$1({
+__decorate([property({
   attribute: "selected-index",
   type: Number,
   reflect: true
@@ -10687,12 +9982,12 @@ _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$3(".layer")], M3eStateLayerElement.prototype, "_layer", void 0);
-__decorate([n$1({
+__decorate([query(".layer")], M3eStateLayerElement.prototype, "_layer", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eStateLayerElement.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "disable-hover",
   type: Boolean,
   reflect: true
@@ -10919,16 +10214,16 @@ _M3eTextHighlightElement_highlight = function _M3eTextHighlightElement_highlight
 M3eTextHighlightElement.styles = css`:host { display: contents; }`;
 /** @private */
 M3eTextHighlightElement.__nextId = 0;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eTextHighlightElement.prototype, "disabled", void 0);
-__decorate([n$1()], M3eTextHighlightElement.prototype, "term", void 0);
-__decorate([n$1({
+__decorate([property()], M3eTextHighlightElement.prototype, "term", void 0);
+__decorate([property({
   attribute: "case-sensitive",
   type: Boolean
 })], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
-__decorate([n$1()], M3eTextHighlightElement.prototype, "mode", void 0);
+__decorate([property()], M3eTextHighlightElement.prototype, "mode", void 0);
 M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([customElement("m3e-text-highlight")], M3eTextHighlightElement);
 
 /**
@@ -10988,7 +10283,7 @@ let M3eDialogActionElement = class M3eDialogActionElement extends ActionElementB
     this.closest("m3e-dialog")?.hide(this.returnValue);
   }
 };
-__decorate([n$1({
+__decorate([property({
   attribute: "return-value"
 })], M3eDialogActionElement.prototype, "returnValue", void 0);
 M3eDialogActionElement = __decorate([customElement$1("m3e-dialog-action")], M3eDialogActionElement);
@@ -11171,7 +10466,7 @@ let M3eDialogElement = M3eDialogElement_1 = class M3eDialogElement extends Event
   }
   /** @inheritdoc */
   render() {
-    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>`;
+    return html`<dialog class="base" role="${ifDefined(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();
@@ -11234,28 +10529,28 @@ M3eDialogElement.styles = css`:host { display: contents; } .base { font: inherit
         visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { .base[open] { opacity: 0; transform: translateY(-3.125rem) scaleY(0.8); } .base[open]::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); } } .header { flex: none; display: flex; align-items: center; padding: 1.5rem 1.5rem 1rem 1.5rem; background-color: var(--m3e-dialog-header-container-color, transparent); } ::slotted([slot="header"]) { margin: unset; flex: 1 1 auto; color: var(--m3e-dialog-header-color, inherit); font-size: var(--m3e-dialog-header-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-dialog-header-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}); } .content { padding-inline: 1.5rem; color: var(--m3e-dialog-content-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-dialog-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-dialog-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .actions { padding: 1.5rem; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } :host(:not(:state(-with-actions))) .content { margin-bottom: 1.5rem; } :host(:not(:state(-with-actions))) .actions { display: none; } .close { margin-inline-start: 0.5rem; } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { .base:not([open])::backdrop, .base[open]::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } } @media (prefers-reduced-motion) { .base:not([open]), .base[open], .base:not([open])::backdrop, .base[open]::backdrop { transition: none; } }`;
 /** @private */
 M3eDialogElement.__nextId = 0;
-__decorate([r$1()], M3eDialogElement.prototype, "_withActions", void 0);
-__decorate([e$3(".base")], M3eDialogElement.prototype, "_base", void 0);
-__decorate([e$3(".content")], M3eDialogElement.prototype, "_content", void 0);
-__decorate([n$1({
+__decorate([state()], M3eDialogElement.prototype, "_withActions", void 0);
+__decorate([query(".base")], M3eDialogElement.prototype, "_base", void 0);
+__decorate([query(".content")], M3eDialogElement.prototype, "_content", void 0);
+__decorate([property({
   type: Boolean
 })], M3eDialogElement.prototype, "alert", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eDialogElement.prototype, "open", null);
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eDialogElement.prototype, "dismissible", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "disable-close",
   type: Boolean
 })], M3eDialogElement.prototype, "disableClose", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "no-focus-trap",
   type: Boolean
 })], M3eDialogElement.prototype, "noFocusTrap", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "close-label"
 })], M3eDialogElement.prototype, "closeLabel", void 0);
 M3eDialogElement = M3eDialogElement_1 = __decorate([customElement$1("m3e-dialog")], M3eDialogElement);
@@ -11347,20 +10642,20 @@ let M3eDividerElement = class M3eDividerElement extends Role$1(LitElement, "sepa
 };
 /** The styles of the element. */
 M3eDividerElement.styles = css`:host { display: block; position: relative; } :host(:not([vertical])) { height: var(--m3e-divider-thickness, 1px); width: 100%; } :host([vertical]) { width: var(--m3e-divider-thickness, 1px); height: 100%; } .line { box-sizing: border-box; position: absolute; } :host(:not([vertical])) .line { border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); height: inherit; } :host([vertical]) .line { border-right: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); width: inherit; } :host([vertical][inset]) .line, :host([vertical][inset-start]) .line { top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-start]) .line { left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical][inset]) .line, :host([vertical][inset-end]) .line { bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-end]) .line { right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical]:not([inset]):not([inset-start])) .line { top: 0; } :host(:not([vertical]):not([inset]):not([inset-start])) .line { left: 0; } :host([vertical]:not([inset]):not([inset-end])) .line { bottom: 0; } :host(:not([vertical]):not([inset]):not([inset-end])) .line { right: 0; } @media (forced-colors: active) { .line { border-color: GrayText; } }`;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eDividerElement.prototype, "vertical", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eDividerElement.prototype, "inset", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "inset-start",
   type: Boolean,
   reflect: true
 })], M3eDividerElement.prototype, "insetStart", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "inset-end",
   type: Boolean,
   reflect: true
@@ -11394,7 +10689,7 @@ const DrawerContainerStyle = css`:host { display: block; position: relative; ove
         visibility ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:state(-start-push)[start]) .scrim, :host(:state(-end-push)[end]) .scrim, :host(:state(-start-over)[start]) .scrim, :host(:state(-end-over)[end]) .scrim { visibility: visible; opacity: ${DrawerContainerToken.scrimOpacity}; } :host(:state(-start-push)) .start, :host(:state(-start-over)) .start { border-start-end-radius: ${DrawerContainerToken.cornerShape}; border-end-end-radius: ${DrawerContainerToken.cornerShape}; } :host(:state(-end-push)) .end, :host(:state(-end-over)) .end { border-start-start-radius: ${DrawerContainerToken.cornerShape}; border-end-start-radius: ${DrawerContainerToken.cornerShape}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: ${DrawerContainerToken.modalContainerColor}; box-shadow: ${DrawerContainerToken.modalContainerElevation}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${DrawerContainerToken.dividerThickness}; border-inline-end-style: solid; box-sizing: border-box; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: ${DrawerContainerToken.dividerColor}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${DrawerContainerToken.dividerThickness}; border-inline-start-style: solid; box-sizing: border-box; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: ${DrawerContainerToken.dividerColor}; } :host(:state(-no-animate)) .start, :host(:state(-no-animate)) .end, :host(:state(-no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard},
       visibility ${DesignToken$1.motion.duration.medium4} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: GrayText; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;
 
-var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointUnobserve, _M3eDrawerContainerElement_disableStartFocusTrap, _M3eDrawerContainerElement_disableEndFocusTrap, _M3eDrawerContainerElement_resizeController, _M3eDrawerContainerElement_handleScrimClick, _M3eDrawerContainerElement_handleStartSlotChange, _M3eDrawerContainerElement_handleEndSlotChange, _M3eDrawerContainerElement_handleDrawerResize, _M3eDrawerContainerElement_clearMode, _M3eDrawerContainerElement_updateMode;
+var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointUnobserve, _M3eDrawerContainerElement_disableStartFocusTrap, _M3eDrawerContainerElement_disableEndFocusTrap, _M3eDrawerContainerElement_resizeController, _M3eDrawerContainerElement_initialize, _M3eDrawerContainerElement_handleScrimClick, _M3eDrawerContainerElement_handleStartSlotChange, _M3eDrawerContainerElement_handleEndSlotChange, _M3eDrawerContainerElement_handleDrawerResize, _M3eDrawerContainerElement_clearMode, _M3eDrawerContainerElement_updateMode;
 /**
  * A container for one or two sliding drawers.
  *
@@ -11446,7 +10741,7 @@ var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointU
  * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.
  * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.
  */
-let M3eDrawerContainerElement = class M3eDrawerContainerElement extends AttachInternals$1(LitElement) {
+let M3eDrawerContainerElement = class M3eDrawerContainerElement extends ReconnectedCallback$1(AttachInternals$1(LitElement)) {
   constructor() {
     super(...arguments);
     _M3eDrawerContainerElement_instances.add(this);
@@ -11509,8 +10804,8 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends AttachIn
     __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_clearMode).call(this);
   }
   /** @inheritdoc */
-  update(changedProperties) {
-    super.update(changedProperties);
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("startMode") || changedProperties.has("endMode")) {
       __classPrivateFieldGet(this, _M3eDrawerContainerElement_breakpointUnobserve, "f")?.call(this);
       if (this.startMode === "auto" || this.endMode === "auto") {
@@ -11536,12 +10831,14 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends AttachIn
     }
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_initialize).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    let drawer = this.shadowRoot?.querySelector(".start");
-    if (drawer) __classPrivateFieldGet(this, _M3eDrawerContainerElement_resizeController, "f").observe(drawer);
-    drawer = this.shadowRoot?.querySelector(".end");
-    if (drawer) __classPrivateFieldGet(this, _M3eDrawerContainerElement_resizeController, "f").observe(drawer);
+    __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_initialize).call(this);
   }
   /** @inheritdoc */
   render() {
@@ -11553,6 +10850,12 @@ _M3eDrawerContainerElement_disableStartFocusTrap = new WeakMap();
 _M3eDrawerContainerElement_disableEndFocusTrap = new WeakMap();
 _M3eDrawerContainerElement_resizeController = new WeakMap();
 _M3eDrawerContainerElement_instances = new WeakSet();
+_M3eDrawerContainerElement_initialize = function _M3eDrawerContainerElement_initialize() {
+  let drawer = this.shadowRoot?.querySelector(".start");
+  if (drawer) __classPrivateFieldGet(this, _M3eDrawerContainerElement_resizeController, "f").observe(drawer);
+  drawer = this.shadowRoot?.querySelector(".end");
+  if (drawer) __classPrivateFieldGet(this, _M3eDrawerContainerElement_resizeController, "f").observe(drawer);
+};
 _M3eDrawerContainerElement_handleScrimClick = function _M3eDrawerContainerElement_handleScrimClick() {
   if (this._startMode !== "side") {
     this.start = false;
@@ -11643,30 +10946,30 @@ _M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_upda
 };
 /** The styles of the element. */
 M3eDrawerContainerElement.styles = DrawerContainerStyle;
-__decorate([r$1()], M3eDrawerContainerElement.prototype, "_startMode", void 0);
-__decorate([r$1()], M3eDrawerContainerElement.prototype, "_endMode", void 0);
-__decorate([n$1({
+__decorate([state()], M3eDrawerContainerElement.prototype, "_startMode", void 0);
+__decorate([state()], M3eDrawerContainerElement.prototype, "_endMode", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eDrawerContainerElement.prototype, "start", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "start-mode",
   reflect: true
 })], M3eDrawerContainerElement.prototype, "startMode", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "start-divider",
   type: Boolean,
   reflect: true
 })], M3eDrawerContainerElement.prototype, "startDivider", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eDrawerContainerElement.prototype, "end", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "end-mode",
   reflect: true
 })], M3eDrawerContainerElement.prototype, "endMode", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "end-divider",
   type: Boolean,
   reflect: true
@@ -11869,7 +11172,7 @@ _M3eAccordionElement_handleOpening = function _M3eAccordionElement_handleOpening
 };
 /** The styles of the element. */
 M3eAccordionElement.styles = css`:host { display: block; } ::slotted(m3e-expansion-panel) { --m3e-expansion-panel-container-color: ${DesignToken$1.color.surface}; --m3e-expansion-panel-elevation: ${DesignToken$1.elevation.level2}; --m3e-expansion-panel-open-shape: ${DesignToken$1.shape.corner.medium}; --_expansion-panel-open-spacing: 1rem; } ::slotted(m3e-expansion-panel:first-of-type:last-of-type) { --m3e-expansion-panel-shape: ${DesignToken$1.shape.corner.medium}; } ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) { --m3e-expansion-panel-shape: ${DesignToken$1.shape.corner.value.medium} ${DesignToken$1.shape.corner.value.medium} ${DesignToken$1.shape.corner.value.none} ${DesignToken$1.shape.corner.value.none}; } ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) { --m3e-expansion-panel-shape: ${DesignToken$1.shape.corner.value.none} ${DesignToken$1.shape.corner.value.none} ${DesignToken$1.shape.corner.value.medium} ${DesignToken$1.shape.corner.value.medium}; }`;
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eAccordionElement.prototype, "multi", void 0);
 M3eAccordionElement = __decorate([customElement$1("m3e-accordion")], M3eAccordionElement);
@@ -11989,17 +11292,17 @@ _M3eExpansionHeaderElement_renderToggle = function _M3eExpansionHeaderElement_re
 };
 /** The styles of the element. */
 M3eExpansionHeaderElement.styles = ExpansionHeaderStyle;
-__decorate([e$3(".focus-ring")], M3eExpansionHeaderElement.prototype, "_focusRing", void 0);
-__decorate([e$3(".state-layer")], M3eExpansionHeaderElement.prototype, "_stateLayer", void 0);
-__decorate([n$1({
+__decorate([query(".focus-ring")], M3eExpansionHeaderElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eExpansionHeaderElement.prototype, "_stateLayer", void 0);
+__decorate([property({
   attribute: "toggle-direction",
   reflect: true
 })], M3eExpansionHeaderElement.prototype, "toggleDirection", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "toggle-position",
   reflect: true
 })], M3eExpansionHeaderElement.prototype, "togglePosition", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-toggle",
   type: Boolean,
   reflect: true
@@ -12077,7 +11380,7 @@ var M3eExpansionPanelElement_1;
  * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.
  * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.
  */
-let M3eExpansionPanelElement = M3eExpansionPanelElement_1 = class M3eExpansionPanelElement extends EventAttribute$1(Disabled$1(AttachInternals$1(LitElement, true)), "opening", "opened", "closing", "closed") {
+let M3eExpansionPanelElement = M3eExpansionPanelElement_1 = class M3eExpansionPanelElement extends EventAttribute$1(Disabled$1(ReconnectedCallback$1(AttachInternals$1(LitElement, true))), "opening", "opened", "closing", "closed") {
   constructor() {
     super(...arguments);
     _M3eExpansionPanelElement_instances.add(this);
@@ -12136,6 +11439,11 @@ let M3eExpansionPanelElement = M3eExpansionPanelElement_1 = class M3eExpansionPa
     __classPrivateFieldGet(this, _M3eExpansionPanelElement_directionalitySubscription, "f")?.call(this);
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eExpansionPanelElement_instances, "m", _M3eExpansionPanelElement_updateHeaderToggleRotation).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     __classPrivateFieldGet(this, _M3eExpansionPanelElement_instances, "m", _M3eExpansionPanelElement_updateHeaderToggleRotation).call(this);
@@ -12205,20 +11513,20 @@ _M3eExpansionPanelElement_updateHeaderToggleRotation = function _M3eExpansionPan
 M3eExpansionPanelElement.styles = ExpansionPanelStyle;
 /** @private */
 M3eExpansionPanelElement.__nextId = 0;
-__decorate([e$3("m3e-expansion-header")], M3eExpansionPanelElement.prototype, "_header", void 0);
-__decorate([n$1({
+__decorate([query("m3e-expansion-header")], M3eExpansionPanelElement.prototype, "_header", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eExpansionPanelElement.prototype, "open", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "toggle-direction",
   reflect: true
 })], M3eExpansionPanelElement.prototype, "toggleDirection", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "toggle-position",
   reflect: true
 })], M3eExpansionPanelElement.prototype, "togglePosition", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-toggle",
   type: Boolean,
   reflect: true
@@ -13266,22 +12574,22 @@ _M3eFabElement_handleSlotChange = function _M3eFabElement_handleSlotChange() {
 };
 /** The styles of the element. */
 M3eFabElement.styles = [FabSizeStyle, FabVariantStyle, FabStyle];
-__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({
+__decorate([query(".base")], M3eFabElement.prototype, "_base", void 0);
+__decorate([query(".elevation")], M3eFabElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eFabElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eFabElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eFabElement.prototype, "_ripple", void 0);
+__decorate([property({
   reflect: true
 })], M3eFabElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eFabElement.prototype, "lowered", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eFabElement.prototype, "size", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eFabElement.prototype, "extended", void 0);
@@ -13373,10 +12681,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$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);
+__decorate([query(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eFabMenuItemElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eFabMenuItemElement.prototype, "_stateLayer", void 0);
+__decorate([query(".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;
@@ -13433,7 +12741,7 @@ var _M3eFabMenuElement_instances, _M3eFabMenuElement_fabTabIndex, _M3eFabMenuEle
  * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.
  * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.
  */
-let M3eFabMenuElement = class M3eFabMenuElement extends AttachInternals$1(Role$1(LitElement, "menu")) {
+let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation$1(AttachInternals$1(Role$1(LitElement, "menu"))) {
   constructor() {
     super(...arguments);
     _M3eFabMenuElement_instances.add(this);
@@ -13544,7 +12852,6 @@ let M3eFabMenuElement = class M3eFabMenuElement extends AttachInternals$1(Role$1
     super.connectedCallback();
     this.tabIndex = -1;
     this.setAttribute("popover", "manual");
-    addCustomState$1(this, "-no-animate");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eFabMenuElement_keyDownHandler, "f"));
     this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eFabMenuElement_toggleHandler, "f"));
     document.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuElement_documentClickHandler, "f"));
@@ -13557,11 +12864,6 @@ let M3eFabMenuElement = class M3eFabMenuElement extends AttachInternals$1(Role$1
     document.removeEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuElement_documentClickHandler, "f"));
   }
   /** @inheritdoc */
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
-  }
-  /** @inheritdoc */
   render() {
     return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eFabMenuElement_instances, "m", _M3eFabMenuElement_handleSlotChange)}"></slot></div>`;
   }
@@ -13626,7 +12928,7 @@ M3eFabMenuElement.styles = css`:host { position: absolute; flex-direction: colum
         transform ${DesignToken$1.motion.spring.fastSpatial},
         overlay ${DesignToken$1.motion.spring.fastEffects} allow-discrete,
         display ${DesignToken$1.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken$1.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken$1.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken$1.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken$1.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${DesignToken$1.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken$1.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken$1.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${DesignToken$1.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`;
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eFabMenuElement.prototype, "variant", void 0);
 M3eFabMenuElement = __decorate([customElement$1("m3e-fab-menu")], M3eFabMenuElement);
@@ -13737,7 +13039,7 @@ function findFormFieldControl(slot) {
  * Copyright (c) 2025 Google LLC
  * See LICENSE file in the project root for full license text.
  */
-var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_pressedController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
+var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_pressedController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_initialize, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
 /**
  * A container for form controls that applies Material Design styling and behavior.
  *
@@ -13809,7 +13111,7 @@ var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldE
  * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.
  * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.
  */
-let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(LitElement) {
+let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback$1(AttachInternals$1(LitElement)) {
   constructor() {
     super();
     _M3eFormFieldElement_instances.add(this);
@@ -13950,15 +13252,15 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
     super.disconnectedCallback();
     __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_changeControl).call(this, null);
   }
-  /** @private */
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_initialize).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    __classPrivateFieldGet(this, _M3eFormFieldElement_focusController, "f").observe(this._base);
-    __classPrivateFieldGet(this, _M3eFormFieldElement_pressedController, "f").observe(this._base);
-    __classPrivateFieldGet(this, _M3eFormFieldElement_hintMutationController, "f").observe(this._hint);
-    __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this);
-    __classPrivateFieldGet(this, _M3eFormFieldElement_errorMutationController, "f").observe(this._error);
-    __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this);
+    __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_initialize).call(this);
   }
   /** @inheritdoc */
   update(changedProperties) {
@@ -13996,6 +13298,14 @@ _M3eFormFieldElement_instances = new WeakSet();
 _M3eFormFieldElement_shouldFloatLabel_get = function _M3eFormFieldElement_shouldFloatLabel_get() {
   return __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.shouldLabelFloat !== undefined ? __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").shouldLabelFloat === true : typeof __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.value == "string" && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").value.length > 0;
 };
+_M3eFormFieldElement_initialize = function _M3eFormFieldElement_initialize() {
+  __classPrivateFieldGet(this, _M3eFormFieldElement_focusController, "f").observe(this._base);
+  __classPrivateFieldGet(this, _M3eFormFieldElement_pressedController, "f").observe(this._base);
+  __classPrivateFieldGet(this, _M3eFormFieldElement_hintMutationController, "f").observe(this._hint);
+  __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this);
+  __classPrivateFieldGet(this, _M3eFormFieldElement_errorMutationController, "f").observe(this._error);
+  __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this);
+};
 _M3eFormFieldElement_stopPropagation = function _M3eFormFieldElement_stopPropagation(e) {
   e.stopImmediatePropagation();
   e.stopPropagation();
@@ -14129,27 +13439,27 @@ 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$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);
-__decorate([r$1()], M3eFormFieldElement.prototype, "_validationMessage", void 0);
-__decorate([n$1({
+__decorate([query(".base")], M3eFormFieldElement.prototype, "_base", void 0);
+__decorate([query(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
+__decorate([query(".error")], M3eFormFieldElement.prototype, "_error", void 0);
+__decorate([query(".hint")], M3eFormFieldElement.prototype, "_hint", void 0);
+__decorate([state()], M3eFormFieldElement.prototype, "_pseudoLabel", void 0);
+__decorate([state()], M3eFormFieldElement.prototype, "_required", void 0);
+__decorate([state()], M3eFormFieldElement.prototype, "_invalid", void 0);
+__decorate([state()], M3eFormFieldElement.prototype, "_validationMessage", void 0);
+__decorate([property({
   reflect: true
 })], M3eFormFieldElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-required-marker",
   type: Boolean,
   reflect: true
 })], M3eFormFieldElement.prototype, "hideRequiredMarker", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-subscript",
   reflect: true
 })], M3eFormFieldElement.prototype, "hideSubscript", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "float-label",
   reflect: true
 })], M3eFormFieldElement.prototype, "floatLabel", void 0);
@@ -14327,17 +13637,17 @@ let M3eHeadingElement = class M3eHeadingElement extends LitElement {
 };
 /** The styles of the element. */
 M3eHeadingElement.styles = css`:host { display: block; } :host([variant="display"][size="large"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.display.large.fontSize}; font-weight: ${DesignToken$1.typescale.standard.display.large.fontWeight}; line-height: ${DesignToken$1.typescale.standard.display.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.display.large.tracking}; } :host([variant="display"][size="medium"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.display.medium.fontSize}; font-weight: ${DesignToken$1.typescale.standard.display.medium.fontWeight}; line-height: ${DesignToken$1.typescale.standard.display.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.display.medium.tracking}; } :host([variant="display"][size="small"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.display.small.fontSize}; font-weight: ${DesignToken$1.typescale.standard.display.small.fontWeight}; line-height: ${DesignToken$1.typescale.standard.display.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.display.small.tracking}; } :host([variant="headline"][size="large"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.headline.large.fontSize}; font-weight: ${DesignToken$1.typescale.standard.headline.large.fontWeight}; line-height: ${DesignToken$1.typescale.standard.headline.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.headline.large.tracking}; } :host([variant="headline"][size="medium"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.headline.medium.fontSize}; font-weight: ${DesignToken$1.typescale.standard.headline.medium.fontWeight}; line-height: ${DesignToken$1.typescale.standard.headline.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.headline.medium.tracking}; } :host([variant="headline"][size="small"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.headline.small.fontSize}; font-weight: ${DesignToken$1.typescale.standard.headline.small.fontWeight}; line-height: ${DesignToken$1.typescale.standard.headline.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.headline.small.tracking}; } :host([variant="title"][size="large"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.title.large.fontSize}; font-weight: ${DesignToken$1.typescale.standard.title.large.fontWeight}; line-height: ${DesignToken$1.typescale.standard.title.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.title.large.tracking}; } :host([variant="title"][size="medium"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.title.medium.fontSize}; font-weight: ${DesignToken$1.typescale.standard.title.medium.fontWeight}; line-height: ${DesignToken$1.typescale.standard.title.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.title.medium.tracking}; } :host([variant="title"][size="small"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.title.small.fontSize}; font-weight: ${DesignToken$1.typescale.standard.title.small.fontWeight}; line-height: ${DesignToken$1.typescale.standard.title.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.title.small.tracking}; } :host([variant="label"][size="large"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.label.large.fontSize}; font-weight: ${DesignToken$1.typescale.standard.label.large.fontWeight}; line-height: ${DesignToken$1.typescale.standard.label.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.label.large.tracking}; } :host([variant="label"][size="medium"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.label.medium.fontSize}; font-weight: ${DesignToken$1.typescale.standard.label.medium.fontWeight}; line-height: ${DesignToken$1.typescale.standard.label.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.label.medium.tracking}; } :host([variant="label"][size="small"]:not([emphasized])) { font-size: ${DesignToken$1.typescale.standard.label.small.fontSize}; font-weight: ${DesignToken$1.typescale.standard.label.small.fontWeight}; line-height: ${DesignToken$1.typescale.standard.label.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.label.small.tracking}; } :host([variant="display"][size="large"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.display.large.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.display.large.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.display.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.display.large.tracking}; } :host([variant="display"][size="medium"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.display.medium.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.display.medium.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.display.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.display.medium.tracking}; } :host([variant="display"][size="small"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.display.small.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.display.small.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.display.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.display.small.tracking}; } :host([variant="headline"][size="large"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.headline.large.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.headline.large.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.headline.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.headline.large.tracking}; } :host([variant="headline"][size="medium"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.headline.medium.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.headline.medium.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.headline.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.headline.medium.tracking}; } :host([variant="headline"][size="small"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.headline.small.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.headline.small.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.headline.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.headline.small.tracking}; } :host([variant="title"][size="large"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.title.large.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.title.large.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.title.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.title.large.tracking}; } :host([variant="title"][size="medium"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.title.medium.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.title.medium.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.title.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.title.medium.tracking}; } :host([variant="title"][size="small"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.title.small.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.title.small.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.title.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.title.small.tracking}; } :host([variant="label"][size="large"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.label.large.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.label.large.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.label.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.label.large.tracking}; } :host([variant="label"][size="medium"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.label.medium.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.label.medium.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.label.medium.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.label.medium.tracking}; } :host([variant="label"][size="small"][emphasized]) { font-size: ${DesignToken$1.typescale.emphasized.label.small.fontSize}; font-weight: ${DesignToken$1.typescale.emphasized.label.small.fontWeight}; line-height: ${DesignToken$1.typescale.emphasized.label.small.lineHeight}; letter-spacing: ${DesignToken$1.typescale.emphasized.label.small.tracking}; }`;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eHeadingElement.prototype, "emphasized", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eHeadingElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eHeadingElement.prototype, "size", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eHeadingElement.prototype, "level", void 0);
 M3eHeadingElement = __decorate([customElement$1("m3e-heading")], M3eHeadingElement);
@@ -14437,20 +13747,20 @@ 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$3(".icon")], M3eIconElement.prototype, "_icon", void 0);
-__decorate([n$1()], M3eIconElement.prototype, "name", void 0);
-__decorate([n$1({
+__decorate([query(".icon")], M3eIconElement.prototype, "_icon", void 0);
+__decorate([property()], M3eIconElement.prototype, "name", void 0);
+__decorate([property({
   reflect: true
 })], M3eIconElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eIconElement.prototype, "filled", void 0);
-__decorate([n$1()], M3eIconElement.prototype, "grade", void 0);
-__decorate([n$1({
+__decorate([property()], M3eIconElement.prototype, "grade", void 0);
+__decorate([property({
   type: Number
 })], M3eIconElement.prototype, "weight", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "optical-size",
   type: Number
 })], M3eIconElement.prototype, "opticalSize", void 0);
@@ -15465,35 +14775,35 @@ _M3eIconButtonElement_handleSelectedIconSlotChange = function _M3eIconButtonElem
 };
 /** The styles of the element. */
 M3eIconButtonElement.styles = [IconButtonSizeStyle, IconButtonVariantStyle, IconButtonStyle];
-__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({
+__decorate([query(".base")], M3eIconButtonElement.prototype, "_base", void 0);
+__decorate([query(".elevation")], M3eIconButtonElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eIconButtonElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eIconButtonElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eIconButtonElement.prototype, "_ripple", void 0);
+__decorate([property({
   reflect: true
 })], M3eIconButtonElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eIconButtonElement.prototype, "shape", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eIconButtonElement.prototype, "size", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eIconButtonElement.prototype, "width", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eIconButtonElement.prototype, "toggle", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eIconButtonElement.prototype, "selected", void 0);
 __decorate([debounce$1(40)], M3eIconButtonElement.prototype, "_handleResize", null);
 M3eIconButtonElement = __decorate([customElement$1("m3e-icon-button")], M3eIconButtonElement);
 
-var _M3eListItemElement_instances, _M3eListItemElement_resizeController, _M3eListItemElement_leadingContentType, _M3eListItemElement_trailingContentType, _M3eListItemElement_updateMultiline, _M3eListItemElement_getSlotContentType;
+var _M3eListItemElement_instances, _M3eListItemElement_resizeController, _M3eListItemElement_leadingContentType, _M3eListItemElement_trailingContentType, _M3eListItemElement_initialize, _M3eListItemElement_updateMultiline, _M3eListItemElement_getSlotContentType;
 /**
  * An item in a list.
  *
@@ -15577,7 +14887,7 @@ var _M3eListItemElement_instances, _M3eListItemElement_resizeController, _M3eLis
  * @cssprop --m3e-list-item-two-line-height - Minimum height of a two line list item.
  * @cssprop --m3e-list-item-three-line-height - Minimum height of a three line list item.
  */
-let M3eListItemElement = class M3eListItemElement extends AttachInternals$1(Role$1(LitElement, "listitem")) {
+let M3eListItemElement = class M3eListItemElement extends ReconnectedCallback$1(AttachInternals$1(Role$1(LitElement, "listitem"))) {
   constructor() {
     super(...arguments);
     _M3eListItemElement_instances.add(this);
@@ -15600,12 +14910,14 @@ let M3eListItemElement = class M3eListItemElement extends AttachInternals$1(Role
     return __classPrivateFieldGet(this, _M3eListItemElement_trailingContentType, "f");
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eListItemElement_instances, "m", _M3eListItemElement_initialize).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    const content = this.shadowRoot?.querySelector(".content");
-    if (content) {
-      __classPrivateFieldGet(this, _M3eListItemElement_resizeController, "f").observe(content);
-    }
+    __classPrivateFieldGet(this, _M3eListItemElement_instances, "m", _M3eListItemElement_initialize).call(this);
   }
   /** @inheritdoc */
   render() {
@@ -15638,6 +14950,12 @@ _M3eListItemElement_resizeController = new WeakMap();
 _M3eListItemElement_leadingContentType = new WeakMap();
 _M3eListItemElement_trailingContentType = new WeakMap();
 _M3eListItemElement_instances = new WeakSet();
+_M3eListItemElement_initialize = function _M3eListItemElement_initialize() {
+  const content = this.shadowRoot?.querySelector(".content");
+  if (content) {
+    __classPrivateFieldGet(this, _M3eListItemElement_resizeController, "f").observe(content);
+  }
+};
 _M3eListItemElement_updateMultiline = function _M3eListItemElement_updateMultiline() {
   const content = this.shadowRoot?.querySelector(".content") ?? null;
   const lines = content === null ? 0 : computeLineCount$1(content);
@@ -15800,7 +15118,7 @@ _M3eListElement_handleSlotChange = function _M3eListElement_handleSlotChange(e)
 };
 /** The styles of the element. */
 M3eListElement.styles = css`:host { display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding-block: var(--m3e-list-block-padding, 0px); --m3e-divider-inset-start-size: var(--m3e-list-divider-inset-start-size, 1rem); --m3e-divider-inset-end-size: var(--m3e-list-divider-inset-end-size, 1.5rem); } :host([variant="standard"]) { --_list-item-leading-video-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-video-outset: var(--m3e-list-item-trailing-space, 1rem); --_expandable-list-item-expanded-toggle-icon-container-color: transparent; } :host([variant="segmented"]) { row-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); } :host([variant="segmented"]) { --m3e-list-item-container-color: var(--m3e-segmented-list-item-container-color, ${DesignToken$1.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${DesignToken$1.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${DesignToken$1.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${DesignToken$1.shape.corner.small}); --m3e-list-item-between-space: var(--m3e-segmented-list-item-spacing, 0.75rem); --_expandable-list-item-items-segment-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); --_expandable-list-item-expanded-top-shape: var( --m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large} ); } :host([variant="segmented"]) ::slotted(:state(-first)), :host([variant="segmented"]) ::slotted(:state(-has-previous-open):not([open])) { --_list-item-top-container-shape: var(--m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large}); } :host([variant="segmented"]) ::slotted(:state(-has-next-open):not([open])), :host([variant="segmented"]) ::slotted(:state(-last)) { --_list-item-bottom-container-shape: var(--m3e-segmented-list-container-shape, ${DesignToken$1.shape.corner.large}); } :host([variant="segmented"]) ::slotted(m3e-divider) { display: none; } :host(:state(-has-leading-video)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-video-width, 6.25rem); } :host([variant="standard"]:state(-has-leading-video)) { --_list-item-leading-reserved-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-reserved-outset: var(--m3e-list-item-trailing-space, 1rem); } :host(:state(-has-leading-image)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(:state(-has-leading-avatar)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(:state(-has-leading-icon)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-icon-size, 1.5rem); }`;
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eListElement.prototype, "variant", void 0);
 M3eListElement = __decorate([customElement$1("m3e-list")], M3eListElement);
@@ -16021,15 +15339,15 @@ M3eExpandableListItemElement.styles = css`:host { display: block; } .header { wi
         ${DesignToken$1.motion.easing.standard}`)}; --_list-item-button-trailing-align-self: stretch; } .toggle-container { display: flex; align-items: center; justify-content: center; align-self: stretch; width: var(--m3e-expandable-list-item-toggle-icon-container-width, 2rem); border-radius: var(--m3e-expandable-list-item-toggle-icon-container-shape, ${DesignToken$1.shape.corner.full}); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: var(--m3e-expandable-list-item-toggle-icon-size, 1.5rem); transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } :host([open]) .toggle-container { background-color: var( --_expandable-list-item-expanded-toggle-icon-container-color, var(--m3e-expandable-list-item-expanded-toggle-icon-container-color, ${DesignToken$1.color.surfaceContainer}) ); } :host([open]) .toggle { transform: rotate(180deg); } :host([open]) .header { --_list-item-top-container-shape: var(--_expandable-list-item-expanded-top-shape, initial); --_list-item-bottom-container-shape: initial; margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } :host([open]) .header.opening { margin-bottom: calc( var(--_expandable-list-item-items-segment-gap, 0px) * var(--m3e-expandable-list-item-bounce-factor, 4) ); } :host([open]) .header, :host([open]) .items { --_list-item-container-color: var( --m3e-expandable-list-item-expanded-container-color, var(--m3e-list-item-container-color, transparent) ); } .base, ::slotted([slot="items"]) { display: flex; flex-direction: column; box-sizing: border-box; } ::slotted([slot="items"]) { flex: none; --_list-item-top-container-shape: initial; --_list-item-bottom-container-shape: initial; row-gap: var(--_expandable-list-item-items-segment-gap, 0px); } .items { --m3e-collapsible-animation-duration: var( --m3e-expandable-list-item-expand-duration, ${DesignToken$1.motion.duration.medium1} ); } @media (forced-colors: active) { .header { transition: none; } :host([open]) .header.opening { margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } } @media (prefers-reduced-motion) { .header, .toggle-container, .toggle { transition: none; } }`;
 /** @private */
 M3eExpandableListItemElement.__nextId = 0;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eExpandableListItemElement.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eExpandableListItemElement.prototype, "open", void 0);
-__decorate([e$3(".header")], M3eExpandableListItemElement.prototype, "button", void 0);
+__decorate([query(".header")], M3eExpandableListItemElement.prototype, "button", void 0);
 M3eExpandableListItemElement = M3eExpandableListItemElement_1 = __decorate([customElement$1("m3e-expandable-list-item")], M3eExpandableListItemElement);
 
 var _M3eActionListElement_keyDownHandler, _a$8;
@@ -16077,6 +15395,7 @@ let M3eActionListElement = class M3eActionListElement extends M3eListElement {
           const ancestor = expandable.closest("m3e-expandable-list-item,m3e-action-list");
           if (ancestor instanceof M3eExpandableListItemElement) {
             expandable = ancestor;
+            continue;
           }
           break;
         }
@@ -16222,7 +15541,7 @@ let M3eListActionElement = class M3eListActionElement extends LinkButton$1(M3eLi
   }
   /** @inheritdoc */
   render() {
-    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>`;
+    return html`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${ifDefined(this.href || undefined)}" target="${ifDefined(this.target || undefined)}" download="${ifDefined(this.download || undefined)}" rel="${ifDefined(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();
@@ -16233,8 +15552,8 @@ _M3eListActionElement_handleClick = function _M3eListActionElement_handleClick(e
 };
 /** The styles of the element. */
 M3eListActionElement.styles = css`:host { display: block; } .button { width: 100%; }`;
-__decorate([e$3(".button")], M3eListActionElement.prototype, "button", void 0);
-__decorate([n$1({
+__decorate([query(".button")], M3eListActionElement.prototype, "button", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eListActionElement.prototype, "disabled", void 0);
@@ -16269,9 +15588,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$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);
+__decorate([query(".focus-ring")], M3eListItemButtonElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eListItemButtonElement.prototype, "_stateLayer", void 0);
+__decorate([query(".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;
@@ -16457,10 +15776,10 @@ _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$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);
+__decorate([query(".focus-ring")], M3eListOptionElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eListOptionElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eListOptionElement.prototype, "_ripple", void 0);
+__decorate([property()], M3eListOptionElement.prototype, "value", null);
 M3eListOptionElement = __decorate([customElement$1("m3e-list-option")], M3eListOptionElement);
 
 var _M3eSelectionListElement_instances, _M3eSelectionListElement_keyDownHandler, _M3eSelectionListElement_changeHandler, _M3eSelectionListElement_handleChange, _a$7;
@@ -16601,10 +15920,10 @@ _M3eSelectionListElement_handleChange = function _M3eSelectionListElement_handle
     }));
   }
 };
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eSelectionListElement.prototype, "multi", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eSelectionListElement.prototype, "hideSelectionIndicator", void 0);
@@ -16672,7 +15991,7 @@ const ShapePolygon$1 = _ShapePolygon$1;
  * @cssprop --m3e-loading-indicator-container-shape - Container shape.
  * @cssprop --m3e-loading-indicator-container-size - Container size.
  */
-let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Role$1(LitElement, "progressbar") {
+let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends ReconnectedCallback$1(Role$1(LitElement, "progressbar")) {
   constructor() {
     super(...arguments);
     /**
@@ -16686,7 +16005,6 @@ 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() {
@@ -16694,6 +16012,11 @@ let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Role$1
     this._activeIndicator?.classList.toggle("animate", false);
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    this._activeIndicator?.classList.toggle("animate", true);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     this._activeIndicator?.classList.toggle("animate", true);
@@ -16705,8 +16028,8 @@ 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$3(".active-indicator")], M3eLoadingIndicatorElement.prototype, "_activeIndicator", void 0);
-__decorate([n$1({
+__decorate([query(".active-indicator")], M3eLoadingIndicatorElement.prototype, "_activeIndicator", void 0);
+__decorate([property({
   reflect: true
 })], M3eLoadingIndicatorElement.prototype, "variant", void 0);
 M3eLoadingIndicatorElement = __decorate([customElement$1("m3e-loading-indicator")], M3eLoadingIndicatorElement);
@@ -16739,9 +16062,9 @@ class MenuItemElementBase extends KeyboardClick$1(Focusable$1(AttachInternals$1(
 }
 /** The styles of the element. */
 MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([checked]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([checked]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
-__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);
+__decorate([query(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
 
 /**
  * An element, nested within a clickable element, used to open a menu.
@@ -17052,7 +16375,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
     }
   });
 };
-__decorate([r$1()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
+__decorate([state()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
 M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([customElement$1("m3e-menu-item")], M3eMenuItemElement);
 
 var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
@@ -17134,7 +16457,7 @@ var M3eMenuElement_1;
  * @cssprop --m3e-menu-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.
  * @cssprop --m3e-menu-gap - Gap between content in the menu.
  */
-let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends AttachInternals$1(Role$1(LitElement, "menu")) {
+let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressInitialAnimation$1(AttachInternals$1(Role$1(LitElement, "menu"))) {
   constructor() {
     super(...arguments);
     _M3eMenuElement_instances.add(this);
@@ -17196,7 +16519,6 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends AttachInter
   connectedCallback() {
     super.connectedCallback();
     this.tabIndex = -1;
-    addCustomState$1(this, "-no-animate");
     this.setAttribute("popover", "manual");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
     this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuElement_mouseEnterHandler, "f"));
@@ -17313,11 +16635,6 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends AttachInter
   render() {
     return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleSlotChange)}"></slot></div>`;
   }
-  /** @inheritdoc */
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => deleteCustomState$1(this, "-no-animate"));
-  }
   /** @internal */
   _activate() {
     if (this !== M3eMenuElement_1.__activeMenu) {
@@ -17422,16 +16739,16 @@ M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin:
         overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
         display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
         border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } :host(:state(-shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:state(-shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken$1.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${DesignToken$1.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${DesignToken$1.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${DesignToken$1.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
-__decorate([n$1({
+__decorate([property({
   attribute: "position-x"
 })], M3eMenuElement.prototype, "positionX", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "position-y"
 })], M3eMenuElement.prototype, "positionY", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eMenuElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eMenuElement.prototype, "submenu", void 0);
@@ -17841,8 +17158,8 @@ let M3eNavBarElement = class M3eNavBarElement extends AttachInternals$1(Role$1(L
     __classPrivateFieldGet(this, _M3eNavBarElement_breakpointUnobserve, "f")?.call(this);
   }
   /** @inheritdoc */
-  update(changedProperties) {
-    super.update(changedProperties);
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("mode")) {
       __classPrivateFieldGet(this, _M3eNavBarElement_breakpointUnobserve, "f")?.call(this);
       if (this.mode === "auto") {
@@ -17889,8 +17206,8 @@ _M3eNavBarElement_handleChange = function _M3eNavBarElement_handleChange(e) {
 };
 /** The styles of the element. */
 M3eNavBarElement.styles = css`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${DesignToken$1.color.surfaceContainer}); --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`;
-__decorate([r$1()], M3eNavBarElement.prototype, "_mode", void 0);
-__decorate([n$1({
+__decorate([state()], M3eNavBarElement.prototype, "_mode", void 0);
+__decorate([property({
   reflect: true
 })], M3eNavBarElement.prototype, "mode", void 0);
 M3eNavBarElement = __decorate([customElement$1("m3e-nav-bar")], M3eNavBarElement);
@@ -18044,10 +17361,10 @@ _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$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({
+__decorate([query(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
+__decorate([property({
   reflect: true
 })], M3eNavItemElement.prototype, "orientation", void 0);
 M3eNavItemElement = __decorate([customElement$1("m3e-nav-item")], M3eNavItemElement);
@@ -18298,7 +17615,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(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="${ifDefined(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();
@@ -18370,12 +17687,12 @@ _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$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({
+__decorate([query(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
+__decorate([query(".focus-ring")], M3eNavMenuItemElement.prototype, "focusRing", void 0);
+__decorate([query(".ripple")], M3eNavMenuItemElement.prototype, "ripple", void 0);
+__decorate([query(".base")], M3eNavMenuItemElement.prototype, "_base", void 0);
+__decorate([state()], M3eNavMenuItemElement.prototype, "_hasChildItems", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eNavMenuItemElement.prototype, "open", void 0);
@@ -19117,18 +18434,21 @@ let M3eOptionElement = class M3eOptionElement extends Selected$1(Disabled$1(Atta
 _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eOptionElement_textContent, getTextContent$1(e.target), "f");
   setCustomState$1(this, "-empty", this.isEmpty);
+  if (this.selected) {
+    this.closest("m3e-select")?.requestUpdate();
+  }
 };
 /** The styles of the element. */
 M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:state(-empty))[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([selected]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${unsafeCSS(`margin-inline-start ${DesignToken$1.motion.spring.fastEffects}, width ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:state(-empty)) .icon, :host(:state(-hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`;
-__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({
+__decorate([query(".focus-ring")], M3eOptionElement.prototype, "focusRing", void 0);
+__decorate([query(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
+__decorate([query(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);
+__decorate([property()], M3eOptionElement.prototype, "value", null);
+__decorate([property()], M3eOptionElement.prototype, "term", void 0);
+__decorate([property({
   attribute: "highlight-mode"
 })], M3eOptionElement.prototype, "highlightMode", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "disable-highlight",
   type: Boolean
 })], M3eOptionElement.prototype, "disableHighlight", void 0);
@@ -19201,7 +18521,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_scrollController, _M3eOptionPanelElement_handleNoDataSlotChange, _M3eOptionPanelElement_handleLoadingSlotChange, _M3eOptionPanelElement_handleMutation;
+var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_handleNoDataSlotChange, _M3eOptionPanelElement_handleLoadingSlotChange, _M3eOptionPanelElement_handleMutation;
 /**
  * Presents a list of options on a temporary surface.
  *
@@ -19234,11 +18554,6 @@ let M3eOptionPanelElement = class M3eOptionPanelElement extends Role$1(M3eFloati
   constructor() {
     super();
     _M3eOptionPanelElement_instances.add(this);
-    /** @private */
-    _M3eOptionPanelElement_scrollController.set(this, new ScrollController$1(this, {
-      target: null,
-      callback: () => this.hide(false)
-    }));
     /**
      * The state for which to present content.
      * @default "content"
@@ -19253,18 +18568,6 @@ let M3eOptionPanelElement = class M3eOptionPanelElement extends Role$1(M3eFloati
     });
   }
   /** @inheritdoc */
-  async show(trigger, anchor) {
-    await super.show(trigger, anchor);
-    __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").observe(trigger);
-  }
-  /** @inheritdoc */
-  hide(restoreFocus) {
-    if (this.trigger) {
-      __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").unobserve(this.trigger);
-    }
-    super.hide(restoreFocus);
-  }
-  /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
     __classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleMutation).call(this);
@@ -19274,7 +18577,6 @@ let M3eOptionPanelElement = class M3eOptionPanelElement extends Role$1(M3eFloati
     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_scrollController = new WeakMap();
 _M3eOptionPanelElement_instances = new WeakSet();
 _M3eOptionPanelElement_handleNoDataSlotChange = function _M3eOptionPanelElement_handleNoDataSlotChange(e) {
   setCustomState$1(this, "-with-no-data", hasAssignedNodes$1(e.target));
@@ -19316,7 +18618,7 @@ _M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMu
 })();
 /** The styles of the element. */
 M3eOptionPanelElement.styles = [M3eFloatingPanelElement.styles, css`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`];
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eOptionPanelElement.prototype, "state", void 0);
 M3eOptionPanelElement = __decorate([customElement$1("m3e-option-panel")], M3eOptionPanelElement);
@@ -19501,8 +18803,8 @@ let M3ePaginatorElement = M3ePaginatorElement_1 = class M3ePaginatorElement exte
     }
   }
   /** @inheritdoc */
-  update(changedProperties) {
-    super.update(changedProperties);
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("pageIndex")) {
       const pageSizes = __classPrivateFieldGet(this, _M3ePaginatorElement_instances, "m", _M3ePaginatorElement_parsePageSizes).call(this);
       if (!pageSizes.includes(this.pageSize)) {
@@ -19558,83 +18860,55 @@ _M3ePaginatorElement_emitPageEvent = function _M3ePaginatorElement_emitPageEvent
 M3ePaginatorElement.styles = css`:host { display: block; } .outer { display: flex; font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .inner { display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; width: 100%; } .form-field { --md-sys-density-scale: -2; --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); --m3e-form-field-font-weight: var( --m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight} ); --m3e-form-field-line-height: var( --m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .items-per-page-label { display: flex; align-items: center; margin-inline-end: 0.5rem; } .form-field { min-width: auto; width: 6rem; margin-inline: 0.25rem; } .range-label { margin-inline: 1.5rem 2rem; } :host([hide-page-size]) .range-label { margin-inline-start: unset; } .range-actions { display: flex; align-items: center; } ::slotted([slot="first-page-icon"]), ::slotted([slot="previous-page-icon"]), ::slotted([slot="next-page-icon"]), ::slotted([slot="last-page-icon"]), svg { width: 1em; font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important; } :host(:dir(rtl)) svg { transform: rotate(180deg); }`;
 /* @private */
 M3ePaginatorElement.__nextId = 0;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3ePaginatorElement.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "page-index",
   type: Number
 })], M3ePaginatorElement.prototype, "pageIndex", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3ePaginatorElement.prototype, "length", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "page-size",
   converter: value => value === "all" ? "all" : Number(value)
 })], M3ePaginatorElement.prototype, "pageSize", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "page-sizes"
 })], M3ePaginatorElement.prototype, "pageSizes", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-page-size",
   type: Boolean,
   reflect: true
 })], M3ePaginatorElement.prototype, "hidePageSize", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "show-first-last-buttons",
   type: Boolean
 })], M3ePaginatorElement.prototype, "showFirstLastButtons", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "items-per-page-label"
 })], M3ePaginatorElement.prototype, "itemsPerPageLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "previous-page-label"
 })], M3ePaginatorElement.prototype, "previousPageLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "next-page-label"
 })], M3ePaginatorElement.prototype, "nextPageLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "first-page-label"
 })], M3ePaginatorElement.prototype, "firstPageLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "last-page-label"
 })], M3ePaginatorElement.prototype, "lastPageLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "page-size-variant"
 })], M3ePaginatorElement.prototype, "pageSizeVariant", void 0);
 M3ePaginatorElement = M3ePaginatorElement_1 = __decorate([customElement$1("m3e-paginator")], M3ePaginatorElement);
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-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.");
-  }
-  render(t) {
-    return " " + Object.keys(t).filter(s => t[s]).join(" ") + " ";
-  }
-  update(s, [i]) {
-    if (void 0 === this.st) {
-      this.st = new Set(), void 0 !== s.strings && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter(t => "" !== t)));
-      for (const t in i) i[t] && !this.nt?.has(t) && this.st.add(t);
-      return this.render(i);
-    }
-    const r = s.element.classList;
-    for (const t of this.st) t in i || (r.remove(t), this.st.delete(t));
-    for (const t in i) {
-      const s = !!i[t];
-      s === this.st.has(t) || this.nt?.has(t) || (s ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
-    }
-    return T;
-  }
-});
-
 /** A base implementation for an element used to convey progress. This class must be inherited. */
-class ProgressElementIndicatorBase extends AttachInternals$1(Role$1(LitElement, "progressbar"), true) {
+class ProgressElementIndicatorBase extends ReconnectedCallback$1(AttachInternals$1(Role$1(LitElement, "progressbar"), true)) {
   constructor() {
     super(...arguments);
     /**
@@ -19671,18 +18945,18 @@ class ProgressElementIndicatorBase extends AttachInternals$1(Role$1(LitElement,
 }
 /** The styles of the element. */
 ProgressElementIndicatorBase.styles = css`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`;
-__decorate([n$1({
+__decorate([property({
   type: Number,
   reflect: true
 })], ProgressElementIndicatorBase.prototype, "value", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], ProgressElementIndicatorBase.prototype, "max", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], ProgressElementIndicatorBase.prototype, "variant", void 0);
 
-var _M3eCircularProgressIndicatorElement_instances, _M3eCircularProgressIndicatorElement_maskId, _M3eCircularProgressIndicatorElement_diameter, _M3eCircularProgressIndicatorElement_strokeWidth, _M3eCircularProgressIndicatorElement_amplitude, _M3eCircularProgressIndicatorElement_wavelength, _M3eCircularProgressIndicatorElement_spinnerActiveTrack, _M3eCircularProgressIndicatorElement_spinnerTrack, _M3eCircularProgressIndicatorElement_resizeController, _M3eCircularProgressIndicatorElement_indeterminateWavyAnimationLoop, _M3eCircularProgressIndicatorElement_renderFlatIndicator, _M3eCircularProgressIndicatorElement_renderWavyIndicator, _M3eCircularProgressIndicatorElement_renderResizeObservedElements, _M3eCircularProgressIndicatorElement_renderContent, _M3eCircularProgressIndicatorElement_updateDiameterAndStroke, _M3eCircularProgressIndicatorElement_updateAmplitudeAndWavelength, _M3eCircularProgressIndicatorElement_updateWavyIndeterminateSpinner, _M3eCircularProgressIndicatorElement_computeWavyIndeterminateSweep, _M3eCircularProgressIndicatorElement_sizeToDegrees, _M3eCircularProgressIndicatorElement_degreesToRadians, _M3eCircularProgressIndicatorElement_polarToCartesian, _M3eCircularProgressIndicatorElement_computeCircle, _M3eCircularProgressIndicatorElement_drawArc, _M3eCircularProgressIndicatorElement_drawWavyArc;
+var _M3eCircularProgressIndicatorElement_instances, _M3eCircularProgressIndicatorElement_maskId, _M3eCircularProgressIndicatorElement_diameter, _M3eCircularProgressIndicatorElement_strokeWidth, _M3eCircularProgressIndicatorElement_amplitude, _M3eCircularProgressIndicatorElement_wavelength, _M3eCircularProgressIndicatorElement_spinnerActiveTrack, _M3eCircularProgressIndicatorElement_spinnerTrack, _M3eCircularProgressIndicatorElement_resizeController, _M3eCircularProgressIndicatorElement_indeterminateWavyAnimationLoop, _M3eCircularProgressIndicatorElement_initialize, _M3eCircularProgressIndicatorElement_renderFlatIndicator, _M3eCircularProgressIndicatorElement_renderWavyIndicator, _M3eCircularProgressIndicatorElement_renderResizeObservedElements, _M3eCircularProgressIndicatorElement_renderContent, _M3eCircularProgressIndicatorElement_updateDiameterAndStroke, _M3eCircularProgressIndicatorElement_updateAmplitudeAndWavelength, _M3eCircularProgressIndicatorElement_updateWavyIndeterminateSpinner, _M3eCircularProgressIndicatorElement_computeWavyIndeterminateSweep, _M3eCircularProgressIndicatorElement_sizeToDegrees, _M3eCircularProgressIndicatorElement_degreesToRadians, _M3eCircularProgressIndicatorElement_polarToCartesian, _M3eCircularProgressIndicatorElement_computeCircle, _M3eCircularProgressIndicatorElement_drawArc, _M3eCircularProgressIndicatorElement_drawWavyArc;
 var M3eCircularProgressIndicatorElement_1;
 const WAVY_INDETERMINATE_DURATION = 1.575;
 /**
@@ -19767,18 +19041,14 @@ let M3eCircularProgressIndicatorElement = M3eCircularProgressIndicatorElement_1
     }
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_initialize).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    const diameterAndStroke = this.shadowRoot?.querySelector(".diameter-and-stroke");
-    if (diameterAndStroke) {
-      __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_updateDiameterAndStroke).call(this);
-      __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_resizeController, "f").observe(diameterAndStroke);
-    }
-    const amplitudeAndWavelength = this.shadowRoot?.querySelector(".amplitude-and-wavelength");
-    if (amplitudeAndWavelength) {
-      __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_updateDiameterAndStroke).call(this);
-      __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_resizeController, "f").observe(amplitudeAndWavelength);
-    }
+    __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_initialize).call(this);
   }
   /** @inheritdoc */
   updated(_changedProperties) {
@@ -19808,6 +19078,18 @@ _M3eCircularProgressIndicatorElement_spinnerTrack = new WeakMap();
 _M3eCircularProgressIndicatorElement_resizeController = new WeakMap();
 _M3eCircularProgressIndicatorElement_indeterminateWavyAnimationLoop = new WeakMap();
 _M3eCircularProgressIndicatorElement_instances = new WeakSet();
+_M3eCircularProgressIndicatorElement_initialize = function _M3eCircularProgressIndicatorElement_initialize() {
+  const diameterAndStroke = this.shadowRoot?.querySelector(".diameter-and-stroke");
+  if (diameterAndStroke) {
+    __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_updateDiameterAndStroke).call(this);
+    __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_resizeController, "f").observe(diameterAndStroke);
+  }
+  const amplitudeAndWavelength = this.shadowRoot?.querySelector(".amplitude-and-wavelength");
+  if (amplitudeAndWavelength) {
+    __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_updateDiameterAndStroke).call(this);
+    __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_resizeController, "f").observe(amplitudeAndWavelength);
+  }
+};
 _M3eCircularProgressIndicatorElement_renderFlatIndicator = function _M3eCircularProgressIndicatorElement_renderFlatIndicator() {
   if (this.indeterminate) {
     const left = __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_drawArc).call(this, {
@@ -19887,9 +19169,9 @@ _M3eCircularProgressIndicatorElement_renderWavyIndicator = function _M3eCircular
             />
           </mask>
         </defs>` : nothing}
-        <g class="active-track" mask="${o(amplitude > 0 ? resolveFragmentUrl$1(__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_maskId, "f")) : undefined)}">
+        <g class="active-track" mask="${ifDefined(amplitude > 0 ? resolveFragmentUrl$1(__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_maskId, "f")) : undefined)}">
           <path
-            class="${e({
+            class="${classMap({
     wave: amplitude > 0
   })}"
             d="${active.path}"
@@ -20063,13 +19345,13 @@ _M3eCircularProgressIndicatorElement_drawWavyArc = function _M3eCircularProgress
 M3eCircularProgressIndicatorElement.styles = [ProgressElementIndicatorBase.styles, css`:host { display: inline-flex; vertical-align: middle; aspect-ratio: 1; position: relative; align-items: center; justify-content: center; } .progress { --_arc-duration: 1333ms; --_cycle-duration: calc(4 * var(--_arc-duration)); --_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306); --_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1); } .active-track { transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1); } :host([variant="flat"]) .progress { flex: 1; align-self: stretch; pointer-events: none; } .progress, .spinner, .left, .right, .content, .circle { position: absolute; inset: 0; } .content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .diameter-and-stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .diameter-and-stroke { width: inherit; height: var(--m3e-circular-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { width: var(--m3e-circular-wavy-progress-indicator-amplitude, 0.1rem); height: var(--m3e-circular-wavy-progress-indicator-wavelength, 0.9375rem); } :host([variant="flat"]) { width: var(--m3e-circular-flat-progress-indicator-diameter, 2.5rem); } :host([variant="wavy"]) { width: var(--m3e-circular-wavy-progress-indicator-diameter, 3rem); } :host([variant="flat"][indeterminate]) .progress { animation: linear infinite linear-rotate; animation-duration: var(--_linear-rotate-duration); } :host([variant="flat"][indeterminate]) .spinner { animation: infinite both rotate-arc; animation-duration: var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } :host([variant="wavy"][indeterminate]) .spinner { transform-origin: 50% 50%; animation: wavy-spin ${WAVY_INDETERMINATE_DURATION}s linear infinite; } .left { clip-path: inset(0); inset: 0 50% 0 0; } .right { clip-path: inset(0); inset: 0 0 0 50%; } .circle { animation: expand-arc; animation-iteration-count: infinite; animation-fill-mode: both; animation-duration: var(--_arc-duration), var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } .left .circle { rotate: 135deg; inset: 0 -100% 0 0; } .right .circle { rotate: 100deg; inset: 0 0 0 -100%; animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms; } .track { color: var(--m3e-progress-indicator-track-color, ${DesignToken$1.color.secondaryContainer}); } .active-track { color: var(--m3e-progress-indicator-color, ${DesignToken$1.color.primary}); } .wave { animation: spin-reverse 8s linear infinite; transform-origin: 50% 50%; } @keyframes expand-arc { 0% { transform: rotate(265deg); } 50% { transform: rotate(130deg); } 100% { transform: rotate(265deg); } } @keyframes rotate-arc { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } @keyframes linear-rotate { to { transform: rotate(360deg); } } @keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes wavy-spin { 0% { transform: rotate(0deg); } 10% { transform: rotate(90deg); } 100% { transform: rotate(360deg); } } @media (forced-colors: active) { :host([variant="flat"]) circle { fill: Canvas; } :host([variant="flat"]) .circle { border-color: var(--m3e-progress-indicator-color, ${DesignToken$1.color.primary}) var(--m3e-progress-indicator-color, ${DesignToken$1.color.primary}) Canvas Canvas; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`];
 /** @private */
 M3eCircularProgressIndicatorElement.__nextMaskId = 0;
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eCircularProgressIndicatorElement.prototype, "indeterminate", void 0);
 M3eCircularProgressIndicatorElement = M3eCircularProgressIndicatorElement_1 = __decorate([customElement$1("m3e-circular-progress-indicator")], M3eCircularProgressIndicatorElement);
 
-var _M3eLinearProgressIndicatorElement_instances, _M3eLinearProgressIndicatorElement_maskId, _M3eLinearProgressIndicatorElement_strokeWidth, _M3eLinearProgressIndicatorElement_amplitude, _M3eLinearProgressIndicatorElement_wavelength, _M3eLinearProgressIndicatorElement_resizeController, _M3eLinearProgressIndicatorElement_renderWave, _M3eLinearProgressIndicatorElement_renderResizeObservedElements, _M3eLinearProgressIndicatorElement_updateStroke, _M3eLinearProgressIndicatorElement_updateAmplitudeAndWavelength, _M3eLinearProgressIndicatorElement_drawWavyPath;
+var _M3eLinearProgressIndicatorElement_instances, _M3eLinearProgressIndicatorElement_maskId, _M3eLinearProgressIndicatorElement_strokeWidth, _M3eLinearProgressIndicatorElement_amplitude, _M3eLinearProgressIndicatorElement_wavelength, _M3eLinearProgressIndicatorElement_resizeController, _M3eLinearProgressIndicatorElement_initialize, _M3eLinearProgressIndicatorElement_renderWave, _M3eLinearProgressIndicatorElement_renderResizeObservedElements, _M3eLinearProgressIndicatorElement_updateStroke, _M3eLinearProgressIndicatorElement_updateAmplitudeAndWavelength, _M3eLinearProgressIndicatorElement_drawWavyPath;
 var M3eLinearProgressIndicatorElement_1;
 /**
  * A horizontal bar for indicating progress and activity.
@@ -20142,18 +19424,14 @@ let M3eLinearProgressIndicatorElement = M3eLinearProgressIndicatorElement_1 = cl
     this.bufferValue = 0;
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_initialize).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_updateStroke).call(this);
-    __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_updateAmplitudeAndWavelength).call(this);
-    const stroke = this.shadowRoot?.querySelector(".stroke");
-    if (stroke) {
-      __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_resizeController, "f").observe(stroke);
-    }
-    const amplitudeAndWavelength = this.shadowRoot?.querySelector(".amplitude-and-wavelength");
-    if (amplitudeAndWavelength) {
-      __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_resizeController, "f").observe(amplitudeAndWavelength);
-    }
+    __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_initialize).call(this);
   }
   /** @inheritdoc */
   update(changedProperties) {
@@ -20188,6 +19466,18 @@ _M3eLinearProgressIndicatorElement_amplitude = new WeakMap();
 _M3eLinearProgressIndicatorElement_wavelength = new WeakMap();
 _M3eLinearProgressIndicatorElement_resizeController = new WeakMap();
 _M3eLinearProgressIndicatorElement_instances = new WeakSet();
+_M3eLinearProgressIndicatorElement_initialize = function _M3eLinearProgressIndicatorElement_initialize() {
+  __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_updateStroke).call(this);
+  __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_instances, "m", _M3eLinearProgressIndicatorElement_updateAmplitudeAndWavelength).call(this);
+  const stroke = this.shadowRoot?.querySelector(".stroke");
+  if (stroke) {
+    __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_resizeController, "f").observe(stroke);
+  }
+  const amplitudeAndWavelength = this.shadowRoot?.querySelector(".amplitude-and-wavelength");
+  if (amplitudeAndWavelength) {
+    __classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_resizeController, "f").observe(amplitudeAndWavelength);
+  }
+};
 _M3eLinearProgressIndicatorElement_renderWave = function _M3eLinearProgressIndicatorElement_renderWave(width, height, viewBox, path) {
   const masked = this.mode === "indeterminate" || this.mode === "query";
   if (!masked && this.value / this.max === 1) {
@@ -20255,10 +19545,10 @@ _M3eLinearProgressIndicatorElement_drawWavyPath = function _M3eLinearProgressInd
 M3eLinearProgressIndicatorElement.styles = [ProgressElementIndicatorBase.styles, css`:host { display: block; position: relative; } .progress { width: 100%; height: 100%; position: relative; align-items: center; border-radius: var(--m3e-linear-progress-indicator-shape, ${DesignToken$1.shape.corner.extraSmall}); } .stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .stroke { width: 100%; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { height: var(--m3e-linear-wavy-progress-indicator-amplitude, 0.1875rem); width: var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem); } :host([mode="indeterminate"]) .amplitude-and-wavelength, :host([mode="query"]) .amplitude-and-wavelength { width: var(--m3e-linear-wavy-indeterminate-progress-indicator-wavelength, 1.5rem); } .primary, .secondary, .stop { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } .stop { aspect-ratio: 1; flex: none; } :host([variant="flat"]) { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } :host([variant="wavy"]) { height: calc( var(--m3e-linear-progress-indicator-thickness, 0.25rem) + calc(var(--m3e-linear-wavy-progress-indicator-amplitude, 0.1875rem) * 2) ); } :host([variant="wavy"]) .primary, :host([variant="wavy"]) .secondary { position: relative; height: 100%; overflow: hidden; } :host([variant="wavy"]) .complete { position: absolute; margin: auto; top: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); left: 0; right: 0; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } :host([variant="wavy"]) .secondary { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } .wave { position: absolute; display: block; } .primary .wave, .secondary .wave { margin-inline-start: calc(0px - var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem)); } :host([variant="wavy"][mode="determinate"]) .primary path, :host([variant="wavy"][mode="buffer"]) .primary path { animation: wave-slide 1.5s linear infinite; } @keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(calc(0px - var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem))); } } :host([mode="determinate"]) .progress, :host([mode="buffer"]) .progress { display: flex; overflow: hidden; } :host([mode="determinate"]) .primary, :host([mode="buffer"]) .primary { width: var(--_value, 0px); flex: none; } :host([mode="determinate"]) .gap, :host([mode="buffer"]) .gap { flex-basis: var(--m3e-linear-progress-indicator-thickness, 0.25rem); flex-shrink: 1; } :host([mode="determinate"]) .secondary, :host([mode="buffer"]) .buffer { flex: 1 1 auto; } :host([mode="buffer"]) .buffer { flex-shrink: 5; height: 100%; width: 100%; background-color: var(--m3e-progress-indicator-track-color, ${DesignToken$1.color.secondaryContainer}); mask-image: radial-gradient( circle, black 0, black calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2), transparent calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2) ); mask-size: calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) * 2) 100%; mask-repeat: repeat; animation: buffer 250ms linear infinite; } :host(:dir(rtl)[mode="buffer"]) .buffer { transform: scaleX(-1); } @keyframes buffer { from { mask-position: 0 0; } to { mask-position: calc(-1 * calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) * 2)) 0; } } :host([mode="buffer"]) .secondary { width: var(--_buffer-value, 0px); flex: none; } :host([mode="indeterminate"]) .primary, :host([mode="query"]) .primary { position: absolute; top: 0; height: 100%; border-radius: inherit; animation: indeterminate-primary 2.1s infinite linear; } :host([variant="wavy"][mode="indeterminate"]) .primary, :host([variant="wavy"][mode="query"]) .primary { animation-name: wavy-indeterminate-primary; } :host([mode="indeterminate"]) .secondary, :host([mode="query"]) .secondary { position: absolute; top: 0; height: 100%; border-radius: inherit; animation: indeterminate-secondary 2.1s infinite linear; animation-delay: 1.15s; animation-fill-mode: backwards; } :host([variant="wavy"][mode="indeterminate"]) .secondary, :host([variant="wavy"][mode="query"]) .secondary { animation-name: wavy-indeterminate-secondary; } :host([mode="indeterminate"]) .progress, :host([mode="query"]) .progress { overflow: hidden; position: relative; } :host(:not(:dir(rtl))[mode="query"]) .progress, :host(:dir(rtl)[mode="indeterminate"]) .progress { transform: scaleX(-1); } :host([variant="flat"]) .primary, :host([variant="flat"][mode="indeterminate"]) .secondary, :host([variant="flat"][mode="query"]) .secondary, :host([variant="wavy"]) .complete, .stop { background-color: var(--m3e-progress-indicator-color, ${DesignToken$1.color.primary}); } :host([variant="wavy"]) .progress { color: var(--m3e-progress-indicator-color, ${DesignToken$1.color.primary}); } :host([mode="determinate"]) .secondary, :host([mode="buffer"]) .secondary, :host([variant="flat"][mode="indeterminate"]) .track, :host([variant="flat"][mode="query"]) .track { background-color: var(--m3e-progress-indicator-track-color, ${DesignToken$1.color.secondaryContainer}); } :host([variant="wavy"][mode="indeterminate"]) .track, :host([variant="wavy"][mode="query"]) .track { color: var(--m3e-progress-indicator-track-color, ${DesignToken$1.color.secondaryContainer}); } :host([variant="wavy"][mode="indeterminate"]) .track, :host([variant="wavy"][mode="query"]) .track { y: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); border-radius: inherit; } :host([variant="flat"][mode="indeterminate"]) .track, :host([variant="flat"][mode="query"]) .track { position: absolute; margin: auto; top: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); left: 0; right: 0; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } @keyframes indeterminate-primary { 0% { left: -145.167%; width: 8%; } 20% { left: -113.333%; width: 48%; } 60% { left: 56.333%; width: 78%; } 100% { left: 100%; width: 8%; } } @keyframes indeterminate-secondary { 0% { left: -54.888%; width: 8%; } 20% { left: -20%; width: 48%; } 60% { left: 60%; width: 78%; } 100% { left: 160%; width: 8%; } } @keyframes wavy-indeterminate-primary { 0% { transform: translateX(-145.167%); width: 8%; } 20% { transform: translateX(-113.333%); width: 48%; } 60% { transform: translateX(56.333%); width: 78%; } 100% { transform: translateX(100%); width: 8%; } } @keyframes wavy-indeterminate-secondary { 0% { transform: translateX(-54.888%); width: 8%; } 20% { transform: translateX(-20%); width: 48%; } 60% { transform: translateX(60%); width: 78%; } 100% { transform: translateX(160%); width: 8%; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`];
 /** @private */
 M3eLinearProgressIndicatorElement.__nextMaskId = 0;
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eLinearProgressIndicatorElement.prototype, "mode", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "buffer-value",
   type: Number,
   reflect: true
@@ -20429,10 +19719,10 @@ _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$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);
+__decorate([query(".focus-ring")], M3eRadioElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eRadioElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eRadioElement.prototype, "_ripple", void 0);
+__decorate([property()], M3eRadioElement.prototype, "value", void 0);
 M3eRadioElement = __decorate([customElement$1("m3e-radio")], M3eRadioElement);
 
 var _M3eRadioGroupElement_instances, _M3eRadioGroupElement_directionalitySubscription, _M3eRadioGroupElement_focusOutHandler, _M3eRadioGroupElement_handleSlotChange, _M3eRadioGroupElement_handleKeyDown, _M3eRadioGroupElement_handleChange, _a$5;
@@ -20745,10 +20035,10 @@ _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$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);
+__decorate([query(".focus-ring")], M3eButtonSegmentElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eButtonSegmentElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eButtonSegmentElement.prototype, "_ripple", void 0);
+__decorate([property()], M3eButtonSegmentElement.prototype, "value", void 0);
 M3eButtonSegmentElement = M3eButtonSegmentElement_1 = __decorate([customElement$1("m3e-button-segment")], M3eButtonSegmentElement);
 
 var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_directionalitySubscription, _M3eSegmentedButtonElement_handleSlotChange, _M3eSegmentedButtonElement_handleKeyDown, _M3eSegmentedButtonElement_handleChange, _a$4;
@@ -20907,10 +20197,10 @@ _M3eSegmentedButtonElement_handleChange = function _M3eSegmentedButtonElement_ha
 };
 /** The styles of the element. */
 M3eSegmentedButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:state(-first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken$1.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken$1.shape.corner.full}); } ::slotted(:state(-last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken$1.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken$1.shape.corner.full}); } ::slotted(:not(:state(-first))) { --_segmented-button-left-border: none; }`;
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eSegmentedButtonElement.prototype, "multi", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eSegmentedButtonElement.prototype, "hideSelectionIndicator", void 0);
@@ -20956,6 +20246,7 @@ var M3eSelectElement_1;
  * @attr hide-selection-indicator - Whether to hide the selection indicator for single select options.
  * @attr multi - Whether multiple options can be selected.
  * @attr name - The name that identifies the element when submitting the associated form.
+ * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.
  * @attr required - Whether the element is required.
  *
  * @fires input - Emitted when the selected state changes.
@@ -21014,6 +20305,11 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
      * @default false
      */
     this.multi = false;
+    /**
+     * Class or list of classes to be applied to the select's overlay panel.
+     * @default ""
+     */
+    this.panelClass = "";
     new ResizeController$1(this, {
       callback: () => {
         if (__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) {
@@ -21135,7 +20431,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>${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>`;
+    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.label}` : x.label)}</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() {
@@ -21309,6 +20605,11 @@ _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
     __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").ariaMultiSelectable = "true";
   }
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").id = __classPrivateFieldGet(this, _M3eSelectElement_listId, "f");
+  if (this.panelClass) {
+    for (const klass of this.panelClass.split(/\s+/).map(d => d.trim()).filter(Boolean)) {
+      __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").classList.add(klass);
+    }
+  }
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").style.overflowX = "hidden";
   __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"));
@@ -21388,14 +20689,17 @@ _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option)
 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$3(".focus-ring")], M3eSelectElement.prototype, "_focusRing", void 0);
-__decorate([n$1({
+__decorate([query(".focus-ring")], M3eSelectElement.prototype, "_focusRing", void 0);
+__decorate([property({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eSelectElement.prototype, "hideSelectionIndicator", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eSelectElement.prototype, "multi", void 0);
+__decorate([property({
+  attribute: "panel-class"
+})], M3eSelectElement.prototype, "panelClass", void 0);
 M3eSelectElement = M3eSelectElement_1 = __decorate([customElement$1("m3e-select")], M3eSelectElement);
 
 /**
@@ -21526,7 +20830,7 @@ let M3eShapeElement = class M3eShapeElement extends LitElement {
 };
 /** The styles of the element. */
 M3eShapeElement.styles = [ShapeStyle, ShapeNameStyle];
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eShapeElement.prototype, "name", void 0);
 M3eShapeElement = __decorate([customElement$1("m3e-shape")], M3eShapeElement);
@@ -21571,7 +20875,7 @@ var _M3eSlideGroupElement_instances, _M3eSlideGroupElement_directionalitySubscri
  * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.
  * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.
  */
-let M3eSlideGroupElement = class M3eSlideGroupElement extends LitElement {
+let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallback$1(LitElement) {
   constructor() {
     super(...arguments);
     _M3eSlideGroupElement_instances.add(this);
@@ -21625,6 +20929,11 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends LitElement {
     __classPrivateFieldGet(this, _M3eSlideGroupElement_directionalitySubscription, "f")?.call(this);
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSlideGroupElement_resizeController, "f").observe(this.scrollContainer);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     __classPrivateFieldGet(this, _M3eSlideGroupElement_resizeController, "f").observe(this.scrollContainer);
@@ -21704,25 +21013,25 @@ _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$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);
-__decorate([n$1({
+__decorate([query(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
+__decorate([state()], M3eSlideGroupElement.prototype, "_canPage", void 0);
+__decorate([state()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);
+__decorate([state()], M3eSlideGroupElement.prototype, "_canPageEnd", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eSlideGroupElement.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eSlideGroupElement.prototype, "vertical", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eSlideGroupElement.prototype, "threshold", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "previous-page-label"
 })], M3eSlideGroupElement.prototype, "previousPageLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "next-page-label"
 })], M3eSlideGroupElement.prototype, "nextPageLabel", void 0);
 __decorate([debounce$1(40)], M3eSlideGroupElement.prototype, "_updatePaging", null);
@@ -21828,8 +21137,8 @@ _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$3(".focus-ring")], M3eSliderThumbElement.prototype, "_focusRing", void 0);
-__decorate([n$1({
+__decorate([query(".focus-ring")], M3eSliderThumbElement.prototype, "_focusRing", void 0);
+__decorate([property({
   type: Number,
   reflect: true
 })], M3eSliderThumbElement.prototype, "value", void 0);
@@ -22007,7 +21316,7 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
   }
   /** @inheritdoc */
   render() {
-    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>`;
+    return html`<div class="base" tabindex="${ifDefined(!this.disabled ? "-1" : undefined)}" @pointerdown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerUp)}" @keydown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyDown)}" @value-change="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleThumbChange)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(x => __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_renderTick).call(this, x))}</div><slot @slotchange="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleSlotChange)}"></slot></div>`;
   }
 };
 _M3eSliderElement_directionalitySubscription = new WeakMap();
@@ -22284,32 +21593,32 @@ _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$3(".base")], M3eSliderElement.prototype, "_base", void 0);
-__decorate([r$1()], M3eSliderElement.prototype, "_ticks", void 0);
-__decorate([n$1({
+__decorate([query(".base")], M3eSliderElement.prototype, "_base", void 0);
+__decorate([state()], M3eSliderElement.prototype, "_ticks", void 0);
+__decorate([property({
   reflect: true
 })], M3eSliderElement.prototype, "size", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eSliderElement.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eSliderElement.prototype, "discrete", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eSliderElement.prototype, "min", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eSliderElement.prototype, "max", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eSliderElement.prototype, "step", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean
 })], M3eSliderElement.prototype, "labelled", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: false
 })], M3eSliderElement.prototype, "displayWith", void 0);
 M3eSliderElement = __decorate([customElement$1("m3e-slider")], M3eSliderElement);
@@ -22445,15 +21754,15 @@ M3eSnackbarElement.styles = css`:host { position: fixed; top: calc(100vh - var(-
         visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scale(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scale(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${DesignToken$1.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${DesignToken$1.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${DesignToken$1.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken$1.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken$1.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken$1.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken$1.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken$1.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken$1.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken$1.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken$1.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken$1.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken$1.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken$1.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken$1.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken$1.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken$1.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${DesignToken$1.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`;
 /** @private */
 M3eSnackbarElement.__current = null;
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eSnackbarElement.prototype, "duration", void 0);
-__decorate([n$1()], M3eSnackbarElement.prototype, "action", void 0);
-__decorate([n$1({
+__decorate([property()], M3eSnackbarElement.prototype, "action", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eSnackbarElement.prototype, "dismissible", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "close-label"
 })], M3eSnackbarElement.prototype, "closeLabel", void 0);
 M3eSnackbarElement = M3eSnackbarElement_1 = __decorate([customElement$1("m3e-snackbar")], M3eSnackbarElement);
@@ -22732,11 +22041,11 @@ _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$3(".base")], M3eSplitButtonElement.prototype, "_base", void 0);
-__decorate([n$1({
+__decorate([query(".base")], M3eSplitButtonElement.prototype, "_base", void 0);
+__decorate([property({
   reflect: true
 })], M3eSplitButtonElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eSplitButtonElement.prototype, "size", void 0);
 M3eSplitButtonElement = __decorate([customElement$1("m3e-split-button")], M3eSplitButtonElement);
@@ -22816,7 +22125,7 @@ let M3eStepPanelElement = class M3eStepPanelElement extends Role$1(LitElement, "
 };
 /** The styles of the element. */
 M3eStepPanelElement.styles = css`:host { display: block; } .content { display: flex; flex-direction: column; padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem); row-gap: var(--m3e-step-panel-spacing, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: var(--m3e-step-panel-actions-height, 3rem); } ::slotted([slot="actions"][end]) { justify-content: flex-end; }`;
-__decorate([r$1()], M3eStepPanelElement.prototype, "active", void 0);
+__decorate([state()], M3eStepPanelElement.prototype, "active", void 0);
 M3eStepPanelElement = __decorate([customElement$1("m3e-step-panel")], M3eStepPanelElement);
 
 var _M3eStepElement_instances, _M3eStepElement_clickHandler, _M3eStepElement_renderIcon, _M3eStepElement_handleClick;
@@ -23051,26 +22360,26 @@ _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$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({
+__decorate([query(".focus-ring")], M3eStepElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eStepElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eStepElement.prototype, "_ripple", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eStepElement.prototype, "optional", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eStepElement.prototype, "editable", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eStepElement.prototype, "completed", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eStepElement.prototype, "invalid", void 0);
-__decorate([r$1()], M3eStepElement.prototype, "index", void 0);
+__decorate([state()], M3eStepElement.prototype, "index", void 0);
 M3eStepElement = M3eStepElement_1 = __decorate([customElement$1("m3e-step")], M3eStepElement);
 
 var _StepperButtonElementBase_action;
@@ -23295,8 +22604,8 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals$1(LitEle
     __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
   }
   /** @inheritdoc */
-  update(changedProperties) {
-    super.update(changedProperties);
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("orientation")) {
       __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
       if (this.orientation === "auto") {
@@ -23323,7 +22632,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(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="${ifDefined(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>`;
   }
@@ -23332,7 +22641,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(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="${ifDefined(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();
@@ -23423,21 +22732,21 @@ _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDispla
 })();
 /** The styles of the element. */
 M3eStepperElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } :host(:not(:state(-vertical))) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(:state(-vertical)):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(:state(-vertical))) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(:state(-vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:state(-vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:state(-vertical))[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(:state(-vertical)) .header { display: contents; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(:state(-vertical))) { --m3e-collapsible-animation-duration: 0ms; } :host(:state(-no-animate)) { --m3e-collapsible-animation-duration: 0ms; }`;
-__decorate([r$1()], M3eStepperElement.prototype, "_orientation", void 0);
-__decorate([r$1()], M3eStepperElement.prototype, "_selectedIndex", void 0);
-__decorate([n$1({
+__decorate([state()], M3eStepperElement.prototype, "_orientation", void 0);
+__decorate([state()], M3eStepperElement.prototype, "_selectedIndex", void 0);
+__decorate([property({
   attribute: "header-position",
   reflect: true
 })], M3eStepperElement.prototype, "headerPosition", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "label-position",
   reflect: true
 })], M3eStepperElement.prototype, "labelPosition", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eStepperElement.prototype, "linear", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eStepperElement.prototype, "orientation", void 0);
 M3eStepperElement = __decorate([customElement$1("m3e-stepper")], M3eStepperElement);
@@ -23796,13 +23105,13 @@ _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
 };
 /** The styles of the element. */
 M3eSwitchElement.styles = [SwitchStyle, SwitchStateLayerStyle, SwitchTrackStyle, SwitchHandleStyle, SwitchIconStyle];
-__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({
+__decorate([query(".track")], M3eSwitchElement.prototype, "_track", void 0);
+__decorate([query(".focus-ring")], M3eSwitchElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eSwitchElement.prototype, "_stateLayer", void 0);
+__decorate([property({
   reflect: true
 })], M3eSwitchElement.prototype, "icons", void 0);
-__decorate([n$1()], M3eSwitchElement.prototype, "value", void 0);
+__decorate([property()], M3eSwitchElement.prototype, "value", void 0);
 M3eSwitchElement = __decorate([customElement$1("m3e-switch")], M3eSwitchElement);
 
 var _M3eTabElement_instances, _M3eTabElement_clickHandler, _M3eTabElement_handleClick;
@@ -23936,10 +23245,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$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);
+__decorate([query(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eTabElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eTabElement.prototype, "_ripple", void 0);
+__decorate([query(".label")], M3eTabElement.prototype, "label", void 0);
 M3eTabElement = M3eTabElement_1 = __decorate([customElement$1("m3e-tab")], M3eTabElement);
 
 /**
@@ -24137,7 +23446,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(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="${ifDefined(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
   }
 };
 _M3eTabsElement_directionalitySubscription = new WeakMap();
@@ -24195,27 +23504,27 @@ _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$3(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
-__decorate([r$1()], M3eTabsElement.prototype, "_selectedIndex", void 0);
-__decorate([n$1({
+__decorate([query(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
+__decorate([state()], M3eTabsElement.prototype, "_selectedIndex", void 0);
+__decorate([property({
   attribute: "disable-pagination",
   type: Boolean
 })], M3eTabsElement.prototype, "disablePagination", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "header-position",
   reflect: true
 })], M3eTabsElement.prototype, "headerPosition", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eTabsElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eTabsElement.prototype, "stretch", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "previous-page-label"
 })], M3eTabsElement.prototype, "previousPageLabel", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "next-page-label"
 })], M3eTabsElement.prototype, "nextPageLabel", void 0);
 M3eTabsElement = __decorate([customElement$1("m3e-tabs")], M3eTabsElement);
@@ -24472,15 +23781,15 @@ _M3eTextareaAutosizeElement_scrollToCaretPosition = function _M3eTextareaAutosiz
 };
 /** The styles of the element. */
 M3eTextareaAutosizeElement.styles = css`:host { display: none; }`;
-__decorate([n$1({
+__decorate([property({
   attribute: "max-rows",
   type: Number
 })], M3eTextareaAutosizeElement.prototype, "maxRows", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "min-rows",
   type: Number
 })], M3eTextareaAutosizeElement.prototype, "minRows", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eTextareaAutosizeElement.prototype, "disabled", void 0);
@@ -27765,17 +27074,17 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
 };
 /** The styles of the element. */
 M3eThemeElement.styles = css`:host { display: contents; font-size: ${DesignToken$1.typescale.standard.body.large.fontSize}; font-weight: ${DesignToken$1.typescale.standard.body.large.fontWeight}; line-height: ${DesignToken$1.typescale.standard.body.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.body.large.tracking}; }`;
-__decorate([n$1()], M3eThemeElement.prototype, "color", void 0);
-__decorate([n$1()], M3eThemeElement.prototype, "scheme", void 0);
-__decorate([n$1()], M3eThemeElement.prototype, "contrast", void 0);
-__decorate([n$1({
+__decorate([property()], M3eThemeElement.prototype, "color", void 0);
+__decorate([property()], M3eThemeElement.prototype, "scheme", void 0);
+__decorate([property()], M3eThemeElement.prototype, "contrast", void 0);
+__decorate([property({
   attribute: "strong-focus",
   type: Boolean
 })], M3eThemeElement.prototype, "strongFocus", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Number
 })], M3eThemeElement.prototype, "density", void 0);
-__decorate([n$1()], M3eThemeElement.prototype, "motion", void 0);
+__decorate([property()], M3eThemeElement.prototype, "motion", void 0);
 M3eThemeElement = __decorate([customElement$1("m3e-theme")], M3eThemeElement);
 
 /**
@@ -27832,9 +27141,9 @@ 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$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);
+__decorate([query(".base")], M3eTocItemElement.prototype, "_base", void 0);
+__decorate([query(".state-layer")], M3eTocItemElement.prototype, "_stateLayer", void 0);
+__decorate([state()], M3eTocItemElement.prototype, "node", void 0);
 M3eTocItemElement = __decorate([customElement$1("m3e-toc-item")], M3eTocItemElement);
 
 var _a$1, _TocGenerator_getHeaderLevel;
@@ -28030,8 +27339,8 @@ let M3eTocElement = class M3eTocElement extends HtmlFor$1(AttachInternals$1(Role
     __classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_generateToc).call(this);
   }
   /** @inheritdoc */
-  update(changedProperties) {
-    super.update(changedProperties);
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("maxDepth")) {
       __classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_generateToc).call(this);
     }
@@ -28105,9 +27414,9 @@ M3eTocElement.styles = css`:host { display: inline-block; position: relative; ov
           ${DesignToken$1.motion.easing.standard},
         top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1})
           ${DesignToken$1.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:state(-with-overline))) .overline, :host(:not(:state(-with-title))) .title, :host(:not(:state(-with-overline)):not(:state(-with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${DesignToken$1.color.onSurface}); } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`;
-__decorate([r$1()], M3eTocElement.prototype, "_toc", void 0);
-__decorate([e$3(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
-__decorate([n$1({
+__decorate([state()], M3eTocElement.prototype, "_toc", void 0);
+__decorate([query(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
+__decorate([property({
   attribute: "max-depth",
   type: Number
 })], M3eTocElement.prototype, "maxDepth", void 0);
@@ -28236,13 +27545,13 @@ _M3eToolbarElement_handleClick = function _M3eToolbarElement_handleClick(e) {
 };
 /** The styles of the element. */
 M3eToolbarElement.styles = css`:host { display: inline-block; position: relative; } .base { display: flex; align-items: center; box-sizing: border-box; border-radius: inherit; } :host(:not([vertical])) { height: fit-content; } :host(:not([vertical])) .base { height: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken$1.density.calc(-3)}); column-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([vertical]) { width: fit-content; } :host([vertical]) .base { width: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken$1.density.calc(-3)}); } :host([vertical]) .base { flex-direction: column; justify-content: center; row-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([shape="rounded"]) { border-radius: var(--m3e-toolbar-rounded-shape, ${DesignToken$1.shape.corner.full}); } :host([shape="rounded"]) .base { padding: var(--m3e-toolbar-rounded-padding, 0.5rem); } :host(:not([vertical])[shape="square"]) .base { padding-inline: var(--m3e-toolbar-square-padding, 1rem); } :host([vertical][shape="square"]) .base { padding-block: var(--m3e-toolbar-square-padding, 1rem); } :host([variant="standard"]) .state-layer { background-color: var(--m3e-toolbar-standard-container-color, ${DesignToken$1.color.surfaceContainer}); } :host([variant="standard"]) .base { color: var(--m3e-toolbar-standard-color, ${DesignToken$1.color.onSurface}); } :host([variant="vibrant"]) .state-layer { background-color: var(--m3e-toolbar-vibrant-container-color, ${DesignToken$1.color.primaryContainer}); } :host([variant="vibrant"]) .base { color: var(--m3e-toolbar-vibrant-color, ${DesignToken$1.color.onPrimaryContainer}); } @media (forced-colors: active) { :host([variant]) .state-layer { background-color: Canvas; } :host([variant]) .base { color: CanvasText; outline: 1px solid CanvasText; } }`;
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eToolbarElement.prototype, "variant", void 0);
-__decorate([n$1({
+__decorate([property({
   reflect: true
 })], M3eToolbarElement.prototype, "shape", void 0);
-__decorate([n$1({
+__decorate([property({
   type: Boolean,
   reflect: true
 })], M3eToolbarElement.prototype, "elevated", void 0);
@@ -28267,19 +27576,19 @@ let M3eRichTooltipActionElement = class M3eRichTooltipActionElement extends Acti
     this.closest("m3e-rich-tooltip")?.hide(!this.disableRestoreFocus);
   }
 };
-__decorate([n$1({
+__decorate([property({
   attribute: "disable-restore-focus",
   type: Boolean
 })], M3eRichTooltipActionElement.prototype, "disableRestoreFocus", void 0);
 M3eRichTooltipActionElement = __decorate([customElement$1("m3e-rich-tooltip-action")], M3eRichTooltipActionElement);
 
-var _TooltipElementBase_instances, _a, _TooltipElementBase_for, _TooltipElementBase_anchorCleanup, _TooltipElementBase_tooltipHovering, _TooltipElementBase_controlClickHandler, _TooltipElementBase_hoverController, _TooltipElementBase_longPressController, _TooltipElementBase_handleControlClick, _TooltipElementBase_disableNativeGesturesIfNecessary;
+var _TooltipElementBase_instances, _a, _TooltipElementBase_for, _TooltipElementBase_anchorCleanup, _TooltipElementBase_tooltipHovering, _TooltipElementBase_controlClickHandler, _TooltipElementBase_hoverController, _TooltipElementBase_longPressController, _TooltipElementBase_initialize, _TooltipElementBase_handleControlClick, _TooltipElementBase_disableNativeGesturesIfNecessary;
 /** The space, in pixels, between the tooltip and anchor. */
 const TOOLTIP_OFFSET = 4;
 /** The default time, in milliseconds, before hiding a tooltip. */
 const TOOLTIP_HIDE_DELAY = 200;
 /** Provides a base implementation for a tooltip. This class must be inherited. */
-class TooltipElementBase extends HtmlFor$1(AttachInternals$1(LitElement)) {
+class TooltipElementBase extends HtmlFor$1(ReconnectedCallback$1(AttachInternals$1(LitElement))) {
   constructor() {
     super(...arguments);
     _TooltipElementBase_instances.add(this);
@@ -28392,11 +27701,14 @@ class TooltipElementBase extends HtmlFor$1(AttachInternals$1(LitElement)) {
     }
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _TooltipElementBase_instances, "m", _TooltipElementBase_initialize).call(this);
+  }
+  /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    if (this._base) {
-      __classPrivateFieldGet(this, _TooltipElementBase_hoverController, "f").observe(this._base);
-    }
+    __classPrivateFieldGet(this, _TooltipElementBase_instances, "m", _TooltipElementBase_initialize).call(this);
   }
   /**
    * Manually shows the tooltip.
@@ -28428,7 +27740,11 @@ class TooltipElementBase extends HtmlFor$1(AttachInternals$1(LitElement)) {
     }
   }
 }
-_a = TooltipElementBase, _TooltipElementBase_for = new WeakMap(), _TooltipElementBase_anchorCleanup = new WeakMap(), _TooltipElementBase_tooltipHovering = new WeakMap(), _TooltipElementBase_controlClickHandler = new WeakMap(), _TooltipElementBase_hoverController = new WeakMap(), _TooltipElementBase_longPressController = new WeakMap(), _TooltipElementBase_instances = new WeakSet(), _TooltipElementBase_handleControlClick = function _TooltipElementBase_handleControlClick() {
+_a = TooltipElementBase, _TooltipElementBase_for = new WeakMap(), _TooltipElementBase_anchorCleanup = new WeakMap(), _TooltipElementBase_tooltipHovering = new WeakMap(), _TooltipElementBase_controlClickHandler = new WeakMap(), _TooltipElementBase_hoverController = new WeakMap(), _TooltipElementBase_longPressController = new WeakMap(), _TooltipElementBase_instances = new WeakSet(), _TooltipElementBase_initialize = function _TooltipElementBase_initialize() {
+  if (this._base) {
+    __classPrivateFieldGet(this, _TooltipElementBase_hoverController, "f").observe(this._base);
+  }
+}, _TooltipElementBase_handleControlClick = function _TooltipElementBase_handleControlClick() {
   if (this._isInteractive) {
     if (_a.__openTooltips.includes(this)) {
       this.hide();
@@ -28458,20 +27774,20 @@ _a = TooltipElementBase, _TooltipElementBase_for = new WeakMap(), _TooltipElemen
 };
 /** @private */
 TooltipElementBase.__openTooltips = new Array();
-__decorate([e$3(".base")], TooltipElementBase.prototype, "_base", void 0);
-__decorate([n$1({
+__decorate([query(".base")], TooltipElementBase.prototype, "_base", void 0);
+__decorate([property({
   type: Boolean,
   reflect: true
 })], TooltipElementBase.prototype, "disabled", void 0);
-__decorate([n$1({
+__decorate([property({
   attribute: "show-delay",
   type: Number
 })], TooltipElementBase.prototype, "showDelay", null);
-__decorate([n$1({
+__decorate([property({
   attribute: "hide-delay",
   type: Number
 })], TooltipElementBase.prototype, "hideDelay", null);
-__decorate([n$1({
+__decorate([property({
   attribute: "touch-gestures"
 })], TooltipElementBase.prototype, "touchGestures", void 0);
 
@@ -28594,7 +27910,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(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>`;
+    return html`<div class="base" popover="manual" role="${ifDefined(this._interactive ? "dialog" : undefined)}" aria-labelledby="${ifDefined(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="${ifDefined(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() {
@@ -28738,9 +28054,9 @@ M3eRichTooltipElement.styles = css`:host { display: contents; } .base { flex-dir
             display ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:popover-open { display: flex; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
 /** @private */
 M3eRichTooltipElement.__nextId = 0;
-__decorate([r$1()], M3eRichTooltipElement.prototype, "_hasSubhead", void 0);
-__decorate([r$1()], M3eRichTooltipElement.prototype, "_interactive", void 0);
-__decorate([n$1()], M3eRichTooltipElement.prototype, "position", void 0);
+__decorate([state()], M3eRichTooltipElement.prototype, "_hasSubhead", void 0);
+__decorate([state()], M3eRichTooltipElement.prototype, "_interactive", void 0);
+__decorate([property()], M3eRichTooltipElement.prototype, "position", void 0);
 M3eRichTooltipElement = M3eRichTooltipElement_1 = __decorate([customElement$1("m3e-rich-tooltip")], M3eRichTooltipElement);
 
 var _M3eTooltipElement_instances, _M3eTooltipElement_message, _M3eTooltipElement_handleSlotChange, _M3eTooltipElement_handleToggle;
@@ -28863,8 +28179,8 @@ M3eTooltipElement.styles = css`:host { display: contents; } .base { position: ab
         transform ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
         display ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-multiline)) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
-__decorate([n$1()], M3eTooltipElement.prototype, "position", void 0);
+__decorate([property()], M3eTooltipElement.prototype, "position", void 0);
 M3eTooltipElement = __decorate([customElement$1("m3e-tooltip")], M3eTooltipElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate };
+export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate };
 //# sourceMappingURL=all.js.map