@expressivecss/expressive 0.10.1 → 0.11.0

package/dist/js/expressive.cjs

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