@m3e/web 2.1.3 → 2.2.1

package/dist/all.js

@@ -6,21 +6,22 @@
 import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
 import { unsafeCSS, css, LitElement, html, nothing, isServer, noChange, svg } from 'lit';
 import { query, property, queryAssignedElements, state } from 'lit/decorators.js';
-import { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, hasAssignedNodes as hasAssignedNodes$1, debounce as debounce$1, customElement as customElement$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, 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 { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, hasAssignedNodes as hasAssignedNodes$1, debounce as debounce$1, customElement as customElement$1, EventAttribute as EventAttribute$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, ReconnectedCallback as ReconnectedCallback$1, SuppressInitialAnimation as SuppressInitialAnimation$1, AttachInternals as AttachInternals$1, VelocityTracker as VelocityTracker$1, ScrollLockController as ScrollLockController$1, InertController as InertController$1, ResizeController as ResizeController$1, focusWhenReady as focusWhenReady$1, hasCustomState as hasCustomState$1, computeCssSize as computeCssSize$1, registerStyleSheet as registerStyleSheet$1, spaceSeparatedStringConverter as spaceSeparatedStringConverter$1, KeyboardClick as KeyboardClick$1, LinkButton as LinkButton$1, 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, dateConverter as dateConverter$1, Labelled as Labelled$1, RequiredConstraintValidation as RequiredConstraintValidation$1, Dirty as Dirty$1, Touched as Touched$1, Required as Required$1, ConstraintValidation as ConstraintValidation$1, CheckedIndeterminate as CheckedIndeterminate$1, FormAssociated as FormAssociated$1, HoverController as HoverController$1, formValue as formValue$1, isDisabledMixin as isDisabledMixin$1, isDisabledInteractiveMixin as isDisabledInteractiveMixin$1, isLinkButtonMixin as isLinkButtonMixin$1, getTextContent as getTextContent$1, Vertical as Vertical$1, Selected as Selected$1, 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 { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { directive, Directive, PartType } from 'lit/directive.js';
+import { M3eButtonElement as M3eButtonElement$1 } from '@m3e/web/button';
 import { M3eIconButtonElement as M3eIconButtonElement$1 } from '@m3e/web/icon-button';
+import '@m3e/web/tooltip';
+import { directive, Directive, PartType } from 'lit/directive.js';
 import { M3eBreakpointObserver, Breakpoint } from '@m3e/web/core/layout';
+import '@m3e/web/calendar';
 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';
@@ -113,7 +114,7 @@ const AppBarToken = {
 const AppBarStyle = css`:host { display: block; flex: none; } :host([size="small"]) .base, :host(:not([size="small"]):not([centered])) .heading { padding-inline-start: ${AppBarToken.paddingLeft}; padding-inline-end: ${AppBarToken.paddingRight}; } .base { box-sizing: border-box; display: flex; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.medium1} ${DesignToken$1.motion.easing.standard},
       box-shadow ${DesignToken$1.motion.duration.medium1} ${DesignToken$1.motion.easing.standard}`)}; } .base:not(.on-scroll) { background-color: ${AppBarToken.containerColor}; box-shadow: ${AppBarToken.containerElevation}; } .base.on-scroll { background-color: ${AppBarToken.containerColorOnScroll}; box-shadow: ${AppBarToken.containerElevationOnScroll}; } .leading-icon, .trailing-icon { display: flex; flex: none; align-items: center; } .leading-icon { min-width: var(--_leading-icon-min-width); } .trailing-icon { min-width: var(--_trailing-icon-min-width); } .heading { display: flex; align-items: center; } :host([size="small"]) .heading { flex: 1 1 auto; } .spacer { flex: 1 1 auto; } .label { display: flex; flex-direction: column; flex: none; } .title { color: ${AppBarToken.titleTextColor}; } .subtitle { color: ${AppBarToken.subtitleTextColor}; } .base:not(.with-title) .title, .base:not(.with-subtitle) .subtitle, .base:not(.with-title):not(.with-subtitle) .label, .base:not(.with-trailing-icon) .trailing-icon { display: none; } :host([size="small"]) .base { align-items: center; } :host([size="small"]) .heading { min-width: 0; } :host([size="small"]) .label { flex: 1 1 auto; min-width: 0; } :host([size="small"]) .title, :host([size="small"]) .subtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :host(:not([size="small"])) .base { flex-direction: column; } :host([centered]) .title, :host([centered]) .subtitle { text-align: center; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } .base:not(.on-scroll), .base.on-scroll { background-color: Canvas; box-shadow: unset; } .title { color: CanvasText; } .subtitle { color: FieldText; } }`;
 
-var _M3eAppBarElement_instances, _M3eAppBarElement_scrollHandler, _M3eAppBarElement_frameLoadHandler, _M3eAppBarElement_handleTitleSlotChange, _M3eAppBarElement_handleSubtitleSlotChange, _M3eAppBarElement_handleLeadingIconSlotChange, _M3eAppBarElement_handleTrailingIconsSlotChange, _M3eAppBarElement_clearCentered, _M3eAppBarElement_computeCentered, _M3eAppBarElement_handleFrameLoad, _M3eAppBarElement_getFrameScrollTop;
+var _M3eAppBarElement_instances, _M3eAppBarElement_scrollHandler, _M3eAppBarElement_frameLoadHandler, _M3eAppBarElement_handleTitleSlotChange, _M3eAppBarElement_handleSubtitleSlotChange, _M3eAppBarElement_handleLeadingIconSlotChange, _M3eAppBarElement_handleTrailingIconsSlotChange, _M3eAppBarElement_handleDeprecatedSlotChange, _M3eAppBarElement_clearCentered, _M3eAppBarElement_computeCentered, _M3eAppBarElement_handleFrameLoad, _M3eAppBarElement_getFrameScrollTop;
 /**
  * A bar, placed a the top of a screen, used to help users navigate through an application.
  *
@@ -154,10 +155,12 @@ var _M3eAppBarElement_instances, _M3eAppBarElement_scrollHandler, _M3eAppBarElem
  *
  * @tag m3e-app-bar
  *
- * @slot leading-icon - Renders a leading icon.
- * @slot subtitle - Renders the subtitle.
- * @slot title - Renders the title.
- * @slot trailing-icon - Renders a trailing icon.
+ * @slot leading - Renders content positioned at the start of the bar.
+ * @slot subtitle - Renders the subtitle of the bar.
+ * @slot title - Renders the title of the bar.
+ * @slot trailing - Renders one or more action buttons aligned to the end of the bar.
+ * @slot leading-icon - Deprecated: use the `leading` slot.
+ * @slot trailing-icon - Deprecated: use the `trailing` slot.
  *
  * @attr centered - Whether the title and subtitle are centered.
  * @attr for - The identifier of the interactive control to which this element is attached.
@@ -272,9 +275,9 @@ let M3eAppBarElement = class M3eAppBarElement extends HtmlFor$1(Role$1(LitElemen
   render() {
     switch (this.size) {
       case "small":
-        return html`<div class="base"><div class="leading-icon"><slot name="leading-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleLeadingIconSlotChange)}"></slot></div><div class="heading"><div class="label"><div class="title"><slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTitleSlotChange)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleSubtitleSlotChange)}"></slot></div></div></div><div class="trailing-icon"><slot name="trailing-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTrailingIconsSlotChange)}"></slot></div></div>`;
+        return html`<div class="base"><div class="leading-icon"><slot name="leading" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleLeadingIconSlotChange)}"><slot name="leading-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleDeprecatedSlotChange)}"></slot></slot></div><div class="heading"><div class="label"><div class="title"><slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTitleSlotChange)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleSubtitleSlotChange)}"></slot></div></div></div><div class="trailing-icon"><slot name="trailing" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTrailingIconsSlotChange)}"><slot name="trailing-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleDeprecatedSlotChange)}"></slot></slot></div></div>`;
       default:
-        return html`<div class="base"><div class="heading"><div class="leading-icon"><slot name="leading-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleLeadingIconSlotChange)}"></slot></div><div class="spacer"></div><div class="trailing-icon"><slot name="trailing-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTrailingIconsSlotChange)}"></slot></div></div><div class="spacer"></div><div class="label"><div class="title"><slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTitleSlotChange)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleSubtitleSlotChange)}"></slot></div></div></div>`;
+        return html`<div class="base"><div class="heading"><div class="leading-icon"><slot name="leading" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleLeadingIconSlotChange)}"><slot name="leading-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleDeprecatedSlotChange)}"></slot></slot></div><div class="spacer"></div><div class="trailing-icon"><slot name="trailing" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTrailingIconsSlotChange)}"><slot name="trailing-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleDeprecatedSlotChange)}"></slot></slot></div></div><div class="spacer"></div><div class="label"><div class="title"><slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTitleSlotChange)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleSubtitleSlotChange)}"></slot></div></div></div>`;
     }
   }
   /** @private */
@@ -309,6 +312,11 @@ _M3eAppBarElement_handleTrailingIconsSlotChange = function _M3eAppBarElement_han
     setTimeout(() => __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_computeCentered).call(this), 40);
   }
 };
+_M3eAppBarElement_handleDeprecatedSlotChange = function _M3eAppBarElement_handleDeprecatedSlotChange(e) {
+  const deprecatedSlot = e.target.name;
+  const useSlot = deprecatedSlot.replace("-icon", "");
+  console.warn(`[m3e-app-bar] Slot "${deprecatedSlot}" is deprecated and will be removed in a future release. Use "${useSlot}" instead.`);
+};
 _M3eAppBarElement_clearCentered = function _M3eAppBarElement_clearCentered() {
   this._base?.style.removeProperty("--_leading-icon-min-width");
   this._base?.style.removeProperty("--_trailing-icon-min-width");
@@ -350,7 +358,7 @@ __decorate([property({
 __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_projectClone, _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_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_clearOptions, _M3eAutocompleteElement_announceResults, _M3eAutocompleteElement_autoActivate, _M3eAutocompleteElement_deactivateOption;
 var M3eAutocompleteElement_1;
 /**
  * Enhances a text input with suggested options.
@@ -397,8 +405,9 @@ var M3eAutocompleteElement_1;
  *
  * @fires toggle - Emitted when the options menu opens or closes.
  * @fires query - Emitted when the input is focused or when the user modifies its value.
+ * @fires change - Emitted when the committed value changes due to selecting an option or clearing the input.
  */
-let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteElement extends HtmlFor$1(LitElement) {
+let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteElement extends EventAttribute$1(HtmlFor$1(LitElement), "query") {
   constructor() {
     super();
     _M3eAutocompleteElement_instances.add(this);
@@ -441,7 +450,7 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
     /** @private */
     _M3eAutocompleteElement_menuPointerDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMenuPointerDown).call(this, e));
     /** @private */
-    this._listKeyManager = new ListKeyManager().withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(item => item.disabled || item.hidden).onActiveItemChange(() => {
+    this._listKeyManager = new ListKeyManager().withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(item => item.disabled || item.hidden === true).onActiveItemChange(() => {
       if (this._listKeyManager.activeItem) {
         __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_activateOption).call(this, this._listKeyManager.activeItem);
       }
@@ -518,6 +527,15 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
   get options() {
     return this._options ?? [];
   }
+  /** The selected option. */
+  get selected() {
+    return this.options.find(x => x.selected) ?? null;
+  }
+  /** The selected (enabled) value. */
+  get value() {
+    const selected = this.selected;
+    return selected && !selected.disabled ? selected.value : null;
+  }
   /** @inheritdoc */
   attach(control) {
     if (!(control instanceof HTMLInputElement)) return;
@@ -557,6 +575,11 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
   clear(restoreFocus = false) {
     if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return;
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
+    if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_clearOptions).call(this)) {
+      this.dispatchEvent(new Event("change", {
+        bubbles: true
+      }));
+    }
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
     if (restoreFocus) {
       __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).focus();
@@ -631,11 +654,7 @@ _M3eAutocompleteElement_hasLoadingSlot_get = function _M3eAutocompleteElement_ha
   return (__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelector("[slot='loading']") ?? null) !== null;
 };
 _M3eAutocompleteElement_shouldShowMenu_get = function _M3eAutocompleteElement_shouldShowMenu_get() {
-  return __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).some(x => !x.hidden) || this.loading && !this.hideLoading && this.loadingLabel.length > 0 || !this.loading && !this.hideNoData && this.noDataLabel.length > 0;
-};
-_M3eAutocompleteElement_minMenuWidth_get = function _M3eAutocompleteElement_minMenuWidth_get() {
-  const formField = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get);
-  return `${formField ? formField.menuAnchor.clientWidth : this.control?.clientWidth ?? 0}px`;
+  return __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).some(x => x.hidden === false) || this.loading && !this.hideLoading && this.loadingLabel.length > 0 || !this.loading && !this.hideNoData && this.noDataLabel.length > 0;
 };
 _M3eAutocompleteElement_formField_get = function _M3eAutocompleteElement_formField_get() {
   return this.control?.closest("m3e-form-field") ?? null;
@@ -715,6 +734,11 @@ _M3eAutocompleteElement_handleInput = function _M3eAutocompleteElement_handleInp
     bubbles: true,
     composed: true
   }));
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value === "" && __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_clearOptions).call(this)) {
+    this.dispatchEvent(new Event("change", {
+      bubbles: true
+    }));
+  }
   __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, true, "f");
   try {
     if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
@@ -731,8 +755,15 @@ _M3eAutocompleteElement_handleInput = function _M3eAutocompleteElement_handleInp
   }
 };
 _M3eAutocompleteElement_handleChange = function _M3eAutocompleteElement_handleChange() {
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && this.required && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).some(x => x.selected && !x.disabled)) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) {
+    const selected = this.selected;
+    if (this.required) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = selected?.label ?? "";
+    } else if (selected && selected.label !== __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value && __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_clearOptions).call(this)) {
+      this.dispatchEvent(new Event("change", {
+        bubbles: true
+      }));
+    }
   }
 };
 _M3eAutocompleteElement_handleKeyDown = function _M3eAutocompleteElement_handleKeyDown(e) {
@@ -838,6 +869,7 @@ _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMe
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).ariaExpanded = "false";
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).removeAttribute("aria-controls");
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).removeAttribute("aria-owns");
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).removeAttribute("aria-activedescendant");
   }
   this.requestUpdate();
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange();
@@ -845,6 +877,9 @@ _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMe
     oldState: e.oldState,
     newState: e.newState
   }));
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.slot === "input" && __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).parentElement?.tagName === "M3E-INPUT-CHIP-SET") {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_clearOptions).call(this);
+  }
 };
 _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
   if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).readOnly || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).disabled) return;
@@ -857,9 +892,9 @@ _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
       __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").scrollStrategy = "reposition";
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").fitAnchorWidth = true;
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("toggle", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_projectClone).call(this);
@@ -897,7 +932,6 @@ _M3eAutocompleteElement_updateMenuState = function _M3eAutocompleteElement_updat
 };
 _M3eAutocompleteElement_hideMenu = function _M3eAutocompleteElement_hideMenu() {
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.hide();
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.removeAttribute("aria-activedescendant");
 };
 _M3eAutocompleteElement_activateOption = function _M3eAutocompleteElement_activateOption(option, forceFocusVisible = false) {
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return;
@@ -943,8 +977,11 @@ async function _M3eAutocompleteElement_selectOption(option) {
     await this.updateComplete;
   }
   if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = option.value;
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = option.label;
   }
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
 };
 _M3eAutocompleteElement_filterOption = function _M3eAutocompleteElement_filterOption(clone, option, term, exactTerm) {
@@ -972,7 +1009,7 @@ _M3eAutocompleteElement_filterOption = function _M3eAutocompleteElement_filterOp
 };
 _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterOptions() {
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return 0;
-  const oldCount = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).filter(x => !x.hidden).length;
+  const oldCount = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).filter(x => x.hidden === false).length;
   const shouldAnnounce = !this.loading && __classPrivateFieldGet(this, _M3eAutocompleteElement_inputChanged, "f");
   __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, false, "f");
   const exactTerm = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
@@ -984,7 +1021,7 @@ _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterO
     const clone = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get)[i];
     const option = this._options[i];
     clone.hidden = !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOption).call(this, clone, option, term, exactTerm);
-    if (clone.hidden) {
+    if (clone.hidden === true) {
       __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, clone);
       deleteCustomState$1(clone, "-first");
       deleteCustomState$1(clone, "-last");
@@ -1004,17 +1041,13 @@ _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterO
         last = clone;
       }
     }
-    if (clone.selected && option.value !== exactTerm) {
-      clone.selected = false;
-      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateSelectionState).call(this, clone);
-    }
   }
   if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateMenuState).call(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), newCount);
   }
   const groups = __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.querySelectorAll("m3e-optgroup") ?? __classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelectorAll("m3e-optgroup") ?? [];
   for (const group of groups) {
-    group.hidden = [...group.querySelectorAll("m3e-option")].every(x => x.hidden);
+    group.hidden = [...group.querySelectorAll("m3e-option")].every(x => x.hidden === true);
   }
   if (shouldAnnounce) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_announceResults).call(this, oldCount, newCount);
@@ -1022,6 +1055,17 @@ _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterO
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_autoActivate).call(this);
   return newCount;
 };
+_M3eAutocompleteElement_clearOptions = function _M3eAutocompleteElement_clearOptions() {
+  const selected = this._listKeyManager.items.filter(x => x.selected);
+  if (selected.length > 0) {
+    selected.forEach(x => {
+      x.selected = false;
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateSelectionState).call(this, x);
+    });
+    return true;
+  }
+  return false;
+};
 _M3eAutocompleteElement_announceResults = function _M3eAutocompleteElement_announceResults(oldCount, newCount) {
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) return;
   if (newCount == 0) {
@@ -1037,7 +1081,7 @@ _M3eAutocompleteElement_announceResults = function _M3eAutocompleteElement_annou
 };
 _M3eAutocompleteElement_autoActivate = function _M3eAutocompleteElement_autoActivate() {
   if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {
-    const option = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).find(x => !x.disabled && !x.hidden);
+    const option = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).find(x => !x.disabled && x.hidden === false);
     if (option) {
       this._listKeyManager.setActiveItem(option);
       if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
@@ -1343,7 +1387,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_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_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_inertController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _M3eBottomSheetElement_initialize, _M3eBottomSheetElement_handleHeaderSlotChange, _M3eBottomSheetElement_handleHeaderPointerDown, _M3eBottomSheetElement_handleHeaderPointerMove, _M3eBottomSheetElement_handleHeaderPointerUp, _M3eBottomSheetElement_handleDocumentClick, _M3eBottomSheetElement_handleDocumentKeyDown, _M3eBottomSheetElement_handleWindowResize, _M3eBottomSheetElement_handleDragHandleClick, _M3eBottomSheetElement_handleDragHandleKeyDown, _M3eBottomSheetElement_getNextHigherDetent, _M3eBottomSheetElement_getNextLowerDetent, _M3eBottomSheetElement_getClosestDetent, _M3eBottomSheetElement_computeDetentHeight, _M3eBottomSheetElement_computeMaxHeight, _M3eBottomSheetElement_computeMinHeight, _M3eBottomSheetElement_computePeekHeight, _M3eBottomSheetElement_computeFitHeight, _M3eBottomSheetElement_handleSectionResize, _M3eBottomSheetElement_snapToDetent, _M3eBottomSheetElement_snapToHeight, _M3eBottomSheetElement_updateHeight;
 var M3eBottomSheetElement_1;
 /**
  * A sheet used to show secondary content anchored to the bottom of the screen.
@@ -1453,12 +1497,12 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
     /** @private */
     _M3eBottomSheetElement_windowResizeHandler.set(this, () => __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleWindowResize).call(this));
     /** @private */
-    _M3eBottomSheetElement_inerts.set(this, new Array());
-    /** @private */
     _M3eBottomSheetElement_velocityTracker.set(this, new VelocityTracker$1());
     /** @private */
     _M3eBottomSheetElement_scrollLockController.set(this, new ScrollLockController$1(this));
     /** @private */
+    _M3eBottomSheetElement_inertController.set(this, new InertController$1(this));
+    /** @private */
     _M3eBottomSheetElement_resizeController.set(this, new ResizeController$1(this, {
       target: null,
       skipInitial: true,
@@ -1628,7 +1672,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
       if (this.modal) {
         if (this.open) {
           __classPrivateFieldSet(this, _M3eBottomSheetElement_trigger, document.activeElement, "f");
-          __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_applyInert).call(this);
+          __classPrivateFieldGet(this, _M3eBottomSheetElement_inertController, "f").lock();
           __classPrivateFieldGet(this, _M3eBottomSheetElement_scrollLockController, "f").lock();
           this.showPopover();
           requestAnimationFrame(() => {
@@ -1644,7 +1688,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
           }
         } else {
           __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_snapToHeight).call(this, 0).then(() => {
-            __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_restoreInert).call(this);
+            __classPrivateFieldGet(this, _M3eBottomSheetElement_inertController, "f").unlock();
             __classPrivateFieldGet(this, _M3eBottomSheetElement_scrollLockController, "f").unlock();
             document.removeEventListener("click", __classPrivateFieldGet(this, _M3eBottomSheetElement_documentClickHandler, "f"));
             document.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eBottomSheetElement_documentKeyDownHandler, "f"));
@@ -1667,9 +1711,9 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
 _M3eBottomSheetElement_documentClickHandler = new WeakMap();
 _M3eBottomSheetElement_documentKeyDownHandler = new WeakMap();
 _M3eBottomSheetElement_windowResizeHandler = new WeakMap();
-_M3eBottomSheetElement_inerts = new WeakMap();
 _M3eBottomSheetElement_velocityTracker = new WeakMap();
 _M3eBottomSheetElement_scrollLockController = new WeakMap();
+_M3eBottomSheetElement_inertController = new WeakMap();
 _M3eBottomSheetElement_resizeController = new WeakMap();
 _M3eBottomSheetElement_trigger = new WeakMap();
 _M3eBottomSheetElement_dragState = new WeakMap();
@@ -1978,27 +2022,8 @@ _M3eBottomSheetElement_updateHeight = function _M3eBottomSheetElement_updateHeig
     content.inert = height <= __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computePeekHeight).call(this);
   }
 };
-_M3eBottomSheetElement_applyInert = function _M3eBottomSheetElement_applyInert() {
-  __classPrivateFieldGet(this, _M3eBottomSheetElement_inerts, "f").length = 0;
-  for (let current = this; current.parentNode && current.parentNode !== document.documentElement; current = current.parentNode) {
-    for (const sibling of current.parentNode.children) {
-      if (sibling instanceof HTMLElement && sibling !== current && !sibling.inert) {
-        sibling.inert = true;
-        __classPrivateFieldGet(this, _M3eBottomSheetElement_inerts, "f").push(sibling);
-      }
-    }
-  }
-};
-_M3eBottomSheetElement_restoreInert = function _M3eBottomSheetElement_restoreInert() {
-  __classPrivateFieldGet(this, _M3eBottomSheetElement_inerts, "f").forEach(x => x.inert = false);
-  __classPrivateFieldGet(this, _M3eBottomSheetElement_inerts, "f").length = 0;
-};
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`@property --_bottom-sheet-height { syntax: "<length>"; inherits: false; initial-value: 50vh; } m3e-bottom-sheet > [slot="header"] { margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); }</length>`.toString());
-    document.adoptedStyleSheets.push(lightDomStyle);
-  }
+  registerStyleSheet$1(css`@property --_bottom-sheet-height { syntax: "<length>"; inherits: false; initial-value: 50vh; } m3e-bottom-sheet > [slot="header"] { margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); }</length>`);
 })();
 /** The styles of the element. */
 M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standardDecelerate},
