@expressivecss/expressive 0.10.1 → 0.11.0

package/dist/js/expressive.js

@@ -1455,12 +1455,12 @@ var Expressive = (() => {
           this._resetAutocomplete();
         }
       };
-      this._handleInputKeyup = (e) => {
-        if (e.type === "keyup") _Autocomplete._keydown = false;
+      this._handleInputKeyup = () => {
+        _Autocomplete._keydown = false;
+      };
+      this._handleInput = () => {
         this.count = 0;
         const actualValue = this.el.value.toLocaleLowerCase();
-        if (e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ESC || e.key === "Tab")
-          return;
         if (this.oldVal !== actualValue && this.el.matches(":focus-visible")) {
           this.open();
         }
@@ -1640,6 +1640,7 @@ var Expressive = (() => {
     }
     _setupEventHandlers() {
       this.el.addEventListener("blur", this._handleInputBlur);
+      this.el.addEventListener("input", this._handleInput);
       this.el.addEventListener("keyup", this._handleInputKeyup);
       this.el.addEventListener("focus", this._handleInputFocus);
       this.el.addEventListener("keydown", this._handleInputKeydown);
@@ -1650,6 +1651,7 @@ var Expressive = (() => {
     }
     _removeEventHandlers() {
       this.el.removeEventListener("blur", this._handleInputBlur);
+      this.el.removeEventListener("input", this._handleInput);
       this.el.removeEventListener("keyup", this._handleInputKeyup);
       this.el.removeEventListener("focus", this._handleInputFocus);
       this.el.removeEventListener("keydown", this._handleInputKeydown);
@@ -3325,7 +3327,7 @@ var Expressive = (() => {
         this._scroller.removeEventListener("scrollend", this._handleScrollEnd);
       };
       this._handleScrollEnd = () => {
-        if (!this.images.some((item) => item.getAnimations().some((animation) => animation.playState === "running"))) {
+        if (this._nearestIndex() === this.center && !this.images.some((item) => item.getAnimations().some((animation) => animation.playState === "running"))) {
           this._finishScroll();
         }
       };
@@ -3874,14 +3876,41 @@ var Expressive = (() => {
   var FormSelect = class _FormSelect extends Component {
     constructor(el, options) {
       super(el, options, _FormSelect);
+      this._originalLabels = /* @__PURE__ */ new Map();
+      this._validationMessage = null;
       this._handleSelectChange = () => {
         this._setValueToInput();
         this._setSelectedStates();
+        this._syncValidationError();
+      };
+      this._handleInvalid = (e) => {
+        if (e.defaultPrevented) return;
+        if (!this._validationMessage) {
+          this._validationMessage = document.createElement("small");
+          this._validationMessage.id = this.input.id + "-error";
+          this._validationMessage.className = "supporting-text";
+          this._validationMessage.style.color = "var(--md-sys-color-error)";
+          this.wrapper.append(this._validationMessage);
+          this.input.setAttribute(
+            "aria-describedby",
+            [this.input.getAttribute("aria-describedby"), this._validationMessage.id].filter(Boolean).join(" ")
+          );
+        }
+        this.input.ariaInvalid = "true";
+        this._syncValidationError();
       };
+      // Native reporting chooses the control; static checks never focus. Wait until
+      // reporting finishes so Firefox dismisses its native popup when focus moves.
+      this._handleNativeFocus = () => queueMicrotask(() => {
+        if (_FormSelect.getInstance(this.el) === this && this.el.matches(":focus")) this.input.focus();
+      });
       this._handleReset = (e) => {
         clearTimeout(this._resetTimer);
         this._resetTimer = setTimeout(() => {
-          if (!e.defaultPrevented) this._handleSelectChange();
+          if (!e.defaultPrevented) {
+            this._handleSelectChange();
+            this._clearValidationError();
+          }
         }, 0);
       };
       // Named rather than inline so that _removeEventHandlers can actually detach
@@ -3918,7 +3947,6 @@ var Expressive = (() => {
       this.el.tabIndex = -1;
       this._values = [];
       this._createdWrapper = false;
-      this._originalLabelFor = null;
       this._setupMenu();
       this._setupEventHandlers();
     }
@@ -3938,6 +3966,7 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
+      this._clearValidationError();
       this.menu?.destroy();
       this._removeMenu();
       this.el.tabIndex = this.nativeTabIndex;
@@ -3972,6 +4001,8 @@ var Expressive = (() => {
     _setupEventHandlers() {
       this._setupOptionHandlers();
       this.el.addEventListener("change", this._handleSelectChange);
+      this.el.addEventListener("invalid", this._handleInvalid);
+      this.el.addEventListener("focus", this._handleNativeFocus);
       this.input.addEventListener("click", this._handleInputClick);
       this.menuEl.addEventListener("focusin", this._handleOptionFocus);
       this._bindForm();
@@ -3984,6 +4015,8 @@ var Expressive = (() => {
     _removeEventHandlers() {
       this._removeOptionHandlers();
       this.el.removeEventListener("change", this._handleSelectChange);
+      this.el.removeEventListener("invalid", this._handleInvalid);
+      this.el.removeEventListener("focus", this._handleNativeFocus);
       this.input?.removeEventListener("click", this._handleInputClick);
       this.menuEl?.removeEventListener("focusin", this._handleOptionFocus);
       this._form?.removeEventListener("reset", this._handleReset);
@@ -4001,6 +4034,21 @@ var Expressive = (() => {
         el.removeEventListener("keydown", this._handleOptionKeydown);
       });
     }
+    _syncValidationError() {
+      if (!this._validationMessage) return;
+      if (this.el.willValidate && !this.el.validity.valid) {
+        this._validationMessage.textContent = this.el.validationMessage;
+      } else this._clearValidationError();
+    }
+    _clearValidationError() {
+      if (!this._validationMessage) return;
+      const descriptions = this.input.getAttribute("aria-describedby")?.split(/\s+/).filter((id) => id !== this._validationMessage.id).join(" ");
+      if (descriptions) this.input.setAttribute("aria-describedby", descriptions);
+      else this.input.removeAttribute("aria-describedby");
+      this.input.ariaInvalid = this.el.ariaInvalid;
+      this._validationMessage.remove();
+      this._validationMessage = null;
+    }
     _arraysEqual(a, b) {
       if (a === b) return true;
       if (a == null || b == null) return false;
@@ -4032,6 +4080,13 @@ var Expressive = (() => {
     }
     _setupMenu() {
       this.labelEl = this.el.labels?.[0] ?? null;
+      Array.from(this.el.labels ?? []).forEach((label) => {
+        this._originalLabels.set(label, { for: label.getAttribute("for"), id: label.getAttribute("id") });
+      });
+      if (this.labelEl && !this.el.closest("label")) {
+        this._labelPlaceholder = document.createComment("");
+        this.labelEl.before(this._labelPlaceholder);
+      }
       this._setupWrapper();
       this._hideNativeSelect();
       if (this.el.matches(":disabled")) this.wrapper.classList.add("disabled");
@@ -4047,7 +4102,7 @@ var Expressive = (() => {
       this._buildCaret();
       this._initMenu();
       this._setSelectedStates();
-      if (this.labelEl) this.input.after(this.labelEl);
+      if (this._labelPlaceholder) this.input.after(this.labelEl);
     }
     _setupWrapper() {
       const parent = this.el.parentElement;
@@ -4068,9 +4123,10 @@ var Expressive = (() => {
     _hideNativeSelect() {
       const hiddenDiv = document.createElement("div");
       hiddenDiv.classList.add("hide-select");
+      hiddenDiv.ariaHidden = "true";
       this.el.before(hiddenDiv);
       hiddenDiv.appendChild(this.el);
-      this.wrapper.append(hiddenDiv);
+      if (this._createdWrapper) this.wrapper.append(hiddenDiv);
     }
     _buildInput() {
       this.input = document.createElement("input");
@@ -4093,9 +4149,14 @@ var Expressive = (() => {
       this.input.ariaExpanded = "false";
       this.input.setAttribute("aria-controls", this.menuEl.id);
       this.input.placeholder = " ";
-      if (this.labelEl) {
-        this._originalLabelFor = this.labelEl.htmlFor;
-        this.labelEl.htmlFor = this.input.id;
+      this._originalLabels.forEach((_, label) => {
+        label.htmlFor = this.input.id;
+      });
+      if (this._labelPlaceholder && this._originalLabels.size > 1 && !this.input.getAttribute("aria-label") && !this.input.getAttribute("aria-labelledby")) {
+        this.input.setAttribute("aria-labelledby", Array.from(this._originalLabels.keys(), (label, index) => {
+          if (!label.id) label.id = `${this.input.id}-label-${index}`;
+          return label.id;
+        }).join(" "));
       }
       this.wrapper.prepend(this.input);
       this._setValueToInput();
@@ -4190,9 +4251,13 @@ var Expressive = (() => {
       this.menuEl?.remove();
       const hide = this.el.parentElement;
       if (hide?.classList.contains("hide-select")) hide.replaceWith(this.el);
-      if (this.labelEl && this._originalLabelFor !== null) {
-        this.labelEl.htmlFor = this._originalLabelFor;
-      }
+      this._originalLabels.forEach((original, label) => {
+        for (const name of ["for", "id"]) {
+          if (original[name] === null) label.removeAttribute(name);
+          else label.setAttribute(name, original[name]);
+        }
+      });
+      this._labelPlaceholder?.replaceWith(this.labelEl);
       if (!this.wrapper) return;
       if (this._createdWrapper) {
         this.wrapper.replaceWith(this.el);
@@ -4618,7 +4683,7 @@ var Expressive = (() => {
             typeof this.options.format === "function" ? this.options.format(new Date(this.el.value)) : this.options.format
           );
         } else {
-          date = new Date(Date.parse(e.target.value));
+          date = _Datepicker._parseDate(e.target.value);
         }
         if (_Datepicker._isDate(date)) {
           if (el == this.endDateEl && date < this.date) return this.setInputValue(el, this.endDate);
@@ -4659,7 +4724,7 @@ var Expressive = (() => {
       this._insertHTMLIntoDOM();
       this._setupEventHandlers();
       if (!this.options.defaultDate) {
-        this.options.defaultDate = new Date(Date.parse(this.el.value));
+        this.options.defaultDate = _Datepicker._parseDate(this.el.value);
       }
       const defDate = this.options.defaultDate;
       if (_Datepicker._isDate(defDate)) {
@@ -4712,6 +4777,12 @@ var Expressive = (() => {
     static _isDate(obj) {
       return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
     }
+    static _parseDate(value) {
+      value = value.trim();
+      if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return new Date(Date.parse(value));
+      const date = /* @__PURE__ */ new Date(value + "T00:00:00");
+      return date.getDate() === Number(value.slice(-2)) ? date : /* @__PURE__ */ new Date(NaN);
+    }
     static _isWeekend(date) {
       const day = date.getDay();
       return day === 0 || day === 6;
@@ -4821,7 +4892,7 @@ var Expressive = (() => {
      * Sets date from input field.
      */
     setDateFromInput(el) {
-      const date = new Date(Date.parse(el.value));
+      const date = _Datepicker._parseDate(el.value);
       this.setDate(date, false, el == this.endDateEl, true);
     }
     /**
@@ -4850,7 +4921,7 @@ var Expressive = (() => {
         return this.draw();
       }
       if (typeof date === "string") {
-        date = new Date(Date.parse(date));
+        date = _Datepicker._parseDate(date);
       }
       if (!_Datepicker._isDate(date)) {
         return;
@@ -5840,18 +5911,31 @@ var Expressive = (() => {
   var _ScrollSpy = class _ScrollSpy extends Component {
     constructor(el, options) {
       super(el, options, _ScrollSpy);
+      this._ratio = 0;
+      this._link = null;
       this.el["Expressive_ScrollSpy"] = this;
       this.options = {
         ..._ScrollSpy.defaults,
         ...options
       };
+      this._offset = this.el.style.getPropertyValue("--md-comp-scrollspy-offset");
+      this._offsetPriority = this.el.style.getPropertyPriority("--md-comp-scrollspy-offset");
       this.el.style.setProperty(
         "--md-comp-scrollspy-offset",
         `${this.options.scrollOffset}px`
       );
       _ScrollSpy._elements.push(this);
-      _ScrollSpy._ensureObserver(this.options.scrollOffset);
-      _ScrollSpy._observer?.observe(this.el);
+      if (typeof IntersectionObserver !== "undefined") {
+        this._observer = new IntersectionObserver((entries) => {
+          if (_ScrollSpy.getInstance(this.el) !== this) return;
+          for (const entry of entries) this._ratio = entry.isIntersecting ? entry.intersectionRatio : 0;
+          _ScrollSpy._syncActive(this.options.getActiveElement);
+        }, {
+          rootMargin: `-${this.options.scrollOffset}px 0px -45% 0px`,
+          threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]
+        });
+        this._observer.observe(this.el);
+      }
     }
     static get defaults() {
       return _defaults16;
@@ -5864,66 +5948,44 @@ var Expressive = (() => {
     }
     destroy() {
       const index = _ScrollSpy._elements.indexOf(this);
-      if (index >= 0) _ScrollSpy._elements.splice(index, 1);
-      _ScrollSpy._ratios.delete(this.el);
-      _ScrollSpy._observer?.unobserve(this.el);
-      const link = _ScrollSpy._linkFor(this.el.id, this.options);
-      if (link && link === _ScrollSpy._active) {
-        _ScrollSpy._clearActive(this.options);
-      } else {
-        link?.classList.remove(this.options.activeClass);
-        link?.removeAttribute("aria-current");
-      }
-      if (_ScrollSpy._elements.length === 0) {
-        _ScrollSpy._observer?.disconnect();
-        _ScrollSpy._observer = null;
-        _ScrollSpy._ratios.clear();
-        _ScrollSpy._active = null;
-      } else {
-        _ScrollSpy._syncActive();
-      }
+      if (index < 0) return;
+      _ScrollSpy._elements.splice(index, 1);
+      this._observer?.disconnect();
+      const resolver = this.options.getActiveElement;
+      if (_ScrollSpy._active.get(resolver) === this) _ScrollSpy._clearActive(resolver);
+      this.el.style.setProperty("--md-comp-scrollspy-offset", this._offset, this._offsetPriority);
       this.el["Expressive_ScrollSpy"] = void 0;
+      _ScrollSpy._syncActive(resolver);
     }
-    static _ensureObserver(offset) {
-      if (_ScrollSpy._observer) return;
-      if (typeof IntersectionObserver === "undefined") return;
-      _ScrollSpy._observer = new IntersectionObserver(_ScrollSpy._onIntersect, {
-        rootMargin: `-${offset}px 0px -45% 0px`,
-        threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]
-      });
-    }
-    static _syncActive() {
-      if (!_ScrollSpy._elements.length) return;
-      const options = _ScrollSpy._elements[0].options;
+    static _syncActive(resolver) {
+      const elements = _ScrollSpy._elements.filter((spy) => spy.options.getActiveElement === resolver);
       let best = null;
       let bestRatio = 0;
-      for (const spy of _ScrollSpy._elements) {
-        const ratio = _ScrollSpy._ratios.get(spy.el) ?? 0;
+      for (const spy of elements) {
+        const ratio = spy._ratio;
         if (ratio > bestRatio) {
           bestRatio = ratio;
           best = spy;
         }
       }
       if (!best) {
-        if (options.keepTopElementActive) {
-          best = _ScrollSpy._nearestAbove() ?? _ScrollSpy._elements[0];
-        } else {
-          _ScrollSpy._clearActive(options);
-          return;
-        }
+        const retained = elements.filter((spy) => spy.options.keepTopElementActive);
+        best = _ScrollSpy._nearestAbove(retained) ?? retained[0];
       }
-      const next = _ScrollSpy._linkFor(best.el.id, best.options);
-      if (next === _ScrollSpy._active) return;
-      _ScrollSpy._clearActive(options);
+      const next = best ? _ScrollSpy._linkFor(best.el.id, best.options) : null;
+      const active = _ScrollSpy._active.get(resolver);
+      if (active === best && active?._link === next) return;
+      _ScrollSpy._clearActive(resolver);
       if (!next) return;
       next.classList.add(best.options.activeClass);
       next.setAttribute("aria-current", "true");
-      _ScrollSpy._active = next;
+      best._link = next;
+      _ScrollSpy._active.set(resolver, best);
     }
-    static _nearestAbove() {
+    static _nearestAbove(elements) {
       let best = null;
       let bestTop = -Infinity;
-      for (const spy of _ScrollSpy._elements) {
+      for (const spy of elements) {
         const top = spy.el.getBoundingClientRect().top;
         if (top <= 0 && top >= bestTop) {
           bestTop = top;
@@ -5932,11 +5994,13 @@ var Expressive = (() => {
       }
       return best;
     }
-    static _clearActive(options) {
-      if (!_ScrollSpy._active) return;
-      _ScrollSpy._active.classList.remove(options.activeClass);
-      _ScrollSpy._active.removeAttribute("aria-current");
-      _ScrollSpy._active = null;
+    static _clearActive(resolver) {
+      const active = _ScrollSpy._active.get(resolver);
+      if (!active) return;
+      active._link?.classList.remove(active.options.activeClass);
+      active._link?.removeAttribute("aria-current");
+      active._link = null;
+      _ScrollSpy._active.delete(resolver);
     }
     /**
      * Default lookup compares href attributes (no interpolated selector).
@@ -5960,19 +6024,7 @@ var Expressive = (() => {
     }
   };
   _ScrollSpy._elements = [];
-  _ScrollSpy._observer = null;
-  _ScrollSpy._ratios = /* @__PURE__ */ new Map();
-  _ScrollSpy._active = null;
-  _ScrollSpy._onIntersect = (entries) => {
-    for (const entry of entries) {
-      if (entry.isIntersecting && entry.intersectionRatio > 0) {
-        _ScrollSpy._ratios.set(entry.target, entry.intersectionRatio);
-      } else {
-        _ScrollSpy._ratios.delete(entry.target);
-      }
-    }
-    _ScrollSpy._syncActive();
-  };
+  _ScrollSpy._active = /* @__PURE__ */ new Map();
   var ScrollSpy = _ScrollSpy;
 
   // src/ts/components/navigationRail.ts
@@ -6115,14 +6167,13 @@ var Expressive = (() => {
         }
         if (tabLink.hasAttribute("target")) return;
         if (this.options.swipeable) {
-          const panel = tabLink.hash && document.querySelector(tabLink.hash);
+          const panel = tabLink.hash && document.getElementById(tabLink.hash.slice(1));
           const index = this._tabsCarousel.images.indexOf(panel);
           if (index >= 0) this._tabsCarousel.set(index);
           e.preventDefault();
           return;
         }
         const _oldContent = this._content;
-        if (tabLink.hash) this._content = document.querySelector(tabLink.hash);
         this._tabLinks = this._queryTabLinks();
         const prevIndex = this._index;
         this._setActiveTabLink(tabLink);
@@ -6149,7 +6200,7 @@ var Expressive = (() => {
       this._tabLinks.forEach((link) => {
         this._originalLinks.set(link, { active: link.classList.contains("active"), current: link.getAttribute("aria-current") });
         if (link.hasAttribute("target")) return;
-        const panel = link.hash && document.querySelector(link.hash);
+        const panel = link.hash && document.getElementById(link.hash.slice(1));
         if (panel) this._originalPanels.set(panel, {
           display: panel.style.display,
           priority: panel.style.getPropertyPriority("display"),
@@ -6270,7 +6321,7 @@ var Expressive = (() => {
       const tabsContent = [];
       this._tabLinks.forEach((a) => {
         if (a.hash && !a.hasAttribute("target")) {
-          const currContent = document.querySelector(a.hash);
+          const currContent = document.getElementById(a.hash.slice(1));
           if (!currContent) return;
           currContent.classList.add("carousel-item");
           tabsContent.push(currContent);
@@ -6310,7 +6361,7 @@ var Expressive = (() => {
       Array.from(this._tabLinks).forEach((a) => {
         if (a === this._activeTabLink || a.hasAttribute("target")) return;
         if (a.hash) {
-          const currContent = document.querySelector(a.hash);
+          const currContent = document.getElementById(a.hash.slice(1));
           if (currContent) currContent.style.display = "none";
         }
       });
@@ -7531,7 +7582,7 @@ var Expressive = (() => {
   }
 
   // src/ts/modular.ts
-  var version = "0.10.1";
+  var version = "0.11.0";
 
   // src/ts/index.ts
   Forms.Init();