@expressivecss/expressive 0.11.0 → 0.12.0

package/dist/js/expressive.js

@@ -271,12 +271,7 @@ var Expressive = (() => {
       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 Expressive = (() => {
         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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
         }
       };
       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 Expressive = (() => {
       };
       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 Expressive = (() => {
         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 Expressive = (() => {
     }
     _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 Expressive = (() => {
     }
     _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 Expressive = (() => {
         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 Expressive = (() => {
       }
       this._removeEventHandlers();
       this.menu.destroy();
+      this.isOpen = false;
       this._removeMenu();
       this._statusInfo.remove();
       this._announcer.remove();
@@ -1680,6 +1690,16 @@ var Expressive = (() => {
         ..._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 Expressive = (() => {
       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 Expressive = (() => {
       this.container.replaceChildren();
       this._resetCurrentElementPosition();
       this.oldVal = null;
-      this.isOpen = false;
       this._pointerDown = false;
     }
     _highlightPartialText(input, label) {
@@ -1841,7 +1857,7 @@ var Expressive = (() => {
       }
     }
     _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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
       }
     }
     _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 Expressive = (() => {
     }
     _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 Expressive = (() => {
       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 Expressive = (() => {
       }
     }
     _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 Expressive = (() => {
       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 Expressive = (() => {
 
   // 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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
   // 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 @@ var Expressive = (() => {
         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 @@ var Expressive = (() => {
       }
       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 @@ var Expressive = (() => {
         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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
         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 Expressive = (() => {
           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 Expressive = (() => {
         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 Expressive = (() => {
         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 Expressive = (() => {
       });
       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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
         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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
      * 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 Expressive = (() => {
      * 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 Expressive = (() => {
      */
     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 Expressive = (() => {
       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 Expressive = (() => {
     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 Expressive = (() => {
         }
       };
       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 Expressive = (() => {
       /** 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 Expressive = (() => {
       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 Expressive = (() => {
           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 Expressive = (() => {
         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 Expressive = (() => {
       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 Expressive = (() => {
       }
     }
     _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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
     constructor(options = {}) {
       this._dismissed = false;
       this._returnFocus = null;
+      this._restoreElement = null;
       this.options = {
         ..._Snackbar.defaults,
         ...options
@@ -6985,22 +7058,20 @@ var Expressive = (() => {
       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 Expressive = (() => {
         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 Expressive = (() => {
         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 Expressive = (() => {
       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 Expressive = (() => {
           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 Expressive = (() => {
           } finally {
             this.dismiss();
           }
-        });
+        }, listenerOptions);
         snackbar.appendChild(action);
       }
       if (this.options.dismissible) {
@@ -7171,12 +7263,32 @@ var Expressive = (() => {
         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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
       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 Expressive = (() => {
       /**
        * 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 Expressive = (() => {
       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 Expressive = (() => {
       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 @@ var Expressive = (() => {
   }
 
   // src/ts/modular.ts
-  var version = "0.11.0";
+  var version = "0.12.0";
 
   // src/ts/index.ts
   Forms.Init();