@@ -3612,187 +3637,1251 @@ __decorate([queryAssignedElements({
 })], M3eButtonGroupElement.prototype, "buttons", void 0);
 M3eButtonGroupElement = __decorate([customElement$1("m3e-button-group")], M3eButtonGroupElement);
 
-/**
- * Component design tokens for `M3eCardElement`.
- * @internal
- */
-const CardToken = {
-  padding: unsafeCSS("var(--m3e-card-padding, 1rem)"),
-  shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken$1.shape.corner.medium});`)
-};
+/** @private */
+function createDateWithOverflow(year, month, day) {
+  const date = new Date();
+  date.setFullYear(year, month, day);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+/** @private */
+function getStartingYear(minDate, maxDate) {
+  if (maxDate) {
+    return maxDate.getFullYear() - YEARS_PER_PAGE + 1;
+  } else if (minDate) {
+    return minDate.getFullYear();
+  }
+  return 0;
+}
+/** @private */
+function euclideanModulo(a, b) {
+  return (a % b + b) % b;
+}
+/** @internal */
+function addCalendarDays(date, days) {
+  return createDateWithOverflow(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+/** @internal */
+function addCalendarMonths(date, months) {
+  let newDate = createDateWithOverflow(date.getFullYear(), date.getMonth() + months, date.getDate());
+  if (newDate.getMonth() != ((date.getMonth() + months) % 12 + 12) % 12) {
+    newDate = createDateWithOverflow(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+  return newDate;
+}
+/** @internal */
+function addCalendarYears(date, years) {
+  return addCalendarMonths(date, years * 12);
+}
+/** @internal */
+function getNumDaysInMonth(date) {
+  return createDateWithOverflow(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+}
+/** @internal */
+function compareDate(first, second) {
+  return first.getFullYear() - second.getFullYear() || first.getMonth() - second.getMonth() || first.getDate() - second.getDate();
+}
+/** @internal */
+function sameDate(first, second) {
+  return first && second ? compareDate(first, second) == 0 : first == second;
+}
+/** @internal */
+function getActiveOffset(activeDate, minDate, maxDate) {
+  return euclideanModulo(activeDate.getFullYear() - getStartingYear(minDate, maxDate), YEARS_PER_PAGE);
+}
+/** @internal */
+function minYearOfPage(activeDate, minDate, maxDate) {
+  return activeDate.getFullYear() - getActiveOffset(activeDate, minDate, maxDate);
+}
+/** @internal */
+function maxYearOfPage(activeDate, minDate, maxDate) {
+  return minYearOfPage(activeDate, minDate, maxDate) + YEARS_PER_PAGE - 1;
+}
+/** @internal */
+function clampDate(date, minDate, maxDate) {
+  if (minDate && compareDate(date, minDate) < 0) return minDate;
+  if (maxDate && compareDate(date, maxDate) > 0) return maxDate;
+  return date;
+}
+/** @internal */
+const YEARS_PER_PAGE = 15;
+/** @internal */
+const YEARS_PER_ROW = 3;
+/** @internal */
+const MONTHS_PER_ROW = 4;
 
 /**
- * Component design tokens that control the appearance variants of `M3eCardElement`.
+ * A base implementation for a view in a calendar. This class must be inherited.
  * @internal
  */
-const CardVariantToken = {
-  filled: {
-    textColor: unsafeCSS(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
-    containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerHighest}))`),
-    containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level0}))`),
-    disabled: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
-      textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
-      imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
-      containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surfaceVariant}))`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
-      containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
-      containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
-    },
-    hover: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`)
-    },
-    focus: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`)
-    },
-    pressed: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`)
+class CalendarViewElementBase extends LitElement {
+  constructor() {
+    super(...arguments);
+    /** Today's date. */
+    this.today = new Date();
+    /** The selected date. */
+    this.date = null;
+    /** The active date. */
+    this.activeDate = new Date();
+    /** The minimum date that can be selected. */
+    this.minDate = null;
+    /** The maximum date that can be selected. */
+    this.maxDate = null;
+  }
+  /**
+   * Asynchronously focuses the active date.
+   * @returns {Promise<void>} A promise that resolves after the active date has been focused.
+   */
+  async focusActiveCell() {
+    if (this.isUpdatePending) {
+      await this.updateComplete;
     }
-  },
-  elevated: {
-    textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
-    containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
-    containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level1}))`),
-    disabled: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
-      textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
-      imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
-      containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surface}))`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level1}))`),
-      containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
-      containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
-    },
-    hover: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level2}))`)
-    },
-    focus: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level1}))`)
-    },
-    pressed: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`)
+    if (this._activeItem) {
+      await focusWhenReady$1(this._activeItem);
     }
-  },
-  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))"),
-    disabled: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
-      textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
-      imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
-      containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken$1.color.outline}))`),
-      outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`)
-    },
-    hover: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`)
-    },
-    focus: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken$1.color.onSurface}))`)
-    },
-    pressed: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`)
+  }
+  /** @internal */
+  _changeActiveDate(activeDate) {
+    activeDate = clampDate(activeDate, this.minDate, this.maxDate);
+    if (!sameDate(activeDate, this.activeDate)) {
+      this._activeItem?.style.setProperty("--m3e-state-layer-duration", "0ms");
+      this._activeItem?.blur();
+      this._activeItem?.style.removeProperty("--m3e-state-layer-duration");
+      this.activeDate = activeDate;
+      this.dispatchEvent(new Event("active-change", {
+        bubbles: false
+      }));
     }
   }
-};
+}
+/** The styles of the element. */
+CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken$1.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken$1.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken$1.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken$1.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken$1.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken$1.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken$1.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { outline-style: solid; outline-offset: -1px; outline-width: var(--m3e-calendar-item-current-outline-thickness, 1px); outline-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken$1.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).selected { forced-color-adjust: none; color: ButtonFace; } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: ButtonText; } td:has(.item[aria-disabled]) { color: GrayText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: ButtonText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-color: ButtonText; } }`;
+__decorate([query(".active > .item")], CalendarViewElementBase.prototype, "_activeItem", void 0);
+__decorate([property({
+  converter: dateConverter$1
+})], CalendarViewElementBase.prototype, "today", void 0);
+__decorate([property({
+  converter: dateConverter$1
+})], CalendarViewElementBase.prototype, "date", void 0);
+__decorate([property({
+  attribute: "active-date",
+  converter: dateConverter$1
+})], CalendarViewElementBase.prototype, "activeDate", void 0);
+__decorate([property({
+  attribute: "min-date",
+  converter: dateConverter$1
+})], CalendarViewElementBase.prototype, "minDate", void 0);
+__decorate([property({
+  attribute: "max-date",
+  converter: dateConverter$1
+})], CalendarViewElementBase.prototype, "maxDate", void 0);
 
 /**
- * Baseline styles for `M3eCardElement`.
- * @internal
+ * Adapted from Angular Material Datepicker
+ * Source: https://github.com/angular/components/blob/main/src/material/datepicker/month-view.ts
+ *
+ * @license MIT
+ * Copyright (c) 2025 Google LLC
+ * See LICENSE file in the project root for full license text.
  */
-const CardStyle = css`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${CardToken.shape}; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
-      border-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${CardToken.shape}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${CardToken.padding}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${CardToken.padding}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${CardToken.padding}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${CardToken.padding}; margin-block-start: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${CardToken.padding}; margin-block: ${CardToken.padding}; } .has-actions slot[name="actions"] { margin-inline: ${CardToken.padding}; margin-block: ${CardToken.padding}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${CardToken.padding}; margin-block-end: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${CardToken.padding}; margin-inline-end: ${CardToken.padding}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
-
-/** @private */
-function cardVariantStyle(variant) {
-  return css`:host([variant="${unsafeCSS(variant)}"]) .base { background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS("unset")}; box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]) .base { --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]) .base { border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:focus .base) { border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:hover .base) { border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed { border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]) .base { color: ${CardVariantToken[variant].textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:focus) .base { color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:hover) .base { color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed { color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) .base, :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-color: color-mix( in srgb, ${CardVariantToken[variant].disabled.containerElevationColor} ${CardVariantToken[variant].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity}, transparent ); background-color: ${CardVariantToken[variant].disabled.containerColor && CardVariantToken[variant].disabled.containerOpacity ? unsafeCSS(`color-mix(
-        in srgb,
-        ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},
-        transparent
-      )`) : unsafeCSS("unset")}; border-color: ${CardVariantToken[variant].disabled.outlineColor && CardVariantToken[variant].disabled.outlineOpacity ? unsafeCSS(`color-mix(
-        in srgb,
-        ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},
-        transparent
-      )`) : unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(img), :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(video), :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(video) { opacity: ${CardVariantToken[variant].disabled.imageOpacity}; }`;
-}
+var _M3eMonthViewElement_instances, _M3eMonthViewElement_renderItem, _M3eMonthViewElement_handleItemClick, _M3eMonthViewElement_handleItemKeyDown, _M3eMonthViewElement_handleItemMouseEnter, _M3eMonthViewElement_handleItemFocus, _M3eMonthViewElement_setRangeHighlight, _M3eMonthViewElement_clearRangeHighlight;
 /**
- * Appearance variant styles for `M3eCardElement`.
+ * An internal component used to display a single month in a calendar.
  * @internal
  */
