@m3e/web 2.2.0 → 2.2.1

package/README.md

@@ -8,10 +8,10 @@ This project is not affiliated with or endorsed by Google. “Material Design”
 
 ## ✨ Features
 
-- **Expressive Components**: Leverage Material 3’s design tokens, dynamic color, shape and motion systems for highly customizable UI elements.
+- **Expressive Components**: Leverage Material 3's design tokens, dynamic color, shape and motion systems for highly customizable UI elements.
 - **Unified Architecture**: Modularized for easy maintenance, scalability, and rapid development.
 - **Accessibility First**: Built-in support for accessibility standards, ensuring inclusive experiences for all users.
-- **Theming & Personalization**: Effortlessly adapt components to your brand or user preferences with Material 3’s advanced theming capabilities.
+- **Theming & Personalization**: Effortlessly adapt components to your brand or user preferences with Material 3's advanced theming capabilities.
 - **Performance Optimized**: Lightweight, fast-loading components designed for modern web platforms.
 - **Security Conscious**: Built with secure-by-default patterns, including XSS-safe templating, Trusted Types compatibility, and support for strong Content Security Policies (CSP) to enforce safe DOM interactions and mitigate injection risks.
 

package/dist/all.js

@@ -358,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_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.
@@ -405,6 +405,7 @@ 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 EventAttribute$1(HtmlFor$1(LitElement), "query") {
   constructor() {
@@ -449,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);
       }
@@ -526,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;
@@ -565,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();
@@ -639,7 +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;
+  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;
@@ -719,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")) {
@@ -735,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) {
@@ -842,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();
@@ -849,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;
@@ -901,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;
@@ -947,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) {
@@ -976,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;
@@ -988,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");
@@ -1008,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);
@@ -1026,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) {
@@ -1041,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")) {
@@ -6826,7 +6866,7 @@ function prefersReducedMotion() {
 }
 
 /**
- * Registers a constructable stylesheet in the document’s `adoptedStyleSheets`.
+ * 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) {
@@ -11406,7 +11446,7 @@ let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
 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_updateVariant, _M3eDatepickerElement_updatePosition, _M3eDatepickerElement_clearSelectionState;
+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.
@@ -11473,7 +11513,7 @@ var M3eDatepickerElement_1;
  * @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(AttachInternals$1(Role$1(LitElement, "dialog"))) {
+let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement extends SuppressInitialAnimation$1(ReconnectedCallback$1(AttachInternals$1(Role$1(LitElement, "dialog")))) {
   constructor() {
     super(...arguments);
     _M3eDatepickerElement_instances.add(this);
@@ -11628,12 +11668,20 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
     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.
@@ -11648,9 +11696,15 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
       __classPrivateFieldGet(this, _M3eDatepickerElement_scrollLockController, "f").lock();
       __classPrivateFieldGet(this, _M3eDatepickerElement_inertController, "f").lock();
     }
-    this._calendar.date = this.date;
-    this._calendar.rangeStart = this.rangeStart;
-    this._calendar.rangeEnd = this.rangeEnd;
+    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");
@@ -11702,10 +11756,7 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
     if (changedProperties.has("variant")) {
       __classPrivateFieldGet(this, _M3eDatepickerElement_breakpointUnobserve, "f")?.call(this);
       if (this.variant === "auto") {
-        __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");
+        __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_initBreakpointMonitoring).call(this);
       } else {
         this._variant = undefined;
         __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updateVariant).call(this);
@@ -11777,6 +11828,12 @@ _M3eDatepickerElement_handleDocumentKeyDown = function _M3eDatepickerElement_han
     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":
@@ -11803,6 +11860,7 @@ _M3eDatepickerElement_updateVariant = function _M3eDatepickerElement_updateVaria
 _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,
@@ -11821,13 +11879,16 @@ async function _M3eDatepickerElement_updatePosition() {
       this.style.top = `${y}px`;
     }), "f");
   } else {
-    __classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
-    __classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, undefined, "f");
-    this.style.left = "";
-    this.style.right = "";
-    this.style.top = "";
+    __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;
 };
@@ -12367,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.
  *
@@ -12412,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.
@@ -12487,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);
       }
@@ -12512,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) {
@@ -12566,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");
@@ -18760,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.
  *
@@ -18792,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);
@@ -18828,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();
@@ -18864,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();
@@ -20249,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)) {
@@ -21749,7 +21826,7 @@ __decorate([property({
 })], 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_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;
+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.
  *
@@ -21818,7 +21895,7 @@ var _M3eSearchViewElement_instances, _M3eSearchViewElement_input, _M3eSearchView
  * @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(AttachInternals$1(LitElement), "clear", "query") {
+let M3eSearchViewElement = class M3eSearchViewElement extends EventAttribute$1(ReconnectedCallback$1(AttachInternals$1(LitElement)), "clear", "query") {
   constructor() {
     super();
     _M3eSearchViewElement_instances.add(this);
@@ -21905,6 +21982,19 @@ let M3eSearchViewElement = class M3eSearchViewElement extends EventAttribute$1(A
     }));
   }
   /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mode = undefined;
+    __classPrivateFieldGet(this, _M3eSearchViewElement_breakpointUnobserve, "f")?.call(this);
+  }
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    if (this.mode === "auto") {
+      __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_initBreakpointMonitoring).call(this);
+    }
+  }
+  /** @inheritdoc */
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("mode")) {
@@ -21914,14 +22004,7 @@ let M3eSearchViewElement = class M3eSearchViewElement extends EventAttribute$1(A
         this.open = false;
       }
       if (this.mode === "auto") {
-        __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");
+        __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_initBreakpointMonitoring).call(this);
       } else {
         this._mode = undefined;
         __classPrivateFieldGet(this, _M3eSearchViewElement_instances, "m", _M3eSearchViewElement_updateMode).call(this);
@@ -21987,6 +22070,16 @@ _M3eSearchViewElement_renderBackButton = function _M3eSearchViewElement_renderBa
 _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
@@ -22357,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.
@@ -23012,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();
@@ -23060,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) {
@@ -24270,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`,
@@ -24834,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.
  *
@@ -24900,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);
@@ -25030,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);
@@ -25130,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);
@@ -25369,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.