@expressivecss/expressive 0.11.0 → 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);
@@ -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();
@@ -1680,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;
@@ -1692,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");
@@ -1723,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) {
@@ -1841,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);
   }
@@ -1950,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();
@@ -2016,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();
     }
@@ -2081,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");
@@ -2115,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);
   }
@@ -2143,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) {
@@ -2150,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;
   }
@@ -2163,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);
@@ -2234,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);
@@ -2302,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,
@@ -2372,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;
@@ -2483,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;
@@ -2519,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 });
@@ -2531,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) => {
@@ -2542,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");
   };
@@ -2743,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;
@@ -2790,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);
   }
@@ -3218,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;
@@ -3233,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;
@@ -3262,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)) {
@@ -3318,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 = () => {
@@ -3502,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);
@@ -3523,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);
@@ -4335,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);
@@ -4561,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();
@@ -4673,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 = _Datepicker._parseDate(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();
@@ -4724,7 +4752,7 @@ var _Datepicker = class _Datepicker extends Component {
     this._insertHTMLIntoDOM();
     this._setupEventHandlers();
     if (!this.options.defaultDate) {
-      this.options.defaultDate = _Datepicker._parseDate(this.el.value);
+      this.options.defaultDate = this._parseInput(this.el.value);
     }
     const defDate = this.options.defaultDate;
     if (_Datepicker._isDate(defDate)) {
@@ -4783,6 +4811,13 @@ var _Datepicker = class _Datepicker extends Component {
     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;
@@ -4892,8 +4927,22 @@ var _Datepicker = class _Datepicker extends Component {
    * Sets date from input field.
    */
   setDateFromInput(el) {
-    const date = _Datepicker._parseDate(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.
@@ -4965,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.
@@ -4991,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,
@@ -5091,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)) {
@@ -5526,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);
@@ -6088,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 = {
@@ -6449,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();
@@ -6457,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) => {
@@ -6504,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);
       }
@@ -6556,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;
@@ -6624,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();
@@ -6810,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/, "");
@@ -6827,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 {
@@ -6851,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) {
@@ -6971,6 +7043,7 @@ var _Snackbar = class _Snackbar {
   constructor(options = {}) {
     this._dismissed = false;
     this._returnFocus = null;
+    this._restoreElement = null;
     this.options = {
       ..._Snackbar.defaults,
       ...options
@@ -6985,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();
   }
@@ -7042,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;
     }
@@ -7070,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();
@@ -7114,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");
@@ -7125,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));
     }
@@ -7155,7 +7247,7 @@ var _Snackbar = class _Snackbar {
         } finally {
           this.dismiss();
         }
-      });
+      }, listenerOptions);
       snackbar.appendChild(action);
     }
     if (this.options.dismissible) {
@@ -7171,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";
@@ -7185,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);
@@ -7214,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.
@@ -7230,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";
@@ -7239,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);
   }
 };
@@ -7283,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;
@@ -7369,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();
@@ -7381,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");
@@ -7582,7 +7712,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/modular.ts
-var version = "0.11.0";
+var version = "0.12.0";
 
 // src/ts/index.ts
 Forms.Init();