-const CardVariantStyle = [cardVariantStyle("filled"), cardVariantStyle("elevated"), cardVariantStyle("outlined")];
-
-var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_handleHeaderSlotChange, _M3eCardElement_handleContentSlotChange, _M3eCardElement_handleDefaultSlotChange, _M3eCardElement_handleActionsSlotChange, _M3eCardElement_handleFooterSlotChange, _M3eCardElement_handleClick;
-/**
- * A content container for text, images (or other media), and actions in the context of a single subject.
- *
- * @description
- * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,
- * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the
- * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),
- * and `elevated` (for depth and motion with shadow elevation).
- *
- * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be
- * presented inline with surrounding content using the `inline` attribute.
- *
- * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is
- * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default
- * slot for custom layouts.
- *
- * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states
- * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,
- * and a cohesive user experience in accordance with Material Design 3 guidelines.
- *
- * @example
- * The following example illustrates each of the dedicated slots of a card.
- * ```html
- * <m3e-card>
- *  <div slot="header">Header section</div>
- *  <div slot="content">Content section</div>
- *  <div slot="actions">Actions section</div>
- *  <div slot="footer">Footer section</div>
- * </m3e-card>
- * ```
- *
- * @tag m3e-card
- *
- * @slot - Renders the content of the card without padding.
- * @slot header - Renders the header of the card.
+let M3eMonthViewElement = class M3eMonthViewElement extends CalendarViewElementBase {
+  constructor() {
+    super(...arguments);
+    _M3eMonthViewElement_instances.add(this);
+    /** @internal */
+    this._suppressFocusHighlight = true;
+    /** Start of a date range. */
+    this.rangeStart = null;
+    /** End of a date range. */
+    this.rangeEnd = null;
+    /** A function used to determine whether a date cannot be selected. */
+    this.blackoutDates = null;
+    /** A function used to determine whether a date is special. */
+    this.specialDates = null;
+  }
+  /** @inheritdoc */
+  render() {
+    const date = new Date(this.today);
+    date.setDate(1);
+    while (date.getDay() != 0) {
+      date.setDate(date.getDate() + 1);
+    }
+    const weekdays = new Array();
+    const narrowFormat = new Intl.DateTimeFormat(navigator.language, {
+      weekday: "narrow"
+    });
+    const longFormat = new Intl.DateTimeFormat(navigator.language, {
+      weekday: "long"
+    });
+    for (let i = 0; i < 7; i++) {
+      weekdays.push({
+        id: i,
+        narrow: narrowFormat.format(date),
+        long: longFormat.format(date)
+      });
+      date.setDate(date.getDate() + 1);
+    }
+    const year = this.activeDate.getFullYear();
+    const month = this.activeDate.getMonth();
+    const firstDate = new Date(year, month, 1);
+    const lastDate = new Date(year, month + 1, 0);
+    const numDays = lastDate.getDate();
+    let weeks = [];
+    let dayOfWeek = firstDate.getDay();
+    for (let i = 1; i <= numDays; i++) {
+      if (dayOfWeek === 0 || weeks.length === 0) {
+        weeks.push([]);
+      }
+      weeks[weeks.length - 1].push(i);
+      dayOfWeek = (dayOfWeek + 1) % 7;
+    }
+    weeks = weeks.filter(x => !!x.length);
+    return html`<table role="grid"><thead><tr>${weekdays.map(x => html`<th scope="col"><span class="visually-hidden">${x.long}</span><div id="weekday-${x.id}-month-${month}" aria-hidden="true">${x.narrow}</div><m3e-tooltip for="weekday-${x.id}-month-${month}">${x.long}</m3e-tooltip></th>`)}</tr></thead><tbody>${weeks.map((row, i) => html`<tr role="row">${i === 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing} ${row.map(y => __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_renderItem).call(this, new Date(year, month, y)))} ${i > 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing}</tr>`)}</tbody></table>`;
+  }
+};
+_M3eMonthViewElement_instances = new WeakSet();
+_M3eMonthViewElement_renderItem = function _M3eMonthViewElement_renderItem(value) {
+  const long = new Intl.DateTimeFormat(navigator.language, {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }).format(value);
+  const special = this.specialDates?.(value) ?? false;
+  const selected = sameDate(this.date, value);
+  const active = sameDate(this.activeDate, value);
+  const current = sameDate(this.today, value);
+  const disabled = this.minDate && compareDate(value, this.minDate) < 0 || this.maxDate && compareDate(value, this.maxDate) > 0 || this.blackoutDates?.(value) === true;
+  const id = `date-${value.getMonth()}-${value.getDate()}-${value.getFullYear()}`;
+  let range = false,
+    rangeStart = false,
+    rangeEnd = false,
+    rangeStartRange = false;
+  if (this.rangeStart) {
+    if (!this.rangeEnd) {
+      rangeStart = sameDate(value, this.rangeStart);
+    } else {
+      range = compareDate(value, this.rangeStart) > 0 && compareDate(value, this.rangeEnd) < 0;
+      if (!range) {
+        rangeStart = compareDate(value, this.rangeStart) >= 0 && compareDate(value, this.rangeEnd) < 0;
+        if (!rangeStart) {
+          rangeEnd = compareDate(value, this.rangeStart) > 0 && compareDate(value, this.rangeEnd) <= 0;
+        } else {
+          rangeStartRange = true;
+        }
+      }
+    }
+  }
+  return html`<td role="gridcell" class="${classMap({
+    current,
+    selected,
+    active,
+    special,
+    range,
+    "range-start": rangeStart,
+    "range-start-range": rangeStartRange,
+    "range-end": rangeEnd
+  })}"><div id="${id}" role="button" class="item" data-value="${value.toISOString()}" tabindex="${active ? "0" : "-1"}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected || rangeStart || rangeEnd}" @click="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleItemClick)}" @mouseenter="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleItemMouseEnter)}" @focus="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleItemFocus)}" @mouseleave="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight)}" @blur="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight)}" @keydown="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleItemKeyDown)}"><m3e-focus-ring class="focus-ring" for="${id}"></m3e-focus-ring><m3e-state-layer class="state-layer" for="${id}" ?disable-hover="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered for="${id}" ?disabled="${disabled}"></m3e-ripple><div class="touch"></div><span class="visually-hidden">${long}</span> <span aria-hidden="true">${value.getDate()}</span></div></td>`;
+};
+_M3eMonthViewElement_handleItemClick = function _M3eMonthViewElement_handleItemClick(e) {
+  const item = e.currentTarget;
+  if (item.ariaDisabled === "true" || !item.dataset["value"]) return;
+  this.activeDate = new Date(item.dataset["value"]);
+  this.activeDate = clampDate(this.activeDate, this.minDate, this.maxDate);
+  if (this.rangeStart) {
+    if (compareDate(this.activeDate, this.rangeStart) < 0) {
+      this.rangeStart = this.activeDate;
+      this.rangeEnd = null;
+    } else {
+      this.rangeEnd = this.activeDate;
+    }
+    __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight).call(this);
+  }
+  this.dispatchEvent(new Event("change", {
+    bubbles: false
+  }));
+};
+_M3eMonthViewElement_handleItemKeyDown = function _M3eMonthViewElement_handleItemKeyDown(e) {
+  let activeDate = this.activeDate;
+  switch (e.key) {
+    case " ":
+    case "Enter":
+      e.preventDefault();
+      e.currentTarget.click();
+      return;
+    case "ArrowLeft":
+    case "Left":
+      activeDate = addCalendarDays(activeDate, M3eDirectionality.current === "rtl" ? 1 : -1);
+      break;
+    case "ArrowRight":
+    case "Right":
+      activeDate = addCalendarDays(activeDate, M3eDirectionality.current === "rtl" ? -1 : 1);
+      break;
+    case "ArrowUp":
+    case "Up":
+      activeDate = addCalendarDays(activeDate, -7);
+      break;
+    case "ArrowDown":
+    case "Down":
+      activeDate = addCalendarDays(activeDate, 7);
+      break;
+    case "Home":
+      activeDate = addCalendarDays(activeDate, 1 - activeDate.getDate());
+      break;
+    case "End":
+      activeDate = addCalendarDays(activeDate, getNumDaysInMonth(activeDate) - activeDate.getDate());
+      break;
+    case "PageUp":
+      activeDate = e.altKey ? addCalendarYears(activeDate, -1) : addCalendarMonths(activeDate, -1);
+      break;
+    case "PageDown":
+      activeDate = e.altKey ? addCalendarYears(activeDate, 1) : addCalendarMonths(activeDate, 1);
+      break;
+    default:
+      return;
+  }
+  e.preventDefault();
+  this._changeActiveDate(activeDate);
+};
+_M3eMonthViewElement_handleItemMouseEnter = function _M3eMonthViewElement_handleItemMouseEnter(e) {
+  __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_setRangeHighlight).call(this, e.currentTarget);
+};
+_M3eMonthViewElement_handleItemFocus = function _M3eMonthViewElement_handleItemFocus(e) {
+  if (!this._suppressFocusHighlight) {
+    __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_setRangeHighlight).call(this, e.currentTarget);
+  }
+};
+_M3eMonthViewElement_setRangeHighlight = function _M3eMonthViewElement_setRangeHighlight(item) {
+  __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight).call(this);
+  if (this.rangeStart && item.dataset["value"]) {
+    if (compareDate(new Date(item.dataset["value"]), this.rangeStart) > 0) {
+      item.parentElement.classList.add("range-highlight-end");
+    }
+    for (const cell of item.closest("table")?.querySelectorAll(".item") ?? []) {
+      if (cell === item) break;
+      const value = new Date(cell.dataset["value"]);
+      if (compareDate(value, this.rangeStart) > 0) {
+        cell.parentElement.classList.add("range-highlight");
+      } else if (compareDate(value, this.rangeStart) >= 0) {
+        cell.parentElement.classList.add("range-highlight-start");
+      }
+    }
+  }
+};
+_M3eMonthViewElement_clearRangeHighlight = function _M3eMonthViewElement_clearRangeHighlight() {
+  if (this.rangeStart) {
+    this.shadowRoot?.querySelectorAll(".range-highlight,.range-highlight-end,.range-highlight-start").forEach(x => x.classList.remove("range-highlight", "range-highlight-end", "range-highlight-start"));
+  }
+};
+/** The styles of the element. */
+M3eMonthViewElement.styles = [CalendarViewElementBase.styles, css`thead { font-size: var(--m3e-calendar-weekday-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); } th { height: 1.5rem; padding-block-start: 1.875rem; padding-block-end: 1rem; } tbody { font-size: var(--m3e-calendar-date-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special { color: var(--m3e-calendar-item-special-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special .state-layer { background-color: var(--m3e-calendar-item-special-container-color, ${DesignToken$1.color.tertiaryContainer}); } td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { color: var(--m3e-calendar-item-selected-color, ${DesignToken$1.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken$1.color.onPrimary}); } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken$1.color.primary}); } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; bottom: 0.25rem; background-color: var(--m3e-calendar-range-container-color, ${DesignToken$1.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken$1.color.onPrimaryContainer}); } td:not(:has(.item[aria-disabled])).range-start::before { inset-inline-start: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-end::before { inset-inline-end: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { content: ""; position: absolute; top: 0; left: calc(0px - 0.1875rem); right: calc(0px - 0.1875rem); bottom: 0; border-style: dashed; border-color: ${DesignToken$1.color.primary}; border-width: 1px; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after { margin-inline-start: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { margin-inline-end: 0.1875rem; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after { border-inline-style: none; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-start-end-radius: ${DesignToken$1.shape.corner.full}; border-end-end-radius: ${DesignToken$1.shape.corner.full}; border-inline-start-style: none; } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: Highlight; } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { background-color: Highlight; } td:not(:has(.item[aria-disabled])):not(.selected).range { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-color: GrayText; } }`];
+__decorate([property({
+  attribute: "range-start",
+  converter: dateConverter$1
+})], M3eMonthViewElement.prototype, "rangeStart", void 0);
+__decorate([property({
+  attribute: "range-end",
+  converter: dateConverter$1
+})], M3eMonthViewElement.prototype, "rangeEnd", void 0);
+__decorate([property({
+  attribute: false
+})], M3eMonthViewElement.prototype, "blackoutDates", void 0);
+__decorate([property({
+  attribute: false
+})], M3eMonthViewElement.prototype, "specialDates", void 0);
+M3eMonthViewElement = __decorate([customElement$1("m3e-month-view")], M3eMonthViewElement);
+
+/**
+ * Adapted from Angular Material Datepicker
+ * Source: https://github.com/angular/components/blob/main/src/material/datepicker/multi-year-view.ts
+ *
+ * @license MIT
+ * Copyright (c) 2025 Google LLC
+ * See LICENSE file in the project root for full license text.
+ */
+var _M3eMultiYearViewElement_instances, _M3eMultiYearViewElement_renderItem, _M3eMultiYearViewElement_handleItemClick, _M3eMultiYearViewElement_handleItemKeyDown;
+/**
+ * An internal component used to display a year selector in a calendar.
+ * @internal
+ */
+let M3eMultiYearViewElement = class M3eMultiYearViewElement extends CalendarViewElementBase {
+  constructor() {
+    super(...arguments);
+    _M3eMultiYearViewElement_instances.add(this);
+  }
+  /** @inheritdoc */
+  render() {
+    const years = new Array();
+    const minYear = minYearOfPage(this.activeDate, this.minDate, this.maxDate);
+    for (let i = 0, row = []; i < YEARS_PER_PAGE; i++) {
+      row.push(minYear + i);
+      if (row.length === YEARS_PER_ROW) {
+        years.push(row);
+        row = new Array();
+      }
+    }
+    return html`<table role="grid"><thead aria-hidden="true"><tr><th colspan="${YEARS_PER_ROW}"></th></tr></thead><tbody>${years.map(row => html`<tr role="row">${row.map(year => __classPrivateFieldGet(this, _M3eMultiYearViewElement_instances, "m", _M3eMultiYearViewElement_renderItem).call(this, year))}</tr>`)}</tbody></table>`;
+  }
+};
+_M3eMultiYearViewElement_instances = new WeakSet();
+_M3eMultiYearViewElement_renderItem = function _M3eMultiYearViewElement_renderItem(year) {
+  const yearFormat = new Intl.DateTimeFormat(navigator.language, {
+    year: "numeric"
+  });
+  const active = this.activeDate.getFullYear() === year;
+  const selected = this.date?.getFullYear() === year;
+  const current = this.today.getFullYear() === year;
+  const disabled = this.minDate && year < this.minDate.getFullYear() || this.maxDate && year > this.maxDate.getFullYear();
+  const id = `year-${year}`;
+  return html`<td role="gridcell" class="${classMap({
+    current,
+    selected,
+    active
+  })}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${year}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected}" @click="${__classPrivateFieldGet(this, _M3eMultiYearViewElement_instances, "m", _M3eMultiYearViewElement_handleItemClick)}" @keydown="${__classPrivateFieldGet(this, _M3eMultiYearViewElement_instances, "m", _M3eMultiYearViewElement_handleItemKeyDown)}"><m3e-focus-ring class="focus-ring" for="${id}"></m3e-focus-ring><m3e-state-layer class="state-layer" for="${id}" ?disable-hover="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" for="${id}" centered ?disabled="${disabled}"></m3e-ripple><div class="touch"></div><span>${yearFormat.format(new Date(year, 0, 1))}</span></div></td>`;
+};
+_M3eMultiYearViewElement_handleItemClick = function _M3eMultiYearViewElement_handleItemClick(e) {
+  const item = e.currentTarget;
+  if (item.ariaDisabled === "true" || !item.dataset["value"]) return;
+  this.activeDate = new Date(this.activeDate);
+  this.activeDate.setFullYear(Number(item.dataset["value"]));
+  this.activeDate = clampDate(this.activeDate, this.minDate, this.maxDate);
+  this.dispatchEvent(new Event("change", {
+    bubbles: false
+  }));
+};
+_M3eMultiYearViewElement_handleItemKeyDown = function _M3eMultiYearViewElement_handleItemKeyDown(e) {
+  let activeDate = this.activeDate;
+  switch (e.key) {
+    case " ":
+    case "Enter":
+      e.preventDefault();
+      e.currentTarget.click();
+      return;
+    case "ArrowLeft":
+    case "Left":
+      activeDate = addCalendarYears(activeDate, M3eDirectionality.current === "rtl" ? 1 : -1);
+      break;
+    case "ArrowRight":
+    case "Right":
+      activeDate = addCalendarYears(activeDate, M3eDirectionality.current === "rtl" ? -1 : 1);
+      break;
+    case "ArrowUp":
+    case "Up":
+      activeDate = addCalendarYears(activeDate, -YEARS_PER_ROW);
+      break;
+    case "ArrowDown":
+    case "Down":
+      activeDate = addCalendarYears(activeDate, YEARS_PER_ROW);
+      break;
+    case "Home":
+      activeDate = addCalendarYears(activeDate, -getActiveOffset(activeDate, this.minDate, this.maxDate));
+      break;
+    case "End":
+      activeDate = addCalendarYears(activeDate, YEARS_PER_PAGE - getActiveOffset(activeDate, this.minDate, this.maxDate) - 1);
+      break;
+    case "PageUp":
+      activeDate = addCalendarYears(activeDate, e.altKey ? -YEARS_PER_PAGE * 10 : -YEARS_PER_PAGE);
+      break;
+    case "PageDown":
+      activeDate = addCalendarYears(activeDate, e.altKey ? YEARS_PER_PAGE * 10 : YEARS_PER_PAGE);
+      break;
+    default:
+      return;
+  }
+  e.preventDefault();
+  this._changeActiveDate(activeDate);
+};
+/** The styles of the element. */
+M3eMultiYearViewElement.styles = [CalendarViewElementBase.styles, css`.item { height: 2.25rem; } .touch { width: 100%; } th { height: 1rem; } td { padding-inline: 1rem; } tbody { font-size: var(--m3e-calendar-item-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-item-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-item-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-item-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); }`];
+M3eMultiYearViewElement = __decorate([customElement$1("m3e-multi-year-view")], M3eMultiYearViewElement);
+
+/**
+ * Adapted from Angular Material Datepicker
+ * Source: https://github.com/angular/components/blob/main/src/material/datepicker/year-view.ts
+ *
+ * @license MIT
+ * Copyright (c) 2025 Google LLC
+ * See LICENSE file in the project root for full license text.
+ */
+var _M3eYearViewElement_instances, _M3eYearViewElement_renderItem, _M3eYearViewElement_handleItemClick, _M3eYearViewElement_handleItemKeyDown;
+/**
+ * An internal component used to display a single year in a calendar.
+ * @internal
+ */
+let M3eYearViewElement = class M3eYearViewElement extends CalendarViewElementBase {
+  constructor() {
+    super(...arguments);
+    _M3eYearViewElement_instances.add(this);
+  }
+  /** @inheritdoc */
+  render() {
+    const months = new Array();
+    const shortFormat = new Intl.DateTimeFormat(navigator.language, {
+      month: "short"
+    });
+    const longFormat = new Intl.DateTimeFormat(navigator.language, {
+      month: "long"
+    });
+    const year = this.activeDate.getFullYear();
+    for (let month = 0, row = new Array(); month < 12; month++) {
+      const date = new Date(year, month, 1);
+      row.push({
+        narrow: shortFormat.format(date),
+        long: longFormat.format(date),
+        date: date
+      });
+      if (row.length == MONTHS_PER_ROW) {
+        months.push(row);
+        row = [];
+      }
+    }
+    return html`<table role="grid"><thead aria-hidden="true"><tr><th colspan="${MONTHS_PER_ROW}"></th></tr></thead><tbody>${months.map(row => html`<tr role="row">${row.map(month => __classPrivateFieldGet(this, _M3eYearViewElement_instances, "m", _M3eYearViewElement_renderItem).call(this, month))}</tr>`)}</tbody></table>`;
+  }
+};
+_M3eYearViewElement_instances = new WeakSet();
+_M3eYearViewElement_renderItem = function _M3eYearViewElement_renderItem(month) {
+  const active = this.activeDate.getFullYear() === month.date.getFullYear() && this.activeDate.getMonth() === month.date.getMonth();
+  const selected = this.date?.getFullYear() === month.date.getFullYear() && this.date?.getMonth() === month.date.getMonth();
+  const current = this.today.getFullYear() === month.date.getFullYear() && this.today.getMonth() === month.date.getMonth();
+  const disabled = this.minDate && (month.date.getFullYear() < this.minDate.getFullYear() || month.date.getFullYear() === this.minDate.getFullYear() && month.date.getMonth() < this.minDate.getMonth()) || this.maxDate && (month.date.getFullYear() > this.maxDate.getFullYear() || month.date.getFullYear() === this.maxDate.getFullYear() && month.date.getMonth() > this.maxDate.getMonth());
+  const id = `month-${month.date.getMonth()}`;
+  return html`<td role="gridcell" class="${classMap({
+    current,
+    selected,
+    active
+  })}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${month.date.toISOString()}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected}" @click="${__classPrivateFieldGet(this, _M3eYearViewElement_instances, "m", _M3eYearViewElement_handleItemClick)}" @keydown="${__classPrivateFieldGet(this, _M3eYearViewElement_instances, "m", _M3eYearViewElement_handleItemKeyDown)}"><m3e-focus-ring class="focus-ring" for="${id}"></m3e-focus-ring><m3e-state-layer class="state-layer" for="${id}" ?disable-hover="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered for="${id}" ?disabled="${disabled}"></m3e-ripple><div class="touch"></div><span class="visually-hidden">${month.long}</span> <span aria-hidden="true">${month.narrow}</span></div></td>`;
+};
+_M3eYearViewElement_handleItemClick = function _M3eYearViewElement_handleItemClick(e) {
+  const item = e.currentTarget;
+  if (item.ariaDisabled === "true" || !item.dataset["value"]) return;
+  this.activeDate = clampDate(new Date(item.dataset["value"]), this.minDate, this.maxDate);
+  this.dispatchEvent(new Event("change", {
+    bubbles: false
+  }));
+};
+_M3eYearViewElement_handleItemKeyDown = function _M3eYearViewElement_handleItemKeyDown(e) {
+  let activeDate = this.activeDate;
+  switch (e.key) {
+    case " ":
+    case "Enter":
+      e.preventDefault();
+      e.currentTarget.click();
+      return;
+    case "ArrowLeft":
+    case "Left":
+      activeDate = addCalendarMonths(activeDate, M3eDirectionality.current === "rtl" ? 1 : -1);
+      break;
+    case "ArrowRight":
+    case "Right":
+      activeDate = addCalendarMonths(activeDate, M3eDirectionality.current === "rtl" ? -1 : 1);
+      break;
+    case "ArrowUp":
+    case "Up":
+      activeDate = addCalendarMonths(activeDate, -4);
+      break;
+    case "ArrowDown":
+    case "Down":
+      activeDate = addCalendarMonths(activeDate, 4);
+      break;
+    case "Home":
+      activeDate = addCalendarMonths(activeDate, -activeDate.getMonth());
+      break;
+    case "End":
+      activeDate = addCalendarMonths(activeDate, 11 - activeDate.getMonth());
+      break;
+    case "PageUp":
+      activeDate = addCalendarYears(activeDate, e.altKey ? -10 : -1);
+      break;
+    case "PageDown":
+      activeDate = addCalendarYears(activeDate, e.altKey ? 10 : 1);
+      break;
+    default:
+      return;
+  }
+  e.preventDefault();
+  this._changeActiveDate(activeDate);
+};
+/** The styles of the element. */
+M3eYearViewElement.styles = [CalendarViewElementBase.styles, css`.item { height: 2.25rem; } .touch { width: 100%; } th { height: 1rem; } td { padding-inline: 0.375rem; } tbody { font-size: var(--m3e-calendar-item-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-item-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-item-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-item-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); }`];
+M3eYearViewElement = __decorate([customElement$1("m3e-year-view")], M3eYearViewElement);
+
+/**
+ * Adapted from Angular Material Datepicker
+ * Source: https://github.com/angular/components/blob/main/src/material/datepicker/calendar.ts
+ *
+ * @license MIT
+ * Copyright (c) 2025 Google LLC
+ * See LICENSE file in the project root for full license text.
+ */
+var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eCalendarElement_renderHeader, _M3eCalendarElement_renderView, _M3eCalendarElement_handleDateChange, _M3eCalendarElement_handleMonthChange, _M3eCalendarElement_handleYearChange, _M3eCalendarElement_handleActiveChange, _M3eCalendarElement_getPreviousPeriod, _M3eCalendarElement_getNextPeriod;
+/**
+ * A calendar used to select a date.
+ *
+ * @description
+ * The `m3e-calendar` component provides structured navigation and selection across
+ * month, year, and multi‑year views. It supports single‑date and range selection,
+ * applies disabled rules including minimum, maximum, and blackout constraints, and
+ * provides styling hooks for special date states.
+ *
+ * @example
+ * The following example illustrates use of the `m3e-calendar`. In this example, a calendar is displayed
+ * with a selected date.
+ *
+ * ```html
+ * <m3e-calendar date="2025-12-13"></m3e-calendar>
+ * ```
+ *
+ * @tag m3e-calendar
+ *
+ * @slot header - Renders the header of the calendar.
+ *
+ * @attr date - The selected date.
+ * @attr max-date - The maximum date that can be selected.
+ * @attr min-date - The minimum date that can be selected.
+ * @attr range-end - End of a date range.
+ * @attr range-start - Start of a date range.
+ * @attr start-at - A date specifying the period (month or year) to start the calendar in.
+ * @attr start-view - The initial view used to select a date.
+ * @attr previous-month-label - The accessible label given to the button used to move to the previous month.
+ * @attr next-month-label - The accessible label given to the button used to move to the next month.
+ * @attr previous-year-label - The accessible label given to the button used to move to the previous year.
+ * @attr next-year-label - The accessible label given to the button used to move to the next year.
+ * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.
+ * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.
+ *
+ * @fires change - Emitted when the selected date changes.
+ *
+ * @cssprop --m3e-calendar-container-color - Background color of the container surface.
+ * @cssprop --m3e-calendar-container-elevation - Elevation shadow applied to the container surface.
+ * @cssprop --m3e-calendar-container-shape - Corner radius of the container surface.
+ * @cssprop --m3e-calendar-padding - Padding applied to the calendar header and body.
+ * @cssprop --m3e-calendar-period-button-text-color - Text color used for the period‑navigation buttons in the header.
+ * @cssprop --m3e-calendar-weekday-font-size - Font size of weekday labels in month view.
+ * @cssprop --m3e-calendar-weekday-font-weight - Font weight of weekday labels in month view.
+ * @cssprop --m3e-calendar-weekday-line-height - Line height of weekday labels in month view.
+ * @cssprop --m3e-calendar-weekday-tracking - Letter spacing of weekday labels in month view.
+ * @cssprop --m3e-calendar-date-font-size - Font size of date cells in month view.
+ * @cssprop --m3e-calendar-date-font-weight - Font weight of date cells in month view.
+ * @cssprop --m3e-calendar-date-line-height - Line height of date cells in month view.
+ * @cssprop --m3e-calendar-date-tracking - Letter spacing of date cells in month view.
+ * @cssprop --m3e-calendar-item-font-size - Font size of items in year and multi‑year views.
+ * @cssprop --m3e-calendar-item-font-weight - Font weight of items in year and multi‑year views.
+ * @cssprop --m3e-calendar-item-line-height - Line height of items in year and multi‑year views.
+ * @cssprop --m3e-calendar-item-tracking - Letter spacing of items in year and multi‑year views.
+ * @cssprop --m3e-calendar-item-selected-color - Text color for selected date items.
+ * @cssprop --m3e-calendar-item-selected-container-color - Background color for selected date items.
+ * @cssprop --m3e-calendar-item-selected-ripple-color - Ripple color used when interacting with selected date items.
+ * @cssprop --m3e-calendar-item-selected-hover-color - Hover color used when interacting with selected date items.
+ * @cssprop --m3e-calendar-item-selected-focus-color - Focus color used when interacting with selected date items.
+ * @cssprop --m3e-calendar-item-current-outline-thickness - Outline thickness used to indicate the current date.
+ * @cssprop --m3e-calendar-item-current-outline-color - Outline color used to indicate the current date.
+ * @cssprop --m3e-calendar-item-special-color - Text color for dates marked as special.
+ * @cssprop --m3e-calendar-item-special-container-color - Background color for dates marked as special.
+ * @cssprop --m3e-calendar-item-special-ripple-color - Ripple color used when interacting with dates marked as special.
+ * @cssprop --m3e-calendar-item-special-hover-color - Hover color used when interacting with dates marked as special.
+ * @cssprop --m3e-calendar-item-special-focus-color - Focus color used when interacting with dates marked as special.
+ * @cssprop --m3e-calendar-range-container-color - Background color applied to the selected date range.
+ * @cssprop --m3e-calendar-range-color - Text color for dates within a selected range.
+ * @cssprop --m3e-calendar-item-disabled-color - Color used for disabled date items.
+ * @cssprop --m3e-calendar-item-disabled-color-opacity - Opacity applied to the disabled item color.
+ * @cssprop --m3e-calendar-slide-animation-duration - Duration of slide transitions between calendar views.
+ */
+let M3eCalendarElement = class M3eCalendarElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    _M3eCalendarElement_instances.add(this);
+    /** @private */
+    _M3eCalendarElement_transitionComplete.set(this, void 0);
+    /** @private */
+    this._today = new Date();
+    /** @private */
+    this._activeView = "month";
+    /** @private */
+    this._activeDate = new Date();
+    /**
+     * The initial view used to select a date.
+     * @default "month"
+     */
+    this.startView = "month";
+    /**
+     * The selected date.
+     * @default null
+     */
+    this.date = null;
+    /**
+     * A date specifying the period (month or year) to start the calendar in.
+     * @default null
+     */
+    this.startAt = null;
+    /**
+     * The minimum date that can be selected.
+     * @default null
+     */
+    this.minDate = null;
+    /**
+     * The maximum date that can be selected.
+     * @default null
+     */
+    this.maxDate = null;
+    /**
+     * Start of a date range.
+     * @default null
+     */
+    this.rangeStart = null;
+    /**
+     * End of a date range.
+     * @default null
+     */
+    this.rangeEnd = null;
+    /**
+     * A function used to determine whether a date cannot be selected.
+     * @default null
+     */
+    this.blackoutDates = null;
+    /**
+     * A function used to determine whether a date is special.
+     * @default null
+     */
+    this.specialDates = null;
+    /**
+     * The accessible label given to the button used to move to the previous month.
+     * @default "Previous month"
+     */
+    this.previousMonthLabel = "Previous month";
+    /**
+     * The accessible label given to the button used to move to the previous year.
+     * @default "Previous year"
+     */
+    this.previousYearLabel = "Previous year";
+    /**
+     * The accessible label given to the button used to move to the previous 24 years.
+     * @default "Previous 24 years"
+     */
+    this.previousMultiYearLabel = "Previous 24 years";
+    /**
+     * The accessible label given to the button used to move to the next month.
+     * @default "Next month"
+     */
+    this.nextMonthLabel = "Next month";
+    /**
+     * The accessible label given to the button used to move to the next year.
+     * @default "Next year"
+     */
+    this.nextYearLabel = "Next year";
+    /**
+     * The accessible label given to the button used to move to the next 24 years.
+     * @default "Next 24 years"
+     */
+    this.nextMultiYearLabel = "Next 24 years";
+  }
+  /** The label to present for the current period. */
+  get periodLabel() {
+    switch (this._activeView) {
+      case "month":
+        return new Intl.DateTimeFormat(navigator.language, {
+          month: "short",
+          year: "numeric"
+        }).format(this._activeDate);
+      case "year":
+        return new Intl.DateTimeFormat(navigator.language, {
+          year: "numeric"
+        }).format(new Date(this._activeDate.getFullYear(), 0, 1));
+      case "multi-year":
+        return new Intl.DateTimeFormat(navigator.language, {
+          year: "numeric"
+        }).formatRange(new Date(minYearOfPage(this._activeDate, this.minDate, this.maxDate), 0, 1), new Date(maxYearOfPage(this._activeDate, this.minDate, this.maxDate), 0, 1));
+    }
+  }
+  /** Whether the calendar can move to the previous period. */
+  get canMovePreviousPeriod() {
+    if (!this.minDate) return true;
+    switch (this._activeView) {
+      case "month":
+        return new Date(this._activeDate.getFullYear(), this._activeDate.getMonth(), 0) >= this.minDate;
+      case "year":
+        return new Date(this._activeDate.getFullYear() - 1, 12, 1) >= this.minDate;
+      case "multi-year":
+        return new Date(minYearOfPage(this._activeDate, this.minDate, this.maxDate) - 1, 12, 1) >= this.minDate;
+    }
+  }
+  /** Whether the calendar can move to the next period. */
+  get canMoveNextPeriod() {
+    if (!this.maxDate) return true;
+    switch (this._activeView) {
+      case "month":
+        return new Date(this._activeDate.getFullYear(), this._activeDate.getMonth() + 1, 1) <= this.maxDate;
+      case "year":
+        return new Date(this._activeDate.getFullYear() + 1, 1, 1) <= this.maxDate;
+      case "multi-year":
+        return new Date(maxYearOfPage(this._activeDate, this.minDate, this.maxDate) + 1, 12, 1) <= this.maxDate;
+    }
+  }
+  /**
+   * Asynchronously focuses the active date.
+   * @returns {Promise<void>} A promise that resolves after the active date has been focused.
+   */
+  async focusActiveCell() {
+    if (this.isUpdatePending) {
+      await this.updateComplete;
+    }
+    await this._view?.focusActiveCell();
+  }
+  /** Updates today's date. */
+  updateTodayDate() {
+    this._today = new Date();
+  }
+  /**
+   * Moves the calendar to the previous period.
+   * @returns {Promise<void>} A promise that resolves when the operation is complete.
+   */
+  async movePreviousPeriod() {
+    if (!this.canMovePreviousPeriod) return;
+    if (prefersReducedMotion$1()) {
+      this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, this._activeView);
+      return;
+    }
+    await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
+    const views = [...(this.shadowRoot?.querySelectorAll(`.row.${this._activeView} .view`) ?? [])];
+    if (views.length != 3) return;
+    __classPrivateFieldSet(this, _M3eCalendarElement_transitionComplete, new Promise(resolve => {
+      views[0].addEventListener("transitionend", () => {
+        this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, this._activeView);
+        views.forEach(x => x.classList.add("no-animate"));
+        views[1].classList.remove("after");
+        views[0].classList.add("before");
+        setTimeout(() => {
+          views.forEach(x => x.classList.remove("no-animate"));
+          resolve();
+        });
+      }, {
+        once: true
+      });
+    }), "f");
+    this._body.style.overflow = "hidden";
+    views[1].classList.add("after");
+    views[0].classList.remove("before");
+    await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
+    this._body.style.overflow = "";
+  }
+  /**
+   * Moves the calendar to the next period.
+   * @returns {Promise<void>} A promise that resolves when the operation is complete.
+   */
+  async moveNextPeriod() {
+    if (!this.canMoveNextPeriod) return;
+    if (prefersReducedMotion$1()) {
+      this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, this._activeView);
+      return;
+    }
+    await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
+    const views = [...(this.shadowRoot?.querySelectorAll(`.row.${this._activeView} .view`) ?? [])];
+    if (views.length != 3) return;
+    __classPrivateFieldSet(this, _M3eCalendarElement_transitionComplete, new Promise(resolve => {
+      views[2].addEventListener("transitionend", () => {
+        this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, this._activeView);
+        views.forEach(x => x.classList.add("no-animate"));
+        views[1].classList.remove("before");
+        views[2].classList.add("after");
+        setTimeout(() => {
+          views.forEach(x => x.classList.remove("no-animate"));
+          resolve();
+        });
+      }, {
+        once: true
+      });
+    }), "f");
+    this._body.style.overflow = "hidden";
+    views[1].classList.add("before");
+    views[2].classList.remove("after");
+    await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
+    this._body.style.overflow = "";
+  }
+  /**
+   * Toggles the current period.
+   * @returns {Promise<void>} A promise that resolves when the operation is complete.
+   */
+  async togglePeriod() {
+    await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
+    this._activeView = this._activeView === "month" ? "multi-year" : "month";
+    await this.focusActiveCell();
+  }
+  /** @inheritdoc */
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("date")) {
+      this._activeDate = new Date(this.date ?? this._today);
+    }
+    if (changedProperties.has("startAt")) {
+      this._activeDate = new Date(this.startAt ?? this.date ?? this._today);
+    }
+    if (changedProperties.has("startView")) {
+      this._activeView = this.startView;
+    }
+  }
+  /** @inheritdoc */
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (this._view instanceof M3eMonthViewElement) {
+      if (_changedProperties.has("specialDates") || _changedProperties.has("blackoutDates")) {
+        this.shadowRoot?.querySelectorAll("m3e-month-view").forEach(x => {
+          x.specialDates = this.specialDates;
+          x.blackoutDates = this.blackoutDates;
+        });
+      }
+    }
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><slot name="header">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderHeader).call(this)}</slot><div class="body ${this._activeView}"><div class="row multi-year">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "multi-year", -1)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "multi-year", 0)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "multi-year", 1)}</div><div class="row year">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "year", -1)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "year", 0)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "year", 1)}</div><div class="row month">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "month", -1)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "month", 0)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "month", 1)}</div></div></div>`;
+  }
+};
+_M3eCalendarElement_transitionComplete = new WeakMap();
+_M3eCalendarElement_instances = new WeakSet();
+_M3eCalendarElement_renderHeader = function _M3eCalendarElement_renderHeader() {
+  return html`<div class="header"><m3e-button @click="${this.togglePeriod}">${this.periodLabel} <svg class="${classMap({
+    rotate: this._activeView !== "month"
+  })}" slot="trailing-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></m3e-button><div class="spacer"></div><m3e-icon-button ?disabled="${!this.canMovePreviousPeriod}" @click="${this.movePreviousPeriod}" aria-label="${this._activeView === "month" ? this.previousMonthLabel : this._activeView === "year" ? this.previousYearLabel : this.previousMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`}</m3e-icon-button><m3e-icon-button ?disabled="${!this.canMoveNextPeriod}" @click="${this.moveNextPeriod}" aria-label="${this._activeView === "month" ? this.nextMonthLabel : this._activeView === "year" ? this.nextYearLabel : this.nextMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`}</m3e-icon-button></div>`;
+};
+_M3eCalendarElement_renderView = function _M3eCalendarElement_renderView(view, offset) {
+  const activeDate = offset < 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, view) : offset > 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, view) : new Date(this._activeDate);
+  switch (view) {
+    case "month":
+      return html`<m3e-month-view class="view ${classMap({
+        before: offset < 0,
+        after: offset > 0,
+        active: view === this._activeView && offset === 0
+      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" range-start="${ifDefined(this.rangeStart?.toISOString())}" range-end="${ifDefined(this.rangeEnd?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleDateChange) : undefined}"></m3e-month-view>`;
+    case "year":
+      return html`<m3e-year-view class="view ${classMap({
+        before: offset < 0,
+        after: offset > 0,
+        active: view === this._activeView && offset === 0
+      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleMonthChange) : undefined}"></m3e-year-view>`;
+    case "multi-year":
+      return html`<m3e-multi-year-view class="view ${classMap({
+        before: offset < 0,
+        after: offset > 0,
+        active: view === this._activeView && offset === 0
+      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleYearChange) : undefined}"></m3e-multi-year-view>`;
+  }
+};
+_M3eCalendarElement_handleDateChange = function _M3eCalendarElement_handleDateChange(e) {
+  const monthView = e.currentTarget;
+  this._activeDate = new Date(monthView.activeDate);
+  this.rangeStart = monthView.rangeStart;
+  this.rangeEnd = monthView.rangeEnd;
+  this.date = new Date(this._activeDate);
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
+};
+_M3eCalendarElement_handleMonthChange = /** @private */
+async function _M3eCalendarElement_handleMonthChange(e) {
+  this._activeDate = new Date(e.currentTarget.activeDate);
+  this._activeView = "month";
+  this.focusActiveCell();
+};
+_M3eCalendarElement_handleYearChange = function _M3eCalendarElement_handleYearChange(e) {
+  this._activeDate = new Date(e.currentTarget.activeDate);
+  this._activeView = "year";
+  this.focusActiveCell();
+};
+_M3eCalendarElement_handleActiveChange = /** @private */
+async function _M3eCalendarElement_handleActiveChange(e) {
+  if (this._view instanceof M3eMonthViewElement) {
+    this._view._suppressFocusHighlight = false;
+  }
+  this._activeDate = new Date(e.currentTarget.activeDate);
+  await this.focusActiveCell();
+  if (this._view instanceof M3eMonthViewElement) {
+    this._view._suppressFocusHighlight = false;
+  }
+};
+_M3eCalendarElement_getPreviousPeriod = function _M3eCalendarElement_getPreviousPeriod(view) {
+  const activeDate = new Date(this._activeDate);
+  switch (view) {
+    case "month":
+      activeDate.setMonth(this._activeDate.getMonth() - 1);
+      while (activeDate.getMonth() === this._activeDate.getMonth()) {
+        activeDate.setDate(activeDate.getDate() - 1);
+      }
+      break;
+    case "year":
+      activeDate.setFullYear(this._activeDate.getFullYear() - 1);
+      break;
+    case "multi-year":
+      {
+        activeDate.setDate(1);
+        activeDate.setFullYear(minYearOfPage(this._activeDate, this.minDate, this.maxDate) - 1);
+      }
+  }
+  return activeDate;
+};
+_M3eCalendarElement_getNextPeriod = function _M3eCalendarElement_getNextPeriod(view) {
+  const activeDate = new Date(this._activeDate);
+  switch (view) {
+    case "month":
+      activeDate.setMonth(this._activeDate.getMonth() + 1);
+      while (activeDate.getMonth() === this._activeDate.getMonth()) {
+        activeDate.setDate(activeDate.getDate() + 1);
+      }
+      break;
+    case "year":
+      activeDate.setFullYear(this._activeDate.getFullYear() + 1);
+      break;
+    case "multi-year":
+      activeDate.setDate(1);
+      activeDate.setFullYear(maxYearOfPage(this._activeDate, this.minDate, this.maxDate) + 1);
+      break;
+  }
+  return activeDate;
+};
+/** The styles of the element. */
+M3eCalendarElement.styles = css`:host { display: inline-block; vertical-align: top; width: fit-content; height: fit-content; } .base { display: flex; flex-direction: column; width: fit-content; overflow: hidden; padding: var(--m3e-calendar-padding, 0.5rem); background-color: var(--m3e-calendar-container-color); box-shadow: var(--m3e-calendar-container-elevation); border-radius: var(--m3e-calendar-container-shape); } .header { display: flex; align-items: center; --m3e-text-button-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken$1.color.onSurfaceVariant} ); --m3e-text-button-hover-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken$1.color.onSurfaceVariant} ); --m3e-text-button-focus-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken$1.color.onSurfaceVariant} ); --m3e-text-button-pressed-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken$1.color.onSurfaceVariant} ); } .spacer { flex: 1 1 auto; } svg { transition: transform ${DesignToken$1.motion.spring.fastEffects}; } svg.rotate { transform: rotate(-180deg); } .body { position: relative; } .view:not(.no-animate) { transition: ${unsafeCSS(`margin var(--m3e-calendar-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
+        visibility var(--m3e-calendar-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .view.before, .view.after { visibility: hidden; position: absolute; } .view.before { margin-inline-start: -100%; } .view.after { margin-inline-start: 100%; } .view:not(.before):not(.after) { visibility: visible; position: relative; left: 0; margin-inline-start: 0; } .row { opacity: 1; transform: translateY(0); } .row.multi-year { transition: ${unsafeCSS(`transform var(--m3e-calendar-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard} allow-discrete,
+        opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .row:not(.multi-year) { transition: ${unsafeCSS(`opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .body.month > .row:not(.month), .body.year > .row:not(.year), .body.multi-year > .row:not(.multi-year) { visibility: hidden; position: absolute; transform: translateY(-10%); opacity: 0; } .body.month > .row:not(.month) .view:not(.before):not(.after), .body.year > .row:not(.year) .view:not(.before):not(.after), .body.multi-year > .row:not(.multi-year) .view:not(.before):not(.after) { visibility: hidden; transition: none; } @media (prefers-reduced-motion) { .row:not(.multi-year), .row.multi-year, .view:not(.no-animate), svg { transition: none; } }`;
+__decorate([state()], M3eCalendarElement.prototype, "_today", void 0);
+__decorate([state()], M3eCalendarElement.prototype, "_activeView", void 0);
+__decorate([state()], M3eCalendarElement.prototype, "_activeDate", void 0);
+__decorate([query(".active")], M3eCalendarElement.prototype, "_view", void 0);
+__decorate([query(".body")], M3eCalendarElement.prototype, "_body", void 0);
+__decorate([property({
+  attribute: "start-view"
+})], M3eCalendarElement.prototype, "startView", void 0);
+__decorate([property({
+  converter: dateConverter$1
+})], M3eCalendarElement.prototype, "date", void 0);
+__decorate([property({
+  attribute: "start-at",
+  converter: dateConverter$1
+})], M3eCalendarElement.prototype, "startAt", void 0);
+__decorate([property({
+  attribute: "min-date",
+  converter: dateConverter$1
+})], M3eCalendarElement.prototype, "minDate", void 0);
+__decorate([property({
+  attribute: "max-date",
+  converter: dateConverter$1
+})], M3eCalendarElement.prototype, "maxDate", void 0);
+__decorate([property({
+  attribute: "range-start",
+  converter: dateConverter$1
+})], M3eCalendarElement.prototype, "rangeStart", void 0);
+__decorate([property({
+  attribute: "range-end",
+  converter: dateConverter$1
+})], M3eCalendarElement.prototype, "rangeEnd", void 0);
+__decorate([property({
+  attribute: false
+})], M3eCalendarElement.prototype, "blackoutDates", void 0);
+__decorate([property({
+  attribute: false
+})], M3eCalendarElement.prototype, "specialDates", void 0);
+__decorate([property({
+  attribute: "previous-month-label"
+})], M3eCalendarElement.prototype, "previousMonthLabel", void 0);
+__decorate([property({
+  attribute: "previous-year-label"
+})], M3eCalendarElement.prototype, "previousYearLabel", void 0);
+__decorate([property({
+  attribute: "previous-multi-year-label"
+})], M3eCalendarElement.prototype, "previousMultiYearLabel", void 0);
+__decorate([property({
+  attribute: "next-month-label"
+})], M3eCalendarElement.prototype, "nextMonthLabel", void 0);
+__decorate([property({
+  attribute: "next-year-label"
+})], M3eCalendarElement.prototype, "nextYearLabel", void 0);
+__decorate([property({
+  attribute: "next-multi-year-label"
+})], M3eCalendarElement.prototype, "nextMultiYearLabel", void 0);
+M3eCalendarElement = __decorate([customElement$1("m3e-calendar")], M3eCalendarElement);
+
+/**
+ * Component design tokens for `M3eCardElement`.
+ * @internal
+ */
+const CardToken = {
+  padding: unsafeCSS("var(--m3e-card-padding, 1rem)"),
+  shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken$1.shape.corner.medium});`)
+};
+
+/**
+ * Component design tokens that control the appearance variants of `M3eCardElement`.
+ * @internal
+ */
+const CardVariantToken = {
+  filled: {
+    textColor: unsafeCSS(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
+    containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerHighest}))`),
+    containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level0}))`),
+    disabled: {
+      textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
+      textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
+      imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
+      containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surfaceVariant}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
+      containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
+      containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
+    },
+    hover: {
+      textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`)
+    },
+    focus: {
+      textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`)
+    },
+    pressed: {
+      textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`)
+    }
+  },
+  elevated: {
+    textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
+    containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
+    containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level1}))`),
+    disabled: {
+      textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
+      textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
+      imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
+      containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surface}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level1}))`),
+      containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
+      containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
+      containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
+    },
+    hover: {
+      textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level2}))`)
+    },
+    focus: {
+      textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level1}))`)
+    },
+    pressed: {
+      textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`)
+    }
+  },
+  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))"),
+    disabled: {
+      textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
+      textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
+      imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
+      containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken$1.color.outline}))`),
+      outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`)
+    },
+    hover: {
+      textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`)
+    },
+    focus: {
+      textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken$1.color.onSurface}))`)
+    },
+    pressed: {
+      textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`)
+    }
+  }
+};
+
+/**
+ * Baseline styles for `M3eCardElement`.
+ * @internal
+ */
+const CardStyle = css`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${CardToken.shape}; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
+      border-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${CardToken.shape}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${CardToken.padding}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${CardToken.padding}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${CardToken.padding}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${CardToken.padding}; margin-block-start: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${CardToken.padding}; margin-block: ${CardToken.padding}; } .has-actions slot[name="actions"] { margin-inline: ${CardToken.padding}; margin-block: ${CardToken.padding}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${CardToken.padding}; margin-block-end: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${CardToken.padding}; margin-inline-end: ${CardToken.padding}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
+
+/** @private */
+function cardVariantStyle(variant) {
+  return css`:host([variant="${unsafeCSS(variant)}"]) .base { background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS("unset")}; box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]) .base { --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]) .base { border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:focus .base) { border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:hover .base) { border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed { border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]) .base { color: ${CardVariantToken[variant].textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:focus) .base { color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:hover) .base { color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed { color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) .base, :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-color: color-mix( in srgb, ${CardVariantToken[variant].disabled.containerElevationColor} ${CardVariantToken[variant].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity}, transparent ); background-color: ${CardVariantToken[variant].disabled.containerColor && CardVariantToken[variant].disabled.containerOpacity ? unsafeCSS(`color-mix(
+        in srgb,
+        ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},
+        transparent
+      )`) : unsafeCSS("unset")}; border-color: ${CardVariantToken[variant].disabled.outlineColor && CardVariantToken[variant].disabled.outlineOpacity ? unsafeCSS(`color-mix(
+        in srgb,
+        ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},
+        transparent
+      )`) : unsafeCSS("unset")}; } :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(img), :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(video), :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(video) { opacity: ${CardVariantToken[variant].disabled.imageOpacity}; }`;
+}
+/**
+ * Appearance variant styles for `M3eCardElement`.
+ * @internal
+ */
+const CardVariantStyle = [cardVariantStyle("filled"), cardVariantStyle("elevated"), cardVariantStyle("outlined")];
+
+var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_handleHeaderSlotChange, _M3eCardElement_handleContentSlotChange, _M3eCardElement_handleDefaultSlotChange, _M3eCardElement_handleActionsSlotChange, _M3eCardElement_handleFooterSlotChange, _M3eCardElement_handleClick;
+/**
+ * A content container for text, images (or other media), and actions in the context of a single subject.
+ *
+ * @description
+ * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,
+ * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the
+ * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),
+ * and `elevated` (for depth and motion with shadow elevation).
+ *
+ * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be
+ * presented inline with surrounding content using the `inline` attribute.
+ *
+ * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is
+ * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default
+ * slot for custom layouts.
+ *
+ * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states
+ * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,
+ * and a cohesive user experience in accordance with Material Design 3 guidelines.
+ *
+ * @example
+ * The following example illustrates each of the dedicated slots of a card.
+ * ```html
+ * <m3e-card>
+ *  <div slot="header">Header section</div>
+ *  <div slot="content">Content section</div>
+ *  <div slot="actions">Actions section</div>
+ *  <div slot="footer">Footer section</div>
+ * </m3e-card>
+ * ```
+ *
+ * @tag m3e-card
+ *
+ * @slot - Renders the content of the card without padding.
+ * @slot header - Renders the header of the card.
  * @slot content - Renders the content of the card with padding.
  * @slot actions - Renders the actions of the card.
  * @slot footer - Renders the footer of the card.
@@ -5125,11 +6214,7 @@ _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_ha
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`);
 })();
 /** The styles of the element. */
 M3eInputChipSetElement.styles = [M3eChipSetElement.styles, css`::slotted([slot="input"]) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(m3e-input-chip) { min-width: 0; } span[role="row"], span[role="gridcell"] { display: contents; }`];
