@expressivecss/expressive 0.13.1 → 0.15.0

package/dist/js/expressive.js

@@ -32,6 +32,7 @@ var Expressive = (() => {
     Chips: () => Chips,
     ColumnChart: () => ColumnChart,
     CommandPalette: () => CommandPalette,
+    Confetti: () => Confetti,
     Datepicker: () => Datepicker,
     Dialogs: () => Dialogs,
     ExpandingCard: () => ExpandingCard,
@@ -39,12 +40,15 @@ var Expressive = (() => {
     FormSelect: () => FormSelect,
     Forms: () => Forms,
     HeatmapChart: () => HeatmapChart,
+    Keypad: () => Keypad,
     Lightbox: () => Lightbox,
     LineChart: () => LineChart,
+    MapView: () => MapView,
     Menu: () => Menu,
     MessageScroller: () => MessageScroller,
     MixedChart: () => MixedChart,
     NavigationRail: () => NavigationRail,
+    Particles: () => Particles,
     PieChart: () => PieChart,
     Questionnaire: () => Questionnaire,
     RadarChart: () => RadarChart,
@@ -205,12 +209,7 @@ var Expressive = (() => {
      * @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.
@@ -239,9 +238,9 @@ var Expressive = (() => {
     static throttle(func, wait) {
       let timeout = null;
       let lastArgs = null;
-      let previous = 0;
+      let previous = -Infinity;
       return (...args) => {
-        const now = Date.now();
+        const now = performance.now();
         const remaining = wait - (now - previous);
         if (remaining <= 0) {
           clearTimeout(timeout);
@@ -252,7 +251,7 @@ var Expressive = (() => {
         } else if (!timeout) {
           lastArgs = args;
           timeout = setTimeout(() => {
-            previous = Date.now();
+            previous = performance.now();
             timeout = null;
             func(...lastArgs ?? []);
             lastArgs = null;
@@ -276,12 +275,11 @@ var Expressive = (() => {
      * 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);
@@ -394,10 +392,7 @@ var Expressive = (() => {
       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;
     }
     /**
@@ -407,16 +402,8 @@ var Expressive = (() => {
      * @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.
@@ -604,7 +591,7 @@ var Expressive = (() => {
       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);
         });
       });
     }
@@ -647,11 +634,7 @@ var Expressive = (() => {
       };
       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;
@@ -660,26 +643,15 @@ var Expressive = (() => {
           ":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;
@@ -698,12 +670,9 @@ var Expressive = (() => {
       };
       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);
         }
@@ -754,18 +723,24 @@ var Expressive = (() => {
     }
     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);
           }
         });
@@ -851,15 +826,8 @@ var Expressive = (() => {
           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();
@@ -871,11 +839,7 @@ var Expressive = (() => {
         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;
       };
@@ -951,11 +915,10 @@ var Expressive = (() => {
           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);
@@ -974,7 +937,7 @@ var Expressive = (() => {
             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;
@@ -989,19 +952,18 @@ var Expressive = (() => {
           } 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(
@@ -1226,10 +1188,7 @@ var Expressive = (() => {
     _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);
@@ -1246,11 +1205,12 @@ var Expressive = (() => {
       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;
@@ -1276,6 +1236,7 @@ var Expressive = (() => {
       item.scrollIntoView({ block: "nearest", inline: "nearest" });
     }
     _resetMenuStyles() {
+      if (!this.menuEl) return;
       this.menuEl.style.display = "";
       this._resetMenuPositioningStyles();
       this.menuEl.style.transform = "";
@@ -1560,13 +1521,11 @@ var Expressive = (() => {
     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,
@@ -1587,8 +1546,9 @@ var Expressive = (() => {
       this._handleInput = () => {
         this.count = 0;
         const actualValue = this.el.value.toLocaleLowerCase();
-        if (this.oldVal !== actualValue && this.el.matches(":focus-visible")) {
-          this.open();
+        if (this.oldVal !== actualValue) {
+          this._resetCurrentElementPosition();
+          if (this.el.matches(":focus-visible") && (!this.menu.isOpen || actualValue.length < this.options.minLength)) this.open();
         }
         this._inputChangeDetection(actualValue);
       };
@@ -1598,17 +1558,13 @@ var Expressive = (() => {
         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) => {
@@ -1629,6 +1585,10 @@ var Expressive = (() => {
         }
         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++;
@@ -1666,7 +1626,7 @@ var Expressive = (() => {
         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);
@@ -1828,6 +1788,7 @@ var Expressive = (() => {
       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");
@@ -1859,7 +1820,7 @@ var Expressive = (() => {
       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, "", ""];
@@ -1898,11 +1859,24 @@ var Expressive = (() => {
         item.appendChild(img);
       }
       const inputText = this.el.value.toLocaleLowerCase();
-      const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
+      const label = (entry.text || entry.id).toString();
+      const parts = this._highlightPartialText(inputText, label);
       const div = document.createElement("div");
       div.setAttribute("style", "line-height:1.2;font-weight:500;");
       if (this.options.allowUnsafeHTML) {
-        div.innerHTML = parts[0] + '<span class="highlight">' + parts[1] + "</span>" + parts[2];
+        div.innerHTML = label;
+        const walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          const [before, match] = this._highlightPartialText(inputText, node.data);
+          if (!match) continue;
+          const matched = node.splitText(before.length);
+          matched.splitText(match.length);
+          const highlight = document.createElement("span");
+          highlight.classList.add("highlight");
+          matched.replaceWith(highlight);
+          highlight.append(matched);
+          break;
+        }
       } else {
         div.appendChild(document.createTextNode(parts[0]));
         if (parts[1]) {
@@ -1917,7 +1891,7 @@ var Expressive = (() => {
       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(
@@ -1925,7 +1899,7 @@ var Expressive = (() => {
           "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) {
@@ -1958,6 +1932,9 @@ var Expressive = (() => {
       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) {
@@ -1987,21 +1964,20 @@ var Expressive = (() => {
       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)
         );
       }
       if (this.options.isMultiSelect) {
-        this._renderMenu();
+        if (!open) this._renderMenu();
       } else {
         this._refreshInputText();
       }
       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.
@@ -2011,9 +1987,8 @@ var Expressive = (() => {
       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
         );
@@ -2086,7 +2061,7 @@ var Expressive = (() => {
             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 = "";
@@ -2179,9 +2154,8 @@ var Expressive = (() => {
     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) {
@@ -2281,9 +2255,9 @@ var Expressive = (() => {
     }
     _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;
       }
     }
@@ -2392,12 +2366,10 @@ var Expressive = (() => {
         this._sync();
         this.thumb.classList.add("active");
       };
-      this._handleRangeInputOrMove = (e) => {
-        if (e.type === "input" || this._pointerDown) {
-          this._clampDual();
-          this._sync();
-          this.thumb.classList.add("active");
-        }
+      this._handleRangeInput = () => {
+        this._clampDual();
+        this._sync();
+        this.thumb.classList.add("active");
       };
       this._handleRangePointerUp = (e) => {
         if (!e.isPrimary) return;
@@ -2461,8 +2433,7 @@ var Expressive = (() => {
     _setupEventHandlers() {
       this.el.addEventListener("change", this._handleRangeChange);
       this.el.addEventListener("pointerdown", this._handleRangePointerDown);
-      this.el.addEventListener("input", this._handleRangeInputOrMove);
-      this.el.addEventListener("pointermove", this._handleRangeInputOrMove, { passive: true });
+      this.el.addEventListener("input", this._handleRangeInput);
       this.el.addEventListener("pointerup", this._handleRangePointerUp);
       this.el.addEventListener("pointercancel", this._handleRangePointerUp);
       this.el.addEventListener("blur", this._handleRangeRelease);
@@ -2471,8 +2442,7 @@ var Expressive = (() => {
     _removeEventHandlers() {
       this.el.removeEventListener("change", this._handleRangeChange);
       this.el.removeEventListener("pointerdown", this._handleRangePointerDown);
-      this.el.removeEventListener("input", this._handleRangeInputOrMove);
-      this.el.removeEventListener("pointermove", this._handleRangeInputOrMove);
+      this.el.removeEventListener("input", this._handleRangeInput);
       this.el.removeEventListener("pointerup", this._handleRangePointerUp);
       this.el.removeEventListener("pointercancel", this._handleRangePointerUp);
       this.el.removeEventListener("blur", this._handleRangeRelease);
@@ -2504,10 +2474,13 @@ var Expressive = (() => {
       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);
     }
@@ -2536,9 +2509,7 @@ var Expressive = (() => {
         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) : "");
@@ -2562,7 +2533,7 @@ var Expressive = (() => {
      */
     static Init() {
       Utils.onDocumentReady(() => {
-        _Slider.init(document.querySelectorAll("input[type=range]"), {});
+        _Slider.init(document.querySelectorAll("input[type=range]"));
       });
     }
   };
@@ -2577,16 +2548,8 @@ var Expressive = (() => {
       });
     }
     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;
@@ -2640,7 +2603,10 @@ var Expressive = (() => {
   var DISMISS_VELOCITY = 0.5;
   var FLICK_TIMEOUT = 100;
   var DRAG_SLOP = 4;
+  var installed = /* @__PURE__ */ new Set();
   function installSheetDrag(config) {
+    if (installed.has(config.selector)) return;
+    installed.add(config.selector);
     const coord = (event) => config.axis === "x" ? event.clientX : event.clientY;
     let observer;
     let drag = null;
@@ -2659,21 +2625,15 @@ var Expressive = (() => {
       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
@@ -2686,12 +2646,13 @@ var Expressive = (() => {
         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`);
@@ -2801,7 +2762,7 @@ var Expressive = (() => {
   };
 
   // src/ts/behaviors/forms.ts
-  var Forms = class _Forms {
+  var _Forms = class _Forms {
     /**
      * Checks if the label has validation and apply
      * the correct class and styles
@@ -2818,7 +2779,7 @@ var Expressive = (() => {
       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");
@@ -2843,17 +2804,22 @@ var Expressive = (() => {
       const contentHeight = textarea.scrollHeight + borders;
       textarea.style.height = Math.max(originalHeight, contentHeight) + "px";
     }
+    /**
+     * Safe to call more than once: the root entry calls it on import, and a page
+     * that also loads the modular entry may call it again.
+     */
     static Init() {
+      if (_Forms._initialized) return;
+      _Forms._initialized = true;
       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;
@@ -2958,18 +2924,15 @@ var Expressive = (() => {
       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 })
         );
       });
     }
   };
+  _Forms._initialized = false;
+  var Forms = _Forms;
 
   // src/ts/components/appBar.ts
   var _defaults7 = {};
@@ -3043,8 +3006,7 @@ var Expressive = (() => {
       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);
@@ -3372,6 +3334,7 @@ var Expressive = (() => {
       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);
@@ -3462,6 +3425,7 @@ var Expressive = (() => {
         this._dragStartX = e.clientX;
         this._dragStartY = e.clientY;
         this._dragStartScroll = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
+        this._setDragListeners(true);
       };
       this._handleTrackPointerMove = (e) => {
         if (!this.pressed || e.pointerId !== this._dragPointerId) return;
@@ -3486,6 +3450,7 @@ var Expressive = (() => {
         if (!this.pressed || e.pointerId !== this._dragPointerId) return;
         this.pressed = false;
         this._dragPointerId = null;
+        this._setDragListeners(false);
         this.el.classList.remove("dragging");
         try {
           this._scroller.releasePointerCapture(e.pointerId);
@@ -3552,9 +3517,8 @@ var Expressive = (() => {
         if (this._trackRaf !== null) return;
         this._trackRaf = requestAnimationFrame(() => {
           this._trackRaf = null;
+          const index = this._ignoreScroll ? this.center : this._nearestIndex();
           this._updateParallax();
-          if (this._ignoreScroll) return;
-          const index = this._nearestIndex();
           if (index !== this.center) this._syncActive(index, this.dragged);
         });
       };
@@ -3567,6 +3531,7 @@ var Expressive = (() => {
       };
       this._finishScroll = () => {
         this._ignoreScroll = false;
+        this._scroller.style.scrollSnapType = "";
         clearTimeout(this._scrollEndTimeout);
         this._scroller.removeEventListener("scrollend", this._handleScrollEnd);
       };
@@ -3671,7 +3636,6 @@ var Expressive = (() => {
         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");
@@ -3704,10 +3668,6 @@ var Expressive = (() => {
         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);
       });
@@ -3746,9 +3706,6 @@ var Expressive = (() => {
       });
       this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown);
       this._scroller.addEventListener("wheel", this._handleNativeScroll, { passive: true });
-      document.addEventListener("pointermove", this._handleTrackPointerMove);
-      document.addEventListener("pointerup", this._handleTrackPointerUp);
-      document.addEventListener("pointercancel", this._handleTrackPointerUp);
       this._scroller.addEventListener("click", this._handleTrackClick, true);
       this._scroller.addEventListener("dragstart", this._handleTrackDragStart);
       this._scroller.addEventListener("transitionend", this._handleItemResize);
@@ -3767,9 +3724,7 @@ var Expressive = (() => {
       this._scroller.removeEventListener("scroll", this._handleTrackScroll);
       this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
       this._scroller.removeEventListener("wheel", this._handleNativeScroll);
-      document.removeEventListener("pointermove", this._handleTrackPointerMove);
-      document.removeEventListener("pointerup", this._handleTrackPointerUp);
-      document.removeEventListener("pointercancel", this._handleTrackPointerUp);
+      this._setDragListeners(false);
       this._scroller.removeEventListener("click", this._handleTrackClick, true);
       this._scroller.removeEventListener("dragstart", this._handleTrackDragStart);
       this._scroller.removeEventListener("transitionend", this._handleItemResize);
@@ -3836,6 +3791,13 @@ var Expressive = (() => {
         this._autoAdvanceTimer = null;
       }
     }
+    /** The document only hears from a carousel while a mouse press is down on its track. */
+    _setDragListeners(on) {
+      const method = on ? "addEventListener" : "removeEventListener";
+      document[method]("pointermove", this._handleTrackPointerMove);
+      document[method]("pointerup", this._handleTrackPointerUp);
+      document[method]("pointercancel", this._handleTrackPointerUp);
+    }
     _paintIndicators(center) {
       if (!this.showIndicators || !this._indicators) return;
       const pos = (center % this.count + this.count) % this.count;
@@ -3862,40 +3824,31 @@ var Expressive = (() => {
       }
     }
     _syncLayoutRoles(index) {
-      const setSize = (item, size) => {
-        if (this._authoredItemSizes.has(item)) return;
-        item.setAttribute("data-carousel-size", size);
-        this._generatedItemSizes.add(item);
+      const sizes = this.images.map(() => "large");
+      const setSize = (i, size) => {
+        if (this.images[i]) sizes[i] = size;
       };
-      this.images.forEach((item) => setSize(item, "large"));
       if (this.el.classList.contains("flat") || this.el.classList.contains("uncontained") || this.el.classList.contains("full-screen") && this._vertical) {
-        return;
-      }
-      if (this.el.classList.contains("hero") || this.el.classList.contains("full-screen-horizontal")) {
-        const next = this.images[index + 1];
-        if (next) setSize(next, "small");
-        if (this.el.classList.contains("center-aligned")) {
-          const previous = this.images[index - 1];
-          if (previous) setSize(previous, "small");
-        }
-        return;
-      }
-      const width = this.el.clientWidth;
-      const desiredLargeCount = width >= 1600 ? 4 : width >= 1200 ? 3 : width >= 600 ? 2 : 1;
-      const largeCount = Math.min(desiredLargeCount, Math.max(1, this.count - 2));
-      this.el.classList.remove("multi-wide", "multi-large", "multi-extra-large");
-      if (largeCount === 2) this.el.classList.add("multi-wide");
-      else if (largeCount === 3) this.el.classList.add("multi-large");
-      else if (largeCount >= 4) this.el.classList.add("multi-extra-large");
-      this._generatedWideLayout = this._generatedWideLayout || largeCount > 1;
-      for (let offset = 1; offset < largeCount; offset += 1) {
-        const item = this.images[index + offset];
-        if (item) setSize(item, "large");
-      }
-      const medium = this.images[index + largeCount];
-      const small = this.images[index + largeCount + 1];
-      if (medium) setSize(medium, "medium");
-      if (small) setSize(small, "small");
+      } else if (this.el.classList.contains("hero") || this.el.classList.contains("full-screen-horizontal")) {
+        setSize(index + 1, "small");
+        if (this.el.classList.contains("center-aligned")) setSize(index - 1, "small");
+      } else {
+        const width = this.el.clientWidth;
+        const desiredLargeCount = width >= 1600 ? 4 : width >= 1200 ? 3 : width >= 600 ? 2 : 1;
+        const largeCount = Math.min(desiredLargeCount, Math.max(1, this.count - 2));
+        this.el.classList.remove("multi-wide", "multi-large", "multi-extra-large");
+        if (largeCount === 2) this.el.classList.add("multi-wide");
+        else if (largeCount === 3) this.el.classList.add("multi-large");
+        else if (largeCount >= 4) this.el.classList.add("multi-extra-large");
+        this._generatedWideLayout = this._generatedWideLayout || largeCount > 1;
+        setSize(index + largeCount, "medium");
+        setSize(index + largeCount + 1, "small");
+      }
+      this.images.forEach((item, i) => {
+        if (this._authoredItemSizes.has(item)) return;
+        item.setAttribute("data-carousel-size", sizes[i]);
+        this._generatedItemSizes.add(item);
+      });
     }
     _syncAdaptiveMode() {
       if (!this.el.classList.contains("full-screen")) return;
@@ -3912,15 +3865,11 @@ var Expressive = (() => {
     _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() {
-      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      if (this._motion.matches) {
         this.images.forEach(
           (item) => item.style.setProperty("--md-comp-carousel-item-parallax", "0px")
         );
@@ -3929,8 +3878,9 @@ var Expressive = (() => {
       const scrollerRect = this._scroller.getBoundingClientRect();
       const viewportCenter = this._vertical ? scrollerRect.top + scrollerRect.height / 2 : scrollerRect.left + scrollerRect.width / 2;
       const viewportSize = Math.max(1, this._vertical ? scrollerRect.height : scrollerRect.width);
-      this.images.forEach((item) => {
-        const rect = item.getBoundingClientRect();
+      const rects = this.images.map((item) => item.getBoundingClientRect());
+      this.images.forEach((item, i) => {
+        const rect = rects[i];
         const itemCenter = this._vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
         const progress = Math.max(-1, Math.min(1, (itemCenter - viewportCenter) / viewportSize));
         item.style.setProperty("--md-comp-carousel-item-parallax", `${progress * -24}px`);
@@ -3983,6 +3933,7 @@ var Expressive = (() => {
       const left = centered ? el.offsetLeft - (this._scroller.clientWidth - el.offsetWidth) / 2 : style.direction === "rtl" ? el.offsetLeft + el.offsetWidth - this._scroller.clientWidth + inlinePadding : el.offsetLeft - inlinePadding;
       const top = el.offsetTop - blockPadding;
       this._ignoreScroll = true;
+      this._scroller.style.scrollSnapType = "none";
       this._scroller.scrollTo({
         left: this._vertical ? 0 : left,
         top: this._vertical ? top : 0,
@@ -4011,13 +3962,13 @@ var Expressive = (() => {
       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);
@@ -4112,8 +4063,484 @@ var Expressive = (() => {
     }
   };
 
-  // src/ts/components/commandPalette.ts
+  // src/ts/components/confetti.ts
   var _defaults12 = {
+    particleCount: 50,
+    angle: 90,
+    spread: 45,
+    startVelocity: 45,
+    decay: 0.9,
+    gravity: 1,
+    drift: 0,
+    ticks: 200,
+    origin: { x: 0.5, y: 0.5 },
+    colors: [],
+    shapes: ["square", "circle"],
+    scalar: 1,
+    manualStart: false
+  };
+  var THEME_COLORS = ["primary", "secondary", "tertiary", "primary-container", "secondary-container", "tertiary-container"];
+  var FALLBACK_COLORS = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"];
+  var RAD = Math.PI / 180;
+  var scenes = /* @__PURE__ */ new Map();
+  var overlay = null;
+  var Confetti = class _Confetti extends Component {
+    constructor(el, options) {
+      super(el, options, _Confetti);
+      this._onClick = () => {
+        this.fire();
+      };
+      this.el["Expressive_Confetti"] = this;
+      this.options = { ..._Confetti.defaults, ...options };
+      if (!(el instanceof HTMLCanvasElement)) el.addEventListener("click", this._onClick);
+      else if (!this.options.manualStart) this.fire();
+    }
+    static get defaults() {
+      return _defaults12;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options, _Confetti);
+    }
+    static getInstance(el) {
+      return el["Expressive_Confetti"];
+    }
+    /**
+     * Bursts over the whole viewport. Resolves when the last piece is gone.
+     */
+    static fire(options = {}) {
+      return burst(viewportCanvas, document.body, { ..._Confetti.defaults, ...options });
+    }
+    /**
+     * Bursts on this canvas, or from this element's center over the viewport.
+     * Resolves when the last piece is gone.
+     */
+    fire(options = {}) {
+      const merged = { ...this.options, ...options };
+      if (this.el instanceof HTMLCanvasElement) {
+        const canvas = this.el;
+        return burst(() => canvas, canvas.parentElement ?? document.body, merged);
+      }
+      const r = this.el.getBoundingClientRect();
+      merged.origin = { x: (r.left + r.width / 2) / innerWidth, y: (r.top + r.height / 2) / innerHeight };
+      return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);
+    }
+    destroy() {
+      this.el.removeEventListener("click", this._onClick);
+      if (this.el instanceof HTMLCanvasElement) stop(this.el);
+      this.el["Expressive_Confetti"] = void 0;
+    }
+  };
+  function burst(getCanvas, themed, o) {
+    if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
+    const canvas = getCanvas();
+    let scene = scenes.get(canvas);
+    if (!scene) {
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return Promise.resolve();
+      scene = { ctx, pieces: [], frame: 0, last: 0, done: [], overlay: canvas === overlay };
+      scenes.set(canvas, scene);
+    }
+    const { width, height } = fit(canvas);
+    const colors = o.colors.length ? o.colors : themeColors(themed);
+    const x = (o.origin.x ?? 0.5) * width;
+    const y = (o.origin.y ?? 0.5) * height;
+    for (let i = 0; i < o.particleCount; i++) {
+      scene.pieces.push({
+        x,
+        y,
+        velocity: o.startVelocity * (0.5 + Math.random()),
+        angle: -o.angle * RAD + (0.5 - Math.random()) * o.spread * RAD,
+        wobble: Math.random() * 10,
+        wobbleSpeed: 0.05 + Math.random() * 0.05,
+        tilt: (0.25 + Math.random() / 2) * Math.PI,
+        tick: 0,
+        color: colors[i % colors.length],
+        shape: o.shapes[Math.floor(Math.random() * o.shapes.length)] ?? "square",
+        options: o
+      });
+    }
+    const s = scene;
+    if (!s.frame) s.frame = requestAnimationFrame((now) => {
+      s.last = now;
+      draw(canvas, s, now);
+    });
+    return new Promise((resolve) => s.done.push(resolve));
+  }
+  function draw(canvas, scene, now) {
+    const step = Math.min((now - scene.last) / (1e3 / 60), 4);
+    scene.last = now;
+    const { width, height } = fit(canvas);
+    const { ctx } = scene;
+    const dpr = canvas.width / (width || 1);
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    scene.pieces = scene.pieces.filter((p) => {
+      const o = p.options;
+      p.x += (Math.cos(p.angle) * p.velocity + o.drift) * step;
+      p.y += (Math.sin(p.angle) * p.velocity + o.gravity * 3) * step;
+      p.velocity *= o.decay ** step;
+      p.wobble += p.wobbleSpeed * step;
+      p.tilt += 0.1 * step;
+      p.tick += step;
+      if (p.tick >= o.ticks) return false;
+      const size = 8 * o.scalar;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.translate(p.x + 10 * o.scalar * Math.cos(p.wobble), p.y + 10 * o.scalar * Math.sin(p.wobble));
+      ctx.rotate(p.tilt);
+      ctx.scale(1, Math.cos(p.wobble));
+      ctx.globalAlpha = 1 - p.tick / o.ticks;
+      ctx.fillStyle = p.color;
+      ctx.beginPath();
+      if (p.shape === "circle") ctx.arc(0, 0, size / 2, 0, 2 * Math.PI);
+      else if (p.shape === "star") star(ctx, size * 0.75);
+      else ctx.rect(-size / 2, -size / 2, size, size);
+      ctx.fill();
+      return true;
+    });
+    if (scene.pieces.length) scene.frame = requestAnimationFrame((t) => draw(canvas, scene, t));
+    else stop(canvas);
+  }
+  function stop(canvas) {
+    const scene = scenes.get(canvas);
+    if (!scene) return;
+    cancelAnimationFrame(scene.frame);
+    scenes.delete(canvas);
+    scene.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    scene.ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (scene.overlay) {
+      canvas.remove();
+      overlay = null;
+    }
+    for (const resolve of scene.done) resolve();
+  }
+  function star(ctx, r) {
+    for (let i = 0; i < 10; i++) {
+      const a = i * Math.PI / 5 - Math.PI / 2;
+      const d = i % 2 ? r / 2 : r;
+      ctx.lineTo(Math.cos(a) * d, Math.sin(a) * d);
+    }
+    ctx.closePath();
+  }
+  function fit(canvas) {
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    const w = Math.round(width * devicePixelRatio);
+    const h = Math.round(height * devicePixelRatio);
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+    return { width, height };
+  }
+  function viewportCanvas() {
+    if (overlay?.isConnected) return overlay;
+    overlay = document.createElement("canvas");
+    overlay.className = "confetti-overlay";
+    overlay.setAttribute("aria-hidden", "true");
+    Object.assign(overlay.style, {
+      position: "fixed",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      margin: "0",
+      padding: "0",
+      border: "0",
+      background: "transparent",
+      pointerEvents: "none",
+      zIndex: "10001"
+    });
+    document.body.append(overlay);
+    if (typeof overlay.showPopover === "function") {
+      overlay.popover = "manual";
+      overlay.showPopover();
+    }
+    return overlay;
+  }
+  function themeColors(themed) {
+    const probe = document.createElement("span");
+    probe.hidden = true;
+    themed.append(probe);
+    const style = getComputedStyle(probe);
+    const colors = THEME_COLORS.filter((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).map((role) => {
+      probe.style.color = `var(--md-sys-color-${role})`;
+      return getComputedStyle(probe).color;
+    });
+    probe.remove();
+    return colors.length ? colors : FALLBACK_COLORS;
+  }
+
+  // src/ts/components/particles.ts
+  var _defaults13 = {
+    quantity: 100,
+    staticity: 50,
+    ease: 50,
+    size: 0.4,
+    color: "",
+    vx: 0,
+    vy: 0
+  };
+  var Particles = class _Particles extends Component {
+    constructor(el, options) {
+      super(el, options, _Particles);
+      this._particles = [];
+      this._width = 0;
+      this._height = 0;
+      this._frame = 0;
+      this._last = 0;
+      // Pointer offset from the canvas center, kept from its last move inside.
+      this._mouse = { x: 0, y: 0 };
+      this._still = false;
+      this._resizeObserver = null;
+      this._visibility = null;
+      this._onPointerMove = (e) => {
+        const r = this.el.getBoundingClientRect();
+        const x = e.clientX - r.left - r.width / 2;
+        const y = e.clientY - r.top - r.height / 2;
+        if (Math.abs(x) < r.width / 2 && Math.abs(y) < r.height / 2) this._mouse = { x, y };
+      };
+      this.el["Expressive_Particles"] = this;
+      this.options = { ..._Particles.defaults, ...options };
+      this._ctx = this.el.getContext("2d");
+      if (!this._ctx) return;
+      this._style = getComputedStyle(this.el);
+      this._still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+      this._reset();
+      if (typeof ResizeObserver !== "undefined") {
+        this._resizeObserver = new ResizeObserver(() => {
+          if (this.el.clientWidth !== this._width || this.el.clientHeight !== this._height) this._reset();
+        });
+        this._resizeObserver.observe(this.el);
+      }
+      if (this._still) return;
+      if (typeof IntersectionObserver === "undefined") {
+        this._start();
+        return;
+      }
+      this._visibility = new IntersectionObserver(([entry]) => entry.isIntersecting ? this._start() : this._stop());
+      this._visibility.observe(this.el);
+    }
+    static get defaults() {
+      return _defaults13;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options, _Particles);
+    }
+    static getInstance(el) {
+      return el["Expressive_Particles"];
+    }
+    destroy() {
+      this._stop();
+      this._resizeObserver?.disconnect();
+      this._visibility?.disconnect();
+      if (this._ctx) {
+        this._ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this._ctx.clearRect(0, 0, this.el.width, this.el.height);
+      }
+      this.el["Expressive_Particles"] = void 0;
+    }
+    _start() {
+      if (this._frame) return;
+      window.addEventListener("pointermove", this._onPointerMove, { passive: true });
+      this._frame = requestAnimationFrame((now) => {
+        this._last = now;
+        this._draw(now);
+      });
+    }
+    _stop() {
+      cancelAnimationFrame(this._frame);
+      this._frame = 0;
+      window.removeEventListener("pointermove", this._onPointerMove);
+    }
+    // Matches the pixel buffer to the canvas box and scatters a new set.
+    _reset() {
+      this._width = this.el.clientWidth;
+      this._height = this.el.clientHeight;
+      this.el.width = Math.round(this._width * devicePixelRatio);
+      this.el.height = Math.round(this._height * devicePixelRatio);
+      this._particles = Array.from({ length: this.options.quantity }, () => this._particle());
+      if (this._still) {
+        for (const p of this._particles) p.alpha = p.targetAlpha;
+        this._paint();
+      }
+    }
+    _particle() {
+      return {
+        x: Math.floor(Math.random() * this._width),
+        y: Math.floor(Math.random() * this._height),
+        translateX: 0,
+        translateY: 0,
+        size: Math.floor(Math.random() * 2) + this.options.size,
+        alpha: 0,
+        targetAlpha: Math.round((Math.random() * 0.6 + 0.1) * 10) / 10,
+        dx: (Math.random() - 0.5) * 0.1,
+        dy: (Math.random() - 0.5) * 0.1,
+        magnetism: 0.1 + Math.random() * 4
+      };
+    }
+    _draw(now) {
+      const step = Math.min((now - this._last) / (1e3 / 60), 4);
+      this._last = now;
+      const { staticity, ease, vx, vy } = this.options;
+      const follow = Math.min(step / ease, 1);
+      this._particles = this._particles.map((p) => {
+        p.x += (p.dx + vx) * step;
+        p.y += (p.dy + vy) * step;
+        p.translateX += (this._mouse.x / (staticity / p.magnetism) - p.translateX) * follow;
+        p.translateY += (this._mouse.y / (staticity / p.magnetism) - p.translateY) * follow;
+        const x = p.x + p.translateX;
+        const y = p.y + p.translateY;
+        const edge = Math.min(x - p.size, this._width - x - p.size, y - p.size, this._height - y - p.size) / 20;
+        p.alpha = edge > 1 ? Math.min(p.alpha + 0.02 * step, p.targetAlpha) : p.targetAlpha * edge;
+        const gone = p.x < -p.size || p.x > this._width + p.size || p.y < -p.size || p.y > this._height + p.size;
+        return gone ? this._particle() : p;
+      });
+      this._paint();
+      this._frame = requestAnimationFrame((t) => this._draw(t));
+    }
+    _paint() {
+      const ctx = this._ctx;
+      const dpr = devicePixelRatio;
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.clearRect(0, 0, this.el.width, this.el.height);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.fillStyle = this.options.color || this._style.color;
+      for (const p of this._particles) {
+        if (p.alpha <= 0) continue;
+        ctx.globalAlpha = p.alpha;
+        ctx.beginPath();
+        ctx.arc(p.x + p.translateX, p.y + p.translateY, p.size, 0, 2 * Math.PI);
+        ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    }
+  };
+
+  // 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
   };
@@ -4211,7 +4638,7 @@ var Expressive = (() => {
       document.addEventListener("keydown", this._handleShortcut);
     }
     static get defaults() {
-      return _defaults12;
+      return _defaults15;
     }
     /**
      * Initializes instances of CommandPalette.
@@ -4364,7 +4791,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/questionnaire.ts
-  var _defaults13 = {
+  var _defaults16 = {
     progressLabel: "Question {current} of {total}",
     requiredMessage: "Choose an answer to continue."
   };
@@ -4478,7 +4905,7 @@ var Expressive = (() => {
       this.el.addEventListener("invalid", this._handleInvalid, true);
     }
     static get defaults() {
-      return _defaults13;
+      return _defaults16;
     }
     /**
      * Initializes instances of Questionnaire.
@@ -4623,7 +5050,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/lineChart.ts
-  var _defaults14 = {
+  var _defaults17 = {
     min: null,
     max: null
   };
@@ -4634,13 +5061,19 @@ var Expressive = (() => {
     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;
@@ -4751,7 +5184,7 @@ var Expressive = (() => {
       return "Expressive_LineChart";
     }
     static get defaults() {
-      return _defaults14;
+      return _defaults17;
     }
     static init(els, options = {}) {
       return super.init(els, options, this);
@@ -4781,7 +5214,7 @@ var Expressive = (() => {
       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");
@@ -4933,7 +5366,7 @@ var Expressive = (() => {
       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;
       }));
@@ -4941,15 +5374,17 @@ var Expressive = (() => {
     }
     /** 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([]);
@@ -4959,23 +5394,21 @@ var Expressive = (() => {
         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);
       }
@@ -5054,7 +5487,7 @@ var Expressive = (() => {
           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)}%`);
@@ -5154,18 +5587,25 @@ var Expressive = (() => {
     }
     /** The row's share of the whole as a percentage, or '' for none. */
     _share(index) {
+      var _a;
       const [start, end] = this._turns[index];
       if (end <= start) return "";
       const share = end - start;
-      const options = { style: "percent", maximumFractionDigits: share < 0.1 ? 1 : 0 };
+      const digits = share < 0.1 ? 1 : 0;
+      (_a = this._percents ?? (this._percents = []))[digits] ?? (_a[digits] = this._percent(digits));
+      return this._percents[digits].format(share);
+    }
+    _percent(digits) {
+      const options = { style: "percent", maximumFractionDigits: digits };
       try {
-        return share.toLocaleString(this.el.closest("[lang]")?.lang || void 0, options);
+        return new Intl.NumberFormat(this.el.closest("[lang]")?.lang || void 0, options);
       } catch {
-        return share.toLocaleString(void 0, options);
+        return new Intl.NumberFormat(void 0, options);
       }
     }
     /** The legend: every row with its color, its cell and its share. */
     _guides() {
+      this._percents = [];
       const legend = document.createElement("ul");
       legend.className = "pie-chart-legend";
       legend.setAttribute("aria-hidden", "true");
@@ -5202,17 +5642,13 @@ var Expressive = (() => {
       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");
@@ -5220,25 +5656,24 @@ var Expressive = (() => {
       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" })
       );
       const slices = svgNode("g", { mask: `url(#${id})` });
-      const arc = `A${RADIUS},${RADIUS} 0`;
+      const arc2 = `A${RADIUS},${RADIUS} 0`;
       this._slices = this._turns.map(([start, end], i) => {
         if (end <= start) return null;
         const slice2 = svgNode("path", {
           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}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc} ${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;
@@ -5281,9 +5716,10 @@ var Expressive = (() => {
     /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
     show(index) {
       if (!this._tooltip || index === this.activeIndex) return;
+      const cell = this._cells[index];
+      const [left, top, width, plotWidth] = cell ? [cell.offsetLeft, cell.offsetTop, cell.offsetWidth, this._plot.clientWidth] : [];
       this._cells[this.activeIndex]?.classList.remove("active");
       this.activeIndex = index;
-      const cell = this._cells[index];
       this._tooltip.hidden = !cell;
       if (!cell) return;
       cell.classList.add("active");
@@ -5297,10 +5733,10 @@ var Expressive = (() => {
       else name.style.setProperty("--level", String(this._levels[index]));
       text.textContent = series.text[row];
       this._tooltip.replaceChildren(title, name, text);
-      const end = cell.offsetLeft + cell.offsetWidth / 2 > this._plot.clientWidth / 2;
+      const end = left + width / 2 > plotWidth / 2;
       this._tooltip.classList.toggle("end", end);
-      this._tooltip.style.left = `${cell.offsetLeft + (end ? 0 : cell.offsetWidth)}px`;
-      this._tooltip.style.top = `${cell.offsetTop}px`;
+      this._tooltip.style.left = `${left + (end ? 0 : width)}px`;
+      this._tooltip.style.top = `${top}px`;
     }
     /** Arrows move the way they point, so left and right swap in RTL. */
     _keyTarget(key) {
@@ -5370,10 +5806,7 @@ var Expressive = (() => {
         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)];
@@ -5474,10 +5907,7 @@ var Expressive = (() => {
      * 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`;
@@ -5490,7 +5920,7 @@ var Expressive = (() => {
       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])));
@@ -5544,7 +5974,7 @@ var Expressive = (() => {
       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;
       });
@@ -5558,9 +5988,6 @@ var Expressive = (() => {
       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;
@@ -5574,7 +6001,7 @@ var Expressive = (() => {
       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;
@@ -5627,7 +6054,7 @@ var Expressive = (() => {
           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;
@@ -5681,7 +6108,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/select.ts
-  var _defaults15 = {
+  var _defaults18 = {
     classes: "",
     menuOptions: {}
   };
@@ -5755,7 +6182,7 @@ var Expressive = (() => {
         ...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;
@@ -5763,7 +6190,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults15;
+      return _defaults18;
     }
     /**
      * Initializes instances of FormSelect.
@@ -5998,13 +6425,13 @@ var Expressive = (() => {
           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;
@@ -6154,10 +6581,7 @@ var Expressive = (() => {
       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(", ");
@@ -6188,7 +6612,7 @@ var Expressive = (() => {
   };
 
   // src/ts/plugins/dockedDisplayPlugin.ts
-  var _defaults16 = {
+  var _defaults19 = {
     margin: 5,
     transition: 10,
     duration: 250,
@@ -6197,14 +6621,14 @@ var Expressive = (() => {
   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. The document listener holds a reference to this
-       * instance - and through it the whole picker subtree - so the owning
-       * component must call this from its own destroy().
+       * Tears the plugin down. While shown, the document listener holds a
+       * reference to this instance - and through it the whole picker subtree - so
+       * the owning component must call this from its own destroy().
        */
       this.destroy = () => {
         document.removeEventListener("click", this._handleDocumentClick);
@@ -6213,23 +6637,21 @@ var Expressive = (() => {
       this.show = () => {
         if (this.visible) return;
         this.visible = true;
+        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 = () => {
         if (!this.visible) return;
         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";
@@ -6237,14 +6659,20 @@ var Expressive = (() => {
       };
       this.el = el;
       this.options = {
-        ..._defaults16,
+        ..._defaults19,
         ...options
       };
       this.container = document.createElement("div");
       this.container.classList.add("display-docked");
       this.container.append(container);
       el.parentElement.append(this.container);
-      document.addEventListener("click", this._handleDocumentClick);
+    }
+    // @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
@@ -6258,7 +6686,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/datepicker.ts
-  var _defaults17 = {
+  var _defaults20 = {
     // the default output format for the input field value
     format: "mmm dd, yyyy",
     // Used to create date object from current input string
@@ -6362,6 +6790,10 @@ var Expressive = (() => {
     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. */
       this._drawDepth = 0;
       /** Whether a draw was requested while batching. */
@@ -6428,7 +6860,9 @@ var Expressive = (() => {
         if (maxDate && date > maxDate) date.setTime(maxDate.getTime());
         if (date.getFullYear() < minYear || date.getFullYear() > maxYear || date.getFullYear() === minYear && date.getMonth() < (minMonth ?? 0) || date.getFullYear() === maxYear && date.getMonth() > (maxMonth ?? 11)) return;
         this._focusedDate = date;
-        this.gotoDate(date);
+        const { year, month } = this.calendars[0];
+        if (date.getFullYear() === year && date.getMonth() === month) this._syncCalendarFocus(true);
+        else this.gotoDate(date);
       };
       this._handleCalendarClick = (e) => {
         const target = e.target;
@@ -6440,7 +6874,7 @@ var Expressive = (() => {
               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) {
@@ -6538,12 +6972,12 @@ var Expressive = (() => {
           }
         }
       }
-      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 _defaults17;
+      return _defaults20;
     }
     /**
      * Initializes instances of Datepicker.
@@ -6696,7 +7130,8 @@ var Expressive = (() => {
         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);
@@ -6754,7 +7189,7 @@ var Expressive = (() => {
     setSingleDate(date, isEndDate) {
       if (!isEndDate) {
         this.date = date;
-      } else if (isEndDate) {
+      } else {
         this.endDate = date;
       }
     }
@@ -6763,13 +7198,11 @@ var Expressive = (() => {
      * @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);
     }
@@ -6811,6 +7244,7 @@ var Expressive = (() => {
       } 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,
@@ -6895,12 +7329,7 @@ var Expressive = (() => {
         }
       }
       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;
@@ -6944,10 +7373,9 @@ var Expressive = (() => {
         };
         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);
@@ -6964,7 +7392,7 @@ var Expressive = (() => {
         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");
@@ -6985,7 +7413,9 @@ var Expressive = (() => {
     }
     /** Assemble calendar cells; reject unsupported elements and attributes. */
     renderRow(days, isRTL, isRowSelected) {
-      return '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
+      const row = '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
+      this._checkedRows.add(row);
+      return row;
     }
     /** Assemble calendar rows; reject unsupported elements and attributes. */
     renderTable(opts, data, randId) {
@@ -7003,11 +7433,15 @@ var Expressive = (() => {
     }
     /** Wrap calendar rows after validating and encoding their contents. */
     renderBody(rows) {
-      return "<tbody>" + _Datepicker._calendarMarkup(rows.join(""), "tbody") + "</tbody>";
+      const html = rows.join("");
+      const safeHtml = _Datepicker._calendarMarkup(html, "tbody");
+      this._checkedRows.clear();
+      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"],
@@ -7021,8 +7455,8 @@ var Expressive = (() => {
           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))) {
@@ -7146,26 +7580,9 @@ var Expressive = (() => {
       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);
@@ -7220,12 +7637,8 @@ var Expressive = (() => {
       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);
@@ -7282,6 +7695,11 @@ var Expressive = (() => {
         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);
@@ -7338,9 +7756,7 @@ var Expressive = (() => {
       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;
     }
@@ -7359,7 +7775,7 @@ var Expressive = (() => {
   var Datepicker = _Datepicker;
 
   // src/ts/components/messageScroller.ts
-  var _defaults18 = {
+  var _defaults21 = {
     autoScroll: true,
     defaultScrollPosition: "end",
     peek: 64
@@ -7482,7 +7898,7 @@ var Expressive = (() => {
       this.button?.addEventListener("click", this._handleButtonClick);
     }
     static get defaults() {
-      return _defaults18;
+      return _defaults21;
     }
     /**
      * Initializes instances of MessageScroller.
@@ -7640,7 +8056,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/richTextEditor.ts
-  var _defaults19 = {
+  var _defaults22 = {
     Editor: null,
     extensions: []
   };
@@ -7720,7 +8136,7 @@ var Expressive = (() => {
       el.addEventListener("click", this._handleClick);
     }
     static get defaults() {
-      return _defaults19;
+      return _defaults22;
     }
     /**
      * Initializes instances of RichTextEditor.
@@ -7752,8 +8168,392 @@ var Expressive = (() => {
     }
   };
 
+  // src/ts/components/mapView.ts
+  var OPENFREEMAP = "https://tiles.openfreemap.org/styles/";
+  var _defaults23 = {
+    maplibregl: null,
+    style: { light: `${OPENFREEMAP}positron`, dark: `${OPENFREEMAP}dark` },
+    center: [0, 20],
+    zoom: 1,
+    mapOptions: {}
+  };
+  var lngLat = (el) => el.dataset.lngLat.split(",").map(Number);
+  function arc([x0, y0], [x2, y2], steps = 32) {
+    const bow = x2 >= x0 ? 0.25 : -0.25;
+    const x1 = (x0 + x2) / 2 - (y2 - y0) * bow;
+    const y1 = (y0 + y2) / 2 + (x2 - x0) * bow;
+    return Array.from({ length: steps + 1 }, (_, i) => {
+      const t = i / steps, u = 1 - t;
+      return [u * u * x0 + 2 * u * t * x1 + t * t * x2, u * u * y0 + 2 * u * t * y1 + t * t * y2];
+    });
+  }
+  var MapView = class _MapView extends Component {
+    constructor(el, options) {
+      super(el, options, _MapView);
+      /** The MapLibre map. */
+      this.map = null;
+      /** The MapLibre markers made from `.map-marker` children, in order. */
+      this.markers = [];
+      this._children = [];
+      this._popups = [];
+      this._markerPopups = /* @__PURE__ */ new Map();
+      this._overlays = /* @__PURE__ */ new Map();
+      this._styleReady = false;
+      this._dark = false;
+      this._location = null;
+      this._media = null;
+      this._observer = null;
+      // Looked up once: `move` fires every frame of a pan or zoom.
+      this._zoomIn = [];
+      this._zoomOut = [];
+      this._handleStyleLoad = () => {
+        this._styleReady = true;
+        for (const overlay2 of this._overlays.values()) overlay2.draw();
+      };
+      this._handleScheme = () => {
+        const dark = this._isDark();
+        if (dark === this._dark) return;
+        this._dark = dark;
+        this._styleReady = false;
+        this.map.setStyle(this._style(), { diff: false });
+      };
+      this._sync = () => {
+        const zoom = this.map.getZoom();
+        for (const button of this._zoomIn) button.disabled = zoom >= this.map.getMaxZoom();
+        for (const button of this._zoomOut) button.disabled = zoom <= this.map.getMinZoom();
+        this.el.style.setProperty("--md-comp-map-bearing", `${-this.map.getBearing()}deg`);
+      };
+      this._handleFullscreen = () => {
+        for (const button of this._buttons("fullscreen")) {
+          button.setAttribute("aria-pressed", String(document.fullscreenElement === this.el));
+        }
+      };
+      this._handleClick = (e) => {
+        const target = e.target;
+        const button = target.closest(".map-controls [data-action]");
+        const action = button?.dataset.action;
+        if (action === "zoom-in") this.map.zoomIn();
+        else if (action === "zoom-out") this.map.zoomOut();
+        else if (action === "compass") this.map.resetNorthPitch();
+        else if (action === "locate") this._locate(button);
+        else if (action === "fullscreen") {
+          if (document.fullscreenElement === this.el) document.exitFullscreen();
+          else this.el.requestFullscreen();
+        } else {
+          const marker = target.closest(".map-marker");
+          if (this._markerPopups.has(marker)) this._toggle(marker);
+        }
+      };
+      // A click on the map closes marker popups, but not the one being toggled.
+      this._handleMapClick = (e) => {
+        const target = e.originalEvent.target;
+        for (const [marker, popup] of this._markerPopups) {
+          if (!marker.contains(target) && !popup.getElement()?.contains(target)) popup.remove();
+        }
+      };
+      this._handleKeydown = (e) => {
+        if (e.key !== "Escape") return;
+        for (const popup of this._popups) {
+          if (popup.getElement()?.contains(e.target)) {
+            e.preventDefault();
+            popup.remove();
+          }
+        }
+      };
+      this.el["Expressive_MapView"] = this;
+      this.options = {
+        ..._MapView.defaults,
+        ...options
+      };
+      const lib = this.options.maplibregl;
+      if (!lib) {
+        console.error("MapView needs the maplibre-gl module in options.maplibregl.");
+        return;
+      }
+      this._children = [...el.children];
+      this._zoomIn = [...this._buttons("zoom-in")];
+      this._zoomOut = [...this._buttons("zoom-out")];
+      this._dark = this._isDark();
+      this.map = new lib.Map({
+        ...this.options.mapOptions,
+        container: el,
+        style: this._style(),
+        center: this.options.center,
+        zoom: this.options.zoom
+      });
+      this.map.on("style.load", this._handleStyleLoad);
+      this.map.on("move", this._sync);
+      this.map.on("click", this._handleMapClick);
+      const children = this._children.filter((child) => child instanceof HTMLElement);
+      const claimed = /* @__PURE__ */ new Set();
+      for (const marker of children.filter((child) => child.matches(".map-marker[data-lng-lat]"))) {
+        const target = marker.hasAttribute("aria-controls") ? Utils.getElementById(marker, marker.getAttribute("aria-controls")) : null;
+        const popup = target?.parentElement === el && target.matches(".map-popup") ? target : null;
+        if (popup) claimed.add(popup);
+        this._addMarker(marker, popup);
+      }
+      for (const popup of children.filter((child) => child.matches(".map-popup[data-lng-lat]") && !claimed.has(child))) {
+        this._popup(popup, 0).setLngLat(lngLat(popup)).addTo(this.map);
+      }
+      if (this._themed()) {
+        this._media = matchMedia("(prefers-color-scheme: dark)");
+        this._media.addEventListener("change", this._handleScheme);
+        this._observer = new MutationObserver(this._handleScheme);
+        this._observer.observe(document.documentElement, { attributes: true, attributeFilter: ["theme"], subtree: true });
+      }
+      for (const button of this._buttons("fullscreen")) button.hidden = !document.fullscreenEnabled;
+      document.addEventListener("fullscreenchange", this._handleFullscreen);
+      el.addEventListener("click", this._handleClick);
+      el.addEventListener("keydown", this._handleKeydown);
+      this._sync();
+    }
+    static get defaults() {
+      return _defaults23;
+    }
+    /**
+     * Initializes instances of MapView.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+      return super.init(els, options, _MapView);
+    }
+    static getInstance(el) {
+      return el["Expressive_MapView"];
+    }
+    destroy() {
+      this.el["Expressive_MapView"] = void 0;
+      if (!this.map) return;
+      this.el.removeEventListener("click", this._handleClick);
+      this.el.removeEventListener("keydown", this._handleKeydown);
+      document.removeEventListener("fullscreenchange", this._handleFullscreen);
+      this._media?.removeEventListener("change", this._handleScheme);
+      this._observer?.disconnect();
+      for (const overlay2 of this._overlays.values()) overlay2.off?.();
+      for (const popup of this._popups) popup.remove();
+      for (const marker of this.markers) {
+        marker.remove();
+        const element = marker.getElement();
+        element.classList.remove(...[...element.classList].filter((name) => name.startsWith("maplibregl-")));
+        element.style.removeProperty("transform");
+        element.style.removeProperty("opacity");
+        if (element.hasAttribute("aria-controls")) element.removeAttribute("aria-expanded");
+      }
+      this._location?.remove();
+      this._location = null;
+      this.map.remove();
+      this.map = null;
+      this.markers = [];
+      this._popups = [];
+      this._markerPopups.clear();
+      this._overlays.clear();
+      this.el.style.removeProperty("--md-comp-map-bearing");
+      for (const button of this.el.querySelectorAll(".map-controls [data-action]")) {
+        button.disabled = false;
+        button.hidden = false;
+        button.removeAttribute("aria-pressed");
+      }
+      this.el.append(...this._children);
+    }
+    /** Draws a line through `[longitude, latitude]` points. Replaces an overlay with the same id. */
+    addRoute(id, coordinates, options = {}) {
+      this._line(id, { type: "LineString", coordinates }, "route", { width: 4, ...options });
+    }
+    /** Draws a curved line for each `{ from, to }`. Replaces an overlay with the same id. */
+    addArcs(id, arcs, options = {}) {
+      this._line(id, { type: "MultiLineString", coordinates: arcs.map(({ from, to }) => arc(from, to)) }, "arc", { width: 2, ...options });
+    }
+    /**
+     * Draws GeoJSON points, or the URL of a GeoJSON file, as clusters that
+     * show their count and zoom in when clicked. The layers are
+     * `${id}-clusters`, `${id}-count` and `${id}-points`.
+     */
+    addClusters(id, data, options = {}) {
+      const clusters = `${id}-clusters`, points = `${id}-points`;
+      const zoomIn = async (e) => {
+        const [feature] = e.features;
+        const zoom = await this.map.getSource(id).getClusterExpansionZoom(feature.properties.cluster_id);
+        this.map.easeTo({ center: feature.geometry.coordinates, zoom });
+      };
+      const pointer = () => {
+        this.map.getCanvas().style.cursor = "pointer";
+      };
+      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)");
+          const surface = this._color("var(--md-comp-map-marker-ring-color)");
+          this.map.addSource(id, {
+            type: "geojson",
+            data,
+            cluster: true,
+            clusterRadius: options.radius ?? 50,
+            clusterMaxZoom: options.maxZoom ?? 14
+          });
+          this.map.addLayer({
+            id: clusters,
+            type: "circle",
+            source: id,
+            filter: ["has", "point_count"],
+            paint: {
+              "circle-color": color,
+              "circle-radius": ["step", ["get", "point_count"], 16, 10, 20, 100, 26],
+              "circle-stroke-width": 6,
+              "circle-stroke-color": color,
+              "circle-stroke-opacity": 0.3
+            }
+          });
+          const style = this.map.getStyle();
+          const font = style.glyphs && style.layers.find((layer) => layer.layout?.["text-font"])?.layout["text-font"];
+          if (font) {
+            this.map.addLayer({
+              id: `${id}-count`,
+              type: "symbol",
+              source: id,
+              filter: ["has", "point_count"],
+              layout: { "text-field": ["get", "point_count_abbreviated"], "text-font": font, "text-size": 12 },
+              paint: { "text-color": this._color("var(--md-comp-map-cluster-label-color)") }
+            });
+          }
+          this.map.addLayer({
+            id: points,
+            type: "circle",
+            source: id,
+            filter: ["!", ["has", "point_count"]],
+            paint: { "circle-color": color, "circle-radius": 6, "circle-stroke-width": 2, "circle-stroke-color": surface }
+          });
+        },
+        off: () => listen("off")
+      });
+      listen("on");
+    }
+    /** Removes a route, arcs or clusters added with this id. */
+    removeOverlay(id) {
+      const overlay2 = this._overlays.get(id);
+      if (!overlay2) return;
+      this._overlays.delete(id);
+      overlay2.off?.();
+      if (!this._styleReady || !this.map.getSource(id)) return;
+      for (const layer of this.map.getStyle().layers) if (layer.source === id) this.map.removeLayer(layer.id);
+      this.map.removeSource(id);
+    }
+    _line(id, geometry, token, options) {
+      this._draw(id, {
+        draw: () => {
+          this.map.addSource(id, { type: "geojson", data: { type: "Feature", properties: {}, geometry } });
+          this.map.addLayer({
+            id,
+            type: "line",
+            source: id,
+            layout: { "line-cap": "round", "line-join": "round" },
+            paint: {
+              "line-color": options.color ?? this._color(`var(--md-comp-map-${token}-color)`),
+              "line-width": options.width,
+              "line-opacity": options.opacity ?? 1,
+              ...options.dashArray && { "line-dasharray": options.dashArray }
+            }
+          });
+        }
+      });
+    }
+    // Sources and layers go with the style, so every overlay is drawn again
+    // when a theme change swaps it.
+    _draw(id, overlay2) {
+      this.removeOverlay(id);
+      this._overlays.set(id, overlay2);
+      if (this._styleReady) overlay2.draw();
+    }
+    _addMarker(element, content) {
+      const marker = new this.options.maplibregl.Marker({
+        element,
+        draggable: element.hasAttribute("data-draggable")
+      }).setLngLat(lngLat(element)).addTo(this.map);
+      marker.on("dragend", () => {
+        const { lng, lat } = marker.getLngLat();
+        element.dataset.lngLat = `${lng},${lat}`;
+        element.dispatchEvent(new Event("change", { bubbles: true }));
+      });
+      this.markers.push(marker);
+      if (!content) return;
+      element.setAttribute("aria-expanded", "false");
+      const popup = this._popup(content, 16);
+      popup.on("open", () => element.setAttribute("aria-expanded", "true"));
+      popup.on("close", () => {
+        element.setAttribute("aria-expanded", "false");
+        if (!document.activeElement || document.activeElement === document.body) element.focus();
+      });
+      this._markerPopups.set(element, popup);
+    }
+    _popup(content, offset) {
+      const popup = new this.options.maplibregl.Popup({ closeOnClick: false, maxWidth: "none", offset }).setDOMContent(content);
+      this._popups.push(popup);
+      return popup;
+    }
+    _toggle(marker) {
+      const popup = this._markerPopups.get(marker);
+      if (popup.isOpen()) popup.remove();
+      else popup.setLngLat(this.markers.find((m) => m.getElement() === marker).getLngLat()).addTo(this.map);
+    }
+    _buttons(action) {
+      return this.el.querySelectorAll(`.map-controls [data-action="${action}"]`);
+    }
+    _locate(button) {
+      navigator.geolocation?.getCurrentPosition(
+        ({ coords }) => {
+          if (!this.map) return;
+          const center = [coords.longitude, coords.latitude];
+          if (!this._location) {
+            const dot = document.createElement("span");
+            dot.className = "map-marker location";
+            dot.setAttribute("aria-hidden", "true");
+            this._location = new this.options.maplibregl.Marker({ element: dot });
+          }
+          this._location.setLngLat(center).addTo(this.map);
+          this.map.flyTo({ center, zoom: Math.max(this.map.getZoom(), 14) });
+        },
+        (error) => {
+          if (this.map && error.code === error.PERMISSION_DENIED) button.disabled = true;
+        }
+      );
+    }
+    // Resolves a CSS color where the map is, so light-dark() and scoped
+    // themes apply, then paints it on a canvas to read back the sRGB value.
+    // MapLibre does not parse the oklch() the theme tokens compute to.
+    _color(value) {
+      const probe = document.createElement("span");
+      probe.hidden = true;
+      probe.style.color = value;
+      this.el.append(probe);
+      const context = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+      context.fillStyle = getComputedStyle(probe).color;
+      probe.remove();
+      context.fillRect(0, 0, 1, 1);
+      const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+      return `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 100) / 100})`;
+    }
+    _isDark() {
+      return this._color("light-dark(black, white)") === "rgba(255, 255, 255, 1)";
+    }
+    _themed() {
+      const style = this.options.style;
+      return typeof style === "object" && "light" in style && "dark" in style;
+    }
+    _style() {
+      return this._themed() ? this.options.style[this._dark ? "dark" : "light"] : this.options.style;
+    }
+  };
+
   // src/ts/components/lightbox.ts
-  var _defaults20 = {
+  var _defaults24 = {
     inDuration: 275,
     outDuration: 200,
     onOpenStart: null,
@@ -7783,9 +8583,6 @@ var Expressive = (() => {
           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();
@@ -7796,10 +8593,7 @@ var Expressive = (() => {
         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) => {
@@ -7847,8 +8641,6 @@ var Expressive = (() => {
         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;
@@ -7858,8 +8650,8 @@ var Expressive = (() => {
           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();
       };
@@ -7874,11 +8666,11 @@ var Expressive = (() => {
         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;
@@ -7902,7 +8694,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults20;
+      return _defaults24;
     }
     /**
      * Initializes instances of Lightbox.
@@ -7932,8 +8724,8 @@ var Expressive = (() => {
       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();
@@ -7945,8 +8737,8 @@ var Expressive = (() => {
         }
       }
       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");
@@ -7973,18 +8765,18 @@ var Expressive = (() => {
     }
     _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") };
@@ -8058,18 +8850,7 @@ var Expressive = (() => {
       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() {
@@ -8089,18 +8870,21 @@ var Expressive = (() => {
       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();
@@ -8108,7 +8892,7 @@ var Expressive = (() => {
 
   // src/ts/components/scrollspy.ts
   var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-  var _defaults21 = {
+  var _defaults25 = {
     scrollOffset: 200,
     activeClass: "active",
     getActiveElement: _defaultGetActiveElement,
@@ -8144,7 +8928,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults21;
+      return _defaults25;
     }
     static init(els, options = {}) {
       return super.init(els, options, _ScrollSpy);
@@ -8178,8 +8962,9 @@ var Expressive = (() => {
         const retained = elements.filter((spy) => spy.options.keepTopElementActive);
         best = _ScrollSpy._nearestAbove(retained) ?? retained[0];
       }
-      const next = best ? _ScrollSpy._linkFor(best.el.id, best.options) : null;
       const active = _ScrollSpy._active.get(resolver);
+      if (best && active === best && best._link?.isConnected) return;
+      const next = best ? _ScrollSpy._linkFor(best.el.id, best.options) : null;
       if (active === best && active?._link === next) return;
       _ScrollSpy._clearActive(resolver);
       if (!next) return;
@@ -8222,11 +9007,7 @@ var Expressive = (() => {
         }
       }
       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 = [];
@@ -8234,13 +9015,18 @@ var Expressive = (() => {
   var ScrollSpy = _ScrollSpy;
 
   // src/ts/components/navigationRail.ts
-  var _defaults22 = {
+  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);
@@ -8284,7 +9070,7 @@ var Expressive = (() => {
       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;
@@ -8298,12 +9084,9 @@ var Expressive = (() => {
         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();
           }
         }
@@ -8321,7 +9104,7 @@ var Expressive = (() => {
       document.addEventListener("keydown", this._onKeyDown);
     }
     static get defaults() {
-      return _defaults22;
+      return _defaults26;
     }
     static init(els, options = {}) {
       return super.init(els, options, _NavigationRail);
@@ -8351,7 +9134,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/tabs.ts
-  var _defaults23 = {
+  var _defaults27 = {
     duration: 300,
     onShow: null,
     swipeable: false,
@@ -8364,13 +9147,12 @@ var Expressive = (() => {
       super(el, options, _Tabs);
       this._originalPanels = /* @__PURE__ */ new Map();
       this._originalLinks = /* @__PURE__ */ new Map();
-      this._handleWindowResize = () => {
+      // Throttled like Carousel's: every bar re-measures on resize, and the left
+      // and right positions are both read before either is written.
+      this._handleWindowResize = Utils.throttle(() => {
         this._setTabsAndTabWidth();
-        if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
-          this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + "px";
-          this._indicator.style.right = this._calcRightPos(this._activeTabLink) + "px";
-        }
-      };
+        if (this._tabWidth !== 0 && this._tabsWidth !== 0) this._positionIndicator();
+      }, 200);
       this._handleTabClick = (e) => {
         const target = e.target;
         if (!target) return;
@@ -8384,8 +9166,7 @@ var Expressive = (() => {
         }
         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;
@@ -8414,10 +9195,13 @@ var Expressive = (() => {
         ...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"),
@@ -8425,7 +9209,7 @@ var Expressive = (() => {
           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) {
@@ -8436,9 +9220,12 @@ var Expressive = (() => {
       this._setTabsAndTabWidth();
       this._createIndicator();
       this._setupEventHandlers();
+      document.fonts?.ready.then(() => {
+        if (this.el["Expressive_Tabs"] === this) this._handleWindowResize();
+      });
     }
     static get defaults() {
-      return _defaults23;
+      return _defaults27;
     }
     /**
      * Initializes instances of Tabs.
@@ -8453,8 +9240,8 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
-      this._indicator.remove();
-      if (this.options.swipeable) {
+      this._indicator?.remove();
+      if (this._tabsCarousel) {
         this._teardownSwipeableTabs();
       }
       this._originalPanels.forEach((original, panel) => {
@@ -8495,8 +9282,19 @@ var Expressive = (() => {
       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.
@@ -8518,31 +9316,20 @@ var Expressive = (() => {
       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");
@@ -8576,11 +9363,9 @@ var Expressive = (() => {
     }
     _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() {
@@ -8609,23 +9394,20 @@ var Expressive = (() => {
       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 _defaults24 = {
+  var _defaults28 = {
     dialRadius: 135,
     outerRadius: 105,
     innerRadius: 70,
@@ -8708,8 +9490,7 @@ var Expressive = (() => {
         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) {
@@ -8728,7 +9509,6 @@ var Expressive = (() => {
         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
@@ -8740,9 +9520,7 @@ var Expressive = (() => {
         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);
@@ -8816,12 +9594,12 @@ var Expressive = (() => {
       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 _defaults24;
+      return _defaults28;
     }
     /**
      * Initializes instances of Timepicker.
@@ -8865,6 +9643,9 @@ var Expressive = (() => {
       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);
@@ -8996,25 +9777,22 @@ var Expressive = (() => {
       }
     }
     _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"));
@@ -9081,53 +9859,31 @@ var Expressive = (() => {
     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) {
@@ -9183,7 +9939,7 @@ var Expressive = (() => {
   var Timepicker = _Timepicker;
 
   // src/ts/components/snackbar.ts
-  var _defaults25 = {
+  var _defaults29 = {
     text: "",
     action: "",
     onAction: null,
@@ -9233,7 +9989,7 @@ var Expressive = (() => {
       this._setTimer();
     }
     static get defaults() {
-      return _defaults25;
+      return _defaults29;
     }
     static getInstance(el) {
       return el["Expressive_Snackbar"];
@@ -9273,6 +10029,7 @@ var Expressive = (() => {
         snackbar.velocityX = 0;
         snackbar.time = Date.now();
         snackbar.xPos = e.clientX;
+        snackbar._activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
       }
     }
     static _onDragMove(e) {
@@ -9285,7 +10042,7 @@ var Expressive = (() => {
         snackbar.velocityX = snackbar.deltaX / (Date.now() - snackbar.time);
         snackbar.time = Date.now();
         const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
-        const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
+        const activationDistance = snackbar._activationDistance;
         snackbar.el.style.transform = `translateX(${totalDeltaX}px)`;
         snackbar.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
       }
@@ -9298,17 +10055,14 @@ var Expressive = (() => {
         snackbar.panning = false;
         snackbar.el.classList.remove("panning");
         const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
-        const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
+        const activationDistance = snackbar._activationDistance;
         const velocity = Date.now() - snackbar.time < 100 ? snackbar.velocityX : 0;
         const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || velocity > 1;
         if (shouldBeDismissed) {
           snackbar.wasSwiped = true;
           snackbar.dismiss();
         } else {
-          snackbar.el.style.transition = "transform .2s, opacity .2s";
-          snackbar.el.style.transform = "";
-          snackbar.el.style.opacity = "";
-          snackbar._resumeTimer();
+          snackbar._snapBack();
         }
         _Snackbar._draggedSnackbar = null;
       }
@@ -9325,12 +10079,15 @@ var Expressive = (() => {
       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.
      */
@@ -9500,15 +10257,15 @@ var Expressive = (() => {
       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";
@@ -9530,7 +10287,7 @@ var Expressive = (() => {
   var Snackbar = _Snackbar;
 
   // src/ts/components/tooltip.ts
-  var _defaults26 = {
+  var _defaults30 = {
     exitDelay: 200,
     enterDelay: 0,
     text: "",
@@ -9552,6 +10309,7 @@ var Expressive = (() => {
         clearTimeout(this._exitDelayTimeout);
         clearTimeout(this._animationTimeout);
         this.isOpen = true;
+        this.el.ownerDocument.addEventListener("keydown", this._handleKeydown, true);
         this.options = { ...this.options, ...this._getAttributeOptions() };
         this._updateTooltipContent();
         this._setEnterDelayTimeout(isManual);
@@ -9564,6 +10322,7 @@ var Expressive = (() => {
         this.isHovered = false;
         this.isFocused = false;
         this.isOpen = false;
+        this.el.ownerDocument.removeEventListener("keydown", this._handleKeydown, true);
         clearTimeout(this._enterDelayTimeout);
         this._setExitDelayTimeout();
       };
@@ -9612,7 +10371,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults26;
+      return _defaults30;
     }
     /**
      * Initializes instances of Tooltip.
@@ -9658,8 +10417,12 @@ var Expressive = (() => {
       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);
@@ -9680,7 +10443,7 @@ var Expressive = (() => {
       Utils.portalRoot(this.el).appendChild(this.tooltipEl);
     }
     _setTooltipContent(tooltipContentEl) {
-      if (this.options.tooltipId) return;
+      if (this._originalContent) return;
       tooltipContentEl.innerText = this.options.text;
     }
     _updateTooltipContent() {
@@ -9693,7 +10456,6 @@ var Expressive = (() => {
         el.addEventListener("focus", this._handleFocus, true);
         el.addEventListener("blur", this._handleBlur, true);
       }
-      this.el.ownerDocument.addEventListener("keydown", this._handleKeydown, true);
     }
     _removeEventHandlers() {
       for (const el of [this.el, this.tooltipEl]) {
@@ -9831,6 +10593,9 @@ var Expressive = (() => {
     },
     Carousel: { component: Carousel, selector: ".carousel" },
     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" },
@@ -9889,7 +10654,7 @@ var Expressive = (() => {
   }
 
   // src/ts/modular.ts
-  var version = "0.13.1";
+  var version = "0.15.0";
 
   // src/ts/index.ts
   Forms.Init();