@expressivecss/expressive 0.14.1 → 0.15.0

package/dist/js/expressive.cjs

@@ -39,6 +39,7 @@ __export(index_exports, {
   FormSelect: () => FormSelect,
   Forms: () => Forms,
   HeatmapChart: () => HeatmapChart,
+  Keypad: () => Keypad,
   Lightbox: () => Lightbox,
   LineChart: () => LineChart,
   MapView: () => MapView,
@@ -208,12 +209,7 @@ var _Utils = class _Utils {
    * @param trigger Trigger element.
    */
   static getIdFromTrigger(trigger) {
-    let id = trigger.dataset.target;
-    if (!id) {
-      id = trigger.getAttribute("href");
-      return id ? id.slice(1) : "";
-    }
-    return id;
+    return trigger.dataset.target || (trigger.getAttribute("href")?.slice(1) ?? "");
   }
   /**
    * Retrieves document scroll postion from top.
@@ -279,12 +275,11 @@ var _Utils = class _Utils {
    * Renders a button with optional callback function
    */
   static createButton(container, text, className = [], visibility = true, callback = null) {
-    className = className.concat(["text"]);
     const button = document.createElement("button");
-    button.className = className.join(" ");
+    button.className = className.concat(["text"]).join(" ");
     button.style.visibility = visibility ? "visible" : "hidden";
     button.type = "button";
-    button.tabIndex = !!visibility ? 0 : -1;
+    button.tabIndex = visibility ? 0 : -1;
     button.innerText = text;
     if (typeof callback === "function") button.addEventListener("click", callback);
     container.append(button);
@@ -397,10 +392,7 @@ var Component = class {
     if (!(el instanceof HTMLElement)) {
       console.error(Error(el + " is not an HTML Element"));
     }
-    const ins = classDef.getInstance(el);
-    if (!!ins) {
-      ins.destroy();
-    }
+    classDef.getInstance(el)?.destroy();
     this.el = el;
   }
   /**
@@ -410,16 +402,8 @@ var Component = class {
    * @param classDef Class definition.
    */
   static init(els, options, classDef) {
-    let instances = null;
-    if (els instanceof Element) {
-      instances = new classDef(els, options);
-    } else if (els) {
-      instances = [];
-      for (let i = 0; i < els.length; i++) {
-        instances.push(new classDef(els[i], options));
-      }
-    }
-    return instances;
+    if (els instanceof Element) return new classDef(els, options);
+    return els ? Array.from(els, (el) => new classDef(el, options)) : null;
   }
   /**
    * @returns default options for component instance.
@@ -607,7 +591,7 @@ var Cards = class _Cards extends Component {
     Utils.onDocumentReady(() => {
       const cards = Array.from(document.querySelectorAll(CARDS_SELECTOR)).filter(isCardReveal);
       cards.forEach((el) => {
-        if (el && el["Expressive_Cards"] == void 0) this.init(el);
+        if (el["Expressive_Cards"] == void 0) this.init(el);
       });
     });
   }
@@ -650,11 +634,7 @@ var ExpandingCard = class _ExpandingCard extends Component {
     };
     this._handleNativeClose = () => {
       if (this.dialog.open) return;
-      this.closeGeneration++;
-      this.isOpen = false;
-      this.trigger.ariaExpanded = "false";
-      this.dialog.ariaExpanded = "false";
-      this.dialog.classList.remove("expanded");
+      this._collapse();
     };
     this._setTransitionOrigin = () => {
       if (!this.dialog) return;
@@ -663,26 +643,15 @@ var ExpandingCard = class _ExpandingCard extends Component {
         ":scope > figure, :scope > img"
       );
       const mediaRect = media?.getBoundingClientRect();
-      this.dialog.style.setProperty(
-        "--md-comp-expanding-card-from-top",
-        `${Math.max(0, card.top)}px`
-      );
-      this.dialog.style.setProperty(
-        "--md-comp-expanding-card-from-right",
-        `${Math.max(0, window.innerWidth - card.right)}px`
-      );
-      this.dialog.style.setProperty(
-        "--md-comp-expanding-card-from-bottom",
-        `${Math.max(0, window.innerHeight - card.bottom)}px`
-      );
-      this.dialog.style.setProperty(
-        "--md-comp-expanding-card-from-left",
-        `${Math.max(0, card.left)}px`
-      );
-      this.dialog.style.setProperty(
-        "--md-comp-expanding-card-from-media-height",
-        `${Math.max(0, mediaRect?.height ?? 0)}px`
+      const set = (side, px) => this.dialog.style.setProperty(
+        `--md-comp-expanding-card-from-${side}`,
+        `${Math.max(0, px)}px`
       );
+      set("top", card.top);
+      set("right", window.innerWidth - card.right);
+      set("bottom", window.innerHeight - card.bottom);
+      set("left", card.left);
+      set("media-height", mediaRect?.height ?? 0);
     };
     this.open = () => {
       if (this.isOpen || !this.dialog || !this.trigger) return;
@@ -701,12 +670,9 @@ var ExpandingCard = class _ExpandingCard extends Component {
     };
     this.close = () => {
       if (!this.isOpen || !this.dialog || !this.trigger) return;
-      const generation = ++this.closeGeneration;
       this._setTransitionOrigin();
-      this.isOpen = false;
-      this.trigger.ariaExpanded = "false";
-      this.dialog.ariaExpanded = "false";
-      this.dialog.classList.remove("expanded");
+      this._collapse();
+      const generation = this.closeGeneration;
       if (typeof this.options.onClose === "function") {
         this.options.onClose.call(this, this.el);
       }
@@ -757,18 +723,24 @@ var ExpandingCard = class _ExpandingCard extends Component {
   }
   destroy() {
     this._removeEventHandlers();
+    this._collapse();
+    if (this.dialog?.open) this.dialog.close();
+    this.el["Expressive_ExpandingCard"] = void 0;
+  }
+  /** Marks the card closed and invalidates any pending close. */
+  _collapse() {
     this.closeGeneration++;
     this.isOpen = false;
     if (this.trigger) this.trigger.ariaExpanded = "false";
-    if (this.dialog) this.dialog.ariaExpanded = "false";
-    this.dialog?.classList.remove("expanded");
-    if (this.dialog?.open) this.dialog.close();
-    this.el["Expressive_ExpandingCard"] = void 0;
+    if (this.dialog) {
+      this.dialog.ariaExpanded = "false";
+      this.dialog.classList.remove("expanded");
+    }
   }
   static Init() {
     Utils.onDocumentReady(() => {
       document.querySelectorAll(EXPANDING_CARD_SELECTOR).forEach((el) => {
-        if (el && el["Expressive_ExpandingCard"] == void 0) {
+        if (el["Expressive_ExpandingCard"] == void 0) {
           this.init(el);
         }
       });
@@ -854,15 +826,8 @@ var _Menu = class _Menu extends Component {
         this.close();
         return;
       }
-      const leaveToMenuContent = !!(this.menuEl && toEl && this.menuEl.contains(toEl));
-      let leaveToActiveMenuTrigger = false;
-      const closestTrigger = toEl.closest(".menu-trigger");
-      if (closestTrigger && !!closestTrigger["Expressive_Menu"] && closestTrigger["Expressive_Menu"].isOpen) {
-        leaveToActiveMenuTrigger = true;
-      }
-      if (!leaveToActiveMenuTrigger && !leaveToMenuContent) {
-        this.close();
-      }
+      const leaveToActiveMenuTrigger = toEl.closest(".menu-trigger")?.["Expressive_Menu"]?.isOpen;
+      if (!leaveToActiveMenuTrigger && !this.menuEl?.contains(toEl)) this.close();
     };
     this._handleDocumentClick = (e) => {
       const path = e.composedPath();
@@ -874,11 +839,7 @@ var _Menu = class _Menu extends Component {
       if (this.options.closeOnClick && inside && !this.isTouchMoving) {
         this.close();
       } else if (!inside) {
-        this._schedule(() => {
-          if (this.isOpen) {
-            this.close();
-          }
-        }, 0);
+        this._schedule(() => this.close(), 0);
       }
       this.isTouchMoving = false;
     };
@@ -954,11 +915,10 @@ var _Menu = class _Menu extends Component {
         if (submenu) {
           e.preventDefault();
           const parentLi = submenu.parentElement;
-          parentLi.classList.remove("open", "submenu-start");
-          this._syncSubmenuAria(parentLi, false);
+          this._closeSubmenu(parentLi);
           this._focusRow(parentLi);
         }
-      } else if (arrowUpOrDown && this.isOpen) {
+      } else if (arrowUpOrDown) {
         e.preventDefault();
         const direction = e.key === Utils.keys.ARROW_DOWN ? 1 : -1;
         const row = this._focusedRow(e);
@@ -977,7 +937,7 @@ var _Menu = class _Menu extends Component {
           item.classList.add("active");
           this._focusRow(item);
         }
-      } else if ((e.key === Utils.keys.ENTER || e.key === SPACE) && this.isOpen) {
+      } else if (e.key === Utils.keys.ENTER || e.key === SPACE) {
         const li = this._focusedRow(e);
         e.preventDefault();
         if (li?.matches('.disabled, [aria-disabled="true"]')) return;
@@ -992,19 +952,18 @@ var _Menu = class _Menu extends Component {
         } else if (focusedElement instanceof HTMLElement) {
           focusedElement.click();
         }
-      } else if (e.key === Utils.keys.ESC && this.isOpen) {
+      } else if (e.key === Utils.keys.ESC) {
         e.preventDefault();
         const openSub = this._containingSubmenu(e)?.parentElement ?? Array.from(this.menuEl.querySelectorAll("li.open")).reverse()[0];
         if (openSub) {
-          openSub.classList.remove("open", "submenu-start");
-          this._syncSubmenuAria(openSub, false);
+          this._closeSubmenu(openSub);
           this._focusRow(openSub);
         } else {
           this.close();
         }
       }
       const keyText = e.key.toLowerCase();
-      if (e.key.length === 1 && e.key !== SPACE && !e.ctrlKey && !e.metaKey && !e.altKey && !e.isComposing) {
+      if (e.key.length === 1 && e.key !== SPACE) {
         this.filterQuery.push(keyText);
         const string = this.filterQuery.join("");
         const newOptionEl = Array.from(list.querySelectorAll(":scope > li")).find(
@@ -1229,10 +1188,7 @@ var _Menu = class _Menu extends Component {
   _toggleSubmenu(li) {
     const open = !li.classList.contains("open");
     li.parentElement?.querySelectorAll(":scope > li.open").forEach((other) => {
-      if (other !== li) {
-        other.classList.remove("open", "submenu-start");
-        this._syncSubmenuAria(other, false);
-      }
+      if (other !== li) this._closeSubmenu(other);
     });
     li.classList.toggle("open", open);
     if (open) this._alignSubmenu(li);
@@ -1249,11 +1205,12 @@ var _Menu = class _Menu extends Component {
     const rect = menu.getBoundingClientRect();
     if (rect.left < 8 || rect.right > window.innerWidth - 8) li.classList.add("submenu-start");
   }
+  _closeSubmenu(li) {
+    li.classList.remove("open", "submenu-start");
+    this._syncSubmenuAria(li, false);
+  }
   _closeSubmenus() {
-    this.menuEl?.querySelectorAll("li.open").forEach((li) => {
-      li.classList.remove("open", "submenu-start");
-      this._syncSubmenuAria(li, false);
-    });
+    this.menuEl?.querySelectorAll("li.open").forEach((li) => this._closeSubmenu(li));
   }
   _containingSubmenu(e) {
     const target = e.target;
@@ -1564,13 +1521,11 @@ var _defaults4 = {
   isMultiSelect: false,
   onSearch: (text, autocomplete) => {
     const normSearch = text.toLocaleLowerCase();
-    const data = autocomplete.options.data;
     autocomplete.setMenuItems(
-      data.filter(
+      autocomplete.options.data.filter(
         (option) => option.id.toString().toLocaleLowerCase().includes(normSearch) || option.text?.toLocaleLowerCase().includes(normSearch)
       )
     );
-    autocomplete.options.data = data;
   },
   maxMenuHeight: "300px",
   allowUnsafeHTML: false,
@@ -1603,17 +1558,13 @@ var _Autocomplete = class _Autocomplete extends Component {
       this._inputChangeDetection(actualValue);
     };
     this._inputChangeDetection = (value) => {
-      if (!this.options.isMultiSelect && this.selectedValues.length && this.el.value !== (this.selectedValues[0].text || String(this.selectedValues[0].id))) {
-        this.selectedValues = [];
-      }
+      const deselected = !this.options.isMultiSelect && this.selectedValues.length > 0 && this.el.value !== (this.selectedValues[0].text || String(this.selectedValues[0].id));
+      if (deselected) this.selectedValues = [];
       if (this.oldVal !== value) {
         this._setStatusLoading();
         this.options.onSearch(this.el.value, this);
       }
-      if (!this.options.isMultiSelect && this.el.value.length === 0) {
-        this.selectedValues = [];
-        this._triggerChanged();
-      }
+      if (deselected) this._triggerChanged();
       this.oldVal = value;
     };
     this._handleInputKeydown = (e) => {
@@ -1634,6 +1585,10 @@ var _Autocomplete = class _Autocomplete extends Component {
       }
       if (e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN) {
         e.preventDefault();
+        if (!this.menu.isOpen && this._openTimer === void 0) {
+          this.open();
+          return;
+        }
         if (e.key === Utils.keys.ARROW_UP && this.activeIndex > 0) this.activeIndex--;
         if (e.key === Utils.keys.ARROW_DOWN && this.activeIndex < numItems - 1)
           this.activeIndex++;
@@ -1671,7 +1626,7 @@ var _Autocomplete = class _Autocomplete extends Component {
       this._resetAutocomplete();
       if (inputText.length >= this.options.minLength) {
         this._renderMenu();
-        this._announce(this.menuItems.length ? this.options.i18n.results(this.menuItems.length) : this.options.i18n.noResults);
+        this._announce(this._resultsMessage(this.menuItems.length));
       }
       if (!this.menu.isOpen) {
         if (this._openTimer !== void 0) clearTimeout(this._openTimer);
@@ -1833,6 +1788,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);
+    this.el.removeEventListener("keydown", this.menu._handleTriggerKeydown);
     if (!this.options.isMultiSelect) this._refreshInputText();
     if (this.el.value) this.selectOption(this.el.value);
     const div = document.createElement("div");
@@ -1864,7 +1820,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     this._pointerDown = false;
   }
   _highlightPartialText(input, label) {
-    const start = label.toLocaleLowerCase().indexOf("" + input.toLocaleLowerCase());
+    const start = label.toLocaleLowerCase().indexOf(input.toLocaleLowerCase());
     const end = start + input.length - 1;
     if (start == -1 || end == -1) {
       return [label, "", ""];
@@ -1935,7 +1891,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     itemText.classList.add("item-text");
     itemText.setAttribute("style", "padding:5px;overflow:hidden;");
     item.appendChild(itemText);
-    item.querySelector(".item-text").appendChild(div);
+    itemText.appendChild(div);
     if (typeof entry.description === "string" || typeof entry.description === "number" && !isNaN(entry.description)) {
       const description = document.createElement("small");
       description.setAttribute(
@@ -1943,7 +1899,7 @@ var _Autocomplete = class _Autocomplete extends Component {
         "line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;"
       );
       description.innerText = entry.description;
-      item.querySelector(".item-text").appendChild(description);
+      itemText.appendChild(description);
     }
     const getGridConfig = () => {
       if (this.options.isMultiSelect) {
@@ -1976,6 +1932,9 @@ var _Autocomplete = class _Autocomplete extends Component {
     const text = this.el.matches(":focus") && this.el.value.length >= this.options.minLength ? message : "";
     if (this._announcer.textContent !== text) this._announcer.textContent = text;
   }
+  _resultsMessage(count) {
+    return count ? this.options.i18n.results(count) : this.options.i18n.noResults;
+  }
   _updateSelectedInfo() {
     const statusElement = this._statusInfo;
     if (statusElement) {
@@ -2005,7 +1964,6 @@ var _Autocomplete = class _Autocomplete extends Component {
     if (this.el["Expressive_Autocomplete"] !== this) return;
     const resultCount = menuItems.length;
     this.menuItems = menuItems;
-    this.options.data = menuItems;
     if (selected) {
       this.selectedValues = this.menuItems.filter(
         (item) => !(selected.indexOf(item.id) === -1)
@@ -2018,8 +1976,8 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
     if (open) this.open();
     this._updateSelectedInfo();
-    this._announce(open ? resultCount ? this.options.i18n.results(resultCount) : this.options.i18n.noResults : "");
-    this._triggerChanged();
+    this._announce(open ? this._resultsMessage(resultCount) : "");
+    if (selected) this._triggerChanged();
   }
   /**
    * Select a specific autocomplete option via id-property.
@@ -2029,9 +1987,8 @@ var _Autocomplete = class _Autocomplete extends Component {
     const entry = this.menuItems.find((item) => item.id == id);
     if (!entry) return;
     if (this.options.isMultiSelect) {
-      if (!(this.selectedValues.filter(
-        (selectedEntry) => selectedEntry.id === entry.id
-      ).length >= 1)) this.selectedValues.push(entry);
+      if (!this.selectedValues.some((selectedEntry) => selectedEntry.id === entry.id))
+        this.selectedValues.push(entry);
       else this.selectedValues = this.selectedValues.filter(
         (selectedEntry) => selectedEntry.id !== entry.id
       );
@@ -2104,7 +2061,7 @@ var _Chips = class _Chips extends Component {
           return;
         }
         e.preventDefault();
-        if (!this.hasAutocomplete || this.hasAutocomplete && !this.options.autocompleteOnly) {
+        if (!this.hasAutocomplete || !this.options.autocompleteOnly) {
           this.addChip({ id: this._input.value });
         }
         this._input.value = "";
@@ -2197,9 +2154,8 @@ var _Chips = class _Chips extends Component {
   static _handleChipsKeydown(e) {
     _Chips._keydown = true;
     const chips = e.target.closest(".chips");
-    const chipsKeydown = e.target && chips;
     const tag = e.target.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || !chipsKeydown) return;
+    if (tag === "INPUT" || tag === "TEXTAREA" || !chips) return;
     const currChips = chips["Expressive_Chips"];
     if (!currChips) return;
     if (e.key === Utils.keys.BACKSPACE || e.key === Utils.keys.DELETE) {
@@ -2299,9 +2255,9 @@ var _Chips = class _Chips extends Component {
   }
   _setPlaceholder() {
     if (!this._input) return;
-    if (this.chipsData !== void 0 && !this.chipsData.length && this.options.placeholder) {
+    if (!this.chipsData.length && this.options.placeholder) {
       this._input.placeholder = this.options.placeholder;
-    } else if ((this.chipsData === void 0 || !!this.chipsData.length) && this.options.secondaryPlaceholder) {
+    } else if (this.chipsData.length && this.options.secondaryPlaceholder) {
       this._input.placeholder = this.options.secondaryPlaceholder;
     }
   }
@@ -2518,10 +2474,13 @@ var Slider = class _Slider extends Component {
     if (this.el === start && +start.value > +end.value) start.value = end.value;
     if (this.el === end && +end.value < +start.value) end.value = start.value;
   }
-  _fraction(el) {
+  /** The input's range, defaulting like the browser does: 0 to 100. */
+  _bounds(el) {
     const parsedMax = parseFloat(el.max);
-    const max = Number.isNaN(parsedMax) ? 100 : parsedMax;
-    const min = parseFloat(el.min) || 0;
+    return { max: Number.isNaN(parsedMax) ? 100 : parsedMax, min: parseFloat(el.min) || 0 };
+  }
+  _fraction(el) {
+    const { max, min } = this._bounds(el);
     const val = parseFloat(el.value) || 0;
     return max === min ? 0 : (val - min) / (max - min);
   }
@@ -2550,9 +2509,7 @@ var Slider = class _Slider extends Component {
       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 { max, min } = this._bounds(this.el);
       const step = parseFloat(this.el.step);
       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) : "");
@@ -2576,7 +2533,7 @@ var Slider = class _Slider extends Component {
    */
   static Init() {
     Utils.onDocumentReady(() => {
-      _Slider.init(document.querySelectorAll("input[type=range]"), {});
+      _Slider.init(document.querySelectorAll("input[type=range]"));
     });
   }
 };
@@ -2591,16 +2548,8 @@ var _Dialogs = class _Dialogs {
     });
   }
   static _onPointerDown(event) {
-    if (!_Dialogs._isPrimaryPress(event)) {
-      _Dialogs._down = null;
-      return;
-    }
-    const dialog = _Dialogs._backdropDialog(event);
-    if (!dialog || !_Dialogs._lightDismissible(dialog) || !_Dialogs._outside(event, dialog)) {
-      _Dialogs._down = null;
-      return;
-    }
-    _Dialogs._down = { dialog, pointerId: event.pointerId };
+    const dialog = _Dialogs._isPrimaryPress(event) ? _Dialogs._backdropDialog(event) : null;
+    _Dialogs._down = dialog && _Dialogs._lightDismissible(dialog) && _Dialogs._outside(event, dialog) ? { dialog, pointerId: event.pointerId } : null;
   }
   static _onPointerUp(event) {
     const started = _Dialogs._down;
@@ -2676,21 +2625,15 @@ function installSheetDrag(config) {
     onCancel();
     config.onPress?.();
     const dialog = sheetFor(event.target);
-    if (!dialog?.open) {
-      drag = null;
-      return;
-    }
-    if (!config.inHandle(event, dialog)) {
-      drag = null;
-      return;
-    }
+    if (!dialog?.open || !config.inHandle(event, dialog)) return;
     dialog.style.transition = "none";
+    const at = coord(event);
     drag = {
       dialog,
       pointerId: event.pointerId,
       direction: config.direction(dialog),
-      start: coord(event),
-      last: coord(event),
+      start: at,
+      last: at,
       lastT: Date.now(),
       velocity: 0,
       shift: 0
@@ -2703,12 +2646,13 @@ function installSheetDrag(config) {
       onCancel();
       return;
     }
-    const delta = coord(event) - drag.start;
+    const at = coord(event);
+    const delta = at - drag.start;
     drag.shift = drag.direction === 1 ? Math.max(0, delta) : Math.min(0, delta);
-    if (coord(event) !== drag.last) {
+    if (at !== drag.last) {
       const now = Date.now();
-      drag.velocity = (coord(event) - drag.last) / Math.max(1, now - drag.lastT);
-      drag.last = coord(event);
+      drag.velocity = (at - drag.last) / Math.max(1, now - drag.lastT);
+      drag.last = at;
       drag.lastT = now;
     }
     drag.dialog.style.setProperty(config.property, `${drag.shift}px`);
@@ -2835,7 +2779,7 @@ var _Forms = class _Forms {
     if (len === 0 && textfield.validity.badInput === false && !textfield.required && textfield.classList.contains("validate")) {
       textfield.classList.remove("invalid");
     } else if (textfield.classList.contains("validate")) {
-      if (textfield.validity.valid && hasLength && len <= lenAttr || textfield.validity.valid && !hasLength) {
+      if (textfield.validity.valid && (!hasLength || len <= lenAttr)) {
         textfield.classList.remove("invalid");
       } else {
         textfield.classList.add("invalid");
@@ -2870,13 +2814,12 @@ var _Forms = class _Forms {
     Utils.onDocumentReady(() => {
       document.addEventListener("change", (e) => {
         const target = e.target;
-        if (target instanceof HTMLInputElement && target.type === "file") {
+        if (!(target instanceof HTMLInputElement)) return;
+        if (target.type === "file") {
           const zone = target.closest(".drop-zone");
           if (zone) _Forms.listDropZoneFiles(zone, target);
         }
-        if (target instanceof HTMLInputElement) {
-          _Forms.validateField(target);
-        }
+        _Forms.validateField(target);
       });
       document.addEventListener("keyup", (e) => {
         const target = e.target;
@@ -2981,12 +2924,7 @@ var _Forms = class _Forms {
     fileInput.addEventListener("change", () => {
       const fileField = fileInput.closest(".file-field");
       const pathInput = fileField.querySelector("input.file-path");
-      const files = fileInput.files;
-      const filenames = [];
-      for (let i = 0; i < files.length; i++) {
-        filenames.push(files[i].name);
-      }
-      pathInput.value = filenames.join(", ");
+      pathInput.value = Array.from(fileInput.files, (f) => f.name).join(", ");
       pathInput.dispatchEvent(
         new Event("change", { bubbles: true, cancelable: true, composed: true })
       );
@@ -3068,8 +3006,7 @@ var AppBar = class _AppBar extends Component {
     this._input = this.el.querySelector('input[type="search"]');
     if (!this._input) return;
     const id = this._input.getAttribute("aria-controls");
-    if (id) this._view = document.getElementById(id);
-    if (!this._view) this._view = this.el.querySelector(".search-view");
+    this._view = id && document.getElementById(id) || this.el.querySelector(".search-view");
     if (!this._view) return;
     this._input.addEventListener("focus", this._onSearchFocus);
     this._input.addEventListener("click", this._onSearchFocus);
@@ -3397,6 +3334,7 @@ var _defaults10 = {
     slide: "Slide"
   }
 };
+var naturallyFocusable = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var _Carousel = class _Carousel extends Component {
   constructor(el, options) {
     super(el, options, _Carousel);
@@ -3698,7 +3636,6 @@ var _Carousel = class _Carousel extends Component {
       this.el.setAttribute("aria-roledescription", "carousel");
       this._generatedContainerDescription = true;
     }
-    const naturallyFocusable = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
     this.images.forEach((item, index) => {
       if (!item.hasAttribute("aria-roledescription")) {
         item.setAttribute("aria-roledescription", "slide");
@@ -3731,10 +3668,6 @@ var _Carousel = class _Carousel extends Component {
       const button = document.createElement("button");
       button.type = "button";
       button.classList.add("indicator-item");
-      if (i === 0) {
-        button.classList.add("active");
-        button.setAttribute("aria-current", "true");
-      }
       button.setAttribute("aria-label", `${this.options.i18n.slide} ${i + 1}`);
       this._indicators.appendChild(button);
     });
@@ -3932,11 +3865,7 @@ var _Carousel = class _Carousel extends Component {
   _focusItem(index) {
     const item = this.images[index];
     if (!item) return;
-    const focusable = item.matches(
-      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    ) ? item : item.querySelector(
-      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    );
+    const focusable = item.matches(naturallyFocusable) ? item : item.querySelector(naturallyFocusable);
     (focusable ?? item).focus({ preventScroll: true });
   }
   _updateParallax() {
@@ -4033,13 +3962,13 @@ var _Carousel = class _Carousel extends Component {
     this._syncAutoAdvance();
   }
   next(n = 1) {
-    if (n === void 0 || isNaN(n)) n = 1;
+    if (isNaN(n)) n = 1;
     const index = this.center + n;
     if (index >= this.count || index < 0) return;
     this._cycleTo(index);
   }
   prev(n = 1) {
-    if (n === void 0 || isNaN(n)) n = 1;
+    if (isNaN(n)) n = 1;
     const index = this.center - n;
     if (index >= this.count || index < 0) return;
     this._cycleTo(index);
@@ -4486,8 +4415,132 @@ var Particles = class _Particles extends Component {
   }
 };
 
-// src/ts/components/commandPalette.ts
+// src/ts/components/keypad.ts
 var _defaults14 = {
+  onKey: null
+};
+var isField = (el) => el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement;
+var instances = /* @__PURE__ */ new Set();
+var touched = /* @__PURE__ */ new WeakSet();
+var segmenter;
+function keyFor(e) {
+  const key = e.target.closest?.("button");
+  if (!key) return null;
+  const keypad = key.closest(".keypad, .keyboard")?.["Expressive_Keypad"];
+  if (keypad) return [keypad, key];
+  const wrapper = key.dataset.key && key.closest(".field");
+  if (!wrapper) return null;
+  for (const other of instances) {
+    const field = other.target;
+    if (field && wrapper.contains(field)) return [other, key];
+  }
+  return null;
+}
+var rootListeners = [
+  // A pointer press on a key would move focus off the field and hide its
+  // caret. Keep focus where it is while the field has it.
+  ["mousedown", (e) => {
+    const hit = keyFor(e);
+    if (hit && hit[0]._root?.activeElement === hit[0].target) e.preventDefault();
+  }],
+  ["click", (e) => {
+    const hit = keyFor(e);
+    if (hit) hit[0]._press(hit[1]);
+  }],
+  ["focusin", (e) => {
+    if (isField(e.target)) touched.add(e.target);
+  }]
+];
+var Keypad = class _Keypad extends Component {
+  constructor(el, options) {
+    super(el, options, _Keypad);
+    this.el["Expressive_Keypad"] = this;
+    this.options = { ..._Keypad.defaults, ...options };
+    const root = this.el.getRootNode();
+    this._root = root.nodeType === 9 || root.nodeType === 11 ? root : null;
+    if (this._root && !this._shared()) {
+      for (const [type, listener] of rootListeners) this._root.addEventListener(type, listener);
+    }
+    instances.add(this);
+    const active = this._root?.activeElement;
+    if (isField(active)) touched.add(active);
+  }
+  static get defaults() {
+    return _defaults14;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _Keypad);
+  }
+  static getInstance(el) {
+    return el["Expressive_Keypad"];
+  }
+  destroy() {
+    instances.delete(this);
+    if (this._root && !this._shared()) {
+      for (const [type, listener] of rootListeners) this._root.removeEventListener(type, listener);
+    }
+    this.el["Expressive_Keypad"] = void 0;
+  }
+  /** The text field named by `aria-controls`, if there is one. */
+  get target() {
+    const id = this.el.getAttribute("aria-controls");
+    const field = id ? Utils.getElementById(this.el, id) : null;
+    return isField(field) ? field : null;
+  }
+  // Whether another keypad already listens on this one's root.
+  _shared() {
+    for (const other of instances) if (other !== this && other._root === this._root) return true;
+    return false;
+  }
+  /** @internal */
+  _press(key) {
+    const name = key.dataset.key;
+    if (key.disabled || !name && !key.hasAttribute("value")) return;
+    if (name === "Shift") {
+      key.setAttribute("aria-pressed", String(key.getAttribute("aria-pressed") !== "true"));
+      this.options.onKey?.(name);
+      return;
+    }
+    let text = name ? "" : key.value;
+    const shift = text && this.el.querySelector('[data-key="Shift"][aria-pressed="true"]');
+    if (shift) {
+      text = text.toUpperCase();
+      shift.setAttribute("aria-pressed", "false");
+    }
+    const field = this.target;
+    if (field && !field.matches(":disabled") && !field.readOnly) {
+      if (name === "Enter" && field instanceof HTMLInputElement) field.form?.requestSubmit();
+      else if (name === "Enter") this._edit(field, "\n", "insertLineBreak");
+      else if (name === "Backspace") this._edit(field, "", "deleteContentBackward");
+      else if (text) this._edit(field, text, "insertText");
+    }
+    this.options.onKey?.(name ?? text);
+  }
+  _edit(field, text, inputType) {
+    const { value } = field;
+    let start = field.selectionStart ?? value.length;
+    let end = field.selectionEnd ?? value.length;
+    if (start === 0 && end === 0 && !touched.has(field)) start = end = value.length;
+    if (inputType === "deleteContentBackward" && start === end && start) {
+      const tail = value.slice(Math.max(0, start - 64), start);
+      start -= (segmenter ?? (segmenter = new Intl.Segmenter())).segment(tail).containing(tail.length - 1).segment.length;
+    }
+    if (start === end && !text) return;
+    if (text && field.maxLength >= 0 && value.length - (end - start) + text.length > field.maxLength) return;
+    const next = value.slice(0, start) + text + value.slice(end);
+    field.value = next;
+    if (next && !field.value) {
+      field.value = value;
+      return;
+    }
+    if (field.selectionStart !== null) field.setSelectionRange(start + text.length, start + text.length);
+    touched.add(field);
+    field.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true, inputType, data: text || null }));
+  }
+};
+
+// src/ts/components/commandPalette.ts
+var _defaults15 = {
   shortcut: "k",
   closeOnRun: true
 };
@@ -4585,7 +4638,7 @@ var CommandPalette = class _CommandPalette extends Component {
     document.addEventListener("keydown", this._handleShortcut);
   }
   static get defaults() {
-    return _defaults14;
+    return _defaults15;
   }
   /**
    * Initializes instances of CommandPalette.
@@ -4738,7 +4791,7 @@ var CommandPalette = class _CommandPalette extends Component {
 };
 
 // src/ts/components/questionnaire.ts
-var _defaults15 = {
+var _defaults16 = {
   progressLabel: "Question {current} of {total}",
   requiredMessage: "Choose an answer to continue."
 };
@@ -4852,7 +4905,7 @@ var Questionnaire = class _Questionnaire extends Component {
     this.el.addEventListener("invalid", this._handleInvalid, true);
   }
   static get defaults() {
-    return _defaults15;
+    return _defaults16;
   }
   /**
    * Initializes instances of Questionnaire.
@@ -4997,7 +5050,7 @@ var Questionnaire = class _Questionnaire extends Component {
 };
 
 // src/ts/components/lineChart.ts
-var _defaults16 = {
+var _defaults17 = {
   min: null,
   max: null
 };
@@ -5008,13 +5061,19 @@ function svgNode(name, attributes = {}) {
   for (const key in attributes) element.setAttribute(key, attributes[key]);
   return element;
 }
+function polarPoint(turn, r) {
+  const angle = turn * 2 * Math.PI;
+  return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;
+}
+var seriesColor = (i) => String(i % COLORS + 1);
 var _gradientId = 0;
 function cellValue(cell) {
   if (!cell) return null;
   const raw = cell.dataset.value ?? cell.textContent;
   const text = raw.replace(/\u2212/g, "-").replace(/[\s%\p{Sc}]/gu, "");
-  if (!/^[+-]?(\d{1,3}(,\d{3})+|\d+)?(\.\d+)?(e[+-]?\d+)?$/i.test(text) || !/\d/.test(text)) return null;
-  return parseFloat(text.replace(/,/g, ""));
+  if (!/^[+-]?(\d{1,3}(,\d{3})+|\d+)?(\.\d+)?(e[+-]?\d+)?$/i.test(text)) return null;
+  const value = parseFloat(text.replace(/,/g, ""));
+  return Number.isFinite(value) ? value : null;
 }
 function monotonePath(points) {
   const n = points.length;
@@ -5125,7 +5184,7 @@ var LineChart = class extends Component {
     return "Expressive_LineChart";
   }
   static get defaults() {
-    return _defaults16;
+    return _defaults17;
   }
   static init(els, options = {}) {
     return super.init(els, options, this);
@@ -5155,7 +5214,7 @@ var LineChart = class extends Component {
     this.series.forEach((series, i) => {
       const value = series.values[index];
       if (value === null) return;
-      const color = String(i % COLORS + 1);
+      const color = seriesColor(i);
       const top = series.tops[index];
       if (top !== null && this._points) {
         const dot = document.createElement("span");
@@ -5307,7 +5366,7 @@ var LineChart = class extends Component {
     legend.setAttribute("aria-hidden", "true");
     legend.append(...this.series.map((series, i) => {
       const li = document.createElement("li");
-      li.dataset.series = String(i % COLORS + 1);
+      li.dataset.series = seriesColor(i);
       li.textContent = series.name;
       return li;
     }));
@@ -5315,15 +5374,17 @@ var LineChart = class extends Component {
   }
   /** Draws the series, which fill the plot. */
   _draw(drawn = this.series) {
-    const svg = document.createElementNS(SVG, "svg");
-    svg.setAttribute("viewBox", "0 0 100 100");
-    svg.setAttribute("preserveAspectRatio", "none");
-    svg.setAttribute("aria-hidden", "true");
-    svg.setAttribute("focusable", "false");
+    const svg = svgNode("svg", {
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    });
     for (const series of drawn) {
-      const group = document.createElementNS(SVG, "g");
-      group.setAttribute("class", `${this._type}-series ${series.className}`.trim());
-      group.dataset.series = String(this.series.indexOf(series) % COLORS + 1);
+      const group = svgNode("g", {
+        class: `${this._type}-series ${series.className}`.trim(),
+        "data-series": seriesColor(this.series.indexOf(series))
+      });
       const runs = [[]];
       series.tops.forEach((value, index) => {
         if (value === null) runs.push([]);
@@ -5333,23 +5394,21 @@ var LineChart = class extends Component {
       const points = (run, values) => run.map((index) => [this._x(index), series.y(values[index])]);
       const tops = filled.map((run) => monotonePath(points(run, series.tops)));
       const id = `line-chart-gradient-${++_gradientId}`;
-      const gradient = document.createElementNS(SVG, "linearGradient");
-      gradient.id = id;
-      gradient.setAttribute("x2", "0");
-      gradient.setAttribute("y2", "1");
-      gradient.append(document.createElementNS(SVG, "stop"), document.createElementNS(SVG, "stop"));
-      gradient.lastElementChild.setAttribute("offset", "1");
-      const area = document.createElementNS(SVG, "path");
-      area.setAttribute("class", `${this._type}-area`);
-      area.setAttribute("fill", `url(#${id})`);
-      area.setAttribute("d", filled.map((run, r) => {
-        if (!series.base) return `${tops[r]}V100H${this._x(run[0])}Z`;
-        const base = points(run, series.base).map(([x, y]) => [x, Math.min(100, y)]);
-        return `${tops[r]}L${monotonePath(base.reverse()).slice(1)}Z`;
-      }).join(""));
-      const line = document.createElementNS(SVG, "path");
-      line.setAttribute("class", `${this._type}-line`);
-      line.setAttribute("d", tops.join(""));
+      const gradient = svgNode("linearGradient", { id, x2: "0", y2: "1" });
+      gradient.append(svgNode("stop"), svgNode("stop", { offset: "1" }));
+      const area = svgNode("path", {
+        class: `${this._type}-area`,
+        fill: `url(#${id})`,
+        // A stacked area runs back along the series below; the reversed curve
+        // is the same curve. Its base stops at the plot bottom when the y axis
+        // starts above zero.
+        d: filled.map((run, r) => {
+          if (!series.base) return `${tops[r]}V100H${this._x(run[0])}Z`;
+          const base = points(run, series.base).map(([x, y]) => [x, Math.min(100, y)]);
+          return `${tops[r]}L${monotonePath(base.reverse()).slice(1)}Z`;
+        }).join("")
+      });
+      const line = svgNode("path", { class: `${this._type}-line`, d: tops.join("") });
       group.append(gradient, area, line);
       svg.append(group);
     }
@@ -5428,7 +5487,7 @@ var ColumnChart = class extends LineChart {
         const column = document.createElement("span");
         if (to !== null) {
           column.className = series.className;
-          column.dataset.series = String(this.series.indexOf(series) % COLORS + 1);
+          column.dataset.series = seriesColor(this.series.indexOf(series));
           column.classList.toggle("negative", !series.base && to < from);
           column.style.setProperty("--top", `${clamp(Math.max(from, to), series.y)}%`);
           column.style.setProperty("--bottom", `${100 - clamp(Math.min(from, to), series.y)}%`);
@@ -5583,17 +5642,13 @@ var PieChart = class extends LineChart {
     const total = values.reduce((sum, value) => sum + value, 0);
     let turn = 0;
     this._turns = values.map((value) => [turn, turn += total ? value / total : 0]);
-    const drawn = this._turns.filter(([start, end]) => end > start).length;
+    const drawn = this._turns.filter(([start, end]) => end > start);
     let slice = 0;
     this._colors = this._turns.map(([start, end]) => {
       if (end <= start) return void 0;
       const index = slice++;
-      return String(index === drawn - 1 && index > 0 && index % COLORS2 === 0 ? 2 : index % COLORS2 + 1);
+      return String(index === drawn.length - 1 && index > 0 && index % COLORS2 === 0 ? 2 : index % COLORS2 + 1);
     });
-    const at = (t, r = RADIUS) => {
-      const angle = t * 2 * Math.PI;
-      return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;
-    };
     const pie = document.createElement("div");
     pie.className = "pie-chart-pie";
     pie.setAttribute("aria-hidden", "true");
@@ -5601,13 +5656,12 @@ var PieChart = class extends LineChart {
     const id = `pie-chart-mask-${++_maskId}`;
     const area = { x: "-50", y: "-50", width: "100", height: "100" };
     const mask = svgNode("mask", { id, maskUnits: "userSpaceOnUse", ...area });
-    const edges = this._turns.filter(([start, end]) => end > start);
     mask.append(
       svgNode("rect", { ...area, fill: "white" }),
       svgNode("path", {
         class: "pie-chart-gaps",
         stroke: "black",
-        d: edges.length > 1 ? edges.map(([start]) => `M0,0L${at(start, 50)}`).join("") : ""
+        d: drawn.length > 1 ? drawn.map(([start]) => `M0,0L${polarPoint(start, 50)}`).join("") : ""
       }),
       svgNode("circle", { class: "pie-chart-hole", r: String(RADIUS), fill: "black" })
     );
@@ -5619,7 +5673,7 @@ var PieChart = class extends LineChart {
         class: "pie-chart-slice",
         "data-series": this._colors[i],
         // A whole circle is two half arcs; one arc cannot end where it starts.
-        d: end - start >= 1 ? `M0,${-RADIUS}${arc2} 1 1 0,${RADIUS}${arc2} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc2} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`
+        d: end - start >= 1 ? `M0,${-RADIUS}${arc2} 1 1 0,${RADIUS}${arc2} 1 1 0,${-RADIUS}Z` : `M0,0L${polarPoint(start, RADIUS)}${arc2} ${end - start > 0.5 ? 1 : 0} 1 ${polarPoint(end, RADIUS)}Z`
       });
       slices.append(slice2);
       return slice2;
@@ -5752,10 +5806,7 @@ var HeatmapChart = class extends LineChart {
       if (value < low) [low, this._ends[0]] = [value, series.text[row]];
       if (value > high) [high, this._ends[1]] = [value, series.text[row]];
     }));
-    const option = (name) => {
-      const value = parseFloat(this.el.dataset[name] ?? "");
-      return Number.isFinite(value) ? value : this.options[name];
-    };
+    const option = (name) => this._number(name) ?? this.options[name];
     const [min, max] = [option("min") ?? low, option("max") ?? high];
     const shade = (value) => Math.min(1, Math.max(0, (value - min) / (max - min || 1)));
     this._endLevels = [shade(low), shade(high)];
@@ -5856,10 +5907,7 @@ var RadarChart = class extends LineChart {
    * the labels round it are HTML.
    */
   _draw() {
-    const at = (index, share2) => {
-      const angle = this._turn(index) * 2 * Math.PI;
-      return `${(50 * share2 * Math.sin(angle)).toFixed(3)},${(-50 * share2 * Math.cos(angle)).toFixed(3)}`;
-    };
+    const at = (index, share2) => polarPoint(this._turn(index), 50 * share2);
     const share = (value) => Math.min(1, Math.max(0, 1 - this._y(value) / 100));
     const rows = this.labels.map((_, i) => i);
     const ring = (r) => `M${rows.map((i) => at(i, r)).join("L")}Z`;
@@ -5872,7 +5920,7 @@ var RadarChart = class extends LineChart {
     this.series.forEach((series, s) => {
       const group = svgNode("g", {
         class: `radar-chart-series ${series.className}`.trim(),
-        "data-series": String(s % COLORS + 1)
+        "data-series": seriesColor(s)
       });
       const drawn = rows.filter((i) => series.values[i] !== null);
       const corners = drawn.map((i) => at(i, share(series.values[i])));
@@ -5926,7 +5974,7 @@ var RadialChart = class extends LineChart {
     super.show(index);
     this._rings.forEach((ring, i) => ring.classList.toggle("active", i === index));
     if (this._tooltip.hidden) return;
-    const color = this._color(index);
+    const color = seriesColor(index);
     this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
       span.dataset.series = color;
     });
@@ -5940,9 +5988,6 @@ var RadialChart = class extends LineChart {
     this._tooltip.style.top = `${(50 + y) / (this._gauge ? 50 : 100) * 100}%`;
     this._tooltip.classList.toggle("end", x > 0);
   }
-  _color(index) {
-    return String(index % COLORS + 1);
-  }
   /** A fraction of the ring as a turn clockwise from the top. */
   _turn(fraction) {
     return this._gauge ? fraction / 2 - 0.25 : fraction;
@@ -5956,7 +6001,7 @@ var RadialChart = class extends LineChart {
     const text = this.series[0].text;
     legend.append(...this.labels.map((label, i) => {
       const li = document.createElement("li");
-      li.dataset.series = this._color(i);
+      li.dataset.series = seriesColor(i);
       const [name, value] = [label, text[i]].map((content) => {
         const span = document.createElement("span");
         span.textContent = content;
@@ -6009,7 +6054,7 @@ var RadialChart = class extends LineChart {
         return ring2;
       };
       const ring = circle("radial-chart-ring", this._fractions[i], true);
-      ring.dataset.series = this._color(i);
+      ring.dataset.series = seriesColor(i);
       if (!this._fractions[i]) ring.classList.add("empty");
       svg.append(circle("radial-chart-track", 1, gauge), ring);
       return ring;
@@ -6063,7 +6108,7 @@ var MixedChart = class extends ColumnChart {
 };
 
 // src/ts/components/select.ts
-var _defaults17 = {
+var _defaults18 = {
   classes: "",
   menuOptions: {}
 };
@@ -6137,7 +6182,7 @@ var FormSelect = class _FormSelect extends Component {
       ...options
     };
     this.isMultiple = this.el.multiple;
-    this.nativeTabIndex = this.el.tabIndex ?? -1;
+    this.nativeTabIndex = this.el.tabIndex;
     this.el.tabIndex = -1;
     this._values = [];
     this._createdWrapper = false;
@@ -6145,7 +6190,7 @@ var FormSelect = class _FormSelect extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults17;
+    return _defaults18;
   }
   /**
    * Initializes instances of FormSelect.
@@ -6380,13 +6425,13 @@ var FormSelect = class _FormSelect extends Component {
         if (selectedOption.id) this.input.setAttribute("aria-activedescendant", selectedOption.id);
       }
       this.input.ariaExpanded = "true";
-      if (userOnOpenEnd && typeof userOnOpenEnd === "function")
+      if (typeof userOnOpenEnd === "function")
         userOnOpenEnd.call(this.menu, this.el);
     };
     menuOptions.onCloseEnd = () => {
       this.input.ariaExpanded = "false";
       this.input.removeAttribute("aria-activedescendant");
-      if (userOnCloseEnd && typeof userOnCloseEnd === "function")
+      if (typeof userOnCloseEnd === "function")
         userOnCloseEnd.call(this.menu, this.el);
     };
     menuOptions.closeOnClick = false;
@@ -6536,10 +6581,7 @@ var FormSelect = class _FormSelect extends Component {
     else this._selectValue(value);
   }
   _getSelectedOptions() {
-    return Array.prototype.filter.call(
-      this.el.selectedOptions,
-      (realOption) => realOption
-    );
+    return Array.from(this.el.selectedOptions);
   }
   _setValueToInput() {
     this.input.value = this._getSelectedOptions().map((option) => option.textContent.trim()).join(", ");
@@ -6570,7 +6612,7 @@ var FormSelect = class _FormSelect extends Component {
 };
 
 // src/ts/plugins/dockedDisplayPlugin.ts
-var _defaults18 = {
+var _defaults19 = {
   margin: 5,
   transition: 10,
   duration: 250,
@@ -6579,9 +6621,9 @@ var _defaults18 = {
 var DockedDisplayPlugin = class _DockedDisplayPlugin {
   constructor(el, container, options) {
     this._handleDocumentClick = (e) => {
-      if (this.visible && !e.composedPath().includes(this.el) && !e.composedPath().includes(this.container)) {
-        this.hide();
-      }
+      if (!this.visible) return;
+      const path = e.composedPath();
+      if (!path.includes(this.el) && !path.includes(this.container)) this.hide();
     };
     /**
      * Tears the plugin down. While shown, the document listener holds a
@@ -6598,12 +6640,10 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
       document.addEventListener("click", this._handleDocumentClick);
       const coordinates = Utils._setAbsolutePosition(this.el, this.container, "bottom", this.options.margin, this.options.transition, this.options.align);
       this.container.style.visibility = "visible";
-      this.container.style.transition = `
-      transform ${this.options.duration}ms ease-out,
-      opacity ${this.options.duration}ms ease-out`;
+      this.container.style.transition = this._transition;
       setTimeout(() => {
         this.container.style.transform = `translateX(${coordinates.x}px) translateY(${coordinates.y}px)`;
-        this.container.style.opacity = 1 .toString();
+        this.container.style.opacity = "1";
       }, 1);
     };
     this.hide = () => {
@@ -6611,9 +6651,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
       this.visible = false;
       document.removeEventListener("click", this._handleDocumentClick);
       this.container.removeAttribute("style");
-      this.container.style.transition = `
-      transform ${this.options.duration}ms ease-out,
-      opacity ${this.options.duration}ms ease-out`;
+      this.container.style.transition = this._transition;
       setTimeout(() => {
         this.container.style.transform = `translateX(0px) translateY(0px)`;
         this.container.style.opacity = "0";
@@ -6621,7 +6659,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     };
     this.el = el;
     this.options = {
-      ..._defaults18,
+      ..._defaults19,
       ...options
     };
     this.container = document.createElement("div");
@@ -6629,6 +6667,13 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.container.append(container);
     el.parentElement.append(this.container);
   }
+  // @todo move to Util? -> duplicate code fragment with tooltip
+  // easeOutCubic
+  get _transition() {
+    return `
+      transform ${this.options.duration}ms ease-out,
+      opacity ${this.options.duration}ms ease-out`;
+  }
   /**
    * Initializes instance of DockedDisplayPlugin
    * @param el HTMLElement to position to
@@ -6641,7 +6686,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 };
 
 // src/ts/components/datepicker.ts
-var _defaults19 = {
+var _defaults20 = {
   // the default output format for the input field value
   format: "mmm dd, yyyy",
   // Used to create date object from current input string
@@ -6745,6 +6790,8 @@ var _Datepicker = class _Datepicker extends Component {
   constructor(el, options) {
     super(el, options, _Datepicker);
     this.multiple = false;
+    /** What setInputValue last wrote, so reading it back does not depend on the parser. */
+    this._writtenInputs = /* @__PURE__ */ new WeakMap();
     /** Rows renderRow has already checked, so renderBody does not parse them again. */
     this._checkedRows = /* @__PURE__ */ new Set();
     /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
@@ -6827,7 +6874,7 @@ var _Datepicker = class _Datepicker extends Component {
             e.target.getAttribute("data-month"),
             e.target.getAttribute("data-day")
           );
-          if (!this.multiple || this.multiple && this.options.isMultipleSelection) {
+          if (!this.multiple || this.options.isMultipleSelection) {
             this.setDate(selectedDate);
           }
           if (this.options.isDateRange) {
@@ -6925,12 +6972,12 @@ var _Datepicker = class _Datepicker extends Component {
         }
       }
     }
-    if (this.options.displayPlugin) {
-      if (this.options.displayPlugin === "docked") this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+    if (this.options.displayPlugin === "docked") {
+      this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
     }
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults20;
   }
   /**
    * Initializes instances of Datepicker.
@@ -7083,7 +7130,8 @@ var _Datepicker = class _Datepicker extends Component {
       this.draw();
       return;
     }
-    const parsedDate = this._parseInput(el.value);
+    const written = !this.options.parse && this._writtenInputs.get(el);
+    const parsedDate = written && written.value === el.value ? written.date : this._parseInput(el.value);
     if (!_Datepicker._isDate(parsedDate)) return;
     const date = new Date(parsedDate.getTime());
     _Datepicker._setToStartOfDay(date);
@@ -7141,7 +7189,7 @@ var _Datepicker = class _Datepicker extends Component {
   setSingleDate(date, isEndDate) {
     if (!isEndDate) {
       this.date = date;
-    } else if (isEndDate) {
+    } else {
       this.endDate = date;
     }
   }
@@ -7150,13 +7198,11 @@ var _Datepicker = class _Datepicker extends Component {
    * @param date Date to set on the datepicker.
    */
   setMultiDate(date) {
-    const selectedDate = this.dates?.find((item) => {
-      return item.getTime() === date.getTime() ? item : false;
-    });
-    if (!selectedDate) {
+    const index = this.dates.findIndex((item) => item.getTime() === date.getTime());
+    if (index === -1) {
       this.dates.push(date);
     } else {
-      this.dates.splice(this.dates.indexOf(selectedDate), 1);
+      this.dates.splice(index, 1);
     }
     this.dates.sort((a, b) => a.getTime() < b.getTime() ? -1 : 0);
   }
@@ -7198,6 +7244,7 @@ var _Datepicker = class _Datepicker extends Component {
     } else {
       el.value = this.toString(date);
     }
+    this._writtenInputs.set(el, { value: el.value, date: _Datepicker._isDate(date) ? new Date(date.getTime()) : null });
     el.dispatchEvent(
       new CustomEvent("change", {
         bubbles: true,
@@ -7282,12 +7329,7 @@ var _Datepicker = class _Datepicker extends Component {
       }
     }
     const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = _Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
-    let cells = days + before, after = cells;
-    while (after > 7) {
-      after -= 7;
-    }
-    cells += 7 - after;
-    let isWeekSelected = false;
+    const cells = Math.ceil((days + before) / 7) * 7;
     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.date) && _Datepicker._isDate(this.endDate) && _Datepicker._compareWithinRange(day, this.date, this.endDate);
       let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
@@ -7331,10 +7373,9 @@ var _Datepicker = class _Datepicker extends Component {
       };
       row.push(this.renderDay(dayConfig));
       if (++r === 7) {
-        data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
+        data.push(this.renderRow(row, this.options.isRTL, false));
         row = [];
         r = 0;
-        isWeekSelected = false;
       }
     }
     return this.renderTable(this.options, data, randId);
@@ -7351,7 +7392,7 @@ var _Datepicker = class _Datepicker extends Component {
       isDateRangeStart: "is-daterange-start",
       isDateRangeEnd: "is-daterange-end",
       isDateRange: "is-daterange"
-    }, ariaSelected = !(["isSelected", "isDateRange"].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), arr = ["datepicker-day"];
+    }, ariaSelected = opts.isSelected === true || opts.isDateRange === true, arr = ["datepicker-day"];
     if (opts.isEmpty) {
       if (opts.showDaysInNextAndPreviousMonths) {
         arr.push("is-outside-current-month");
@@ -7393,13 +7434,14 @@ var _Datepicker = class _Datepicker extends Component {
   /** Wrap calendar rows after validating and encoding their contents. */
   renderBody(rows) {
     const html = rows.join("");
-    const checked = rows.every((row) => this._checkedRows.has(row));
+    const safeHtml = _Datepicker._calendarMarkup(html, "tbody");
     this._checkedRows.clear();
-    return "<tbody>" + (checked ? html : _Datepicker._calendarMarkup(html, "tbody")) + "</tbody>";
+    return "<tbody>" + safeHtml + "</tbody>";
   }
   static _calendarMarkup(html, parent) {
     const template = document.createElement("template");
     template.innerHTML = html;
+    const childOf = { tbody: "tr", tr: "td", td: "button" };
     const attributes = {
       tr: ["class"],
       td: ["class", "data-day", "aria-selected"],
@@ -7413,8 +7455,8 @@ var _Datepicker = class _Datepicker extends Component {
         return _Datepicker._escape(node.textContent);
       }
       if (!(node instanceof HTMLElement)) throw new TypeError("Unsupported calendar row content");
-      const tag = node.localName === "tr" ? "tr" : node.localName === "td" ? "td" : node.localName === "button" ? "button" : null;
-      if (!tag || !(container === "tbody" && tag === "tr" || container === "tr" && tag === "td" || container === "td" && tag === "button")) {
+      const tag = childOf[container];
+      if (!tag || node.localName !== tag) {
         throw new TypeError("Unsupported calendar row element");
       }
       if ([...node.attributes].some((attr) => !attributes[tag].includes(attr.name))) {
@@ -7538,26 +7580,9 @@ var _Datepicker = class _Datepicker extends Component {
     const active = this.calendarEl.getRootNode().activeElement;
     const restoreDayFocus = active?.matches(".datepicker-day-button") && this.calendarEl.contains(active);
     const restoreArrow = this.calendarEl.contains(active) && active?.matches(".month-prev, .month-next") ? active.classList.contains("month-prev") ? ".month-prev" : ".month-next" : null;
-    const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
-    if (this._y <= minYear) {
-      this._y = minYear;
-      if (!isNaN(minMonth) && this._m < minMonth) {
-        this._m = minMonth;
-      }
-    }
-    if (this._y >= maxYear) {
-      this._y = maxYear;
-      if (!isNaN(maxMonth) && this._m > maxMonth) {
-        this._m = maxMonth;
-      }
-    }
     const year = this.calendars[0].year;
     const month = this.calendars[0].month;
-    if (!this.options.isDateRange) {
-      this._renderDateDisplay(this.date);
-    } else {
-      this._renderDateDisplay(this.date, this.endDate);
-    }
+    this._renderDateDisplay(this.date, this.endDate);
     const key = this._controlsCacheKey(year);
     if (key === this._controlsKey && this.calendarEl.querySelector(".datepicker-controls")) {
       this._reuseControls(year, month);
@@ -7612,12 +7637,8 @@ var _Datepicker = class _Datepicker extends Component {
     else this.calendarEl.insertAdjacentHTML("beforeend", html);
   }
   _setupEventHandlers() {
-    this.el.addEventListener("click", this._handleInputClick);
-    this.el.addEventListener("keydown", this._handleInputKeydown);
-    this.el.addEventListener("change", this._handleInputChange);
-    this.endDateEl?.addEventListener("click", this._handleInputClick);
-    this.endDateEl?.addEventListener("keydown", this._handleInputKeydown);
-    this.endDateEl?.addEventListener("change", this._handleInputChange);
+    this._addInputEventHandlers(this.el);
+    if (this.endDateEl) this._addInputEventHandlers(this.endDateEl);
     this.calendarEl.addEventListener("click", this._handleCalendarClick);
     this.calendarEl.addEventListener("keydown", this._handleCalendarKeydown);
     this.calendarEl.addEventListener("focusin", this._handleCalendarFocus);
@@ -7674,6 +7695,11 @@ var _Datepicker = class _Datepicker extends Component {
       this._removeInputEventHandlers(this.endDateEl);
     }
   }
+  _addInputEventHandlers(input) {
+    input.addEventListener("click", this._handleInputClick);
+    input.addEventListener("keydown", this._handleInputKeydown);
+    input.addEventListener("change", this._handleInputChange);
+  }
   _removeInputEventHandlers(input) {
     input.removeEventListener("click", this._handleInputClick);
     input.removeEventListener("keydown", this._handleInputKeydown);
@@ -7730,9 +7756,7 @@ var _Datepicker = class _Datepicker extends Component {
     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);
+    this._addInputEventHandlers(dateInput);
     this.el.parentElement.appendChild(dateInput);
     return dateInput;
   }
@@ -7751,7 +7775,7 @@ _Datepicker._template = `
 var Datepicker = _Datepicker;
 
 // src/ts/components/messageScroller.ts
-var _defaults20 = {
+var _defaults21 = {
   autoScroll: true,
   defaultScrollPosition: "end",
   peek: 64
@@ -7874,7 +7898,7 @@ var MessageScroller = class _MessageScroller extends Component {
     this.button?.addEventListener("click", this._handleButtonClick);
   }
   static get defaults() {
-    return _defaults20;
+    return _defaults21;
   }
   /**
    * Initializes instances of MessageScroller.
@@ -8032,7 +8056,7 @@ var MessageScroller = class _MessageScroller extends Component {
 };
 
 // src/ts/components/richTextEditor.ts
-var _defaults21 = {
+var _defaults22 = {
   Editor: null,
   extensions: []
 };
@@ -8112,7 +8136,7 @@ var RichTextEditor = class _RichTextEditor extends Component {
     el.addEventListener("click", this._handleClick);
   }
   static get defaults() {
-    return _defaults21;
+    return _defaults22;
   }
   /**
    * Initializes instances of RichTextEditor.
@@ -8146,7 +8170,7 @@ var RichTextEditor = class _RichTextEditor extends Component {
 
 // src/ts/components/mapView.ts
 var OPENFREEMAP = "https://tiles.openfreemap.org/styles/";
-var _defaults22 = {
+var _defaults23 = {
   maplibregl: null,
   style: { light: `${OPENFREEMAP}positron`, dark: `${OPENFREEMAP}dark` },
   center: [0, 20],
@@ -8284,7 +8308,7 @@ var MapView = class _MapView extends Component {
     this._sync();
   }
   static get defaults() {
-    return _defaults22;
+    return _defaults23;
   }
   /**
    * Initializes instances of MapView.
@@ -8357,6 +8381,13 @@ var MapView = class _MapView extends Component {
     const reset = () => {
       this.map.getCanvas().style.cursor = "";
     };
+    const listen = (method) => {
+      this.map[method]("click", clusters, zoomIn);
+      for (const layer of [clusters, points]) {
+        this.map[method]("mouseenter", layer, pointer);
+        this.map[method]("mouseleave", layer, reset);
+      }
+    };
     this._draw(id, {
       draw: () => {
         const color = options.color ?? this._color("var(--md-comp-map-cluster-color)");
@@ -8401,19 +8432,9 @@ var MapView = class _MapView extends Component {
           paint: { "circle-color": color, "circle-radius": 6, "circle-stroke-width": 2, "circle-stroke-color": surface }
         });
       },
-      off: () => {
-        this.map.off("click", clusters, zoomIn);
-        for (const layer of [clusters, points]) {
-          this.map.off("mouseenter", layer, pointer);
-          this.map.off("mouseleave", layer, reset);
-        }
-      }
+      off: () => listen("off")
     });
-    this.map.on("click", clusters, zoomIn);
-    for (const layer of [clusters, points]) {
-      this.map.on("mouseenter", layer, pointer);
-      this.map.on("mouseleave", layer, reset);
-    }
+    listen("on");
   }
   /** Removes a route, arcs or clusters added with this id. */
   removeOverlay(id) {
@@ -8532,7 +8553,7 @@ var MapView = class _MapView extends Component {
 };
 
 // src/ts/components/lightbox.ts
-var _defaults23 = {
+var _defaults24 = {
   inDuration: 275,
   outDuration: 200,
   onOpenStart: null,
@@ -8562,9 +8583,6 @@ var _Lightbox = class _Lightbox extends Component {
         for (const el of [this.el, this._overlay, this._photoCaption]) if (el) el.style.transition = "none";
       }
     };
-    this._handleLightboxClick = () => {
-      this._handleLightboxToggle();
-    };
     this._handleLightboxKeypress = (e) => {
       if (this._trigger === this.el && (e.key === Utils.keys.ENTER || e.key === " ")) {
         e.preventDefault();
@@ -8575,10 +8593,7 @@ var _Lightbox = class _Lightbox extends Component {
       if (this._isOpen) this.close();
       else this.open();
     };
-    this._handleWindowScroll = () => {
-      if (this.overlayActive) this.close();
-    };
-    this._handleWindowResize = () => {
+    this._handleWindowChange = () => {
       if (this.overlayActive) this.close();
     };
     this._handleWindowEscape = (e) => {
@@ -8626,8 +8641,6 @@ var _Lightbox = class _Lightbox extends Component {
       if (this.caption !== "") this._addCaption();
       const widthPercent = this.originalWidth / this.windowWidth;
       const heightPercent = this.originalHeight / this.windowHeight;
-      this.newWidth = 0;
-      this.newHeight = 0;
       if (widthPercent > heightPercent) {
         const ratio = this.originalHeight / this.originalWidth;
         this.newWidth = this.windowWidth * 0.9;
@@ -8637,8 +8650,8 @@ var _Lightbox = class _Lightbox extends Component {
         this.newWidth = this.windowHeight * 0.9 * ratio;
         this.newHeight = this.windowHeight * 0.9;
       }
-      window.addEventListener("scroll", this._handleWindowScroll, { passive: true });
-      window.addEventListener("resize", this._handleWindowResize, { passive: true });
+      window.addEventListener("scroll", this._handleWindowChange, { passive: true });
+      window.addEventListener("resize", this._handleWindowChange, { passive: true });
       window.addEventListener("keyup", this._handleWindowEscape);
       this._animateImageIn();
     };
@@ -8653,11 +8666,11 @@ var _Lightbox = class _Lightbox extends Component {
       if (typeof this.options.onCloseStart === "function")
         this.options.onCloseStart.call(this, this.el);
       if (revision !== this._revision) return;
-      window.removeEventListener("scroll", this._handleWindowScroll);
-      window.removeEventListener("resize", this._handleWindowResize);
+      window.removeEventListener("scroll", this._handleWindowChange);
+      window.removeEventListener("resize", this._handleWindowChange);
       window.removeEventListener("keyup", this._handleWindowEscape);
-      if (this._overlay) this._removeOverlay();
-      if (this._photoCaption) this._removeCaption();
+      if (this._overlay) this._fadeOut(this._overlay);
+      if (this._photoCaption) this._fadeOut(this._photoCaption);
       this._animateImageOut();
     };
     this.el["Expressive_Lightbox"] = this;
@@ -8681,7 +8694,7 @@ var _Lightbox = class _Lightbox extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults23;
+    return _defaults24;
   }
   /**
    * Initializes instances of Lightbox.
@@ -8711,8 +8724,8 @@ var _Lightbox = class _Lightbox extends Component {
     this.el["Expressive_Lightbox"] = void 0;
   }
   _reset() {
-    window.removeEventListener("scroll", this._handleWindowScroll);
-    window.removeEventListener("resize", this._handleWindowResize);
+    window.removeEventListener("scroll", this._handleWindowChange);
+    window.removeEventListener("resize", this._handleWindowChange);
     window.removeEventListener("keyup", this._handleWindowEscape);
     this._overlay?.remove();
     this._photoCaption?.remove();
@@ -8724,8 +8737,8 @@ var _Lightbox = class _Lightbox extends Component {
       }
     }
     this._changedAncestorList = [];
-    if (this.attrWidth !== null && this.attrWidth !== void 0) this.el.setAttribute("width", this.attrWidth);
-    if (this.attrHeight !== null && this.attrHeight !== void 0) this.el.setAttribute("height", this.attrHeight);
+    if (this.attrWidth != null) this.el.setAttribute("width", this.attrWidth);
+    if (this.attrHeight != null) this.el.setAttribute("height", this.attrHeight);
     this.el.classList.remove("active");
     this.placeholder.removeAttribute("style");
     if (this.originInlineStyles === null) this.el.removeAttribute("style");
@@ -8752,18 +8765,18 @@ var _Lightbox = class _Lightbox extends Component {
   }
   _setupEventHandlers() {
     this._motion.addEventListener("change", this._handleMotionChange);
-    this._trigger.addEventListener("click", this._handleLightboxClick);
+    this._trigger.addEventListener("click", this._handleLightboxToggle);
     this.el.addEventListener("keydown", this._handleLightboxKeypress);
   }
   _removeEventHandlers() {
     this._motion.removeEventListener("change", this._handleMotionChange);
-    this._trigger.removeEventListener("click", this._handleLightboxClick);
+    this._trigger.removeEventListener("click", this._handleLightboxToggle);
     this.el.removeEventListener("keydown", this._handleLightboxKeypress);
   }
   _makeAncestorsOverflowVisible() {
     this._changedAncestorList = [];
     let ancestor = this.placeholder.parentNode;
-    while (ancestor !== null && ancestor !== void 0 && ancestor !== document) {
+    while (ancestor != null && ancestor !== document) {
       const curr = ancestor;
       if (curr.style && (curr.style.overflow !== "visible" || _Lightbox._overflow.has(curr))) {
         const saved = _Lightbox._overflow.get(curr) ?? { count: 0, value: curr.style.overflow, priority: curr.style.getPropertyPriority("overflow") };
@@ -8837,18 +8850,7 @@ var _Lightbox = class _Lightbox extends Component {
     this._photoCaption.innerText = this.caption;
     Utils.portalRoot(this.el).append(this._photoCaption);
     this._photoCaption.style.display = "inline";
-    this._photoCaption.style.transition = "none";
-    this._photoCaption.style.opacity = "0";
-    const duration = this._motion.matches ? 0 : this.options.inDuration;
-    this._schedule(() => {
-      this._photoCaption.style.transition = `opacity ${duration}ms ease`;
-      this._photoCaption.style.opacity = "1";
-    }, 1);
-  }
-  _removeCaption() {
-    const duration = this._motion.matches ? 0 : this.options.outDuration;
-    this._photoCaption.style.transition = `opacity ${duration}ms ease`;
-    this._photoCaption.style.opacity = "0";
+    this._fadeIn(this._photoCaption);
   }
   // Overlay
   _addOverlay() {
@@ -8868,18 +8870,21 @@ var _Lightbox = class _Lightbox extends Component {
     this._overlay.style.height = this.windowHeight + "px";
     this._overlay.style.left = -1 * overlayOffset.left + "px";
     this._overlay.style.top = -1 * overlayOffset.top + "px";
-    this._overlay.style.transition = "none";
-    this._overlay.style.opacity = "0";
+    this._fadeIn(this._overlay);
+  }
+  _fadeIn(el) {
+    el.style.transition = "none";
+    el.style.opacity = "0";
     const duration = this._motion.matches ? 0 : this.options.inDuration;
     this._schedule(() => {
-      this._overlay.style.transition = `opacity ${duration}ms ease`;
-      this._overlay.style.opacity = "1";
+      el.style.transition = `opacity ${duration}ms ease`;
+      el.style.opacity = "1";
     }, 1);
   }
-  _removeOverlay() {
+  _fadeOut(el) {
     const duration = this._motion.matches ? 0 : this.options.outDuration;
-    this._overlay.style.transition = `opacity ${duration}ms ease`;
-    this._overlay.style.opacity = "0";
+    el.style.transition = `opacity ${duration}ms ease`;
+    el.style.opacity = "0";
   }
 };
 _Lightbox._overflow = /* @__PURE__ */ new WeakMap();
@@ -8887,7 +8892,7 @@ var Lightbox = _Lightbox;
 
 // src/ts/components/scrollspy.ts
 var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-var _defaults24 = {
+var _defaults25 = {
   scrollOffset: 200,
   activeClass: "active",
   getActiveElement: _defaultGetActiveElement,
@@ -8923,7 +8928,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     }
   }
   static get defaults() {
-    return _defaults24;
+    return _defaults25;
   }
   static init(els, options = {}) {
     return super.init(els, options, _ScrollSpy);
@@ -9002,11 +9007,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
       }
     }
     const href = `#${id}`;
-    const links = document.querySelectorAll('a[href^="#"]');
-    for (let i = 0; i < links.length; i++) {
-      if (links[i].getAttribute("href") === href) return links[i];
-    }
-    return null;
+    return Array.from(document.querySelectorAll('a[href^="#"]')).find((link) => link.getAttribute("href") === href) ?? null;
   }
 };
 _ScrollSpy._elements = [];
@@ -9014,13 +9015,18 @@ _ScrollSpy._active = /* @__PURE__ */ new Map();
 var ScrollSpy = _ScrollSpy;
 
 // src/ts/components/navigationRail.ts
-var _defaults25 = {
+var _defaults26 = {
   onOpenStart: null,
   onOpenEnd: null,
   onCloseStart: null,
   onCloseEnd: null
 };
 var COMPACT = "(width < 600px)";
+function deepActiveElement(root) {
+  let active = root.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
 var NavigationRail = class _NavigationRail extends Component {
   constructor(el, options) {
     super(el, options, _NavigationRail);
@@ -9064,7 +9070,7 @@ var NavigationRail = class _NavigationRail extends Component {
     this._onClick = (e) => {
       const target = e.target;
       if (!(target instanceof Node)) return;
-      if (this._toggle && (target === this._toggle || this._toggle.contains(target))) {
+      if (this._toggle?.contains(target)) {
         this.toggle();
         e.preventDefault();
         return;
@@ -9078,12 +9084,9 @@ var NavigationRail = class _NavigationRail extends Component {
       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;
+        const focused = deepActiveElement(root);
         this.collapse();
-        let active = root.activeElement;
-        while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
-        if (!this.isExpanded && restoreFocus && active === focused) {
+        if (!this.isExpanded && restoreFocus && deepActiveElement(root) === focused) {
           this._toggle?.focus();
         }
       }
@@ -9101,7 +9104,7 @@ var NavigationRail = class _NavigationRail extends Component {
     document.addEventListener("keydown", this._onKeyDown);
   }
   static get defaults() {
-    return _defaults25;
+    return _defaults26;
   }
   static init(els, options = {}) {
     return super.init(els, options, _NavigationRail);
@@ -9131,7 +9134,7 @@ var NavigationRail = class _NavigationRail extends Component {
 };
 
 // src/ts/components/tabs.ts
-var _defaults26 = {
+var _defaults27 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -9148,12 +9151,7 @@ var Tabs = class _Tabs extends Component {
     // and right positions are both read before either is written.
     this._handleWindowResize = Utils.throttle(() => {
       this._setTabsAndTabWidth();
-      if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
-        const left = this._calcLeftPos(this._activeTabLink);
-        const right = this._calcRightPos(this._activeTabLink);
-        this._indicator.style.left = left + "px";
-        this._indicator.style.right = right + "px";
-      }
+      if (this._tabWidth !== 0 && this._tabsWidth !== 0) this._positionIndicator();
     }, 200);
     this._handleTabClick = (e) => {
       const target = e.target;
@@ -9168,8 +9166,7 @@ var Tabs = class _Tabs extends Component {
       }
       if (tabLink.hasAttribute("target")) return;
       if (this.options.swipeable) {
-        const panel = tabLink.hash && document.getElementById(tabLink.hash.slice(1));
-        const index = this._tabsCarousel.images.indexOf(panel);
+        const index = this._tabsCarousel.images.indexOf(this._panelFor(tabLink));
         if (index >= 0) this._tabsCarousel.set(index);
         e.preventDefault();
         return;
@@ -9198,10 +9195,13 @@ var Tabs = class _Tabs extends Component {
       ...options
     };
     this._tabLinks = this._queryTabLinks();
+    if (!this._tabLinks.length) {
+      console.error("Tabs: no tab links (an <a> child, or one inside .tab) to show");
+      return;
+    }
     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.getElementById(link.hash.slice(1));
+      const panel = this._panelFor(link);
       if (panel) this._originalPanels.set(panel, {
         display: panel.style.display,
         priority: panel.style.getPropertyPriority("display"),
@@ -9209,7 +9209,7 @@ var Tabs = class _Tabs extends Component {
         carousel: panel.classList.contains("carousel-item")
       });
     });
-    (_a = this.options).swipeable && (_a.swipeable = window.innerWidth <= this.options.responsiveThreshold);
+    (_a = this.options).swipeable && (_a.swipeable = window.innerWidth <= this.options.responsiveThreshold && this._originalPanels.size > 0);
     this._index = 0;
     this._setupActiveTabLink();
     if (this.options.swipeable) {
@@ -9220,9 +9220,12 @@ var Tabs = class _Tabs extends Component {
     this._setTabsAndTabWidth();
     this._createIndicator();
     this._setupEventHandlers();
+    document.fonts?.ready.then(() => {
+      if (this.el["Expressive_Tabs"] === this) this._handleWindowResize();
+    });
   }
   static get defaults() {
-    return _defaults26;
+    return _defaults27;
   }
   /**
    * Initializes instances of Tabs.
@@ -9237,8 +9240,8 @@ var Tabs = class _Tabs extends Component {
   }
   destroy() {
     this._removeEventHandlers();
-    this._indicator.remove();
-    if (this.options.swipeable) {
+    this._indicator?.remove();
+    if (this._tabsCarousel) {
       this._teardownSwipeableTabs();
     }
     this._originalPanels.forEach((original, panel) => {
@@ -9279,8 +9282,19 @@ var Tabs = class _Tabs extends Component {
     indicator.classList.add("indicator");
     this.el.appendChild(indicator);
     this._indicator = indicator;
-    this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + "px";
-    this._indicator.style.right = this._calcRightPos(this._activeTabLink) + "px";
+    this._positionIndicator();
+  }
+  /** Reads both positions before writing either. */
+  _positionIndicator() {
+    const left = this._calcLeftPos(this._activeTabLink);
+    const right = this._calcRightPos(this._activeTabLink);
+    this._indicator.style.left = left + "px";
+    this._indicator.style.right = right + "px";
+  }
+  /** The panel a link shows, or null for a `target` link or one without a hash. */
+  _panelFor(a) {
+    if (!a.hash || a.hasAttribute("target")) return null;
+    return document.getElementById(a.hash.slice(1));
   }
   /**
    * Which tab is current, for the eye and for assistive technology.
@@ -9302,31 +9316,20 @@ var Tabs = class _Tabs extends Component {
     tabLink.classList.add("active");
     tabLink.setAttribute("aria-current", "page");
     this._index = Array.from(this._tabLinks).indexOf(tabLink);
-    this._content = tabLink.hasAttribute("target") ? null : document.getElementById(tabLink.hash.slice(1));
+    this._content = this._panelFor(tabLink);
   }
   _setupActiveTabLink() {
-    this._activeTabLink = Array.from(this._tabLinks).find(
-      (a) => a.getAttribute("href") === location.hash
-    );
-    if (!this._activeTabLink) {
-      let activeTabLink = this.el.querySelector("a.active");
-      if (!activeTabLink) {
-        activeTabLink = this._tabLinks[0];
-      }
-      this._activeTabLink = activeTabLink;
-    }
+    this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute("href") === location.hash) ?? this.el.querySelector("a.active") ?? this._tabLinks[0];
     this._setActiveTabLink(this._activeTabLink);
     this._originalPanels.forEach((_, panel) => panel.classList.toggle("active", panel === this._content));
   }
   _setupSwipeableTabs() {
     const tabsContent = [];
     this._tabLinks.forEach((a) => {
-      if (a.hash && !a.hasAttribute("target")) {
-        const currContent = document.getElementById(a.hash.slice(1));
-        if (!currContent) return;
-        currContent.classList.add("carousel-item");
-        tabsContent.push(currContent);
-      }
+      const currContent = this._panelFor(a);
+      if (!currContent) return;
+      currContent.classList.add("carousel-item");
+      tabsContent.push(currContent);
     });
     const tabsWrapper = document.createElement("div");
     tabsWrapper.classList.add("tabs-content", "carousel", "flat");
@@ -9360,11 +9363,9 @@ var Tabs = class _Tabs extends Component {
   }
   _setupNormalTabs() {
     Array.from(this._tabLinks).forEach((a) => {
-      if (a === this._activeTabLink || a.hasAttribute("target")) return;
-      if (a.hash) {
-        const currContent = document.getElementById(a.hash.slice(1));
-        if (currContent) currContent.style.display = "none";
-      }
+      if (a === this._activeTabLink) return;
+      const currContent = this._panelFor(a);
+      if (currContent) currContent.style.display = "none";
     });
   }
   _setTabsAndTabWidth() {
@@ -9393,23 +9394,20 @@ var Tabs = class _Tabs extends Component {
     this._indicator.style.transition = `
       left ${this.options.duration}ms ease-out ${leftDelay}ms,
       right ${this.options.duration}ms ease-out ${rightDelay}ms`;
-    this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + "px";
-    this._indicator.style.right = this._calcRightPos(this._activeTabLink) + "px";
+    this._positionIndicator();
   }
   /**
    * Show tab content that corresponds to the tab with the id.
    * @param tabId The id of the tab that you want to switch to.
    */
   select(tabId) {
-    const tab = Array.from(this._tabLinks).find(
-      (a) => a.getAttribute("href") === "#" + tabId
-    );
+    const tab = Array.from(this._tabLinks).find((a) => a.getAttribute("href") === "#" + tabId);
     if (tab) tab.click();
   }
 };
 
 // src/ts/components/timepicker.ts
-var _defaults27 = {
+var _defaults28 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -9492,8 +9490,7 @@ var _Timepicker = class _Timepicker extends Component {
       if (e.pointerId !== this._dragPointerId) return;
       this._dragPointerId = null;
       e.preventDefault();
-      document.removeEventListener("pointerup", this._handleDocumentClickEnd);
-      document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
+      this._removeDragListeners();
       const x = e.clientX - this.x0;
       const y = e.clientY - this.y0;
       if (this.moved && x === this.dx && y === this.dy) {
@@ -9512,7 +9509,6 @@ var _Timepicker = class _Timepicker extends Component {
       if (typeof this.options.onSelect === "function") {
         this.options.onSelect.call(this, this.hours, this.minutes);
       }
-      document.removeEventListener("pointermove", this._handleDocumentClickMove);
     };
     /**
      * A cancelled pointer is not a completed selection. The browser or the OS
@@ -9524,9 +9520,7 @@ var _Timepicker = class _Timepicker extends Component {
       if (e.pointerId !== this._dragPointerId) return;
       this._dragPointerId = null;
       this.moved = false;
-      document.removeEventListener("pointermove", this._handleDocumentClickMove);
-      document.removeEventListener("pointerup", this._handleDocumentClickEnd);
-      document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
+      this._removeDragListeners();
     };
     this._handleAmPmClick = (e) => {
       this._handleAmPmInteraction(e.target);
@@ -9600,12 +9594,12 @@ var _Timepicker = class _Timepicker extends Component {
     this._setupVariables();
     this._setupEventHandlers();
     this._pickerSetup();
-    if (this.options.displayPlugin) {
-      if (this.options.displayPlugin === "docked") this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+    if (this.options.displayPlugin === "docked") {
+      this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
     }
   }
   static get defaults() {
-    return _defaults27;
+    return _defaults28;
   }
   /**
    * Initializes instances of Timepicker.
@@ -9649,6 +9643,9 @@ var _Timepicker = class _Timepicker extends Component {
     this.digitalClock.removeEventListener("input", this._inputFromTextField);
     this.el.removeEventListener("click", this._handleInputClick);
     this.el.removeEventListener("keydown", this._handleInputKeydown);
+    this._removeDragListeners();
+  }
+  _removeDragListeners() {
     document.removeEventListener("pointermove", this._handleDocumentClickMove);
     document.removeEventListener("pointerup", this._handleDocumentClickEnd);
     document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
@@ -9780,25 +9777,22 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   _buildHoursTick(i, radian, radius) {
-    const tick = document.createElement("div");
-    tick.classList.add("timepicker-tick");
-    tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + "px";
-    tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + "px";
-    tick.textContent = i === 0 ? "00" : i.toString();
-    this.hoursView.appendChild(tick);
+    this._placeTick(this.hoursView, radian, radius, i === 0 ? "00" : i.toString());
   }
   _buildMinutesView() {
-    const _tick = document.createElement("div");
-    _tick.classList.add("timepicker-tick");
     for (let i = 0; i < 60; i += 5) {
-      const tick = _tick.cloneNode(true);
       const radian = i / 30 * Math.PI;
-      tick.style.left = this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + "px";
-      tick.style.top = this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + "px";
-      tick.textContent = _Timepicker._addLeadingZero(i);
-      this.minutesView.appendChild(tick);
+      this._placeTick(this.minutesView, radian, this.options.outerRadius, _Timepicker._addLeadingZero(i));
     }
   }
+  _placeTick(view, radian, radius, text) {
+    const tick = document.createElement("div");
+    tick.classList.add("timepicker-tick");
+    tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + "px";
+    tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + "px";
+    tick.textContent = text;
+    view.appendChild(tick);
+  }
   _updateAmPmView() {
     if (!this._amBtn || !this._pmBtn) return;
     this._amBtn.setAttribute("aria-pressed", String(this.amOrPm === "AM"));
@@ -9865,53 +9859,31 @@ var _Timepicker = class _Timepicker extends Component {
   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) {
-      radius = this.options.outerRadius;
-    }
+    const radius = inner && !this.options.twelveHour ? this.options.innerRadius : this.options.outerRadius;
+    let radian = Math.atan2(x, -y);
     if (radian < 0) {
       radian = Math.PI * 2 + radian;
     }
     let value = Math.round(radian / unit);
     radian = value * unit;
-    if (this.options.twelveHour) {
-      if (isHours) {
-        if (value === 0) value = 12;
-      } else {
-        if (roundBy5) value *= 5;
-        if (value === 60) value = 0;
-      }
-    } else {
-      if (isHours) {
-        if (value === 12) {
-          value = 0;
-        }
-        value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12;
-      } else {
-        if (roundBy5) {
-          value *= 5;
-        }
-        if (value === 60) {
-          value = 0;
-        }
-      }
-    }
-    if (this[this.currentView] !== value) {
-      if (this.canVibrate && this.options.vibrate) {
-        if (!this.vibrateTimer) {
-          navigator.vibrate(10);
-          this.vibrateTimer = setTimeout(() => {
-            this.vibrateTimer = null;
-          }, 100);
-        }
-      }
+    if (!isHours) {
+      if (roundBy5) value *= 5;
+      if (value === 60) value = 0;
+    } else if (this.options.twelveHour) {
+      if (value === 0) value = 12;
+    } else if (value % 12 === 0) {
+      value = inner ? 12 : 0;
+    } else if (!inner) {
+      value += 12;
+    }
+    if (this[this.currentView] !== value && this.canVibrate && this.options.vibrate && !this.vibrateTimer) {
+      navigator.vibrate(10);
+      this.vibrateTimer = setTimeout(() => {
+        this.vibrateTimer = null;
+      }, 100);
     }
     this[this.currentView] = value;
-    if (isHours) {
-      this.inputHours.value = _Timepicker._addLeadingZero(value);
-    } else {
-      this.inputMinutes.value = _Timepicker._addLeadingZero(value);
-    }
+    (isHours ? this.inputHours : this.inputMinutes).value = _Timepicker._addLeadingZero(value);
     this.setClockAttributes(radian, radius);
   }
   setClockAttributes(radian, radius) {
@@ -9967,7 +9939,7 @@ _Timepicker._template = `<div class="timepicker-container">
 var Timepicker = _Timepicker;
 
 // src/ts/components/snackbar.ts
-var _defaults28 = {
+var _defaults29 = {
   text: "",
   action: "",
   onAction: null,
@@ -10017,7 +9989,7 @@ var _Snackbar = class _Snackbar {
     this._setTimer();
   }
   static get defaults() {
-    return _defaults28;
+    return _defaults29;
   }
   static getInstance(el) {
     return el["Expressive_Snackbar"];
@@ -10090,10 +10062,7 @@ var _Snackbar = class _Snackbar {
         snackbar.wasSwiped = true;
         snackbar.dismiss();
       } else {
-        snackbar.el.style.transition = "transform .2s, opacity .2s";
-        snackbar.el.style.transform = "";
-        snackbar.el.style.opacity = "";
-        snackbar._resumeTimer();
+        snackbar._snapBack();
       }
       _Snackbar._draggedSnackbar = null;
     }
@@ -10110,12 +10079,15 @@ var _Snackbar = class _Snackbar {
     if (!snackbar) return;
     snackbar.panning = false;
     snackbar.el.classList.remove("panning");
-    snackbar.el.style.transition = "transform .2s, opacity .2s";
-    snackbar.el.style.transform = "";
-    snackbar.el.style.opacity = "";
-    snackbar._resumeTimer();
+    snackbar._snapBack();
     _Snackbar._draggedSnackbar = null;
   }
+  _snapBack() {
+    this.el.style.transition = "transform .2s, opacity .2s";
+    this.el.style.transform = "";
+    this.el.style.opacity = "";
+    this._resumeTimer();
+  }
   /**
    * dismiss all snackbars.
    */
@@ -10285,15 +10257,15 @@ var _Snackbar = class _Snackbar {
     this.counterTimeout = null;
     this._restoreFocus();
     if (this._events.signal.aborted) return;
-    const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+    const duration = this.options.outDuration;
+    const transitions = [`margin ${duration}ms ease`, `opacity ${duration}ms ease`];
     if (this.wasSwiped) {
-      this.el.style.transition = "transform .05s, opacity .05s";
-      this.el.style.transform = `translateX(${activationDistance}px)`;
+      const direction = this.xPos < this.startingXPos ? -1 : 1;
+      this.el.style.transform = `translateX(${direction * this.el.offsetWidth}px)`;
       this.el.style.opacity = "0";
+      transitions.push(`transform ${duration}ms ease`);
     }
-    this.el.style.transition = `
-      margin ${this.options.outDuration}ms ease,
-      opacity ${this.options.outDuration}ms ease`;
+    this.el.style.transition = transitions.join(", ");
     clearTimeout(this._transitionTimer);
     this._transitionTimer = setTimeout(() => {
       this.el.style.opacity = "0";
@@ -10315,7 +10287,7 @@ _Snackbar._draggedSnackbar = null;
 var Snackbar = _Snackbar;
 
 // src/ts/components/tooltip.ts
-var _defaults29 = {
+var _defaults30 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -10399,7 +10371,7 @@ var Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults29;
+    return _defaults30;
   }
   /**
    * Initializes instances of Tooltip.
@@ -10445,8 +10417,12 @@ var Tooltip = class _Tooltip extends Component {
     this.tooltipEl.id = `tooltip-${Utils.guid()}`;
     this.tooltipEl.setAttribute("role", "tooltip");
     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) {
+    const richContentEl = this.options.tooltipId ? Utils.getElementById(this.el, this.options.tooltipId) : null;
+    if (this.options.tooltipId && !richContentEl) {
+      console.error(`Tooltip: no element with id "${this.options.tooltipId}"; showing the text tooltip instead.`);
+    }
+    const tooltipContentEl = richContentEl ?? document.createElement("div");
+    if (richContentEl) {
       this.tooltipEl.classList.add("rich");
       const marker = document.createComment("");
       tooltipContentEl.before(marker);
@@ -10467,7 +10443,7 @@ var Tooltip = class _Tooltip extends Component {
     Utils.portalRoot(this.el).appendChild(this.tooltipEl);
   }
   _setTooltipContent(tooltipContentEl) {
-    if (this.options.tooltipId) return;
+    if (this._originalContent) return;
     tooltipContentEl.innerText = this.options.text;
   }
   _updateTooltipContent() {
@@ -10619,6 +10595,7 @@ var AUTO_INIT_COMPONENTS = {
   Chips: { component: Chips, selector: ".chips" },
   Confetti: { component: Confetti, selector: ".confetti" },
   Particles: { component: Particles, selector: "canvas.particles" },
+  Keypad: { component: Keypad, selector: ".keypad, .keyboard" },
   ColumnChart: { component: ColumnChart, selector: ".column-chart" },
   BarChart: { component: BarChart, selector: ".bar-chart" },
   PieChart: { component: PieChart, selector: ".pie-chart" },
@@ -10677,7 +10654,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/modular.ts
-var version = "0.14.1";
+var version = "0.15.0";
 
 // src/ts/index.ts
 Forms.Init();