@@ -5780,6 +6865,17 @@ function prefersReducedMotion() {
   return isServer || matchMedia("(prefers-reduced-motion)").matches;
 }
 
+/**
+ * Registers a constructable stylesheet in the document's `adoptedStyleSheets`.
+ * @param css - A `CSSResult` (e.g., from `css```) whose text will be injected into a constructable stylesheet.
+ */
+function registerStyleSheet(css) {
+  if (typeof window === "undefined") return;
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(css.toString());
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+
 /**
  * Resolves an element by ID, waiting for document readiness if needed.
  * @param {string} id - The element ID to resolve.
@@ -6079,6 +7175,46 @@ _HoverController_callback = new WeakMap(), _HoverController_startDelays = new We
   }
 };
 
+var _InertController_host, _InertController_inerts;
+/**
+ * A `ReactiveController` that provides safe, predictable inerting of background
+ * content for modal UI surfaces (dialogs, date pickers, fullscreen search views).
+ */
+class InertController {
+  constructor(host) {
+    /** @private */_InertController_host.set(this, void 0);
+    /** @private */
+    _InertController_inerts.set(this, new Array());
+    __classPrivateFieldSet(this, _InertController_host, host, "f");
+    host.addController(this);
+  }
+  /**
+   * Locks background content by applying inertness to all non‑modal elements,
+   * isolating the active surface from pointer and keyboard interaction.
+   */
+  lock() {
+    this.unlock();
+    for (let current = __classPrivateFieldGet(this, _InertController_host, "f"); current.parentNode && current.parentNode !== document.documentElement; current = current.parentNode) {
+      for (const sibling of current.parentNode.children) {
+        if (sibling instanceof HTMLElement && sibling !== current && !sibling.inert) {
+          sibling.inert = true;
+          __classPrivateFieldGet(this, _InertController_inerts, "f").push(sibling);
+        }
+      }
+    }
+  }
+  /** Restores background interactivity by removing inertness previously applied during `lock()`. */
+  unlock() {
+    __classPrivateFieldGet(this, _InertController_inerts, "f").forEach(x => x.inert = false);
+    __classPrivateFieldGet(this, _InertController_inerts, "f").length = 0;
+  }
+  /** @inheritdoc */
+  hostDisconnected() {
+    this.unlock();
+  }
+}
+_InertController_host = new WeakMap(), _InertController_inerts = new WeakMap();
+
 var _IntersectionController_callback, _IntersectionController_skipInitial, _IntersectionController_observer, _IntersectionController_unobservedUpdate;
 /** A `ReactiveController` used to monitor changes in the intersection of a target element with an ancestor element. */
 class IntersectionController extends MonitorControllerBase {
@@ -6677,6 +7813,55 @@ _ScrollLockController_locked = new WeakMap(), _ScrollLockController_scrollTop =
   return document.documentElement.scrollHeight > document.documentElement.clientHeight;
 };
 
+/** Converts an ISO‑8601 date to and from a `Date` object. */
+const dateConverter = {
+  fromAttribute(value) {
+    if (!value) return null;
+    // Matches all four formats:
+    // yyyy-MM-dd
+    // yyyy-MM-ddTHH:mm:ss
+    // yyyy-MM-ddTHH:mm:ssZ
+    // yyyy-MM-ddTHH:mm:ss±HH:mm
+    const isoRegex = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{3}))?)?(Z|[+-]\d{2}:\d{2})?$/;
+    const m = value.match(isoRegex);
+    if (!m) return null;
+    const year = Number(m[1]);
+    const month = Number(m[2]) - 1; // JS months are 0-based
+    const day = Number(m[3]);
+    const hasTime = m[4] !== undefined;
+    const hours = hasTime ? Number(m[4]) : 0;
+    const minutes = hasTime ? Number(m[5]) : 0;
+    const seconds = hasTime ? Number(m[6]) : 0;
+    const ms = hasTime && m[7] ? Number(m[7]) : 0;
+    const tz = m[8];
+    // CASE 1: yyyy-MM-dd → local date (no timezone math)
+    if (!hasTime && !tz) {
+      return new Date(year, month, day);
+    }
+    // CASE 2: yyyy-MM-ddTHH:mm:ss (no timezone) → local datetime
+    if (hasTime && !tz) {
+      return new Date(year, month, day, hours, minutes, seconds, ms);
+    }
+    // CASE 3: yyyy-MM-ddTHH:mm:ssZ → UTC
+    if (tz === "Z") {
+      return new Date(Date.UTC(year, month, day, hours, minutes, seconds, ms));
+    }
+    // CASE 4: yyyy-MM-ddTHH:mm:ss±HH:mm → offset
+    if (tz && /^[+-]\d{2}:\d{2}$/.test(tz)) {
+      const sign = tz.startsWith("-") ? -1 : 1;
+      const [tzH, tzM] = tz.slice(1).split(":").map(Number);
+      const offsetMinutes = sign * (tzH * 60 + tzM);
+      // Convert offset datetime → UTC → local
+      const utc = Date.UTC(year, month, day, hours, minutes, seconds, ms);
+      return new Date(utc - offsetMinutes * 60_000);
+    }
+    return null;
+  },
+  toAttribute(value) {
+    return value?.toISOString() ?? null;
+  }
+};
+
 /** Converts a space-separated attribute in to an array of strings. */
 const spaceSeparatedStringConverter = {
   fromAttribute(value) {
@@ -10251,15 +11436,569 @@ M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([customElement(
  *
  * @slot - Renders the content to truncate with an ellipsis.
  */
-let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
+let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
+  /** @inheritdoc */
+  render() {
+    return html`<span class="base"><slot></slot></span>`;
+  }
+};
+/** The styles of the element. */
+M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
+M3eTextOverflowElement = __decorate([customElement("m3e-text-overflow")], M3eTextOverflowElement);
+
+var _M3eDatepickerElement_instances, _M3eDatepickerElement_breakpointUnobserve, _M3eDatepickerElement_trigger, _M3eDatepickerElement_anchor, _M3eDatepickerElement_anchorCleanup, _M3eDatepickerElement_scrollLockController, _M3eDatepickerElement_inertController, _M3eDatepickerElement_documentClickHandler, _M3eDatepickerElement_documentKeyDownHandler, _M3eDatepickerElement_toggleHandler, _M3eDatepickerElement_renderHeader, _M3eDatepickerElement_handleDocumentClick, _M3eDatepickerElement_handleCalendarChange, _M3eDatepickerElement_handleClearClick, _M3eDatepickerElement_handleDismissClick, _M3eDatepickerElement_handleConfirmClick, _M3eDatepickerElement_handleDocumentKeyDown, _M3eDatepickerElement_initBreakpointMonitoring, _M3eDatepickerElement_updateVariant, _M3eDatepickerElement_updatePosition, _M3eDatepickerElement_clearAnchoring, _M3eDatepickerElement_clearSelectionState;
+var M3eDatepickerElement_1;
+/**
+ * Presents a date picker on a temporary surface.
+ *
+ * @description
+ * The `m3e-datepicker` component provides a date‑selection experience
+ * consistent with Material 3 guidance for layout, motion, and accessibility.
+ * It displays a temporary surface that allows users to select a date or date
+ * range using calendar-based views. The picker supports month, year, and
+ * multi‑year views, enabling users to navigate across time efficiently.
+ *
+ * While open, the picker uses a focused selection flow. Users review their
+ * choice and complete the interaction through confirm, dismiss, or clear
+ * actions, ensuring intentional updates to the field or control that invoked it.
+ *
+ * It accepts and emits plain `Date` values, allowing applications to apply their
+ * own formatting, parsing, and localization.
+ *
+ * @tag m3e-datepicker
+ *
+ * @attr variant - The appearance variant of the picker.
+ * @attr clearable - Whether the user can clear the selected date and close the picker.
+ * @attr date - The selected date.
+ * @attr max-date - The maximum date that can be selected.
+ * @attr min-date - The minimum date that can be selected.
+ * @attr range-end - End of a date range.
+ * @attr range-start - Start of a date range.
+ * @attr start-at - A date specifying the period (month or year) to start the calendar in.
+ * @attr start-view - The initial view used to select a date.
+ * @attr previous-month-label - The accessible label given to the button used to move to the previous month.
+ * @attr next-month-label - The accessible label given to the button used to move to the next month.
+ * @attr previous-year-label - The accessible label given to the button used to move to the previous year.
+ * @attr next-year-label - The accessible label given to the button used to move to the next year.
+ * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.
+ * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.
+ * @attr clear-label - The label given to the button used clear the selected date and close the picker.
+ * @attr confirm-label - The label given to the button used apply the selected date and close the picker.
+ * @attr dismiss-label - The label given to the button used discard the selected date and close the picker.
+ * @attr label - The label given to the the picker.
+ *
+ * @fires change - Dispatched when the selected date changes.
+ * @fires beforetoggle - Dispatched before the toggle state changes.
+ * @fires toggle - Dispatched after the toggle state has changed.
+ *
+ * @cssprop --m3e-datepicker-container-padding-block - Block‑axis padding of the date picker container.
+ * @cssprop --m3e-datepicker-container-padding-inline - Inline‑axis padding of the date picker container.
+ * @cssprop --m3e-datepicker-container-color - Background color of the standard container surface.
+ * @cssprop --m3e-datepicker-container-elevation - Elevation shadow applied to the container surface.
+ * @cssprop --m3e-datepicker-modal-headline-font-size - Font size used for the modal headline text.
+ * @cssprop --m3e-datepicker-modal-headline-font-weight - Font weight used for the modal headline text.
+ * @cssprop --m3e-datepicker-modal-headline-line-height - Line height used for the modal headline text.
+ * @cssprop --m3e-datepicker-modal-headline-tracking - Letter spacing used for the modal headline text.
+ * @cssprop --m3e-datepicker-modal-supporting-text-font-size - Font size used for supporting text in modal mode.
+ * @cssprop --m3e-datepicker-modal-supporting-text-font-weight - Font weight used for supporting text in modal mode.
+ * @cssprop --m3e-datepicker-modal-supporting-text-line-height - Line height used for supporting text in modal mode.
+ * @cssprop --m3e-datepicker-modal-supporting-text-tracking - Letter spacing used for supporting text in modal mode.
+ * @cssprop --m3e-datepicker-actions-padding-inline - Inline‑axis padding of the action row.
+ * @cssprop --m3e-datepicker-docked-container-color - Background color of the container in docked mode.
+ * @cssprop --m3e-datepicker-docked-container-shape - Corner radius of the container in docked mode.
+ * @cssprop --m3e-datepicker-modal-container-color - Background color of the container in modal mode.
+ * @cssprop --m3e-datepicker-modal-container-shape - Corner radius of the container in modal mode.
+ * @cssprop --m3e-divider-thickness - Thickness of divider elements within the picker.
+ * @cssprop --m3e-divider-color - Color of divider rules within the picker.
+ * @cssprop --m3e-dialog-scrim-color - Base color used for the modal scrim behind the picker.
+ * @cssprop --m3e-dialog-scrim-opacity - Opacity applied to the scrim color in modal mode.
+ */
+let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement extends SuppressInitialAnimation$1(ReconnectedCallback$1(AttachInternals$1(Role$1(LitElement, "dialog")))) {
+  constructor() {
+    super(...arguments);
+    _M3eDatepickerElement_instances.add(this);
+    /** @private */
+    _M3eDatepickerElement_breakpointUnobserve.set(this, void 0);
+    /** @private */
+    _M3eDatepickerElement_trigger.set(this, void 0);
+    /** @private */
+    _M3eDatepickerElement_anchor.set(this, void 0);
+    /** @private */
+    _M3eDatepickerElement_anchorCleanup.set(this, void 0);
+    /** @private */
+    _M3eDatepickerElement_scrollLockController.set(this, new ScrollLockController$1(this));
+    /** @private */
+    _M3eDatepickerElement_inertController.set(this, new InertController$1(this));
+    /** @private */
+    _M3eDatepickerElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleDocumentClick).call(this, e));
+    /** @private */
+    _M3eDatepickerElement_documentKeyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleDocumentKeyDown).call(this, e));
+    /** @private */
+    _M3eDatepickerElement_toggleHandler.set(this, e => {
+      if (e.newState === "closed") {
+        __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
+        __classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
+        __classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, undefined, "f");
+      }
+    });
+    /**
+     * The appearance variant of the picker.
+     * @default "docked"
+     */
+    this.variant = "docked";
+    /**
+     * The initial view used to select a date.
+     * @default "month"
+     */
+    this.startView = "month";
+    /**
+     * The selected date.
+     * @default null
+     */
+    this.date = null;
+    /**
+     * A date specifying the period (month or year) to start the calendar in.
+     * @default null
+     */
+    this.startAt = null;
+    /**
+     * The minimum date that can be selected.
+     * @default null
+     */
+    this.minDate = null;
+    /**
+     * The maximum date that can be selected.
+     * @default null
+     */
+    this.maxDate = null;
+    /**
+     * Start of a date range.
+     * @default null
+     */
+    this.rangeStart = null;
+    /**
+     * End of a date range.
+     * @default null
+     */
+    this.rangeEnd = null;
+    /**
+     * A function used to determine whether a date cannot be selected.
+     * @default null
+     */
+    this.blackoutDates = null;
+    /**
+     * A function used to determine whether a date is special.
+     * @default null
+     */
+    this.specialDates = null;
+    /**
+     * The accessible label given to the button used to move to the previous month.
+     * @default "Previous month"
+     */
+    this.previousMonthLabel = "Previous month";
+    /**
+     * The accessible label given to the button used to move to the previous year.
+     * @default "Previous year"
+     */
+    this.previousYearLabel = "Previous year";
+    /**
+     * The accessible label given to the button used to move to the previous 24 years.
+     * @default "Previous 24 years"
+     */
+    this.previousMultiYearLabel = "Previous 24 years";
+    /**
+     * The accessible label given to the button used to move to the next month.
+     * @default "Next month"
+     */
+    this.nextMonthLabel = "Next month";
+    /**
+     * The accessible label given to the button used to move to the next year.
+     * @default "Next year"
+     */
+    this.nextYearLabel = "Next year";
+    /**
+     * The accessible label given to the button used to move to the next 24 years.
+     * @default "Next 24 years"
+     */
+    this.nextMultiYearLabel = "Next 24 years";
+    /**
+     * Whether the user can clear the selected date and close the picker.
+     * @default false
+     */
+    this.clearable = false;
+    /**
+     * The label given to the button used clear the selected date and close the picker.
+     * @default "Clear"
+     */
+    this.clearLabel = "Clear";
+    /**
+     * The label given to the button used apply the selected date and close the picker.
+     * @default "OK"
+     */
+    this.confirmLabel = "OK";
+    /**
+     * The label given to the button used discard the selected date and close the picker.
+     * @default "Cancel"
+     */
+    this.dismissLabel = "Cancel";
+    /**
+     * The label given to the the picker.
+     * @default "Select date"
+     */
+    this.label = "Select date";
+  }
+  /** Whether the picker is open. */
+  get isOpen() {
+    return __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") !== undefined;
+  }
+  /** The current variant applied to the picker. */
+  get currentVariant() {
+    return this._variant ?? (this.variant !== "modal" ? "docked" : "modal");
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("popover", "manual");
+    this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eDatepickerElement_toggleHandler, "f"));
+    document.addEventListener("click", __classPrivateFieldGet(this, _M3eDatepickerElement_documentClickHandler, "f"));
+    document.addEventListener("keydown", __classPrivateFieldGet(this, _M3eDatepickerElement_documentKeyDownHandler, "f"));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._variant = undefined;
+    __classPrivateFieldGet(this, _M3eDatepickerElement_breakpointUnobserve, "f")?.call(this);
+    __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearAnchoring).call(this);
+    deleteCustomState$1(this, "-docked");
+    deleteCustomState$1(this, "-modal");
+    this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eDatepickerElement_toggleHandler, "f"));
+    document.removeEventListener("click", __classPrivateFieldGet(this, _M3eDatepickerElement_documentClickHandler, "f"));
+    document.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eDatepickerElement_documentKeyDownHandler, "f"));
+  }
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    if (this.variant === "auto") {
+      __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_initBreakpointMonitoring).call(this);
+    }
+  }
+  /**
+   * Opens the picker.
+   * @param {HTMLElement} trigger The element that triggered the picker.
+   * @param {HTMLElement | undefined} anchor The element used to position the picker.
+   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened.
+   */
+  async show(trigger, anchor) {
+    if (__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") && __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") !== trigger) {
+      this.hide();
+    }
+    if (this.currentVariant === "modal") {
+      __classPrivateFieldGet(this, _M3eDatepickerElement_scrollLockController, "f").lock();
+      __classPrivateFieldGet(this, _M3eDatepickerElement_inertController, "f").lock();
+    }
+    const calendar = this._calendar;
+    calendar.date = this.date;
+    calendar.rangeStart = this.rangeStart;
+    calendar.rangeEnd = this.rangeEnd;
+    // Reset the start-view
+    calendar.requestUpdate("startView");
+    if (calendar.isUpdatePending) {
+      await calendar.updateComplete;
+    }
+    __classPrivateFieldSet(this, _M3eDatepickerElement_trigger, trigger, "f");
+    __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f").ariaExpanded = "true";
+    __classPrivateFieldSet(this, _M3eDatepickerElement_anchor, anchor, "f");
+    await __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updatePosition).call(this);
+    this.showPopover();
+    await this._calendar.focusActiveCell();
+  }
+  /**
+   * Hides the picker.
+   * @param {boolean} [restoreFocus=false] Whether to restore focus to the picker's trigger.
+   */
+  hide(restoreFocus = false) {
+    if (this.currentVariant === "modal") {
+      __classPrivateFieldGet(this, _M3eDatepickerElement_scrollLockController, "f").unlock();
+      __classPrivateFieldGet(this, _M3eDatepickerElement_inertController, "f").unlock();
+    }
+    this.hidePopover();
+    if (__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f")) {
+      __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f").ariaExpanded = "false";
+      if (restoreFocus) {
+        __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f").focus();
+      }
+      __classPrivateFieldSet(this, _M3eDatepickerElement_trigger, undefined, "f");
+    }
+  }
+  /**
+   * Toggles the picker.
+   * @param {HTMLElement} trigger The element that triggered the picker.
+   * @param {HTMLElement | undefined} anchor The element used to position the picker.
+   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened or closed.
+   */
+  async toggle(trigger, anchor) {
+    if (__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f")) {
+      this.hide();
+    } else {
+      await this.show(trigger, anchor);
+    }
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<m3e-focus-trap>${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_renderHeader).call(this)}<m3e-calendar class="calendar" start-view="${this.startView}" start-at="${ifDefined(this.startAt?.toISOString())}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @change="${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleCalendarChange)}"></m3e-calendar><div class="actions">${this.clearable ? html`<m3e-button @click="${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleClearClick)}">${this.clearLabel}</m3e-button>` : nothing}<div class="spacer" aria-hidden="true"></div><m3e-button @click="${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleDismissClick)}">${this.dismissLabel}</m3e-button><m3e-button @click="${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleConfirmClick)}">${this.confirmLabel}</m3e-button></div></m3e-focus-trap>`;
+  }
+  /** @inheritdoc */
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (["date", "rangeStart", "rangeEnd"].some(x => changedProperties.has(x))) {
+      __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
+    }
+    if (changedProperties.has("variant")) {
+      __classPrivateFieldGet(this, _M3eDatepickerElement_breakpointUnobserve, "f")?.call(this);
+      if (this.variant === "auto") {
+        __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_initBreakpointMonitoring).call(this);
+      } else {
+        this._variant = undefined;
+        __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updateVariant).call(this);
+      }
+    }
+  }
+  /** @inheritdoc */
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has("specialDates") || _changedProperties.has("blackoutDates")) {
+      this._calendar.specialDates = this.specialDates;
+      this._calendar.blackoutDates = this.blackoutDates;
+    }
+  }
+};
+_M3eDatepickerElement_breakpointUnobserve = new WeakMap();
+_M3eDatepickerElement_trigger = new WeakMap();
+_M3eDatepickerElement_anchor = new WeakMap();
+_M3eDatepickerElement_anchorCleanup = new WeakMap();
+_M3eDatepickerElement_scrollLockController = new WeakMap();
+_M3eDatepickerElement_inertController = new WeakMap();
+_M3eDatepickerElement_documentClickHandler = new WeakMap();
+_M3eDatepickerElement_documentKeyDownHandler = new WeakMap();
+_M3eDatepickerElement_toggleHandler = new WeakMap();
+_M3eDatepickerElement_instances = new WeakSet();
+_M3eDatepickerElement_renderHeader = function _M3eDatepickerElement_renderHeader() {
+  if (this.currentVariant === "docked") return nothing;
+  const selectedDate = this._date ?? this.date;
+  return html`<div class="supporting-text">${this.label}</div><div class="headline">${selectedDate ? new Intl.DateTimeFormat(navigator.language, {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  }).format(selectedDate) : "––"}</div><div class="divider"></div>`;
+};
+_M3eDatepickerElement_handleDocumentClick = function _M3eDatepickerElement_handleDocumentClick(e) {
+  if (!e.composedPath().some(x => x instanceof M3eDatepickerElement_1 || x === __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eDatepickerElement_anchor, "f"))) {
+    this.hide();
+  }
+};
+_M3eDatepickerElement_handleCalendarChange = function _M3eDatepickerElement_handleCalendarChange() {
+  this._date = this._calendar.date;
+  this._rangeStart = this._calendar.rangeStart;
+  this._rangeEnd = this._calendar.rangeEnd;
+};
+_M3eDatepickerElement_handleClearClick = function _M3eDatepickerElement_handleClearClick() {
+  this.date = null;
+  this.rangeStart = null;
+  this.rangeEnd = null;
+  this.hide(true);
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
+};
+_M3eDatepickerElement_handleDismissClick = function _M3eDatepickerElement_handleDismissClick() {
+  this.hide(true);
+};
+_M3eDatepickerElement_handleConfirmClick = function _M3eDatepickerElement_handleConfirmClick() {
+  this.date = this._date ?? this.date;
+  this.rangeStart = this._rangeStart === undefined ? this.rangeStart : this._rangeStart;
+  this.rangeEnd = this._rangeEnd === undefined ? this.rangeEnd : this._rangeEnd;
+  this.hide(true);
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
+};
+_M3eDatepickerElement_handleDocumentKeyDown = function _M3eDatepickerElement_handleDocumentKeyDown(e) {
+  if (this.isOpen && this.currentVariant === "modal" && e.key === "Escape" && !e.shiftKey && !e.ctrlKey) {
+    e.preventDefault();
+    this.hide(true);
+  }
+};
+_M3eDatepickerElement_initBreakpointMonitoring = function _M3eDatepickerElement_initBreakpointMonitoring() {
+  __classPrivateFieldSet(this, _M3eDatepickerElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => {
+    this._variant = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? "modal" : "docked";
+    __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updateVariant).call(this);
+  }), "f");
+};
+_M3eDatepickerElement_updateVariant = function _M3eDatepickerElement_updateVariant() {
+  switch (this.currentVariant) {
+    case "docked":
+      this.ariaModal = null;
+      deleteCustomState$1(this, "-modal");
+      addCustomState$1(this, "-docked");
+      __classPrivateFieldGet(this, _M3eDatepickerElement_scrollLockController, "f").unlock();
+      __classPrivateFieldGet(this, _M3eDatepickerElement_inertController, "f").unlock();
+      break;
+    case "modal":
+      this.ariaModal = "true";
+      deleteCustomState$1(this, "-docked");
+      addCustomState$1(this, "-modal");
+      if (this.isOpen) {
+        __classPrivateFieldGet(this, _M3eDatepickerElement_scrollLockController, "f").lock();
+        __classPrivateFieldGet(this, _M3eDatepickerElement_inertController, "f").lock();
+      }
+      break;
+  }
+  if (this.isOpen) {
+    __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updatePosition).call(this);
+  }
+};
+_M3eDatepickerElement_updatePosition = /** @private */
+async function _M3eDatepickerElement_updatePosition() {
+  if (this.currentVariant === "docked" && __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f")) {
+    __classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
+    __classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, await positionAnchor(this, __classPrivateFieldGet(this, _M3eDatepickerElement_anchor, "f") ?? __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f"), {
+      position: "bottom-start",
+      inline: true,
+      flip: true,
+      shift: "both"
+    }, (x, y, position) => {
+      setCustomState$1(this, "-top", position.includes("top"));
+      setCustomState$1(this, "-bottom", position.includes("bottom"));
+      if (M3eDirectionality.current === "rtl") {
+        this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+        this.style.left = "";
+      } else {
+        this.style.left = `${x}px`;
+        this.style.right = "";
+      }
+      this.style.top = `${y}px`;
+    }), "f");
+  } else {
+    __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearAnchoring).call(this);
+  }
+};
+_M3eDatepickerElement_clearAnchoring = function _M3eDatepickerElement_clearAnchoring() {
+  __classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
+  __classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, undefined, "f");
+  this.style.left = "";
+  this.style.right = "";
+  this.style.top = "";
+};
+_M3eDatepickerElement_clearSelectionState = function _M3eDatepickerElement_clearSelectionState() {
+  this._date = this._rangeStart = this._rangeEnd = undefined;
+};
+/** The styles of the element. */
+M3eDatepickerElement.styles = css`:host { flex-direction: column; margin: unset; border: unset; padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem); padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem); background-color: var(--m3e-datepicker-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .calendar { --m3e-calendar-container-color: transparent; --m3e-calendar-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-calendar-container-shape: ${DesignToken$1.shape.corner.none}; } .headline { font-size: var( --m3e-datepicker-modal-headline-font-size, ${DesignToken$1.typescale.standard.headline.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-headline-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-headline-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-headline-tracking, ${DesignToken$1.typescale.standard.headline.large.tracking} ); margin-block-start: 2.25rem; margin-block-end: 0.75rem; margin-inline: 1.5rem; } .supporting-text { font-size: var( --m3e-datepicker-modal-supporting-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-supporting-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-supporting-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-supporting-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); margin-block-start: 1rem; margin-inline: 1.5rem; } .divider { height: var(--m3e-divider-thickness, 1px); width: 100%; position: relative; } .divider::before { content: ""; box-sizing: border-box; position: absolute; border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); height: inherit; left: -0.25rem; right: -0.25rem; } .actions { display: flex; align-items: center; column-gap: 0.5rem; padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem); } .spacer { flex: 1 1 auto; } :host(:state(-docked)) { position: absolute; background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken$1.color.surfaceContainer}); border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:state(-modal)) { position: fixed; inset: 0; margin: auto; transform-origin: top; background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken$1.color.surfaceContainerHigh}); border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken$1.shape.corner.extraLarge}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
+        transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
+        overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
+        display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: inline-flex; opacity: 1; } :host(:state(-docked))::backdrop { background-color: transparent; } :host(:state(-modal))::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); margin-inline-end: -20px; } :host(:state(-modal):not(:popover-open))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+        overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-modal):popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%), transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
+        overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
+        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } :host(:state(-modal):popover-open)::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; border: 1px solid CanvasText; } }`;
+__decorate([state()], M3eDatepickerElement.prototype, "_date", void 0);
+__decorate([state()], M3eDatepickerElement.prototype, "_rangeStart", void 0);
+__decorate([state()], M3eDatepickerElement.prototype, "_rangeEnd", void 0);
+__decorate([query("m3e-calendar")], M3eDatepickerElement.prototype, "_calendar", void 0);
+__decorate([state()], M3eDatepickerElement.prototype, "_variant", void 0);
+__decorate([property()], M3eDatepickerElement.prototype, "variant", void 0);
+__decorate([property({
+  attribute: "start-view"
+})], M3eDatepickerElement.prototype, "startView", void 0);
+__decorate([property({
+  converter: dateConverter$1
+})], M3eDatepickerElement.prototype, "date", void 0);
+__decorate([property({
+  attribute: "start-at",
+  converter: dateConverter$1
+})], M3eDatepickerElement.prototype, "startAt", void 0);
+__decorate([property({
+  attribute: "min-date",
+  converter: dateConverter$1
+})], M3eDatepickerElement.prototype, "minDate", void 0);
+__decorate([property({
+  attribute: "max-date",
+  converter: dateConverter$1
+})], M3eDatepickerElement.prototype, "maxDate", void 0);
+__decorate([property({
+  attribute: "range-start",
+  converter: dateConverter$1
+})], M3eDatepickerElement.prototype, "rangeStart", void 0);
+__decorate([property({
+  attribute: "range-end",
+  converter: dateConverter$1
+})], M3eDatepickerElement.prototype, "rangeEnd", void 0);
+__decorate([property({
+  attribute: false
+})], M3eDatepickerElement.prototype, "blackoutDates", void 0);
+__decorate([property({
+  attribute: false
+})], M3eDatepickerElement.prototype, "specialDates", void 0);
+__decorate([property({
+  attribute: "previous-month-label"
+})], M3eDatepickerElement.prototype, "previousMonthLabel", void 0);
+__decorate([property({
+  attribute: "previous-year-label"
+})], M3eDatepickerElement.prototype, "previousYearLabel", void 0);
+__decorate([property({
+  attribute: "previous-multi-year-label"
+})], M3eDatepickerElement.prototype, "previousMultiYearLabel", void 0);
+__decorate([property({
+  attribute: "next-month-label"
+})], M3eDatepickerElement.prototype, "nextMonthLabel", void 0);
+__decorate([property({
+  attribute: "next-year-label"
+})], M3eDatepickerElement.prototype, "nextYearLabel", void 0);
+__decorate([property({
+  attribute: "next-multi-year-label"
+})], M3eDatepickerElement.prototype, "nextMultiYearLabel", void 0);
+__decorate([property({
+  type: Boolean
+})], M3eDatepickerElement.prototype, "clearable", void 0);
+__decorate([property({
+  attribute: "clear-label"
+})], M3eDatepickerElement.prototype, "clearLabel", void 0);
+__decorate([property({
+  attribute: "confirm-label"
+})], M3eDatepickerElement.prototype, "confirmLabel", void 0);
+__decorate([property({
+  attribute: "dismiss-label"
+})], M3eDatepickerElement.prototype, "dismissLabel", void 0);
+__decorate([property()], M3eDatepickerElement.prototype, "label", void 0);
+M3eDatepickerElement = M3eDatepickerElement_1 = __decorate([customElement$1("m3e-datepicker")], M3eDatepickerElement);
+
+/**
+ * An element, nested within a clickable element, used to toggle a datepicker.
+ * @tag m3e-datepicker-toggle
+ */
+let M3eDatepickerToggleElement = class M3eDatepickerToggleElement extends HtmlFor$1(ActionElementBase$1) {
   /** @inheritdoc */
-  render() {
-    return html`<span class="base"><slot></slot></span>`;
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.parentElement) {
+      this.parentElement.ariaHasPopup = "dialog";
+    }
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.parentElement) {
+      this.parentElement.ariaHasPopup = null;
+    }
+  }
+  /** @inheritdoc */
+  _onClick() {
+    if (this.control instanceof M3eDatepickerElement && this.parentElement) {
+      this.control.toggle(this.parentElement, this.closest("m3e-form-field") ?? undefined);
+    }
   }
 };
