@expressivecss/expressive 0.10.1 → 0.12.0

package/dist/js/expressive.cjs

@@ -271,12 +271,7 @@ var _Utils = class _Utils {
     button.type = "button";
     button.tabIndex = !!visibility ? 0 : -1;
     button.innerText = text;
-    if (typeof callback === "function") {
-      button.addEventListener("click", callback);
-      button.addEventListener("keypress", (e) => {
-        if (e.key === _Utils.keys.ENTER) callback(e);
-      });
-    }
+    if (typeof callback === "function") button.addEventListener("click", callback);
     container.append(button);
   }
   static _setAbsolutePosition(origin, container, position, margin, transitionMovement, align = "center") {
@@ -315,6 +310,13 @@ var _Utils = class _Utils {
       transitionMovement,
       align
     );
+    const parent = container.offsetParent;
+    if (parent && (parent !== document.body || getComputedStyle(parent).position !== "static")) {
+      const rect = parent.getBoundingClientRect();
+      const root = parent === document.scrollingElement;
+      newCoordinates.x -= rect.left + _Utils.getDocumentScrollLeft() + parent.clientLeft - (root ? 0 : parent.scrollLeft);
+      newCoordinates.y -= rect.top + _Utils.getDocumentScrollTop() + parent.clientTop - (root ? 0 : parent.scrollTop);
+    }
     container.style.top = newCoordinates.y + "px";
     container.style.left = newCoordinates.x + "px";
     return { x: xMovement, y: yMovement };
@@ -396,7 +398,7 @@ var Component = class {
     let instances = null;
     if (els instanceof Element) {
       instances = new classDef(els, options);
-    } else if (!!els && els.length) {
+    } else if (els) {
       instances = [];
       for (let i = 0; i < els.length; i++) {
         instances.push(new classDef(els[i], options));
@@ -784,6 +786,7 @@ var _Menu = class _Menu extends Component {
     super(el, options, _Menu);
     this._pendingTimers = /* @__PURE__ */ new Set();
     this._transition = 0;
+    this._menuClickTargets = /* @__PURE__ */ new WeakMap();
     this._handleClick = (e) => {
       e.preventDefault();
       if (this.isOpen) {
@@ -812,11 +815,15 @@ var _Menu = class _Menu extends Component {
       }
     };
     this._handleDocumentClick = (e) => {
-      const target = e.target;
+      const path = e.composedPath();
+      const menuTarget = this._menuClickTargets.get(e);
+      this._menuClickTargets.delete(e);
+      const target = menuTarget ?? (path[0] || e.target);
+      const inside = !!menuTarget || path.includes(this.menuEl) || this.menuEl?.contains(target);
       if (this._isSubmenuTriggerClick(target)) return;
-      if (this.options.closeOnClick && this.menuEl?.contains(target) && !this.isTouchMoving) {
+      if (this.options.closeOnClick && inside && !this.isTouchMoving) {
         this.close();
-      } else if (!this.menuEl?.contains(target)) {
+      } else if (!inside) {
         this._schedule(() => {
           if (this.isOpen) {
             this.close();
@@ -834,12 +841,13 @@ var _Menu = class _Menu extends Component {
     };
     this._handleDocumentTouchmove = (e) => {
       const target = e.target;
-      if (this.menuEl?.contains(target)) {
+      if (e.composedPath().includes(this.menuEl) || this.menuEl?.contains(target)) {
         this.isTouchMoving = true;
       }
     };
     this._handleMenuClick = (e) => {
       const target = e.target;
+      this._menuClickTargets.set(e, target);
       const li = target.closest("li");
       if (li?.matches('.disabled, [aria-disabled="true"]')) {
         e.preventDefault();
@@ -1006,7 +1014,7 @@ var _Menu = class _Menu extends Component {
       this._animateOut();
       this._removeTemporaryEventHandlers();
       this.el.ariaExpanded = "false";
-      if (this.options.autoFocus && (root.activeElement === focused || !root.activeElement || root.activeElement === document.body)) {
+      if (this.options.autoFocus && this.menuEl.contains(focused) && (root.activeElement === focused || this.el.ownerDocument.activeElement === this.el.ownerDocument.body)) {
         this.el.focus();
       }
     };
@@ -1098,6 +1106,7 @@ var _Menu = class _Menu extends Component {
   }
   _setupTemporaryEventHandlers() {
     document.body.addEventListener("click", this._handleDocumentClick);
+    this.menuEl?.addEventListener("touchmove", this._handleDocumentTouchmove, { passive: true });
     document.body.addEventListener("touchmove", this._handleDocumentTouchmove, {
       passive: true
     });
@@ -1106,6 +1115,7 @@ var _Menu = class _Menu extends Component {
   }
   _removeTemporaryEventHandlers() {
     document.body.removeEventListener("click", this._handleDocumentClick);
+    this.menuEl?.removeEventListener("touchmove", this._handleDocumentTouchmove);
     document.body.removeEventListener("touchmove", this._handleDocumentTouchmove);
     this.menuEl?.removeEventListener("keydown", this._handleMenuKeydown);
     window.removeEventListener("resize", this._handleWindowResize);
@@ -1455,12 +1465,12 @@ var _Autocomplete = class _Autocomplete extends Component {
         this._resetAutocomplete();
       }
     };
-    this._handleInputKeyup = (e) => {
-      if (e.type === "keyup") _Autocomplete._keydown = false;
+    this._handleInputKeyup = () => {
+      _Autocomplete._keydown = false;
+    };
+    this._handleInput = () => {
       this.count = 0;
       const actualValue = this.el.value.toLocaleLowerCase();
-      if (e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ESC || e.key === "Tab")
-        return;
       if (this.oldVal !== actualValue && this.el.matches(":focus-visible")) {
         this.open();
       }
@@ -1539,7 +1549,6 @@ var _Autocomplete = class _Autocomplete extends Component {
       const inputText = this.el.value.toLocaleLowerCase();
       this._resetAutocomplete();
       if (inputText.length >= this.options.minLength) {
-        this.isOpen = true;
         this._renderMenu();
         this._announce(this.menuItems.length ? this.options.i18n.results(this.menuItems.length) : this.options.i18n.noResults);
       }
@@ -1633,6 +1642,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
     this._removeEventHandlers();
     this.menu.destroy();
+    this.isOpen = false;
     this._removeMenu();
     this._statusInfo.remove();
     this._announcer.remove();
@@ -1640,6 +1650,7 @@ var _Autocomplete = class _Autocomplete extends Component {
   }
   _setupEventHandlers() {
     this.el.addEventListener("blur", this._handleInputBlur);
+    this.el.addEventListener("input", this._handleInput);
     this.el.addEventListener("keyup", this._handleInputKeyup);
     this.el.addEventListener("focus", this._handleInputFocus);
     this.el.addEventListener("keydown", this._handleInputKeydown);
@@ -1650,6 +1661,7 @@ var _Autocomplete = class _Autocomplete extends Component {
   }
   _removeEventHandlers() {
     this.el.removeEventListener("blur", this._handleInputBlur);
+    this.el.removeEventListener("input", this._handleInput);
     this.el.removeEventListener("keyup", this._handleInputKeyup);
     this.el.removeEventListener("focus", this._handleInputFocus);
     this.el.removeEventListener("keydown", this._handleInputKeydown);
@@ -1678,6 +1690,16 @@ var _Autocomplete = class _Autocomplete extends Component {
       ..._Autocomplete.defaults.menuOptions,
       ...this.options.menuOptions
     };
+    const userOnOpenStart = menuOptions.onOpenStart;
+    const userOnCloseStart = menuOptions.onCloseStart;
+    menuOptions.onOpenStart = (el) => {
+      this.isOpen = true;
+      if (typeof userOnOpenStart === "function") userOnOpenStart.call(this.menu, el);
+    };
+    menuOptions.onCloseStart = (el) => {
+      this.isOpen = false;
+      if (typeof userOnCloseStart === "function") userOnCloseStart.call(this.menu, el);
+    };
     const userOnItemClick = menuOptions.onItemClick;
     menuOptions.onItemClick = (li) => {
       if (!li) return;
@@ -1690,10 +1712,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     const label = this.el.parentElement.querySelector("label");
     if (label) this.el.after(label);
     this.el.removeEventListener("click", this.menu._handleClick);
-    if (!this.options.isMultiSelect && !(this.options.selected.length === 0)) {
-      const selectedValue = this.menuItems.filter((value) => value.id === this.selectedValues[0].id);
-      this.el.value = selectedValue[0].text;
-    }
+    if (!this.options.isMultiSelect) this._refreshInputText();
     if (this.el.value) this.selectOption(this.el.value);
     const div = document.createElement("div");
     div.classList.add("status-info");
@@ -1721,7 +1740,6 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.container.replaceChildren();
     this._resetCurrentElementPosition();
     this.oldVal = null;
-    this.isOpen = false;
     this._pointerDown = false;
   }
   _highlightPartialText(input, label) {
@@ -1839,7 +1857,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
   }
   _triggerChanged() {
-    this.el.dispatchEvent(new Event("change"));
+    this.el.dispatchEvent(new Event("change", { bubbles: true, cancelable: true, composed: true }));
     if (typeof this.options.onAutocomplete === "function")
       this.options.onAutocomplete.call(this, this.selectedValues);
   }
@@ -1948,7 +1966,7 @@ var _Chips = class _Chips extends Component {
     this._handleInputKeydown = (e) => {
       _Chips._keydown = true;
       if (e.key === Utils.keys.ENTER) {
-        if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
+        if (this.hasAutocomplete && this.autocomplete?.isOpen && this.autocomplete.container.querySelector('[role="option"]')) {
           return;
         }
         e.preventDefault();
@@ -2014,6 +2032,9 @@ var _Chips = class _Chips extends Component {
     return this.chipsData;
   }
   destroy() {
+    if (this.autocomplete && Autocomplete.getInstance(this._input) === this.autocomplete) {
+      this.autocomplete.destroy();
+    }
     if (this.options.allowUserInput) {
       this._removeEventHandlers();
     }
@@ -2079,7 +2100,7 @@ var _Chips = class _Chips extends Component {
     }
   }
   _renderChip(chip) {
-    if (!chip.id) return;
+    if (!chip.id && chip.id !== 0) return;
     const label = chip.text || chip.id;
     const renderedChip = document.createElement("span");
     renderedChip.classList.add("chip");
@@ -2113,14 +2134,16 @@ var _Chips = class _Chips extends Component {
   }
   _setupAutocomplete() {
     this.options.autocompleteOptions.onAutocomplete = (items) => {
-      if (items.length > 0)
+      if (_Chips.getInstance(this.el) !== this) return;
+      if (items.length > 0) {
         this.addChip({
           id: items[0].id,
           text: items[0].text,
           image: items[0].image
         });
-      this._input.value = "";
-      this._input.focus();
+        this._input.value = "";
+        this._input.focus();
+      }
     };
     this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
   }
@@ -2141,6 +2164,7 @@ var _Chips = class _Chips extends Component {
     if (this._label && this._input) this._label.setAttribute("for", this._input.getAttribute("id"));
   }
   _setPlaceholder() {
+    if (!this._input) return;
     if (this.chipsData !== void 0 && !this.chipsData.length && this.options.placeholder) {
       this._input.placeholder = this.options.placeholder;
     } else if ((this.chipsData === void 0 || !!this.chipsData.length) && this.options.secondaryPlaceholder) {
@@ -2148,7 +2172,7 @@ var _Chips = class _Chips extends Component {
     }
   }
   _isValidAndNotExist(chip) {
-    const isValid = !!chip.id;
+    const isValid = !!chip.id || chip.id === 0;
     const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
     return isValid && doesNotExist;
   }
@@ -2161,7 +2185,8 @@ var _Chips = class _Chips extends Component {
     const renderedChip = this._renderChip(chip);
     this._chips.push(renderedChip);
     this.chipsData.push(chip);
-    this._input.before(renderedChip);
+    if (this._input) this._input.before(renderedChip);
+    else this.el.append(renderedChip);
     this._setPlaceholder();
     if (typeof this.options.onChipAdd === "function") {
       this.options.onChipAdd(this.el, renderedChip);
@@ -2232,6 +2257,7 @@ var Chips = _Chips;
 
 // src/ts/components/slider.ts
 var _defaults6 = {};
+var _authored = /* @__PURE__ */ new WeakMap();
 var Slider = class _Slider extends Component {
   constructor(el, options) {
     super(el, options, _Slider);
@@ -2300,6 +2326,18 @@ var Slider = class _Slider extends Component {
     this._removeEventHandlers();
     this._removeThumb();
     this.el["Expressive_Slider"] = void 0;
+    const host = this._host();
+    for (const el of [this.el, host]) {
+      for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);
+      _authored.delete(el);
+    }
+    host?.querySelectorAll('input[type="range"]').forEach((el) => el["Expressive_Slider"]?._sync());
+  }
+  _set(el, name, value) {
+    const authored = _authored.get(el) ?? {};
+    _authored.set(el, authored);
+    authored[name] ?? (authored[name] = el.style.getPropertyValue(name));
+    el.style.setProperty(name, value);
   }
   // Eleven listeners used to cover four stages, because each one was written
   // twice - once for mouse, once for touch. One of the touch spellings,
@@ -2370,25 +2408,28 @@ var Slider = class _Slider extends Component {
     const handle = parseFloat(style.getPropertyValue("--md-comp-slider-handle-width")) || 4;
     const length = vertical ? height : width;
     const position = handle / 2 + percent * (length - handle);
-    this.el.style.setProperty("--md-comp-slider-active-fraction", fraction);
-    this.el.style.setProperty("--md-comp-slider-active-position", `${position}px`);
+    this._set(this.el, "--md-comp-slider-active-fraction", fraction);
+    this._set(this.el, "--md-comp-slider-active-position", `${position}px`);
     const host = this._host();
     const peers = host?.querySelectorAll('input[type="range"]');
     if (host && peers && peers.length === 2) {
       const nums = Array.from(peers).map((el) => this._fraction(el));
-      host.style.setProperty("--md-comp-slider-start-fraction", `${Math.min(...nums) * 100}%`);
-      host.style.setProperty("--md-comp-slider-end-fraction", `${Math.max(...nums) * 100}%`);
-      host.style.setProperty("--md-comp-slider-start-position", `${handle / 2 + Math.min(...nums) * (length - handle)}px`);
-      host.style.setProperty("--md-comp-slider-end-position", `${handle / 2 + Math.max(...nums) * (length - handle)}px`);
+      this._set(host, "--md-comp-slider-start-fraction", `${Math.min(...nums) * 100}%`);
+      this._set(host, "--md-comp-slider-end-fraction", `${Math.max(...nums) * 100}%`);
+      this._set(host, "--md-comp-slider-start-position", `${handle / 2 + Math.min(...nums) * (length - handle)}px`);
+      this._set(host, "--md-comp-slider-end-position", `${handle / 2 + Math.max(...nums) * (length - handle)}px`);
     }
     if (host?.classList.contains("stops")) {
       const parsedMax = parseFloat(this.el.max);
       const max = Number.isNaN(parsedMax) ? 100 : parsedMax;
       const min = parseFloat(this.el.min) || 0;
       const step = parseFloat(this.el.step);
-      if (step > 0 && Number.isFinite(step)) {
-        const n = Math.round((max - min) / step) + 1;
-        host.style.setProperty("--md-comp-slider-stop-count", String(Math.max(2, n)));
+      const stops = step > 0 && Number.isFinite(step) && max > min;
+      this._set(host, "--md-comp-slider-stop-count", stops ? String(Math.floor((max - min) / step + 1e-9) + 1) : "");
+      this._set(host, "--md-comp-slider-stop-spacing", stops ? `${(length - handle) * step / (max - min)}px` : "");
+      if (peers?.length === 1) {
+        this._set(host, "--md-comp-slider-active-position", `${position}px`);
+        this._set(host, "--md-comp-slider-track-center", `${top + height / 2}px`);
       }
     }
     this.value.textContent = this.el.value;
@@ -2481,6 +2522,7 @@ var Dialogs = _Dialogs;
 // src/ts/behaviors/sheetDrag.ts
 var DISMISS_DISTANCE = 96;
 var DISMISS_VELOCITY = 0.5;
+var FLICK_TIMEOUT = 100;
 var DRAG_SLOP = 4;
 function installSheetDrag(config) {
   const coord = (event) => config.axis === "x" ? event.clientX : event.clientY;
@@ -2517,6 +2559,7 @@ function installSheetDrag(config) {
       start: coord(event),
       last: coord(event),
       lastT: Date.now(),
+      velocity: 0,
       shift: 0
     };
     observer.observe(document, { childList: true, subtree: true, attributes: true, attributeFilter: ["open"], attributeOldValue: true });
@@ -2529,8 +2572,12 @@ function installSheetDrag(config) {
     }
     const delta = coord(event) - drag.start;
     drag.shift = drag.direction === 1 ? Math.max(0, delta) : Math.min(0, delta);
-    drag.last = coord(event);
-    drag.lastT = Date.now();
+    if (coord(event) !== drag.last) {
+      const now = Date.now();
+      drag.velocity = (coord(event) - drag.last) / Math.max(1, now - drag.lastT);
+      drag.last = coord(event);
+      drag.lastT = now;
+    }
     drag.dialog.style.setProperty(config.property, `${drag.shift}px`);
   };
   const onUp = (event) => {
@@ -2540,13 +2587,14 @@ function installSheetDrag(config) {
       onCancel();
       return;
     }
+    onMove(event);
     drag = null;
     observer.disconnect();
     held.dialog.style.transition = "";
-    const dt = Math.max(1, Date.now() - held.lastT);
-    const velocity = (coord(event) - held.last) / dt;
-    config.onRelease?.(Math.abs(held.shift) > DRAG_SLOP);
-    const dismiss = held.direction === 1 ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY;
+    const velocity = Date.now() - held.lastT < FLICK_TIMEOUT ? held.velocity : 0;
+    const dragged = Math.abs(held.shift) > DRAG_SLOP;
+    config.onRelease?.(dragged);
+    const dismiss = dragged && (held.direction === 1 ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY);
     if (dismiss && held.dialog.open) held.dialog.close();
     held.dialog.style.setProperty(config.property, "0px");
   };
@@ -2741,7 +2789,10 @@ var AppBar = class _AppBar extends Component {
     this._onIntersect = (entries) => {
       const entry = entries[0];
       if (!entry) return;
-      this.el.classList.toggle("collapsed", !entry.isIntersecting);
+      this.el.classList.toggle(
+        "collapsed",
+        !entry.isIntersecting && entry.boundingClientRect.top < this.el.getBoundingClientRect().top
+      );
     };
     this._onSearchViewClose = () => {
       this._searchOpen = this._view.open;
@@ -2788,8 +2839,8 @@ var AppBar = class _AppBar extends Component {
     if (typeof IntersectionObserver === "undefined") return;
     this._sentinel = document.createElement("span");
     this._sentinel.setAttribute("aria-hidden", "true");
-    this._sentinel.style.cssText = "display:block;width:100%;height:1px;margin-top:-1px;pointer-events:none;visibility:hidden";
-    this.el.insertAdjacentElement("beforebegin", this._sentinel);
+    this._sentinel.style.cssText = "display:block;height:0;position:relative;top:-64px;pointer-events:none;visibility:hidden";
+    this.el.insertAdjacentElement("afterend", this._sentinel);
     this._observer = new IntersectionObserver(this._onIntersect);
     this._observer.observe(this._sentinel);
   }
@@ -3216,10 +3267,6 @@ var _Carousel = class _Carousel extends Component {
       this._dragStartX = e.clientX;
       this._dragStartY = e.clientY;
       this._dragStartScroll = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
-      try {
-        this._scroller.setPointerCapture(e.pointerId);
-      } catch {
-      }
     };
     this._handleTrackPointerMove = (e) => {
       if (!this.pressed || e.pointerId !== this._dragPointerId) return;
@@ -3231,6 +3278,10 @@ var _Carousel = class _Carousel extends Component {
         if (Math.abs(primaryDelta) < 6 || Math.abs(primaryDelta) <= Math.abs(crossDelta)) return;
         this.dragged = true;
         this.el.classList.add("dragging");
+        try {
+          this._scroller.setPointerCapture(e.pointerId);
+        } catch {
+        }
       }
       if (this._vertical) this._scroller.scrollTop = this._dragStartScroll - deltaY;
       else this._scroller.scrollLeft = this._dragStartScroll - deltaX;
@@ -3260,7 +3311,7 @@ var _Carousel = class _Carousel extends Component {
       e.stopImmediatePropagation();
     };
     this._handleTrackDragStart = (e) => {
-      if (e.target.closest("img, picture, video")) e.preventDefault();
+      if (e.target.closest("a, img, picture, video")) e.preventDefault();
     };
     this._handleItemResize = (e) => {
       if (this._alignAfterResize && !this.pressed && e.propertyName === "flex-basis" && this.images.includes(e.target)) {
@@ -3316,7 +3367,7 @@ var _Carousel = class _Carousel extends Component {
       if (!this._started || !this.images.length) return;
       this._syncAdaptiveMode();
       this._syncLayoutRoles(this.center);
-      this._scrollToIndex(this.center, false);
+      if (!this.pressed) this._scrollToIndex(this.center, false);
       this._updateParallax();
     };
     this._finishScroll = () => {
@@ -3325,7 +3376,7 @@ var _Carousel = class _Carousel extends Component {
       this._scroller.removeEventListener("scrollend", this._handleScrollEnd);
     };
     this._handleScrollEnd = () => {
-      if (!this.images.some((item) => item.getAnimations().some((animation) => animation.playState === "running"))) {
+      if (this._nearestIndex() === this.center && !this.images.some((item) => item.getAnimations().some((animation) => animation.playState === "running"))) {
         this._finishScroll();
       }
     };
@@ -3500,9 +3551,9 @@ var _Carousel = class _Carousel extends Component {
     });
     this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown);
     this._scroller.addEventListener("wheel", this._handleNativeScroll, { passive: true });
-    this._scroller.addEventListener("pointermove", this._handleTrackPointerMove);
-    this._scroller.addEventListener("pointerup", this._handleTrackPointerUp);
-    this._scroller.addEventListener("pointercancel", this._handleTrackPointerUp);
+    document.addEventListener("pointermove", this._handleTrackPointerMove);
+    document.addEventListener("pointerup", this._handleTrackPointerUp);
+    document.addEventListener("pointercancel", this._handleTrackPointerUp);
     this._scroller.addEventListener("click", this._handleTrackClick, true);
     this._scroller.addEventListener("dragstart", this._handleTrackDragStart);
     this._scroller.addEventListener("transitionend", this._handleItemResize);
@@ -3521,9 +3572,9 @@ var _Carousel = class _Carousel extends Component {
     this._scroller.removeEventListener("scroll", this._handleTrackScroll);
     this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
     this._scroller.removeEventListener("wheel", this._handleNativeScroll);
-    this._scroller.removeEventListener("pointermove", this._handleTrackPointerMove);
-    this._scroller.removeEventListener("pointerup", this._handleTrackPointerUp);
-    this._scroller.removeEventListener("pointercancel", this._handleTrackPointerUp);
+    document.removeEventListener("pointermove", this._handleTrackPointerMove);
+    document.removeEventListener("pointerup", this._handleTrackPointerUp);
+    document.removeEventListener("pointercancel", this._handleTrackPointerUp);
     this._scroller.removeEventListener("click", this._handleTrackClick, true);
     this._scroller.removeEventListener("dragstart", this._handleTrackDragStart);
     this._scroller.removeEventListener("transitionend", this._handleItemResize);
@@ -3874,14 +3925,41 @@ var _defaults12 = {
 var FormSelect = class _FormSelect extends Component {
   constructor(el, options) {
     super(el, options, _FormSelect);
+    this._originalLabels = /* @__PURE__ */ new Map();
+    this._validationMessage = null;
     this._handleSelectChange = () => {
       this._setValueToInput();
       this._setSelectedStates();
+      this._syncValidationError();
+    };
+    this._handleInvalid = (e) => {
+      if (e.defaultPrevented) return;
+      if (!this._validationMessage) {
+        this._validationMessage = document.createElement("small");
+        this._validationMessage.id = this.input.id + "-error";
+        this._validationMessage.className = "supporting-text";
+        this._validationMessage.style.color = "var(--md-sys-color-error)";
+        this.wrapper.append(this._validationMessage);
+        this.input.setAttribute(
+          "aria-describedby",
+          [this.input.getAttribute("aria-describedby"), this._validationMessage.id].filter(Boolean).join(" ")
+        );
+      }
+      this.input.ariaInvalid = "true";
+      this._syncValidationError();
     };
+    // Native reporting chooses the control; static checks never focus. Wait until
+    // reporting finishes so Firefox dismisses its native popup when focus moves.
+    this._handleNativeFocus = () => queueMicrotask(() => {
+      if (_FormSelect.getInstance(this.el) === this && this.el.matches(":focus")) this.input.focus();
+    });
     this._handleReset = (e) => {
       clearTimeout(this._resetTimer);
       this._resetTimer = setTimeout(() => {
-        if (!e.defaultPrevented) this._handleSelectChange();
+        if (!e.defaultPrevented) {
+          this._handleSelectChange();
+          this._clearValidationError();
+        }
       }, 0);
     };
     // Named rather than inline so that _removeEventHandlers can actually detach
@@ -3918,7 +3996,6 @@ var FormSelect = class _FormSelect extends Component {
     this.el.tabIndex = -1;
     this._values = [];
     this._createdWrapper = false;
-    this._originalLabelFor = null;
     this._setupMenu();
     this._setupEventHandlers();
   }
@@ -3938,6 +4015,7 @@ var FormSelect = class _FormSelect extends Component {
   }
   destroy() {
     this._removeEventHandlers();
+    this._clearValidationError();
     this.menu?.destroy();
     this._removeMenu();
     this.el.tabIndex = this.nativeTabIndex;
@@ -3972,6 +4050,8 @@ var FormSelect = class _FormSelect extends Component {
   _setupEventHandlers() {
     this._setupOptionHandlers();
     this.el.addEventListener("change", this._handleSelectChange);
+    this.el.addEventListener("invalid", this._handleInvalid);
+    this.el.addEventListener("focus", this._handleNativeFocus);
     this.input.addEventListener("click", this._handleInputClick);
     this.menuEl.addEventListener("focusin", this._handleOptionFocus);
     this._bindForm();
@@ -3984,6 +4064,8 @@ var FormSelect = class _FormSelect extends Component {
   _removeEventHandlers() {
     this._removeOptionHandlers();
     this.el.removeEventListener("change", this._handleSelectChange);
+    this.el.removeEventListener("invalid", this._handleInvalid);
+    this.el.removeEventListener("focus", this._handleNativeFocus);
     this.input?.removeEventListener("click", this._handleInputClick);
     this.menuEl?.removeEventListener("focusin", this._handleOptionFocus);
     this._form?.removeEventListener("reset", this._handleReset);
@@ -4001,6 +4083,21 @@ var FormSelect = class _FormSelect extends Component {
       el.removeEventListener("keydown", this._handleOptionKeydown);
     });
   }
+  _syncValidationError() {
+    if (!this._validationMessage) return;
+    if (this.el.willValidate && !this.el.validity.valid) {
+      this._validationMessage.textContent = this.el.validationMessage;
+    } else this._clearValidationError();
+  }
+  _clearValidationError() {
+    if (!this._validationMessage) return;
+    const descriptions = this.input.getAttribute("aria-describedby")?.split(/\s+/).filter((id) => id !== this._validationMessage.id).join(" ");
+    if (descriptions) this.input.setAttribute("aria-describedby", descriptions);
+    else this.input.removeAttribute("aria-describedby");
+    this.input.ariaInvalid = this.el.ariaInvalid;
+    this._validationMessage.remove();
+    this._validationMessage = null;
+  }
   _arraysEqual(a, b) {
     if (a === b) return true;
     if (a == null || b == null) return false;
@@ -4032,6 +4129,13 @@ var FormSelect = class _FormSelect extends Component {
   }
   _setupMenu() {
     this.labelEl = this.el.labels?.[0] ?? null;
+    Array.from(this.el.labels ?? []).forEach((label) => {
+      this._originalLabels.set(label, { for: label.getAttribute("for"), id: label.getAttribute("id") });
+    });
+    if (this.labelEl && !this.el.closest("label")) {
+      this._labelPlaceholder = document.createComment("");
+      this.labelEl.before(this._labelPlaceholder);
+    }
     this._setupWrapper();
     this._hideNativeSelect();
     if (this.el.matches(":disabled")) this.wrapper.classList.add("disabled");
@@ -4047,7 +4151,7 @@ var FormSelect = class _FormSelect extends Component {
     this._buildCaret();
     this._initMenu();
     this._setSelectedStates();
-    if (this.labelEl) this.input.after(this.labelEl);
+    if (this._labelPlaceholder) this.input.after(this.labelEl);
   }
   _setupWrapper() {
     const parent = this.el.parentElement;
@@ -4068,9 +4172,10 @@ var FormSelect = class _FormSelect extends Component {
   _hideNativeSelect() {
     const hiddenDiv = document.createElement("div");
     hiddenDiv.classList.add("hide-select");
+    hiddenDiv.ariaHidden = "true";
     this.el.before(hiddenDiv);
     hiddenDiv.appendChild(this.el);
-    this.wrapper.append(hiddenDiv);
+    if (this._createdWrapper) this.wrapper.append(hiddenDiv);
   }
   _buildInput() {
     this.input = document.createElement("input");
@@ -4093,9 +4198,14 @@ var FormSelect = class _FormSelect extends Component {
     this.input.ariaExpanded = "false";
     this.input.setAttribute("aria-controls", this.menuEl.id);
     this.input.placeholder = " ";
-    if (this.labelEl) {
-      this._originalLabelFor = this.labelEl.htmlFor;
-      this.labelEl.htmlFor = this.input.id;
+    this._originalLabels.forEach((_, label) => {
+      label.htmlFor = this.input.id;
+    });
+    if (this._labelPlaceholder && this._originalLabels.size > 1 && !this.input.getAttribute("aria-label") && !this.input.getAttribute("aria-labelledby")) {
+      this.input.setAttribute("aria-labelledby", Array.from(this._originalLabels.keys(), (label, index) => {
+        if (!label.id) label.id = `${this.input.id}-label-${index}`;
+        return label.id;
+      }).join(" "));
     }
     this.wrapper.prepend(this.input);
     this._setValueToInput();
@@ -4190,9 +4300,13 @@ var FormSelect = class _FormSelect extends Component {
     this.menuEl?.remove();
     const hide = this.el.parentElement;
     if (hide?.classList.contains("hide-select")) hide.replaceWith(this.el);
-    if (this.labelEl && this._originalLabelFor !== null) {
-      this.labelEl.htmlFor = this._originalLabelFor;
-    }
+    this._originalLabels.forEach((original, label) => {
+      for (const name of ["for", "id"]) {
+        if (original[name] === null) label.removeAttribute(name);
+        else label.setAttribute(name, original[name]);
+      }
+    });
+    this._labelPlaceholder?.replaceWith(this.labelEl);
     if (!this.wrapper) return;
     if (this._createdWrapper) {
       this.wrapper.replaceWith(this.el);
@@ -4270,8 +4384,7 @@ var FormSelect = class _FormSelect extends Component {
     this._values.forEach((value) => this._deselectValue(value));
   }
   _isValueSelected(value) {
-    const realValues = this.getSelectedValues();
-    return realValues.some((realValue) => realValue === value.el.value);
+    return value.el.selected;
   }
   _toggleEntryFromArray(value) {
     if (this._isValueSelected(value)) this._deselectValue(value);
@@ -4496,9 +4609,7 @@ var _Datepicker = class _Datepicker extends Component {
     this._randId = null;
     this._focusedDate = null;
     this._handleInputClick = (e) => {
-      if (e.type == "date") {
-        e.preventDefault();
-      }
+      if (e.target.type == "date" && (this.options.openByDefault || this.options.container)) e.preventDefault();
       this._batchDraws(() => {
         this.setDateFromInput(e.target);
         this.draw();
@@ -4608,26 +4719,8 @@ var _Datepicker = class _Datepicker extends Component {
       this.gotoYear(e.target.value);
     };
     this._handleInputChange = (e) => {
-      let date;
-      const el = e.target;
       if (e["detail"]?.firedBy === this) return;
-      if (el == this.endDateEl && !this.date) return;
-      if (this.options.parse) {
-        date = this.options.parse(
-          e.target.value,
-          typeof this.options.format === "function" ? this.options.format(new Date(this.el.value)) : this.options.format
-        );
-      } else {
-        date = new Date(Date.parse(e.target.value));
-      }
-      if (_Datepicker._isDate(date)) {
-        if (el == this.endDateEl && date < this.date) return this.setInputValue(el, this.endDate);
-        this.setDate(date, false, el == this.endDateEl, true);
-        if (e.type == "date") {
-          this.setDataDate(e, date);
-          this.setInputValues();
-        }
-      }
+      this.setDateFromInput(e.target);
     };
     this._finishSelection = () => {
       this.setInputValues();
@@ -4659,7 +4752,7 @@ var _Datepicker = class _Datepicker extends Component {
     this._insertHTMLIntoDOM();
     this._setupEventHandlers();
     if (!this.options.defaultDate) {
-      this.options.defaultDate = new Date(Date.parse(this.el.value));
+      this.options.defaultDate = this._parseInput(this.el.value);
     }
     const defDate = this.options.defaultDate;
     if (_Datepicker._isDate(defDate)) {
@@ -4712,6 +4805,19 @@ var _Datepicker = class _Datepicker extends Component {
   static _isDate(obj) {
     return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
   }
+  static _parseDate(value) {
+    value = value.trim();
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return new Date(Date.parse(value));
+    const date = /* @__PURE__ */ new Date(value + "T00:00:00");
+    return date.getDate() === Number(value.slice(-2)) ? date : /* @__PURE__ */ new Date(NaN);
+  }
+  _parseInput(value) {
+    if (!value.trim() || !this.options.parse) return _Datepicker._parseDate(value);
+    return this.options.parse(
+      value,
+      typeof this.options.format === "string" ? this.options.format : ""
+    );
+  }
   static _isWeekend(date) {
     const day = date.getDay();
     return day === 0 || day === 6;
@@ -4821,8 +4927,22 @@ var _Datepicker = class _Datepicker extends Component {
    * Sets date from input field.
    */
   setDateFromInput(el) {
-    const date = new Date(Date.parse(el.value));
-    this.setDate(date, false, el == this.endDateEl, true);
+    if (el.type === "date") this.setDataDate(el, _Datepicker._parseDate(el.value));
+    if ((this.options.isDateRange || !this.options.isMultipleSelection) && !el.value.trim()) {
+      this.setSingleDate(null, el === this.endDateEl);
+      this.draw();
+      return;
+    }
+    const parsedDate = this._parseInput(el.value);
+    if (!_Datepicker._isDate(parsedDate)) return;
+    const date = new Date(parsedDate.getTime());
+    _Datepicker._setToStartOfDay(date);
+    const isEndDate = el === this.endDateEl;
+    if (this.options.isDateRange && (isEndDate ? this.date && date < this.date : this.endDate && date > this.endDate)) {
+      this.setInputValue(el, isEndDate ? this.endDate : this.date);
+      return;
+    }
+    this.setDate(date, false, isEndDate, true);
   }
   /**
    * Set a date on the datepicker.
@@ -4850,7 +4970,7 @@ var _Datepicker = class _Datepicker extends Component {
       return this.draw();
     }
     if (typeof date === "string") {
-      date = new Date(Date.parse(date));
+      date = _Datepicker._parseDate(date);
     }
     if (!_Datepicker._isDate(date)) {
       return;
@@ -4894,7 +5014,7 @@ var _Datepicker = class _Datepicker extends Component {
    * Sets the data-date attribute on the date input field
    */
   setDataDate(el, date) {
-    el.setAttribute("data-date", this.toString(date));
+    el.setAttribute("data-date", _Datepicker._isDate(date) ? this.toString(date) : "");
   }
   /**
    * Sets dates on the input values.
@@ -4920,16 +5040,15 @@ var _Datepicker = class _Datepicker extends Component {
    */
   setInputValue(el, date) {
     if (!el) return;
+    if (el.type == "date") this.setDataDate(el, date);
     if (!_Datepicker._isDate(date)) {
       el.value = "";
-      if (el.type === "date") el.setAttribute("data-date", "");
     } else if (el.type == "date") {
-      this.setDataDate(el, date);
       el.value = this.formatDate(date, "yyyy-mm-dd");
     } else {
       el.value = this.toString(date);
     }
-    this.el.dispatchEvent(
+    el.dispatchEvent(
       new CustomEvent("change", {
         bubbles: true,
         cancelable: true,
@@ -5020,7 +5139,7 @@ var _Datepicker = class _Datepicker extends Component {
     cells += 7 - after;
     let isWeekSelected = false;
     for (let i = 0, r = 0; i < cells; i++) {
-      const day = new Date(year, month, 1 + (i - before)), isToday = _Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && _Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && _Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange && this.options.endRange && this.options.startRange < day && day < this.options.endRange, isDisabled = this.options.minDate && day < this.options.minDate || this.options.maxDate && day > this.options.maxDate || this.options.disableWeekends && _Datepicker._isWeekend(day) || this.options.disableDayFn && this.options.disableDayFn(day), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && _Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && _Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && _Datepicker._isDate(this.endDate) && _Datepicker._compareWithinRange(day, this.date, this.endDate);
+      const day = new Date(year, month, 1 + (i - before)), isToday = _Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && _Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && _Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange && this.options.endRange && this.options.startRange < day && day < this.options.endRange, isDisabled = this.options.minDate && day < this.options.minDate || this.options.maxDate && day > this.options.maxDate || this.options.disableWeekends && _Datepicker._isWeekend(day) || this.options.disableDayFn && this.options.disableDayFn(day), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && _Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && _Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && _Datepicker._isDate(this.date) && _Datepicker._isDate(this.endDate) && _Datepicker._compareWithinRange(day, this.date, this.endDate);
       let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
       let isSelected = false;
       if (_Datepicker._isDate(this.date)) {
@@ -5455,6 +5574,7 @@ var _Datepicker = class _Datepicker extends Component {
   createDateInput() {
     const dateInput = this.el.cloneNode(true);
     dateInput.removeAttribute("id");
+    dateInput.classList.add("no-autoinit");
     dateInput.addEventListener("click", this._handleInputClick);
     dateInput.addEventListener("keydown", this._handleInputKeydown);
     dateInput.addEventListener("change", this._handleInputChange);
@@ -5840,18 +5960,31 @@ var _defaults16 = {
 var _ScrollSpy = class _ScrollSpy extends Component {
   constructor(el, options) {
     super(el, options, _ScrollSpy);
+    this._ratio = 0;
+    this._link = null;
     this.el["Expressive_ScrollSpy"] = this;
     this.options = {
       ..._ScrollSpy.defaults,
       ...options
     };
+    this._offset = this.el.style.getPropertyValue("--md-comp-scrollspy-offset");
+    this._offsetPriority = this.el.style.getPropertyPriority("--md-comp-scrollspy-offset");
     this.el.style.setProperty(
       "--md-comp-scrollspy-offset",
       `${this.options.scrollOffset}px`
     );
     _ScrollSpy._elements.push(this);
-    _ScrollSpy._ensureObserver(this.options.scrollOffset);
-    _ScrollSpy._observer?.observe(this.el);
+    if (typeof IntersectionObserver !== "undefined") {
+      this._observer = new IntersectionObserver((entries) => {
+        if (_ScrollSpy.getInstance(this.el) !== this) return;
+        for (const entry of entries) this._ratio = entry.isIntersecting ? entry.intersectionRatio : 0;
+        _ScrollSpy._syncActive(this.options.getActiveElement);
+      }, {
+        rootMargin: `-${this.options.scrollOffset}px 0px -45% 0px`,
+        threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]
+      });
+      this._observer.observe(this.el);
+    }
   }
   static get defaults() {
     return _defaults16;
@@ -5864,66 +5997,44 @@ var _ScrollSpy = class _ScrollSpy extends Component {
   }
   destroy() {
     const index = _ScrollSpy._elements.indexOf(this);
-    if (index >= 0) _ScrollSpy._elements.splice(index, 1);
-    _ScrollSpy._ratios.delete(this.el);
-    _ScrollSpy._observer?.unobserve(this.el);
-    const link = _ScrollSpy._linkFor(this.el.id, this.options);
-    if (link && link === _ScrollSpy._active) {
-      _ScrollSpy._clearActive(this.options);
-    } else {
-      link?.classList.remove(this.options.activeClass);
-      link?.removeAttribute("aria-current");
-    }
-    if (_ScrollSpy._elements.length === 0) {
-      _ScrollSpy._observer?.disconnect();
-      _ScrollSpy._observer = null;
-      _ScrollSpy._ratios.clear();
-      _ScrollSpy._active = null;
-    } else {
-      _ScrollSpy._syncActive();
-    }
+    if (index < 0) return;
+    _ScrollSpy._elements.splice(index, 1);
+    this._observer?.disconnect();
+    const resolver = this.options.getActiveElement;
+    if (_ScrollSpy._active.get(resolver) === this) _ScrollSpy._clearActive(resolver);
+    this.el.style.setProperty("--md-comp-scrollspy-offset", this._offset, this._offsetPriority);
     this.el["Expressive_ScrollSpy"] = void 0;
+    _ScrollSpy._syncActive(resolver);
   }
-  static _ensureObserver(offset) {
-    if (_ScrollSpy._observer) return;
-    if (typeof IntersectionObserver === "undefined") return;
-    _ScrollSpy._observer = new IntersectionObserver(_ScrollSpy._onIntersect, {
-      rootMargin: `-${offset}px 0px -45% 0px`,
-      threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]
-    });
-  }
-  static _syncActive() {
-    if (!_ScrollSpy._elements.length) return;
-    const options = _ScrollSpy._elements[0].options;
+  static _syncActive(resolver) {
+    const elements = _ScrollSpy._elements.filter((spy) => spy.options.getActiveElement === resolver);
     let best = null;
     let bestRatio = 0;
-    for (const spy of _ScrollSpy._elements) {
-      const ratio = _ScrollSpy._ratios.get(spy.el) ?? 0;
+    for (const spy of elements) {
+      const ratio = spy._ratio;
       if (ratio > bestRatio) {
         bestRatio = ratio;
         best = spy;
       }
     }
     if (!best) {
-      if (options.keepTopElementActive) {
-        best = _ScrollSpy._nearestAbove() ?? _ScrollSpy._elements[0];
-      } else {
-        _ScrollSpy._clearActive(options);
-        return;
-      }
+      const retained = elements.filter((spy) => spy.options.keepTopElementActive);
+      best = _ScrollSpy._nearestAbove(retained) ?? retained[0];
     }
-    const next = _ScrollSpy._linkFor(best.el.id, best.options);
-    if (next === _ScrollSpy._active) return;
-    _ScrollSpy._clearActive(options);
+    const next = best ? _ScrollSpy._linkFor(best.el.id, best.options) : null;
+    const active = _ScrollSpy._active.get(resolver);
+    if (active === best && active?._link === next) return;
+    _ScrollSpy._clearActive(resolver);
     if (!next) return;
     next.classList.add(best.options.activeClass);
     next.setAttribute("aria-current", "true");
-    _ScrollSpy._active = next;
+    best._link = next;
+    _ScrollSpy._active.set(resolver, best);
   }
-  static _nearestAbove() {
+  static _nearestAbove(elements) {
     let best = null;
     let bestTop = -Infinity;
-    for (const spy of _ScrollSpy._elements) {
+    for (const spy of elements) {
       const top = spy.el.getBoundingClientRect().top;
       if (top <= 0 && top >= bestTop) {
         bestTop = top;
@@ -5932,11 +6043,13 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     }
     return best;
   }
-  static _clearActive(options) {
-    if (!_ScrollSpy._active) return;
-    _ScrollSpy._active.classList.remove(options.activeClass);
-    _ScrollSpy._active.removeAttribute("aria-current");
-    _ScrollSpy._active = null;
+  static _clearActive(resolver) {
+    const active = _ScrollSpy._active.get(resolver);
+    if (!active) return;
+    active._link?.classList.remove(active.options.activeClass);
+    active._link?.removeAttribute("aria-current");
+    active._link = null;
+    _ScrollSpy._active.delete(resolver);
   }
   /**
    * Default lookup compares href attributes (no interpolated selector).
@@ -5960,19 +6073,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
   }
 };
 _ScrollSpy._elements = [];
-_ScrollSpy._observer = null;
-_ScrollSpy._ratios = /* @__PURE__ */ new Map();
-_ScrollSpy._active = null;
-_ScrollSpy._onIntersect = (entries) => {
-  for (const entry of entries) {
-    if (entry.isIntersecting && entry.intersectionRatio > 0) {
-      _ScrollSpy._ratios.set(entry.target, entry.intersectionRatio);
-    } else {
-      _ScrollSpy._ratios.delete(entry.target);
-    }
-  }
-  _ScrollSpy._syncActive();
-};
+_ScrollSpy._active = /* @__PURE__ */ new Map();
 var ScrollSpy = _ScrollSpy;
 
 // src/ts/components/navigationRail.ts
@@ -6036,8 +6137,19 @@ var NavigationRail = class _NavigationRail extends Component {
       }
     };
     this._onKeyDown = (e) => {
-      if (e.key !== "Escape") return;
-      if (this.isExpanded && this._isModal()) this.collapse();
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      if (this.isExpanded && this._isModal()) {
+        const root = this.el.getRootNode();
+        const restoreFocus = this.el.contains(root.activeElement);
+        let focused = root.activeElement;
+        while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
+        this.collapse();
+        let active = root.activeElement;
+        while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+        if (!this.isExpanded && restoreFocus && active === focused) {
+          this._toggle?.focus();
+        }
+      }
     };
     this.el["Expressive_NavigationRail"] = this;
     this.options = {
@@ -6115,14 +6227,13 @@ var Tabs = class _Tabs extends Component {
       }
       if (tabLink.hasAttribute("target")) return;
       if (this.options.swipeable) {
-        const panel = tabLink.hash && document.querySelector(tabLink.hash);
+        const panel = tabLink.hash && document.getElementById(tabLink.hash.slice(1));
         const index = this._tabsCarousel.images.indexOf(panel);
         if (index >= 0) this._tabsCarousel.set(index);
         e.preventDefault();
         return;
       }
       const _oldContent = this._content;
-      if (tabLink.hash) this._content = document.querySelector(tabLink.hash);
       this._tabLinks = this._queryTabLinks();
       const prevIndex = this._index;
       this._setActiveTabLink(tabLink);
@@ -6149,7 +6260,7 @@ var Tabs = class _Tabs extends Component {
     this._tabLinks.forEach((link) => {
       this._originalLinks.set(link, { active: link.classList.contains("active"), current: link.getAttribute("aria-current") });
       if (link.hasAttribute("target")) return;
-      const panel = link.hash && document.querySelector(link.hash);
+      const panel = link.hash && document.getElementById(link.hash.slice(1));
       if (panel) this._originalPanels.set(panel, {
         display: panel.style.display,
         priority: panel.style.getPropertyPriority("display"),
@@ -6270,7 +6381,7 @@ var Tabs = class _Tabs extends Component {
     const tabsContent = [];
     this._tabLinks.forEach((a) => {
       if (a.hash && !a.hasAttribute("target")) {
-        const currContent = document.querySelector(a.hash);
+        const currContent = document.getElementById(a.hash.slice(1));
         if (!currContent) return;
         currContent.classList.add("carousel-item");
         tabsContent.push(currContent);
@@ -6310,7 +6421,7 @@ var Tabs = class _Tabs extends Component {
     Array.from(this._tabLinks).forEach((a) => {
       if (a === this._activeTabLink || a.hasAttribute("target")) return;
       if (a.hash) {
-        const currContent = document.querySelector(a.hash);
+        const currContent = document.getElementById(a.hash.slice(1));
         if (currContent) currContent.style.display = "none";
       }
     });
@@ -6398,6 +6509,7 @@ var _Timepicker = class _Timepicker extends Component {
     /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
     this._clockBuilt = false;
     this._handleInputClick = () => {
+      this._updateTimeFromInput();
       this._ensureClockBuilt();
       if (this.displayPlugin) this.displayPlugin.show();
       this.inputHours.focus();
@@ -6406,10 +6518,7 @@ var _Timepicker = class _Timepicker extends Component {
     this._handleInputKeydown = (e) => {
       if (e.key === Utils.keys.ENTER) {
         e.preventDefault();
-        this._ensureClockBuilt();
-        if (this.displayPlugin) this.displayPlugin.show();
-        this.inputHours.focus();
-        if (typeof this.options.onInputInteraction === "function") this.options.onInputInteraction.call(this);
+        this._handleInputClick();
       }
     };
     this._handleClockClickStart = (e) => {
@@ -6453,7 +6562,9 @@ var _Timepicker = class _Timepicker extends Component {
         this.inputMinutes.focus();
         this.showView("minutes", this.options.duration / 2);
       } else {
-        setTimeout(() => {
+        clearTimeout(this._autoSubmitTimer);
+        this._autoSubmitTimer = setTimeout(() => {
+          this._autoSubmitTimer = null;
           if (this.options.autoSubmit) this.done();
         }, this.options.duration / 2);
       }
@@ -6505,6 +6616,7 @@ var _Timepicker = class _Timepicker extends Component {
       const input = event.target;
       const isHours = input === this.inputHours;
       if (!isHours && input !== this.inputMinutes) return;
+      this._cancelClockReset();
       const value = Number(input.value);
       const min = isHours && this.options.twelveHour ? 1 : 0;
       const max = isHours ? this.options.twelveHour ? 12 : 23 : 59;
@@ -6573,6 +6685,10 @@ var _Timepicker = class _Timepicker extends Component {
     return el["Expressive_Timepicker"];
   }
   destroy() {
+    clearTimeout(this._autoSubmitTimer);
+    clearTimeout(this.toggleViewTimer);
+    clearTimeout(this.vibrateTimer);
+    this._cancelClockReset();
     this._removeEventHandlers();
     this.displayPlugin?.destroy();
     this.containerEl.remove();
@@ -6759,6 +6875,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   _updateTimeFromInput() {
+    this._cancelClockReset();
     let value = ((this.el.value || this.options.defaultTime || "") + "").trim().toUpperCase().split(":");
     const period = value[1]?.match(/AM|PM/)?.[0];
     value[1] = value[1]?.replace(/AM|PM/, "");
@@ -6776,12 +6893,17 @@ var _Timepicker = class _Timepicker extends Component {
     this.inputMinutes.value = _Timepicker._addLeadingZero(this.minutes);
     this._updateAmPmView();
   }
+  _cancelClockReset() {
+    clearTimeout(this._clockResetTimer);
+    this._clockResetTimer = null;
+    this._canvas?.classList.remove("timepicker-canvas-out");
+  }
   resetClock(delay) {
+    this._cancelClockReset();
     const view = this.currentView, value = this[view], isHours = view === "hours", unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius;
     if (delay) {
       this._canvas?.classList.add("timepicker-canvas-out");
-      setTimeout(() => {
-        this._canvas?.classList.remove("timepicker-canvas-out");
+      this._clockResetTimer = setTimeout(() => {
         this.setHand(x, y);
       }, delay);
     } else {
@@ -6800,6 +6922,7 @@ var _Timepicker = class _Timepicker extends Component {
     this.setClockAttributes(radian, radius);
   }
   setHand(x, y, roundBy5 = false) {
+    this._cancelClockReset();
     const isHours = this.currentView === "hours", unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;
     let radian = Math.atan2(x, -y), radius = inner ? this.options.innerRadius : this.options.outerRadius;
     if (this.options.twelveHour) {
@@ -6920,6 +7043,7 @@ var _Snackbar = class _Snackbar {
   constructor(options = {}) {
     this._dismissed = false;
     this._returnFocus = null;
+    this._restoreElement = null;
     this.options = {
       ..._Snackbar.defaults,
       ...options
@@ -6934,22 +7058,20 @@ var _Snackbar = class _Snackbar {
     while (_Snackbar._snackbars.length > 0) {
       const snackbar = _Snackbar._snackbars.shift();
       snackbar._dismissed = true;
-      clearTimeout(snackbar.counterTimeout);
-      snackbar._restoreFocus();
-      snackbar.el.remove();
+      snackbar._restoreFocus(true);
     }
     let focused = document.activeElement;
     while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
     this._returnFocus = focused instanceof HTMLElement ? focused : null;
+    this.el = this._createSnackbar();
     const root = Utils.portalRoot(this.options.root ?? document.body);
     if (!_Snackbar._container || !_Snackbar._container.isConnected || _Snackbar._container.parentNode !== root) {
       if (_Snackbar._container) _Snackbar._removeContainer();
       _Snackbar._createContainer(root);
     }
+    _Snackbar._container.appendChild(this.el);
+    this.el["Expressive_Snackbar"] = this;
     _Snackbar._snackbars.push(this);
-    const snackbarElement = this._createSnackbar();
-    snackbarElement["Expressive_Snackbar"] = this;
-    this.el = snackbarElement;
     this._animateIn();
     this._setTimer();
   }
@@ -6991,6 +7113,7 @@ var _Snackbar = class _Snackbar {
       snackbar.el.style.transition = "";
       _Snackbar._dragPointerId = e.pointerId;
       snackbar.startingXPos = e.clientX;
+      snackbar.velocityX = 0;
       snackbar.time = Date.now();
       snackbar.xPos = e.clientX;
     }
@@ -7019,7 +7142,8 @@ var _Snackbar = class _Snackbar {
       snackbar.el.classList.remove("panning");
       const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
       const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
-      const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || snackbar.velocityX > 1;
+      const velocity = Date.now() - snackbar.time < 100 ? snackbar.velocityX : 0;
+      const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || velocity > 1;
       if (shouldBeDismissed) {
         snackbar.wasSwiped = true;
         snackbar.dismiss();
@@ -7063,7 +7187,23 @@ var _Snackbar = class _Snackbar {
     if (snackbar instanceof HTMLTemplateElement) {
       const node = snackbar.content.cloneNode(true);
       snackbar = node.firstElementChild;
+    } else if (snackbar && this.options.snackbarId) {
+      const placeholder = document.createComment("");
+      snackbar.before(placeholder);
+      const children = [...snackbar.childNodes];
+      const attributes = ["class", "style", "role", "aria-live", "aria-atomic", "inert"].map((name) => [name, snackbar.getAttribute(name)]);
+      this._restoreElement = () => {
+        snackbar.replaceChildren(...children);
+        for (const [name, value] of attributes) {
+          if (value === null) snackbar.removeAttribute(name);
+          else snackbar.setAttribute(name, value);
+        }
+        placeholder.replaceWith(snackbar);
+      };
     }
+    if (!snackbar) throw new Error("Snackbar body not found");
+    this._events = new (snackbar.ownerDocument.defaultView ?? window).AbortController();
+    const listenerOptions = { signal: this._events.signal };
     snackbar.classList.add("snackbar");
     snackbar.setAttribute("role", "status");
     snackbar.setAttribute("aria-live", "polite");
@@ -7074,16 +7214,19 @@ var _Snackbar = class _Snackbar {
         this._returnFocus = e.relatedTarget;
       }
       this._pauseTimer();
-    });
+    }, listenerOptions);
     snackbar.addEventListener("keydown", (e) => {
       if (e.key !== "Escape" || e.defaultPrevented || this._dismissed) return;
       e.preventDefault();
       e.stopPropagation();
       this.dismiss();
-    });
-    snackbar.addEventListener("focusout", () => setTimeout(() => this._resumeTimer(), 0));
-    snackbar.addEventListener("pointerenter", () => this._pauseTimer());
-    snackbar.addEventListener("pointerleave", () => this._resumeTimer());
+    }, listenerOptions);
+    snackbar.addEventListener("focusout", () => {
+      clearTimeout(this._focusTimer);
+      this._focusTimer = setTimeout(() => this._resumeTimer(), 0);
+    }, listenerOptions);
+    snackbar.addEventListener("pointerenter", () => this._pauseTimer(), listenerOptions);
+    snackbar.addEventListener("pointerleave", () => this._resumeTimer(), listenerOptions);
     if (this.options.classes.length > 0) {
       snackbar.classList.add(...this.options.classes.split(" ").filter(Boolean));
     }
@@ -7104,7 +7247,7 @@ var _Snackbar = class _Snackbar {
         } finally {
           this.dismiss();
         }
-      });
+      }, listenerOptions);
       snackbar.appendChild(action);
     }
     if (this.options.dismissible) {
@@ -7120,12 +7263,32 @@ var _Snackbar = class _Snackbar {
       close.addEventListener("click", (e) => {
         e.stopPropagation();
         this.dismiss();
-      });
+      }, listenerOptions);
       snackbar.appendChild(close);
     }
-    _Snackbar._container.appendChild(snackbar);
     return snackbar;
   }
+  _remove() {
+    if (this._events.signal.aborted) return;
+    this._events.abort();
+    clearTimeout(this.counterTimeout);
+    clearTimeout(this._transitionTimer);
+    clearTimeout(this._dismissTimer);
+    clearTimeout(this._focusTimer);
+    this.counterTimeout = null;
+    if (_Snackbar._draggedSnackbar === this) {
+      _Snackbar._draggedSnackbar = null;
+      _Snackbar._dragPointerId = null;
+    }
+    this.el["Expressive_Snackbar"] = void 0;
+    if (this._restoreElement) this._restoreElement();
+    else this.el.remove();
+    const index = _Snackbar._snackbars.indexOf(this);
+    if (index >= 0) _Snackbar._snackbars.splice(index, 1);
+    if (!_Snackbar._snackbars.length && _Snackbar._container?.childElementCount === 0) {
+      _Snackbar._removeContainer();
+    }
+  }
   _animateIn() {
     this.el.style.display = "";
     this.el.style.opacity = "0";
@@ -7134,7 +7297,7 @@ var _Snackbar = class _Snackbar {
       transform ${this.options.inDuration}ms ease,
       opacity ${this.options.inDuration}ms ease
     `;
-    setTimeout(() => {
+    this._transitionTimer = setTimeout(() => {
       this.el.style.transform = "";
       this.el.style.opacity = "1";
     }, 1);
@@ -7163,12 +7326,12 @@ var _Snackbar = class _Snackbar {
     if (this._dismissed || this.panning || this.el.matches(":hover, :focus-within") || this.counterTimeout != null) return;
     this._setTimer();
   }
-  _restoreFocus() {
+  _restoreFocus(remove = false) {
     const focused = this.el.getRootNode().activeElement;
-    if (focused && this.el.contains(focused) && this._returnFocus?.isConnected) {
-      this._returnFocus.focus({ preventScroll: true });
-    }
+    const returnFocus = focused && this.el.contains(focused) ? this._returnFocus : null;
     this.el.inert = true;
+    if (remove) this._remove();
+    if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
   }
   /**
    * Dismiss snackbar with animation.
@@ -7179,6 +7342,7 @@ var _Snackbar = class _Snackbar {
     clearTimeout(this.counterTimeout);
     this.counterTimeout = null;
     this._restoreFocus();
+    if (this._events.signal.aborted) return;
     const activationDistance = this.el.offsetWidth * this.options.activationPercent;
     if (this.wasSwiped) {
       this.el.style.transition = "transform .05s, opacity .05s";
@@ -7188,22 +7352,16 @@ var _Snackbar = class _Snackbar {
     this.el.style.transition = `
       margin ${this.options.outDuration}ms ease,
       opacity ${this.options.outDuration}ms ease`;
-    setTimeout(() => {
+    clearTimeout(this._transitionTimer);
+    this._transitionTimer = setTimeout(() => {
       this.el.style.opacity = "0";
       this.el.style.marginTop = "-40px";
     }, 1);
-    setTimeout(() => {
+    this._dismissTimer = setTimeout(() => {
+      this._remove();
       if (typeof this.options.completeCallback === "function") {
         this.options.completeCallback();
       }
-      if (this.el.id != this.options.snackbarId) {
-        this.el.remove();
-        const index = _Snackbar._snackbars.indexOf(this);
-        if (index >= 0) _Snackbar._snackbars.splice(index, 1);
-        if (_Snackbar._snackbars.length === 0 && _Snackbar._container && _Snackbar._container.childElementCount === 0) {
-          _Snackbar._removeContainer();
-        }
-      }
     }, this.options.outDuration);
   }
 };
@@ -7232,9 +7390,8 @@ var Tooltip = class _Tooltip extends Component {
     /**
      * Show tooltip.
      */
-    this.open = (isManual) => {
+    this.open = (isManual = true) => {
       if (this.isOpen) return;
-      isManual = isManual === void 0 ? true : void 0;
       clearTimeout(this._exitDelayTimeout);
       clearTimeout(this._animationTimeout);
       this.isOpen = true;
@@ -7318,8 +7475,21 @@ var Tooltip = class _Tooltip extends Component {
     this.isOpen = false;
     this.isHovered = false;
     this.isFocused = false;
-    if (this.el.getAttribute("aria-describedby") === this.tooltipEl.id) {
-      this.el.removeAttribute("aria-describedby");
+    const descriptions = this.el.getAttribute("aria-describedby")?.split(/\s+/);
+    if (descriptions?.includes(this.tooltipEl.id)) {
+      const remaining = descriptions.filter((id) => id && id !== this.tooltipEl.id).join(" ");
+      if (remaining) this.el.setAttribute("aria-describedby", remaining);
+      else this.el.removeAttribute("aria-describedby");
+    }
+    if (this._originalContent) {
+      const { el, marker, display, priority, hidden, contentClass } = this._originalContent;
+      el.style.setProperty("display", display, priority);
+      if (hidden === null) el.removeAttribute("hidden");
+      else el.setAttribute("hidden", hidden);
+      el.classList.toggle("tooltip-content", contentClass);
+      if (!el.className) el.removeAttribute("class");
+      marker.replaceWith(el);
+      this._originalContent = null;
     }
     this.tooltipEl.remove();
     this._removeEventHandlers();
@@ -7330,10 +7500,21 @@ var Tooltip = class _Tooltip extends Component {
     this.tooltipEl.classList.add("tooltip");
     this.tooltipEl.id = `tooltip-${Utils.guid()}`;
     this.tooltipEl.setAttribute("role", "tooltip");
-    this.el.setAttribute("aria-describedby", this.tooltipEl.id);
+    this.el.setAttribute("aria-describedby", [this.el.getAttribute("aria-describedby"), this.tooltipEl.id].filter(Boolean).join(" "));
     const tooltipContentEl = this.options.tooltipId ? Utils.getElementById(this.el, this.options.tooltipId) : document.createElement("div");
     if (this.options.tooltipId) {
       this.tooltipEl.classList.add("rich");
+      const marker = document.createComment("");
+      tooltipContentEl.before(marker);
+      this._originalContent = {
+        el: tooltipContentEl,
+        marker,
+        display: tooltipContentEl.style.display,
+        priority: tooltipContentEl.style.getPropertyPriority("display"),
+        hidden: tooltipContentEl.getAttribute("hidden"),
+        contentClass: tooltipContentEl.classList.contains("tooltip-content")
+      };
+      tooltipContentEl.removeAttribute("hidden");
     }
     tooltipContentEl.style.display = "";
     tooltipContentEl.classList.add("tooltip-content");
@@ -7531,7 +7712,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/modular.ts
-var version = "0.10.1";
+var version = "0.12.0";
 
 // src/ts/index.ts
 Forms.Init();