-/** The styles of the element. */
-M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
-M3eTextOverflowElement = __decorate([customElement("m3e-text-overflow")], M3eTextOverflowElement);
+M3eDatepickerToggleElement = __decorate([customElement$1("m3e-datepicker-toggle")], M3eDatepickerToggleElement);
 
 /**
  * An element, nested within a clickable element, used to close a parenting dialog.
@@ -10689,7 +12428,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_initialize, _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_initBreakpointMonitoring, _M3eDrawerContainerElement_clearMode, _M3eDrawerContainerElement_updateMode;
 /**
  * A container for one or two sliding drawers.
  *
@@ -10734,8 +12473,8 @@ var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointU
  * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.
  * @cssprop --m3e-drawer-container-width - The width of the drawer container.
  * @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.
- * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer’s start edge (typically left in LTR).
- * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer’s end edge (typically right in LTR).
+ * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer's start edge (typically left in LTR).
+ * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer's end edge (typically right in LTR).
  * @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.
  * @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.
  * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.
@@ -10809,7 +12548,7 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends Reconnec
     if (changedProperties.has("startMode") || changedProperties.has("endMode")) {
       __classPrivateFieldGet(this, _M3eDrawerContainerElement_breakpointUnobserve, "f")?.call(this);
       if (this.startMode === "auto" || this.endMode === "auto") {
-        __classPrivateFieldSet(this, _M3eDrawerContainerElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_updateMode).call(this, matches, true)), "f");
+        __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_initBreakpointMonitoring).call(this);
       } else {
         __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_updateMode).call(this);
       }
@@ -10834,6 +12573,9 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends Reconnec
   reconnectedCallback() {
     super.reconnectedCallback();
     __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_initialize).call(this);
+    if (this.startMode === "auto" || this.endMode === "auto") {
+      __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_initBreakpointMonitoring).call(this);
+    }
   }
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
@@ -10888,6 +12630,9 @@ _M3eDrawerContainerElement_handleDrawerResize = function _M3eDrawerContainerElem
     deleteCustomState$1(this, "-no-animate");
   }
 };
+_M3eDrawerContainerElement_initBreakpointMonitoring = function _M3eDrawerContainerElement_initBreakpointMonitoring() {
+  __classPrivateFieldSet(this, _M3eDrawerContainerElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_updateMode).call(this, matches, true)), "f");
+};
 _M3eDrawerContainerElement_clearMode = function _M3eDrawerContainerElement_clearMode() {
   deleteCustomState$1(this, "-start-over");
   deleteCustomState$1(this, "-start-push");
@@ -12796,7 +14541,7 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
     __classPrivateFieldSet(this, _M3eFabMenuElement_anchoringCleanup, await positionAnchor(this, trigger, {
       position: "top-end",
       inline: true,
-      shift: true,
+      shift: "main",
       flip: true,
       offset: 8
     }, (x, y, position) => {
@@ -13427,11 +15172,7 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:state(-float-label)):state(-with-label) input::placeholder, m3e-form-field[float-label="auto"]:not(:state(-float-label)):state(-with-label) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken$1.density.calc(-2)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:state(-float-label)):state(-with-label) input::placeholder, m3e-form-field[float-label="auto"]:not(:state(-float-label)):state(-with-label) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken$1.density.calc(-2)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`);
 })();
 /** The styles of the element. */
 M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:state(-disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${unsafeCSS(`top ${DesignToken$1.motion.duration.short4}, 
@@ -16551,7 +18292,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
       position: this.submenu ? positionX === "before" ? "left-start" : "right-start" : this.positionY === "above" ? positionX === "before" ? "top-end" : "top-start" : positionX === "before" ? "bottom-end" : "bottom-start",
       inline: true,
       flip: true,
-      shift: true,
+      shift: "main",
       offset: !this.submenu ? 4 : undefined
     }, (x, y, position) => {
       if (!this.submenu) {
@@ -16727,11 +18468,7 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`);
 })();
 /** The styles of the element. */
 M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:state(-active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(:not(:state(-active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken$1.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken$1.shape.corner.extraSmall}; } :host(:state(-active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
@@ -17090,7 +18827,7 @@ _M3eMenuItemRadioElement_handleMouseEnter = function _M3eMenuItemRadioElement_ha
 M3eMenuItemRadioElement.styles = M3eMenuItemCheckboxElement.styles;
 M3eMenuItemRadioElement = __decorate([customElement$1("m3e-menu-item-radio")], M3eMenuItemRadioElement);
 
-var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavBarElement_handleSlotChange, _M3eNavBarElement_handleChange, _a$6;
+var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavBarElement_initBreakpointMonitoring, _M3eNavBarElement_handleSlotChange, _M3eNavBarElement_handleChange, _a$6;
 /**
  * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.
  *
@@ -17122,7 +18859,7 @@ var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavB
  * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.
  * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.
  */
-let M3eNavBarElement = class M3eNavBarElement extends AttachInternals$1(Role$1(LitElement, "navigation")) {
+let M3eNavBarElement = class M3eNavBarElement extends ReconnectedCallback$1(AttachInternals$1(Role$1(LitElement, "navigation"))) {
   constructor() {
     super(...arguments);
     _M3eNavBarElement_instances.add(this);
@@ -17158,15 +18895,19 @@ let M3eNavBarElement = class M3eNavBarElement extends AttachInternals$1(Role$1(L
     __classPrivateFieldGet(this, _M3eNavBarElement_breakpointUnobserve, "f")?.call(this);
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    if (this.mode === "auto") {
+      __classPrivateFieldGet(this, _M3eNavBarElement_instances, "m", _M3eNavBarElement_initBreakpointMonitoring).call(this);
+    }
+  }
+  /** @inheritdoc */
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("mode")) {
       __classPrivateFieldGet(this, _M3eNavBarElement_breakpointUnobserve, "f")?.call(this);
       if (this.mode === "auto") {
-        __classPrivateFieldSet(this, _M3eNavBarElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => {
-          this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? "compact" : "expanded";
-          this._updateItems();
-        }), "f");
+        __classPrivateFieldGet(this, _M3eNavBarElement_instances, "m", _M3eNavBarElement_initBreakpointMonitoring).call(this);
       } else {
         this._mode = undefined;
         this._updateItems();
@@ -17194,6 +18935,12 @@ let M3eNavBarElement = class M3eNavBarElement extends AttachInternals$1(Role$1(L
 _M3eNavBarElement_breakpointUnobserve = new WeakMap();
 _M3eNavBarElement_instances = new WeakSet();
 _a$6 = selectionManager;
+_M3eNavBarElement_initBreakpointMonitoring = function _M3eNavBarElement_initBreakpointMonitoring() {
+  __classPrivateFieldSet(this, _M3eNavBarElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => {
+    this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? "compact" : "expanded";
+    this._updateItems();
+  }), "f");
+};
 _M3eNavBarElement_handleSlotChange = function _M3eNavBarElement_handleSlotChange() {
   this[selectionManager].setItems([...this.querySelectorAll("m3e-nav-item")]);
   this._updateItems();
@@ -17677,11 +19424,7 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
   }));
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`);
 })();
 /** The styles of the element. */
 M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
@@ -18004,11 +19747,7 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`);
 })();
 /** The styles of the element. */
 M3eNavMenuElement.styles = css`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken$1.scrollbar.width}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
@@ -18210,11 +19949,7 @@ _M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e)
   __classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").onKeyDown(e);
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail:not(:state(-compact)) > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-expanded-icon-button-inset, 0.5rem); }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail:not(:state(-compact)) > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-expanded-icon-button-inset, 0.5rem); }`);
 })();
 /** The styles of the element. */
 M3eNavRailElement.styles = css`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { display: flex; width: 100%; min-width: inherit; max-width: inherit; flex-direction: column; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(:state(-compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:state(-compact)) ::slotted(m3e-fab) { align-self: center; } :host(:not(:state(-compact))) { min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); } :host(:not(:state(-compact))) .base { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } :host(:state(-compact)) ::slotted(m3e-icon-button) { align-self: center; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken$1.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken$1.elevation.level1}; }`;
@@ -18435,7 +20170,7 @@ _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange
   __classPrivateFieldSet(this, _M3eOptionElement_textContent, getTextContent$1(e.target), "f");
   setCustomState$1(this, "-empty", this.isEmpty);
   if (this.selected) {
-    this.closest("m3e-select")?.requestUpdate();
+    this.closest("m3e-select")?.requestUpdate?.();
   }
 };
 /** The styles of the element. */
@@ -18591,7 +20326,7 @@ _M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMu
   let last;
   for (let i = 0; i < options.length; i++) {
     const option = options[i];
-    if (option.hidden) {
+    if (option.hidden === true) {
       deleteCustomState$1(option, "-first");
       deleteCustomState$1(option, "-last");
     } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {
@@ -18610,11 +20345,7 @@ _M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMu
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`);
 })();
 /** The styles of the element. */
 M3eOptionPanelElement.styles = [M3eFloatingPanelElement.styles, css`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`];
@@ -19772,103 +21503,906 @@ let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled$1(Require
       this[selectionManager].activeItem?.click();
     });
   }
-  /** The list of attributes corresponding to the registered properties. */
-  static get observedAttributes() {
-    return [...super.observedAttributes, "aria-invalid"];
+  /** The list of attributes corresponding to the registered properties. */
+  static get observedAttributes() {
+    return [...super.observedAttributes, "aria-invalid"];
+  }
+  /** The radios in the group. */
+  get radios() {
+    return this[selectionManager]?.items ?? [];
+  }
+  /** The selected radio. */
+  get selected() {
+    return this[selectionManager]?.selectedItems[0] ?? null;
+  }
+  /** The selected value of the radio group. */
+  get value() {
+    return this.selected?.value ?? null;
+  }
+  /** @inheritdoc */
+  markAsTouched() {
+    super.markAsTouched();
+    this.radios.forEach(x => x.markAsTouched());
+  }
+  /** @inheritdoc */
+  markAsUntouched() {
+    super.markAsUntouched();
+    this.radios.forEach(x => x.markAsUntouched());
+  }
+  /** @inheritdoc */
+  markAsDirty() {
+    super.markAsDirty();
+    this.radios.forEach(x => x.markAsDirty());
+  }
+  /** @inheritdoc */
+  markAsPristine() {
+    super.markAsPristine();
+    this.radios.forEach(x => x.markAsPristine());
+  }
+  /** Synchronizes property values when attributes change. */
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case "name":
+        this.radios.forEach(x => x.name = this.name);
+        break;
+      case "aria-invalid":
+        this.radios.forEach(x => {
+          setCustomState$1(x, "-invalid", newValue === "true");
+          x[updateLabels$1]?.();
+        });
+        break;
+    }
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"));
+    __classPrivateFieldSet(this, _M3eRadioGroupElement_directionalitySubscription, M3eDirectionality.observe(() => this[selectionManager].directionality = M3eDirectionality.current), "f");
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"));
+    __classPrivateFieldGet(this, _M3eRadioGroupElement_directionalitySubscription, "f")?.call(this);
+  }
+  /** @inheritdoc */
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has("disabled")) {
+      this.ariaDisabled = null;
+    }
+    if (changedProperties.has("disabled") && (changedProperties.get("disabled") !== undefined || this.disabled)) {
+      this[selectionManager].disabled = this.disabled;
+    }
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<slot @slotchange="${__classPrivateFieldGet(this, _M3eRadioGroupElement_instances, "m", _M3eRadioGroupElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eRadioGroupElement_instances, "m", _M3eRadioGroupElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eRadioGroupElement_instances, "m", _M3eRadioGroupElement_handleChange)}"></slot>`;
+  }
+};
+_M3eRadioGroupElement_directionalitySubscription = new WeakMap();
+_M3eRadioGroupElement_focusOutHandler = new WeakMap();
+_M3eRadioGroupElement_instances = new WeakSet();
+_a$5 = selectionManager;
+_M3eRadioGroupElement_handleSlotChange = function _M3eRadioGroupElement_handleSlotChange() {
+  const {
+    added
+  } = this[selectionManager].setItems([...this.querySelectorAll("m3e-radio")]);
+  added.forEach(x => x.name = x.name || this.name);
+};
+_M3eRadioGroupElement_handleKeyDown = function _M3eRadioGroupElement_handleKeyDown(e) {
+  this[selectionManager].onKeyDown(e);
+};
+_M3eRadioGroupElement_handleChange = function _M3eRadioGroupElement_handleChange() {
+  this.checkValidity();
+};
+/** The styles of the element. */
+M3eRadioGroupElement.styles = css`:host { display: inline-flex; }`;
+M3eRadioGroupElement = __decorate([customElement$1("m3e-radio-group")], M3eRadioGroupElement);
+
+/** @internal */
+const SearchBarToken = {
+  containerColor: unsafeCSS(`var(--m3e-search-bar-container-color, ${DesignToken$1.color.surfaceContainerHigh})`),
+  leadingIconColor: unsafeCSS(`var(--m3e-search-bar-leading-icon-color, ${DesignToken$1.color.onSurface})`),
+  trailingIconColor: unsafeCSS(`var(--m3e-search-bar-trailing-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+  containerHeight: unsafeCSS("var(--m3e-search-bar-container-height, 3.5rem)"),
+  containerShape: unsafeCSS(`var(--m3e-search-bar-container-shape, ${DesignToken$1.shape.corner.full})`),
+  iconSize: unsafeCSS("var(--m3e-search-bar-icon-size, 1.5rem)"),
+  supportingTextColor: unsafeCSS(`var(--m3e-search-bar-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+  supportingTextFontSize: unsafeCSS(`var(--m3e-search-bar-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize})`),
+  supportingTextFontWeight: unsafeCSS(`var(--m3e-search-bar-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight})`),
+  supportingTextLineHeight: unsafeCSS(`var(--m3e-search-bar-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight})`),
+  supportingTextTracking: unsafeCSS(`var(--m3e-search-bar-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.large.tracking})`),
+  inputColor: unsafeCSS(`var(--m3e-search-bar-input-color, ${DesignToken$1.color.onSurface})`),
+  inputTextFontSize: unsafeCSS(`var(--m3e-search-bar-input-text-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize})`),
+  inputTextFontWeight: unsafeCSS(`var(--m3e-search-bar-input-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight})`),
+  inputTextLineHeight: unsafeCSS(`var(--m3e-search-bar-input-text-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight})`),
+  inputTextTracking: unsafeCSS(`var(--m3e-search-bar-input-text-tracking, ${DesignToken$1.typescale.standard.body.large.tracking})`),
+  leadingSpace: unsafeCSS("var(--m3e-search-bar-leading-space, 0.25rem)"),
+  trailingSpace: unsafeCSS("var(--m3e-search-bar-trailing-space, 0.25rem)"),
+  noActionsLeadingSpace: unsafeCSS("var(--m3e-search-bar-no-actions-leading-space, 1rem)"),
+  noActionsTrailingSpace: unsafeCSS("var(--m3e-search-bar-no-actions-trailing-space, 1rem)"),
+  leadingActionsTrailingSpace: unsafeCSS("var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)"),
+  trailingActionsLeadingSpace: unsafeCSS("var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)"),
+  actionsGap: unsafeCSS("var(--m3e-search-bar-actions-gap, 0px)")
+};
+
+/**
+ * Light DOM styles for `M3eSearchBarElement`.
+ * @internal
+ */
+const SearchBarLightDomStyle = css`m3e-search-bar input[slot="input"]::placeholder { user-select: none; color: ${SearchBarToken.supportingTextColor}; font-size: ${SearchBarToken.supportingTextFontSize}; font-weight: ${SearchBarToken.supportingTextFontWeight}; line-height: ${SearchBarToken.supportingTextLineHeight}; letter-spacing: ${SearchBarToken.supportingTextTracking}; }`;
+/**
+ * Styles for `M3eSearchBarElement`.
+ * @internal
+ */
+const SearchBarStyle = css`:host { display: block; height: ${SearchBarToken.containerHeight}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${SearchBarToken.containerShape}; background-color: ${SearchBarToken.containerColor}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:state(-clearable))) .clear { display: none; } :host(:state(-with-leading)) slot[name="leading"], :host(:state(-with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${SearchBarToken.actionsGap}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${SearchBarToken.inputColor}; font-size: ${SearchBarToken.inputTextFontSize}; font-weight: ${SearchBarToken.inputTextFontWeight}; line-height: ${SearchBarToken.inputTextLineHeight}; letter-spacing: ${SearchBarToken.inputTextTracking}; } :host(:state(-with-leading)) .base { padding-inline-start: ${SearchBarToken.leadingSpace}; } :host(:not(:state(-with-leading))) .base { padding-inline-start: ${SearchBarToken.noActionsLeadingSpace}; } :host(:is(:state(-with-trailing), :state(-clearable))) .base { padding-inline-end: ${SearchBarToken.trailingSpace}; } :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base { padding-inline-end: ${SearchBarToken.noActionsTrailingSpace}; } :host(:state(-with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace}; } :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot="input"]) { margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace}; } slot[name="leading"] { color: ${SearchBarToken.leadingIconColor}; --m3e-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } slot[name="trailing"], .clear { color: ${SearchBarToken.trailingIconColor}; --m3e-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${SearchBarToken.iconSize}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`;
+
+/** @internal */
+const SearchViewToken = {
+  containerColor: unsafeCSS(`var(--m3e-search-view-container-color, ${DesignToken$1.color.surfaceContainerHigh})`),
+  containedContainerColor: unsafeCSS(`var(--m3e-search-view-contained-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
+  dividerColor: unsafeCSS(`var(--m3e-search-view-divider-color, ${DesignToken$1.color.outline})`),
+  dividerThickness: unsafeCSS(`var(--m3e-search-view-divider-thickness, 1px)`),
+  fullScreenContainerShape: unsafeCSS(`var(--m3e-search-view-full-screen-container-shape, ${DesignToken$1.shape.corner.none})`),
+  fullScreenHeaderContainerHeight: unsafeCSS("var(--m3e-search-view-full-screen-header-container-height, 4.5rem)"),
+  dockedContainerShape: unsafeCSS(`var(--m3e-search-view-docked-container-shape, ${DesignToken$1.shape.corner.extraLarge})`),
+  dockedHeaderContainerHeight: unsafeCSS("var(--m3e-search-view-docked-header-container-height, 3.5rem)"),
+  containedLeadingMargin: unsafeCSS("var(--m3e-search-view-contained-leading-margin, 1.5rem)"),
+  containedTrailingMargin: unsafeCSS("var(--m3e-search-view-contained-trailing-margin, 1.55rem)"),
+  containedFocusedLeadingMargin: unsafeCSS("var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)"),
+  containedFocusedTrailingMargin: unsafeCSS("var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)"),
+  containedDockedBarResultsGap: unsafeCSS("var(--m3e-search-view-contained-docked-bar-results-gap, 2px)"),
+  containedDockedResultsShape: unsafeCSS(`var(--m3e-search-view-contained-docked-results-shape, ${DesignToken$1.shape.corner.medium})`),
+  containedDockedBarShape: unsafeCSS(`var(--m3e-search-view-contained-docked-bar-shape, ${DesignToken$1.shape.corner.full})`),
+  containedFullScreenBarContainerHeight: unsafeCSS("var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)"),
+  dockedContainerMinHeight: unsafeCSS("var(--m3e-search-view-docked-container-min-height, 240px)"),
+  dockedContainerMaxHeight: unsafeCSS("var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))"),
+  containedDockedResultsSpace: unsafeCSS("var(--m3e-search-view-contained-docked-results-space, 0.25rem)"),
+  dockedResultsBottomSpace: unsafeCSS("var(--m3e-search-view-docked-results-bottom-space, 1rem)"),
+  dockedScrimColor: unsafeCSS(`var(--m3e-search-view-docked-scrim-color, ${DesignToken$1.color.scrim})`),
+  dockedScrimOpacity: unsafeCSS("var(--m3e-search-view-docked-scrim-opacity, 32%)")
+};
+
+/**
+ * Light DOM styles for `M3eSearchViewElement`.
+ * @internal
+ */
+const SearchViewLightDomStyle = css`m3e-search-view input[slot="input"]::placeholder { user-select: none; color: ${SearchBarToken.supportingTextColor}; font-size: ${SearchBarToken.supportingTextFontSize}; font-weight: ${SearchBarToken.supportingTextFontWeight}; line-height: ${SearchBarToken.supportingTextLineHeight}; letter-spacing: ${SearchBarToken.supportingTextTracking}; }`;
+/**
+ * Styles for `M3eSearchViewElement`.
+ * @internal
+ */
+const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
+      overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
+      display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)[contained]) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard},
+      background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+        overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
+        overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
+        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); } } :host(:state(-fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:state(-fullscreen)) .bar, :host(:state(-fullscreen)) .header, :host(:state(-docked)) .results, :host(:state(-docked):not([open])) .view, :host(:state(-docked):not([open])) .view::backdrop, :host(:state(-docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;
+
+var _M3eSearchBarElement_instances, _M3eSearchBarElement_input, _M3eSearchBarElement_inputInputHandler, _M3eSearchBarElement_renderClearButton, _M3eSearchBarElement_handleContainerClick, _M3eSearchBarElement_handleLeadingSlotChange, _M3eSearchBarElement_handleTrailingSlotChange, _M3eSearchBarElement_handleInputSlotChange, _M3eSearchBarElement_handleInputInput, _M3eSearchBarElement_handleClearClick;
+/**
+ * A bar that provides a prominent entry point for search.
+ *
+ * @description
+ * The `m3e-search-bar` component provides a prominent entry point for search,
+ * capturing user input and emitting `query` and `clear` events as the text
+ * changes. It reflects focus and interaction states through customizable CSS
+ * properties for container, icons, and text styling.
+ *
+ * @example
+ * The following example illustrates typical usage with a leading icon and the
+ * ability to clear the current search text.
+ * ```html
+ * <m3e-search-bar clearable>
+ *  <m3e-icon name="search" slot="leading"></m3e-icon>
+ *  <input slot="input" placeholder="Search..." />
+ *  </m3e-search-bar>
+ * ```
+ *
+ * @tag m3e-search-bar
+ *
+ * @attr clearable - Whether the bar presents a button used to clear the search term.
+ * @attr clear-label - The accessible label given to the button used to clear the search term.
+ *
+ * @slot leading - Renders content before the input of the bar.
+ * @slot input - Renders the input of the bar.
+ * @slot trailing - Renders content after the input of the bar.
+ *
+ * @fires clear - Dispatched when the search term is cleared.
+ *
+ * @cssprop --m3e-search-bar-container-color - Background color of the search bar container.
+ * @cssprop --m3e-search-bar-leading-icon-color - Color of the leading icon.
+ * @cssprop --m3e-search-bar-trailing-icon-color - Color of the trailing icon.
+ * @cssprop --m3e-search-bar-container-height - Height of the search bar container.
+ * @cssprop --m3e-search-bar-container-shape - Shape (border radius) of the search bar container.
+ * @cssprop --m3e-search-bar-icon-size - Size of icons inside the search bar.
+ * @cssprop --m3e-search-bar-supporting-text-color - Color of the supporting text.
+ * @cssprop --m3e-search-bar-supporting-text-font-size - Font size of the supporting text.
+ * @cssprop --m3e-search-bar-supporting-text-font-weight - Font weight of the supporting text.
+ * @cssprop --m3e-search-bar-supporting-text-line-height - Line height of the supporting text.
+ * @cssprop --m3e-search-bar-supporting-text-tracking - Letter spacing of the supporting text.
+ * @cssprop --m3e-search-bar-input-color - Color of the input text.
+ * @cssprop --m3e-search-bar-input-text-font-size - Font size of the input text.
+ * @cssprop --m3e-search-bar-input-text-font-weight - Font weight of the input text.
+ * @cssprop --m3e-search-bar-input-text-line-height - Line height of the input text.
+ * @cssprop --m3e-search-bar-input-text-tracking - Letter spacing of the input text.
+ * @cssprop --m3e-search-bar-leading-space - Space before the leading icon.
+ * @cssprop --m3e-search-bar-trailing-space - Space after the trailing icon.
+ * @cssprop --m3e-search-bar-no-actions-leading-space - Leading padding when no actions are present.
+ * @cssprop --m3e-search-bar-no-actions-trailing-space - Trailing padding when no actions are present.
+ * @cssprop --m3e-search-bar-leading-actions-trailing-space - Space between leading actions and the input.
+ * @cssprop --m3e-search-bar-trailing-actions-leading-space - Space between the input and trailing actions.
+ * @cssprop --m3e-search-bar-actions-gap - Gap between action icons.
+ */
+let M3eSearchBarElement = class M3eSearchBarElement extends EventAttribute$1(AttachInternals$1(LitElement), "clear") {
+  constructor() {
+    super(...arguments);
+    _M3eSearchBarElement_instances.add(this);
+    /** @private */
+    _M3eSearchBarElement_input.set(this, void 0);
+    /** @private */
+    _M3eSearchBarElement_inputInputHandler.set(this, () => __classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleInputInput).call(this));
+    /**
+     * Whether the bar presents a button used to clear the search term.
+     * @default false
+     */
+    this.clearable = false;
+    /**
+     * The accessible label given to the button used to clear the search term.
+     * @default "Clear"
+     */
+    this.clearLabel = "Clear";
+  }
+  /** Clears the search term. */
+  clear() {
+    if (!__classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")) return;
+    __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f").value = "";
+    __classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleInputInput).call(this);
+    this.dispatchEvent(new Event("clear", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleContainerClick)}"><slot name="leading" @slotchange="${__classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleLeadingSlotChange)}"></slot><slot name="input" @slotchange="${__classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleInputSlotChange)}"></slot>${__classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_renderClearButton).call(this)}<slot name="trailing" @slotchange="${__classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleTrailingSlotChange)}"></slot></div>`;
+  }
+};
+_M3eSearchBarElement_input = new WeakMap();
+_M3eSearchBarElement_inputInputHandler = new WeakMap();
+_M3eSearchBarElement_instances = new WeakSet();
+_M3eSearchBarElement_renderClearButton = function _M3eSearchBarElement_renderClearButton() {
+  return this.clearable ? html`<div class="clear"><m3e-icon-button aria-label="${this.clearLabel}" @click="${__classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleClearClick)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button></div>` : nothing;
+};
+_M3eSearchBarElement_handleContainerClick = function _M3eSearchBarElement_handleContainerClick() {
+  if (!this.matches(":focus-within")) {
+    __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.focus();
+  }
+};
+_M3eSearchBarElement_handleLeadingSlotChange = function _M3eSearchBarElement_handleLeadingSlotChange(e) {
+  setCustomState$1(this, "-with-leading", hasAssignedNodes$1(e.target));
+};
+_M3eSearchBarElement_handleTrailingSlotChange = function _M3eSearchBarElement_handleTrailingSlotChange(e) {
+  setCustomState$1(this, "-with-trailing", hasAssignedNodes$1(e.target));
+};
+_M3eSearchBarElement_handleInputSlotChange = function _M3eSearchBarElement_handleInputSlotChange(e) {
+  const input = e.target.assignedElements({
+    flatten: true
+  }).find(x => x instanceof HTMLInputElement);
+  if (input != __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")) {
+    __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.removeEventListener("input", __classPrivateFieldGet(this, _M3eSearchBarElement_inputInputHandler, "f"));
+    __classPrivateFieldSet(this, _M3eSearchBarElement_input, input, "f");
+    __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.addEventListener("input", __classPrivateFieldGet(this, _M3eSearchBarElement_inputInputHandler, "f"));
+    if (__classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")) {
+      __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f").role = __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f").role || "searchbox";
+      __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f").inputMode = __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f").inputMode || "search";
+      __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f").type = "text";
+    }
+    __classPrivateFieldGet(this, _M3eSearchBarElement_instances, "m", _M3eSearchBarElement_handleInputInput).call(this);
+  }
+};
+_M3eSearchBarElement_handleInputInput = function _M3eSearchBarElement_handleInputInput() {
+  setCustomState$1(this, "-clearable", this.clearable && (__classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.value ?? "").length > 0);
+};
+_M3eSearchBarElement_handleClearClick = function _M3eSearchBarElement_handleClearClick() {
+  this.clear();
+  __classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.focus();
+};
+(() => {
+  registerStyleSheet$1(SearchBarLightDomStyle);
+})();
+/** The styles of the element. */
+M3eSearchBarElement.styles = SearchBarStyle;
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eSearchBarElement.prototype, "clearable", void 0);
+__decorate([property({
+  attribute: "clear-label"
+})], M3eSearchBarElement.prototype, "clearLabel", void 0);
+M3eSearchBarElement = __decorate([customElement$1("m3e-search-bar")], M3eSearchBarElement);
+
+var _M3eSearchViewElement_instances, _M3eSearchViewElement_input, _M3eSearchViewElement_closeOnInputFocus, _M3eSearchViewElement_inputInputHandler, _M3eSearchViewElement_inputFocusHandler, _M3eSearchViewElement_inputKeyDownHandler, _M3eSearchViewElement_inputPointerHandler, _M3eSearchViewElement_scrollLockController, _M3eSearchViewElement_inertController, _M3eSearchViewElement_openMode, _M3eSearchViewElement_anchorCleanup, _M3eSearchViewElement_breakpointUnobserve, _M3eSearchViewElement_renderIconOrBackButton, _M3eSearchViewElement_renderIcon, _M3eSearchViewElement_renderBackButton, _M3eSearchViewElement_renderClearButton, _M3eSearchViewElement_initBreakpointMonitoring, _M3eSearchViewElement_handleInputSlotChange, _M3eSearchViewElement_handleInputInput, _M3eSearchViewElement_updateMode, _M3eSearchViewElement_updateClearableState, _M3eSearchViewElement_handleInputFocus, _M3eSearchViewElement_handleCloseClick, _M3eSearchViewElement_handleClearClick, _M3eSearchViewElement_handleInputPointerDown, _M3eSearchViewElement_handleInputKeyDown, _M3eSearchViewElement_handleKeyDown, _M3eSearchViewElement_openDocked, _M3eSearchViewElement_closeDocked, _M3eSearchViewElement_hideDocked, _M3eSearchViewElement_openFullscreen, _M3eSearchViewElement_closeFullscreen;
+/**
+ * A surface that presents suggestions and results for a search.
+ *
+ * @description
+ * The `m3e-search-view` component presents the surface for suggestions,
+ * history, and results, managing the open and close lifecycle around an
+ * embedded search bar. It emits `query`, `clear`, and `toggle`, events to
+ * support application driven search logic, and exposes CSS properties for
+ * container, shape, spacing, and layout across contained, docked, and full
+ * screen configurations.
+ *
+ * @example
+ * The following example shows a contained view in docked mode with a simple set of search results.
+ * ```html
+ * <m3e-search-view mode="docked" contained>
+ *   <input slot="input" placeholder="Search..." />
+ *   <m3e-list>
+ *     <m3e-list-item>Result One</m3e-list-item>
+ *     <m3e-list-item>Result Two</m3e-list-item>
+ *     <m3e-list-item>Result Three</m3e-list-item>
+ *   </m3e-list>
+ * </m3e-search-view>
+ * ```
+ *
+ * @tag m3e-search-view
+ *
+ * @attr contained - Whether the view features a persistent, filled search container.
+ * @attr mode - The behavior mode of the view.
+ * @attr open - Whether the view is expanded to show results.
+ * @attr clear-label - The accessible label given to the button used to clear the search term.
+ * @attr close-label - The accessible label given to the button used to collapse the view.
+ * @attr hide-search-icon - Whether to hide the search icon.
+ *
+ * @slot - When open, renders the results content of the view.
+ * @slot input - Renders the input of the view.
+ * @slot open-leading - When open, renders content before the input of the view.
+ * @slot open-trailing - When open, renders content after the input of the view.
+ * @slot closed-leading - When closed, renders content before the input of the view.
+ * @slot closed-trailing - When closed, renders content after the input of the view.
+ *
+ * @fires clear - Dispatched when the search term is cleared.
+ * @fires query - Dispatched when the view is opened or when the user modifies the search term.
+ * @fires beforetoggle - Dispatched before the toggle state changes.
+ * @fires toggle - Dispatched after the toggle state has changed.
+ *
+ * @cssprop --m3e-search-view-container-color - Background color of the view container.
+ * @cssprop --m3e-search-view-contained-container-color - Background color of the contained view container.
+ * @cssprop --m3e-search-view-divider-color - Color of the divider separating header and results.
+ * @cssprop --m3e-search-view-divider-thickness - Thickness of the divider separating header and results.
+ * @cssprop --m3e-search-view-full-screen-container-shape - Shape of the fullscreen view container.
+ * @cssprop --m3e-search-view-full-screen-header-container-height - Height of the header container in fullscreen mode.
+ * @cssprop --m3e-search-view-docked-container-shape - Shape of the docked view container.
+ * @cssprop --m3e-search-view-docked-header-container-height - Height of the header container in docked mode.
+ * @cssprop --m3e-search-view-contained-leading-margin - Leading margin for the contained view.
+ * @cssprop --m3e-search-view-contained-trailing-margin - Trailing margin for the contained view.
+ * @cssprop --m3e-search-view-contained-focused-leading-margin - Leading margin when the contained view is focused.
+ * @cssprop --m3e-search-view-contained-focused-trailing-margin - Trailing margin when the contained view is focused.
+ * @cssprop --m3e-search-view-contained-docked-bar-results-gap - Gap between the contained docked bar and results.
+ * @cssprop --m3e-search-view-contained-docked-results-shape - Shape of the results container in contained docked mode.
+ * @cssprop --m3e-search-view-contained-docked-bar-shape - Shape of the bar in contained docked mode.
+ * @cssprop --m3e-search-view-contained-full-screen-bar-container-height - Height of the bar container in contained fullscreen mode.
+ * @cssprop --m3e-search-view-docked-container-min-height - Minimum height of the docked view container.
+ * @cssprop --m3e-search-view-docked-container-max-height - Maximum height of the docked view container.
+ * @cssprop --m3e-search-view-contained-docked-results-space - Space above the results in contained docked mode.
+ * @cssprop --m3e-search-view-docked-results-bottom-space - Space below the results in docked mode.
+ * @cssprop --m3e-search-view-docked-scrim-color - Color of the scrim behind the docked view.
+ * @cssprop --m3e-search-view-docked-scrim-opacity - Opacity of the scrim behind the docked view.
+ */
+let M3eSearchViewElement = class M3eSearchViewElement extends EventAttribute$1(ReconnectedCallback$1(AttachInternals$1(LitElement)), "clear", "query") {
+  constructor() {
+    super();
+    _M3eSearchViewElement_instances.add(this);
+    /** @private */
+    _M3eSearchViewElement_input.set(this, void 0);
+    /** @private */
+    _M3eSearchViewElement_closeOnInputFocus.set(this, false);
+    /** @private */
+    _M3eSearchViewElement_inputInputHandler.set(this, () => __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleInputInput).call(this));
+    /** @private */
+    _M3eSearchViewElement_inputFocusHandler.set(this, () => __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleInputFocus).call(this));
+    /** @private */
+    _M3eSearchViewElement_inputKeyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleInputKeyDown).call(this, e));
+    /** @private */
+    _M3eSearchViewElement_inputPointerHandler.set(this, () => __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleInputPointerDown).call(this));
+    /** @private */
+    _M3eSearchViewElement_scrollLockController.set(this, new ScrollLockController$1(this));
+    /** @private */
+    _M3eSearchViewElement_inertController.set(this, new InertController$1(this));
+    /** @private */
+    this._clearable = false;
+    /** @private */
+    _M3eSearchViewElement_openMode.set(this, void 0);
+    /** @private */
+    _M3eSearchViewElement_anchorCleanup.set(this, void 0);
+    /** @private */
+    _M3eSearchViewElement_breakpointUnobserve.set(this, void 0);
+    /**
+     * Whether the view features a persistent, filled search container.
+     * @default false
+     */
+    this.contained = false;
+    /**
+     * The behavior mode of the view.
+     * @default "docked"
+     */
+    this.mode = "docked";
+    /**
+     * Whether the view is expanded to show results.
+     * @default false
+     */
+    this.open = false;
+    /**
+     * The accessible label given to the button used to clear the search term.
+     * @default "Clear"
+     */
+    this.clearLabel = "Clear";
+    /**
+     * The accessible label given to the button used to collapse the view.
+     * @default "Close"
+     */
+    this.closeLabel = "Close";
+    /**
+     * Whether to hide the search icon.
+     * @default false;
+     */
+    this.hideSearchIcon = false;
+    new FocusController$1(this, {
+      callback: focused => this._handleFocusChange(focused)
+    });
+  }
+  /** The current mode applied to the view. */
+  get currentMode() {
+    return this._mode ?? (this.mode !== "fullscreen" ? "docked" : "fullscreen");
   }
-  /** The radios in the group. */
-  get radios() {
-    return this[selectionManager]?.items ?? [];
+  set currentMode(value) {
+    this._mode = value;
   }
-  /** The selected radio. */
-  get selected() {
-    return this[selectionManager]?.selectedItems[0] ?? null;
+  /** Clears the search term. */
+  clear() {
+    if (!__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")) return;
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").value = "";
+    __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_updateClearableState).call(this);
+    this.dispatchEvent(new CustomEvent("query", {
+      detail: {
+        term: ""
+      },
+      bubbles: true,
+      composed: true
+    }));
+    this.dispatchEvent(new Event("clear", {
+      bubbles: true,
+      composed: true
+    }));
   }
-  /** The selected value of the radio group. */
-  get value() {
-    return this.selected?.value ?? null;
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mode = undefined;
+    __classPrivateFieldGet(this, _M3eSearchViewElement_breakpointUnobserve, "f")?.call(this);
   }
   /** @inheritdoc */
-  markAsTouched() {
-    super.markAsTouched();
-    this.radios.forEach(x => x.markAsTouched());
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    if (this.mode === "auto") {
+      __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_initBreakpointMonitoring).call(this);
+    }
   }
   /** @inheritdoc */
-  markAsUntouched() {
-    super.markAsUntouched();
-    this.radios.forEach(x => x.markAsUntouched());
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("mode")) {
+      __classPrivateFieldGet(this, _M3eSearchViewElement_breakpointUnobserve, "f")?.call(this);
+      const previousMode = changedProperties.get("mode");
+      if (previousMode && previousMode !== this.mode && this.open) {
+        this.open = false;
+      }
+      if (this.mode === "auto") {
+        __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_initBreakpointMonitoring).call(this);
+      } else {
+        this._mode = undefined;
+        __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_updateMode).call(this);
+      }
+    }
+    if (changedProperties.has("_mode")) {
+      __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_updateMode).call(this);
+    }
   }
   /** @inheritdoc */
-  markAsDirty() {
-    super.markAsDirty();
-    this.radios.forEach(x => x.markAsDirty());
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has("open")) {
+      if (!this.open) {
+        if ((__classPrivateFieldGet(this, _M3eSearchViewElement_openMode, "f") ?? this.currentMode) === "fullscreen") {
+          __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_closeFullscreen).call(this);
+        } else {
+          __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_closeDocked).call(this);
+        }
+      } else {
+        if (this.currentMode === "fullscreen") {
+          __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_openFullscreen).call(this);
+        } else {
+          __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_openDocked).call(this);
+        }
+      }
+    }
   }
   /** @inheritdoc */
-  markAsPristine() {
-    super.markAsPristine();
-    this.radios.forEach(x => x.markAsPristine());
+  render() {
+    return html`<div class="base"><div class="anchor"></div><div role="${ifDefined(this.open ? "dialog" : undefined)}" aria-modal="${ifDefined(this.open ? "true" : undefined)}" aria-labelledby="${ifDefined(this.open ? "header" : undefined)}" class="view" tabindex="-1" @keydown="${__classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleKeyDown)}"><m3e-focus-trap ?disabled="${!this.open}"><div class="header" id="header"><m3e-search-bar class="bar">${__classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_renderIconOrBackButton).call(this)} ${this.open ? html`<slot name="open-leading" slot="leading"></slot>` : html`<slot name="closed-leading" slot="leading"></slot>`}<slot name="input" slot="input" @slotchange="${__classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleInputSlotChange)}"></slot>${__classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_renderClearButton).call(this)} ${this.open ? html`<slot name="open-trailing" slot="trailing"></slot>` : html`<slot name="closed-trailing" slot="trailing"></slot>`}</m3e-search-bar></div><div class="results"><div class="scroll-container"><slot></slot></div></div></m3e-focus-trap></div></div>`;
   }
-  /** Synchronizes property values when attributes change. */
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    switch (name) {
-      case "name":
-        this.radios.forEach(x => x.name = this.name);
-        break;
-      case "aria-invalid":
-        this.radios.forEach(x => {
-          setCustomState$1(x, "-invalid", newValue === "true");
-          x[updateLabels$1]?.();
-        });
-        break;
+  /** @private */
+  _handleFocusChange(focused) {
+    if (!focused && this.currentMode === "docked") {
+      this.clear();
+      this.open = false;
     }
   }
-  /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"));
-    __classPrivateFieldSet(this, _M3eRadioGroupElement_directionalitySubscription, M3eDirectionality.observe(() => this[selectionManager].directionality = M3eDirectionality.current), "f");
+};
+_M3eSearchViewElement_input = new WeakMap();
+_M3eSearchViewElement_closeOnInputFocus = new WeakMap();
+_M3eSearchViewElement_inputInputHandler = new WeakMap();
+_M3eSearchViewElement_inputFocusHandler = new WeakMap();
+_M3eSearchViewElement_inputKeyDownHandler = new WeakMap();
+_M3eSearchViewElement_inputPointerHandler = new WeakMap();
+_M3eSearchViewElement_scrollLockController = new WeakMap();
+_M3eSearchViewElement_inertController = new WeakMap();
+_M3eSearchViewElement_openMode = new WeakMap();
+_M3eSearchViewElement_anchorCleanup = new WeakMap();
+_M3eSearchViewElement_breakpointUnobserve = new WeakMap();
+_M3eSearchViewElement_instances = new WeakSet();
+_M3eSearchViewElement_renderIconOrBackButton = function _M3eSearchViewElement_renderIconOrBackButton() {
+  if (!this.open && this.hideSearchIcon) return nothing;
+  return html`<div class="icon" slot="leading">${this.open ? __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_renderBackButton).call(this) : __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_renderIcon).call(this)}</div>`;
+};
+_M3eSearchViewElement_renderIcon = function _M3eSearchViewElement_renderIcon() {
+  return html`<slot name="search-icon"><svg class="search-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></slot>`;
+};
+_M3eSearchViewElement_renderBackButton = function _M3eSearchViewElement_renderBackButton() {
+  return html`<m3e-icon-button class="close" slot="leading" aria-label="${this.closeLabel}" @click="${__classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleCloseClick)}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">${this.currentMode === "docked" ? svg`<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>` : svg`<path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>`}</svg></slot></m3e-icon-button>`;
+};
+_M3eSearchViewElement_renderClearButton = function _M3eSearchViewElement_renderClearButton() {
+  return html`<m3e-icon-button class="clear" slot="trailing" aria-label="${this.open && !this._clearable ? this.closeLabel : this.clearLabel}" @click="${__classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleClearClick)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button>`;
+};
+_M3eSearchViewElement_initBreakpointMonitoring = function _M3eSearchViewElement_initBreakpointMonitoring() {
+  __classPrivateFieldSet(this, _M3eSearchViewElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall], matches => {
+    const currentMode = this.currentMode;
+    this._mode = matches.get(Breakpoint.XSmall) ? "fullscreen" : "docked";
+    if (currentMode !== this._mode && this.open) {
+      this.open = false;
+    }
+    __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_updateMode).call(this);
+  }), "f");
+};
+_M3eSearchViewElement_handleInputSlotChange = function _M3eSearchViewElement_handleInputSlotChange(e) {
+  const input = e.target.assignedElements({
+    flatten: true
+  }).find(x => x instanceof HTMLInputElement);
+  if (input != __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")) {
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.removeEventListener("input", __classPrivateFieldGet(this, _M3eSearchViewElement_inputInputHandler, "f"));
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.removeEventListener("focus", __classPrivateFieldGet(this, _M3eSearchViewElement_inputFocusHandler, "f"));
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eSearchViewElement_inputKeyDownHandler, "f"));
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eSearchViewElement_inputPointerHandler, "f"));
+    __classPrivateFieldSet(this, _M3eSearchViewElement_input, input, "f");
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.addEventListener("input", __classPrivateFieldGet(this, _M3eSearchViewElement_inputInputHandler, "f"));
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.addEventListener("focus", __classPrivateFieldGet(this, _M3eSearchViewElement_inputFocusHandler, "f"));
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.addEventListener("keydown", __classPrivateFieldGet(this, _M3eSearchViewElement_inputKeyDownHandler, "f"));
+    __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eSearchViewElement_inputPointerHandler, "f"));
+    if (__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")) {
+      __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").role = __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").role || "searchbox";
+      __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").inputMode = __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").inputMode || "search";
+      __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").type = "text";
+      __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").ariaHasPopup = "dialog";
+    }
+    __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_updateClearableState).call(this);
+  }
+};
+_M3eSearchViewElement_handleInputInput = function _M3eSearchViewElement_handleInputInput() {
+  __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_updateClearableState).call(this);
+  if (this.open) {
+    this.dispatchEvent(new CustomEvent("query", {
+      detail: {
+        term: __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.value ?? ""
+      },
+      bubbles: true,
+      composed: true
+    }));
+  } else {
+    this.open = true;
   }
-  /** @inheritdoc */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"));
-    __classPrivateFieldGet(this, _M3eRadioGroupElement_directionalitySubscription, "f")?.call(this);
+};
+_M3eSearchViewElement_updateMode = function _M3eSearchViewElement_updateMode() {
+  setCustomState$1(this, "-fullscreen", this.currentMode === "fullscreen");
+  setCustomState$1(this, "-docked", this.currentMode === "docked");
+};
+_M3eSearchViewElement_updateClearableState = function _M3eSearchViewElement_updateClearableState() {
+  this._clearable = (__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.value ?? "").length > 0;
+  setCustomState$1(this, "-clearable", this._clearable);
+};
+_M3eSearchViewElement_handleInputFocus = function _M3eSearchViewElement_handleInputFocus() {
+  this.open = !__classPrivateFieldGet(this, _M3eSearchViewElement_closeOnInputFocus, "f");
+  __classPrivateFieldSet(this, _M3eSearchViewElement_closeOnInputFocus, false, "f");
+};
+_M3eSearchViewElement_handleCloseClick = function _M3eSearchViewElement_handleCloseClick() {
+  if (!__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")) return;
+  if (__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").value) {
+    this.clear();
   }
-  /** @inheritdoc */
-  update(changedProperties) {
-    super.update(changedProperties);
-    if (changedProperties.has("disabled")) {
-      this.ariaDisabled = null;
+  __classPrivateFieldSet(this, _M3eSearchViewElement_closeOnInputFocus, true, "f");
+  __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.focus();
+};
+_M3eSearchViewElement_handleClearClick = function _M3eSearchViewElement_handleClearClick() {
+  if (!__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")) return;
+  if (__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f").value) {
+    this.clear();
+  } else {
+    __classPrivateFieldSet(this, _M3eSearchViewElement_closeOnInputFocus, true, "f");
+  }
+  __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.focus();
+};
+_M3eSearchViewElement_handleInputPointerDown = function _M3eSearchViewElement_handleInputPointerDown() {
+  if (!this.open && __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.matches(":focus")) {
+    this.open = true;
+  }
+};
+_M3eSearchViewElement_handleInputKeyDown = function _M3eSearchViewElement_handleInputKeyDown(e) {
+  if (this.open && e.key === "Escape" && !e.shiftKey && !e.ctrlKey) {
+    e.preventDefault();
+    const input = e.target;
+    if (input.value) {
+      this.clear();
     }
-    if (changedProperties.has("disabled") && (changedProperties.get("disabled") !== undefined || this.disabled)) {
-      this[selectionManager].disabled = this.disabled;
+    this.open = false;
+  }
+};
+_M3eSearchViewElement_handleKeyDown = function _M3eSearchViewElement_handleKeyDown(e) {
+  if (this.open && e.key === "Escape" && !e.shiftKey && !e.ctrlKey) {
+    e.preventDefault();
+    __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_handleCloseClick).call(this);
+  }
+};
+_M3eSearchViewElement_openDocked = /** @private */
+async function _M3eSearchViewElement_openDocked() {
+  if (!this.dispatchEvent(new ToggleEvent("beforetoggle", {
+    oldState: "closed",
+    newState: "open",
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  }))) {
+    this.open = false;
+    return;
+  }
+  __classPrivateFieldSet(this, _M3eSearchViewElement_openMode, this.currentMode, "f");
+  const view = this._view;
+  __classPrivateFieldGet(this, _M3eSearchViewElement_anchorCleanup, "f")?.call(this);
+  __classPrivateFieldSet(this, _M3eSearchViewElement_anchorCleanup, await positionAnchor(view, this._anchor, {
+    position: "bottom"
+  }, (x, y) => {
+    const view = this._view;
+    view.style.top = `${y - this._anchor.clientHeight}px`;
+    view.style.width = `${this._anchor.clientWidth}px`;
+    if (M3eDirectionality.current === "rtl") {
+      view.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+      view.style.left = "";
+    } else {
+      view.style.left = `${x}px`;
+      view.style.right = "";
     }
+  }), "f");
+  this._anchor.style.position = "relative";
+  view.popover = "manual";
+  view.style.position = "absolute";
+  view.showPopover();
+  __classPrivateFieldGet(this, _M3eSearchViewElement_scrollLockController, "f").lock();
+  __classPrivateFieldGet(this, _M3eSearchViewElement_inertController, "f").lock();
+  this.dispatchEvent(new ToggleEvent("toggle", {
+    oldState: "closed",
+    newState: "open",
+    bubbles: true,
+    composed: true
+  }));
+  this.dispatchEvent(new CustomEvent("query", {
+    detail: {
+      term: __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.value ?? ""
+    },
+    bubbles: true,
+    composed: true
+  }));
+};
+_M3eSearchViewElement_closeDocked = function _M3eSearchViewElement_closeDocked() {
+  const view = this._view;
+  if (view.popover !== "manual") return;
+  if (!this.dispatchEvent(new ToggleEvent("beforetoggle", {
+    oldState: "open",
+    newState: "closed",
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  }))) {
+    this.open = true;
+    return;
   }
-  /** @inheritdoc */
-  render() {
-    return html`<slot @slotchange="${__classPrivateFieldGet(this, _M3eRadioGroupElement_instances, "m", _M3eRadioGroupElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eRadioGroupElement_instances, "m", _M3eRadioGroupElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eRadioGroupElement_instances, "m", _M3eRadioGroupElement_handleChange)}"></slot>`;
+  __classPrivateFieldSet(this, _M3eSearchViewElement_openMode, undefined, "f");
+  __classPrivateFieldGet(this, _M3eSearchViewElement_scrollLockController, "f").unlock();
+  __classPrivateFieldGet(this, _M3eSearchViewElement_inertController, "f").unlock();
+  if (prefersReducedMotion$1()) {
+    __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_hideDocked).call(this);
+  } else {
+    view.classList.add("closing");
+    view.addEventListener("transitionend", () => __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_hideDocked).call(this), {
+      once: true
+    });
   }
 };
-_M3eRadioGroupElement_directionalitySubscription = new WeakMap();
-_M3eRadioGroupElement_focusOutHandler = new WeakMap();
-_M3eRadioGroupElement_instances = new WeakSet();
-_a$5 = selectionManager;
-_M3eRadioGroupElement_handleSlotChange = function _M3eRadioGroupElement_handleSlotChange() {
-  const {
-    added
-  } = this[selectionManager].setItems([...this.querySelectorAll("m3e-radio")]);
-  added.forEach(x => x.name = x.name || this.name);
+_M3eSearchViewElement_hideDocked = function _M3eSearchViewElement_hideDocked() {
+  __classPrivateFieldGet(this, _M3eSearchViewElement_anchorCleanup, "f")?.call(this);
+  __classPrivateFieldSet(this, _M3eSearchViewElement_anchorCleanup, undefined, "f");
+  const view = this._view;
+  view.classList.remove("closing");
+  view.style.position = "";
+  view.style.width = "";
+  view.style.top = "";
+  view.style.left = "";
+  view.style.right = "";
+  view.hidePopover();
+  view.popover = null;
+  this._anchor.style.position = "";
+  this.dispatchEvent(new ToggleEvent("toggle", {
+    oldState: "open",
+    newState: "closed",
+    bubbles: true,
+    composed: true
+  }));
 };
-_M3eRadioGroupElement_handleKeyDown = function _M3eRadioGroupElement_handleKeyDown(e) {
-  this[selectionManager].onKeyDown(e);
+_M3eSearchViewElement_openFullscreen = /** @private */
+async function _M3eSearchViewElement_openFullscreen() {
+  if (!this.dispatchEvent(new ToggleEvent("beforetoggle", {
+    oldState: "closed",
+    newState: "open",
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  }))) {
+    this.open = false;
+    return;
+  }
+  __classPrivateFieldSet(this, _M3eSearchViewElement_openMode, this.currentMode, "f");
+  __classPrivateFieldGet(this, _M3eSearchViewElement_scrollLockController, "f").lock();
+  __classPrivateFieldGet(this, _M3eSearchViewElement_inertController, "f").lock();
+  const view = this._view;
+  __classPrivateFieldGet(this, _M3eSearchViewElement_anchorCleanup, "f")?.call(this);
+  if (!prefersReducedMotion$1()) {
+    const rect = view.getBoundingClientRect();
+    const startInline = M3eDirectionality.current === "rtl" ? window.innerWidth - rect.right : rect.left;
+    view.style.position = "fixed";
+    view.popover = "manual";
+    view.showPopover();
+    this._anchor.style.position = "relative";
+    view.animate([{
+      transform: `translateX(${startInline}px)`,
+      width: `${rect.width}px`,
+      top: `${rect.top}px`,
+      height: `${rect.height}px`
+    }, {
+      transform: "translateX(0px)",
+      width: "100vw",
+      top: "0px",
+      height: "100vh"
+    }], {
+      duration: 150,
+      easing: "cubic-bezier(0.2, 0.0, 0, 1.0)"
+    });
+  } else {
+    view.style.position = "fixed";
+    view.popover = "manual";
+    view.showPopover();
+    this._anchor.style.position = "relative";
+  }
+  this.dispatchEvent(new ToggleEvent("toggle", {
+    oldState: "closed",
+    newState: "open",
+    bubbles: true,
+    composed: true
+  }));
+  this.dispatchEvent(new CustomEvent("query", {
+    detail: {
+      term: __classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.value ?? ""
+    },
+    bubbles: true,
+    composed: true
+  }));
 };
-_M3eRadioGroupElement_handleChange = function _M3eRadioGroupElement_handleChange() {
-  this.checkValidity();
+_M3eSearchViewElement_closeFullscreen = /** @private */
+async function _M3eSearchViewElement_closeFullscreen() {
+  const view = this._view;
+  if (view.popover !== "manual") return;
+  if (!this.dispatchEvent(new ToggleEvent("beforetoggle", {
+    oldState: "open",
+    newState: "closed",
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  }))) {
+    this.open = true;
+    return;
+  }
+  __classPrivateFieldSet(this, _M3eSearchViewElement_openMode, undefined, "f");
+  __classPrivateFieldGet(this, _M3eSearchViewElement_scrollLockController, "f").unlock();
+  __classPrivateFieldGet(this, _M3eSearchViewElement_inertController, "f").unlock();
+  const anchor = this._anchor;
+  if (!prefersReducedMotion$1()) {
+    const start = view.getBoundingClientRect();
+    const end = anchor.getBoundingClientRect();
+    const startInline = M3eDirectionality.current === "rtl" ? window.innerWidth - start.right : start.left;
+    const endInline = M3eDirectionality.current === "rtl" ? window.innerWidth - end.right : end.left;
+    const dx = M3eDirectionality.current === "rtl" ? startInline - endInline : endInline - startInline;
+    view.classList.add("closing");
+    await view.animate([{
+      transform: `translateX(0px)`,
+      width: `${start.width}px`,
+      top: `${start.top}px`,
+      height: `${start.height}px`
+    }, {
+      transform: `translateX(${dx}px)`,
+      width: `${end.width}px`,
+      top: `${end.top}px`,
+      height: `${end.height}px`
+    }], {
+      duration: 150,
+      easing: "cubic-bezier(0.2, 0.0, 0, 1.0)"
+    }).finished;
+  }
+  view.hidePopover();
+  view.style.position = "";
+  view.popover = null;
+  view.classList.remove("closing");
+  anchor.style.position = "";
+  this.dispatchEvent(new ToggleEvent("toggle", {
+    oldState: "open",
+    newState: "closed",
+    bubbles: true,
+    composed: true
+  }));
 };
+(() => {
+  registerStyleSheet$1(SearchViewLightDomStyle);
+})();
 /** The styles of the element. */
-M3eRadioGroupElement.styles = css`:host { display: inline-flex; }`;
-M3eRadioGroupElement = __decorate([customElement$1("m3e-radio-group")], M3eRadioGroupElement);
+M3eSearchViewElement.styles = SearchViewStyle;
+__decorate([state()], M3eSearchViewElement.prototype, "_clearable", void 0);
+__decorate([state()], M3eSearchViewElement.prototype, "_mode", void 0);
+__decorate([query(".anchor")], M3eSearchViewElement.prototype, "_anchor", void 0);
+__decorate([query(".view")], M3eSearchViewElement.prototype, "_view", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eSearchViewElement.prototype, "contained", void 0);
+__decorate([property({
+  reflect: true
+})], M3eSearchViewElement.prototype, "mode", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eSearchViewElement.prototype, "open", void 0);
+__decorate([property({
+  attribute: "clear-label"
+})], M3eSearchViewElement.prototype, "clearLabel", void 0);
+__decorate([property({
+  attribute: "close-label"
+})], M3eSearchViewElement.prototype, "closeLabel", void 0);
+__decorate([property({
+  attribute: "hide-search-icon",
+  type: Boolean
+})], M3eSearchViewElement.prototype, "hideSearchIcon", void 0);
+__decorate([debounce$1(40)], M3eSearchViewElement.prototype, "_handleFocusChange", null);
+M3eSearchViewElement = __decorate([customElement$1("m3e-search-view")], M3eSearchViewElement);
 
 var _M3eButtonSegmentElement_instances, _M3eButtonSegmentElement_clickHandler, _M3eButtonSegmentElement_handleIconSlotChange, _M3eButtonSegmentElement_handleClick;
 var M3eButtonSegmentElement_1;
@@ -19916,8 +22450,8 @@ var M3eButtonSegmentElement_1;
  * @fires click - Emitted when the element is clicked.
  *
  * @cssprop --m3e-segmented-button-height - Total height of the segmented button.
- * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button’s border.
- * @cssprop --m3e-segmented-button-outline-color - Color of the button’s border.
+ * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.
+ * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.
  * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.
  * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.
  * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.
@@ -20206,7 +22740,7 @@ __decorate([property({
 })], M3eSegmentedButtonElement.prototype, "hideSelectionIndicator", void 0);
 M3eSegmentedButtonElement = __decorate([customElement$1("m3e-segmented-button")], M3eSegmentedButtonElement);
 
-var _M3eSelectElement_instances, _M3eSelectElement_clone, _M3eSelectElement_menu, _M3eSelectElement_ignoreKeyUp, _M3eSelectElement_ignoreFocusVisible, _M3eSelectElement_id, _M3eSelectElement_listId, _M3eSelectElement_clickHandler, _M3eSelectElement_keyDownHandler, _M3eSelectElement_keyUpHandler, _M3eSelectElement_menuToggleHandler, _M3eSelectElement_menuPointerDownHandler, _M3eSelectElement_options_get, _M3eSelectElement_selected_get, _M3eSelectElement_minMenuWidth_get, _M3eSelectElement_formField_get, _M3eSelectElement_handleMutation, _M3eSelectElement_handleClick, _M3eSelectElement_handleKeyDown, _M3eSelectElement_handleKeyUp, _M3eSelectElement_handleMenuPointerDown, _M3eSelectElement_handleMenuToggle, _M3eSelectElement_destroyMenu, _M3eSelectElement_toggleMenu, _M3eSelectElement_showMenu, _M3eSelectElement_hideMenu, _M3eSelectElement_activateOption, _M3eSelectElement_updateSelectionState, _M3eSelectElement_selectOption;
+var _M3eSelectElement_instances, _M3eSelectElement_clone, _M3eSelectElement_menu, _M3eSelectElement_ignoreKeyUp, _M3eSelectElement_ignoreFocusVisible, _M3eSelectElement_id, _M3eSelectElement_listId, _M3eSelectElement_clickHandler, _M3eSelectElement_keyDownHandler, _M3eSelectElement_keyUpHandler, _M3eSelectElement_menuToggleHandler, _M3eSelectElement_menuPointerDownHandler, _M3eSelectElement_options_get, _M3eSelectElement_selected_get, _M3eSelectElement_formField_get, _M3eSelectElement_handleMutation, _M3eSelectElement_handleClick, _M3eSelectElement_handleKeyDown, _M3eSelectElement_handleKeyUp, _M3eSelectElement_handleMenuPointerDown, _M3eSelectElement_handleMenuToggle, _M3eSelectElement_destroyMenu, _M3eSelectElement_toggleMenu, _M3eSelectElement_showMenu, _M3eSelectElement_hideMenu, _M3eSelectElement_activateOption, _M3eSelectElement_updateSelectionState, _M3eSelectElement_selectOption;
 var M3eSelectElement_1;
 /**
  * A form control that allows users to select a value from a set of predefined options.
@@ -20310,13 +22844,6 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
      * @default ""
      */
     this.panelClass = "";
-    new ResizeController$1(this, {
-      callback: () => {
-        if (__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) {
-          __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").style.minWidth = __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_minMenuWidth_get);
-        }
-      }
-    });
     new MutationController$1(this, {
       config: {
         childList: true,
@@ -20434,10 +22961,6 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
     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() {
-  const formField = __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get);
-  return `${formField ? formField.menuAnchor.clientWidth : this.clientWidth}px`;
-};
 _M3eSelectElement_formField_get = function _M3eSelectElement_formField_get() {
   return this.closest("m3e-form-field");
 };
@@ -20582,6 +23105,7 @@ _M3eSelectElement_destroyMenu = function _M3eSelectElement_destroyMenu(e) {
   this.ariaExpanded = "false";
   this.removeAttribute("aria-controls");
   this.removeAttribute("aria-owns");
+  this.removeAttribute("aria-activedescendant");
   this.requestUpdate();
   deleteCustomState$1(this, "-open");
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
@@ -20611,7 +23135,7 @@ _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
     }
   }
   __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").fitAnchorWidth = true;
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").addEventListener("toggle", __classPrivateFieldGet(this, _M3eSelectElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eSelectElement_menuPointerDownHandler, "f"));
   if (__classPrivateFieldGet(this, _M3eSelectElement_clone, "f")) {
@@ -20630,7 +23154,6 @@ _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
 _M3eSelectElement_hideMenu = function _M3eSelectElement_hideMenu() {
   if (!__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").hide();
-  this.removeAttribute("aria-activedescendant");
   deleteCustomState$1(this, "-open");
 };
 _M3eSelectElement_activateOption = function _M3eSelectElement_activateOption(option) {
@@ -21741,11 +24264,7 @@ _M3eSnackbarElement_handleBeforeToggle = function _M3eSnackbarElement_handleBefo
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-snackbar { margin-inline: auto; }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-snackbar { margin-inline: auto; }`);
 })();
 /** The styles of the element. */
 M3eSnackbarElement.styles = css`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
@@ -21844,7 +24363,7 @@ var _M3eSplitButtonElement_instances, _M3eSplitButtonElement_leadingButton, _M3e
  * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers
  * the main action, while the trailing icon button reveals additional options, enabling efficient workflows
  * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious
- * interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.
+ * interactions, reflecting Material 3's principles of clarity, flexibility, and expressive design.
  *
  * @example
  * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,
@@ -22408,7 +24927,7 @@ class StepperButtonElementBase extends ActionElementBase$1 {
 }
 _StepperButtonElementBase_action = new WeakMap();
 
-var _M3eStepperElement_instances, _M3eStepperElement_breakpointUnobserve, _M3eStepperElement_renderHeader, _M3eStepperElement_handleChange, _M3eStepperElement_handleSlotChange, _M3eStepperElement_handleKeyDown, _M3eStepperElement_handleSelectedChange, _M3eStepperElement_checkValidity, _M3eStepperElement_updateDisplayOrder, _a$3;
+var _M3eStepperElement_instances, _M3eStepperElement_breakpointUnobserve, _M3eStepperElement_renderHeader, _M3eStepperElement_handleChange, _M3eStepperElement_handleSlotChange, _M3eStepperElement_handleKeyDown, _M3eStepperElement_handleSelectedChange, _M3eStepperElement_checkValidity, _M3eStepperElement_initBreakpointMonitoring, _M3eStepperElement_updateDisplayOrder, _a$3;
 /**
  * Provides a wizard-like workflow by dividing content into logical steps.
  *
@@ -22474,7 +24993,7 @@ var _M3eStepperElement_instances, _M3eStepperElement_breakpointUnobserve, _M3eSt
  * @cssprop --m3e-step-divider-color - Color of the divider line between steps.
  * @cssprop --m3e-step-divider-inset - Inset offset for divider alignment within step layout.
  */
-let M3eStepperElement = class M3eStepperElement extends AttachInternals$1(LitElement) {
+let M3eStepperElement = class M3eStepperElement extends ReconnectedCallback$1(AttachInternals$1(LitElement)) {
   constructor() {
     super(...arguments);
     _M3eStepperElement_instances.add(this);
@@ -22604,15 +25123,19 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals$1(LitEle
     __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
   }
   /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    if (this.orientation === "auto") {
+      __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_initBreakpointMonitoring).call(this);
+    }
+  }
+  /** @inheritdoc */
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("orientation")) {
       __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
       if (this.orientation === "auto") {
-        __classPrivateFieldSet(this, _M3eStepperElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall], matches => {
-          this._orientation = matches.get(Breakpoint.XSmall) ? "vertical" : "horizontal";
-          __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
-        }), "f");
+        __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_initBreakpointMonitoring).call(this);
       } else {
         this._orientation = undefined;
         __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
@@ -22704,6 +25227,12 @@ _M3eStepperElement_checkValidity = function _M3eStepperElement_checkValidity() {
   }
   return valid;
 };
+_M3eStepperElement_initBreakpointMonitoring = function _M3eStepperElement_initBreakpointMonitoring() {
+  __classPrivateFieldSet(this, _M3eStepperElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall], matches => {
+    this._orientation = matches.get(Breakpoint.XSmall) ? "vertical" : "horizontal";
+    __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
+  }), "f");
+};
 _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDisplayOrder() {
   this[selectionManager].vertical = (this._orientation ?? this.orientation) === "vertical";
   setCustomState$1(this, "-vertical", this[selectionManager].vertical);
@@ -22724,11 +25253,7 @@ _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDispla
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-stepper:not(:state(-vertical)) > .-m3e-step-divider::before { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:state(-vertical))[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(:state(-vertical))[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"]:not(:last-of-type) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet$1(css`m3e-stepper:not(:state(-vertical)) > .-m3e-step-divider::before { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:not(:state(-vertical))[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(:state(-vertical))[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"]:not(:last-of-type) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); } m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken$1.color.outline}); }`);
 })();
 /** 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; }`;
@@ -22947,8 +25472,8 @@ var _M3eSwitchElement_instances, _M3eSwitchElement_clickHandler, _M3eSwitchEleme
  * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.
  * @cssprop --m3e-switch-track-height - Height of the switch track.
  * @cssprop --m3e-switch-track-width - Width of the switch track.
- * @cssprop --m3e-switch-track-outline-color - Color of the track’s outline.
- * @cssprop --m3e-switch-track-outline-width - Thickness of the track’s outline.
+ * @cssprop --m3e-switch-track-outline-color - Color of the track's outline.
+ * @cssprop --m3e-switch-track-outline-width - Thickness of the track's outline.
  * @cssprop --m3e-switch-track-shape - Corner shape of the track.
  * @cssprop --m3e-switch-selected-track-color - Track color when selected.
  * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.
@@ -27722,7 +30247,7 @@ class TooltipElementBase extends HtmlFor$1(ReconnectedCallback$1(AttachInternals
       position: this._anchorPosition,
       inline: true,
       flip: true,
-      shift: true,
+      shift: "main",
       offset: TOOLTIP_OFFSET
     }, (x, y) => this._updatePosition(this._base, x, y)), "f");
     if (!_a.__openTooltips.includes(this)) {
@@ -28182,5 +30707,5 @@ M3eTooltipElement.styles = css`:host { display: contents; } .base { position: ab
 __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, 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 };
+export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, 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, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, 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, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate };
 //# sourceMappingURL=all.js.map