@expressivecss/expressive 0.12.0 → 0.14.1

package/dist/js/expressive.js

@@ -23,22 +23,37 @@ var Expressive = (() => {
     AppBar: () => AppBar,
     AutoInit: () => AutoInit,
     Autocomplete: () => Autocomplete,
+    BarChart: () => BarChart,
     BottomSheets: () => BottomSheets,
     ButtonGroup: () => ButtonGroup,
     Cards: () => Cards,
     Carousel: () => Carousel,
     CharacterCounter: () => CharacterCounter,
     Chips: () => Chips,
+    ColumnChart: () => ColumnChart,
+    CommandPalette: () => CommandPalette,
+    Confetti: () => Confetti,
     Datepicker: () => Datepicker,
     Dialogs: () => Dialogs,
     ExpandingCard: () => ExpandingCard,
     FloatingActionButton: () => FloatingActionButton,
     FormSelect: () => FormSelect,
     Forms: () => Forms,
+    HeatmapChart: () => HeatmapChart,
     Lightbox: () => Lightbox,
+    LineChart: () => LineChart,
+    MapView: () => MapView,
     Menu: () => Menu,
+    MessageScroller: () => MessageScroller,
+    MixedChart: () => MixedChart,
     NavigationRail: () => NavigationRail,
+    Particles: () => Particles,
+    PieChart: () => PieChart,
+    Questionnaire: () => Questionnaire,
+    RadarChart: () => RadarChart,
+    RadialChart: () => RadialChart,
     Range: () => Slider,
+    RichTextEditor: () => RichTextEditor,
     ScrollSpy: () => ScrollSpy,
     SideSheets: () => SideSheets,
     Slider: () => Slider,
@@ -227,9 +242,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);
@@ -240,7 +255,7 @@ var Expressive = (() => {
         } else if (!timeout) {
           lastArgs = args;
           timeout = setTimeout(() => {
-            previous = Date.now();
+            previous = performance.now();
             timeout = null;
             func(...lastArgs ?? []);
             lastArgs = null;
@@ -772,6 +787,7 @@ var Expressive = (() => {
     coverTrigger: false,
     closeOnClick: true,
     hover: false,
+    contextMenu: false,
     inDuration: 150,
     outDuration: 250,
     onOpenStart: null,
@@ -787,6 +803,40 @@ var Expressive = (() => {
       this._pendingTimers = /* @__PURE__ */ new Set();
       this._transition = 0;
       this._menuClickTargets = /* @__PURE__ */ new WeakMap();
+      /**
+       * Viewport point the open context menu belongs to. Null outside a
+       * right-click, so a keyboard or programmatic open uses the region's corner
+       * rather than an old pointer position.
+       */
+      this._contextPoint = null;
+      /** What had focus when a context menu opened; focus goes back there. */
+      this._contextReturn = null;
+      this._handleContextMenu = (e) => {
+        if (e.defaultPrevented) {
+          this.close();
+          return;
+        }
+        const path = e.composedPath();
+        if (_Menu._menus.some((menu) => menu !== this && menu.isOpen && path.includes(menu.menuEl))) return;
+        e.preventDefault();
+        if (!this.isOpen) {
+          const root = this.el.getRootNode();
+          this._contextReturn = root.activeElement instanceof HTMLElement ? root.activeElement : null;
+        }
+        const rect = this.el.getBoundingClientRect();
+        const fromPointer = (e.clientX !== 0 || e.clientY !== 0) && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+        this._contextPoint = fromPointer ? { x: e.clientX, y: e.clientY } : null;
+        if (this.isOpen) this.recalculateDimensions();
+        else this.open();
+      };
+      this._handleDocumentContextMenu = (e) => {
+        const path = e.composedPath();
+        if (path.includes(this.menuEl)) {
+          e.preventDefault();
+          return;
+        }
+        if (!path.includes(this.el)) this.close();
+      };
       this._handleClick = (e) => {
         e.preventDefault();
         if (this.isOpen) {
@@ -833,6 +883,7 @@ var Expressive = (() => {
         this.isTouchMoving = false;
       };
       this._handleTriggerKeydown = (e) => {
+        if (this.options.contextMenu) return;
         const opensMenu = e.key === SPACE || e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
         if (opensMenu && !this.isOpen) {
           e.preventDefault();
@@ -991,7 +1042,7 @@ var Expressive = (() => {
         this._placeMenu();
         this._schedule(() => this._setupTemporaryEventHandlers(), 0);
         this._animateIn();
-        this.el.ariaExpanded = "true";
+        this._setExpanded(true);
       };
       /**
        * Close menu.
@@ -1013,10 +1064,13 @@ var Expressive = (() => {
         if (transition !== this._transition) return;
         this._animateOut();
         this._removeTemporaryEventHandlers();
-        this.el.ariaExpanded = "false";
+        this._setExpanded(false);
         if (this.options.autoFocus && this.menuEl.contains(focused) && (root.activeElement === focused || this.el.ownerDocument.activeElement === this.el.ownerDocument.body)) {
-          this.el.focus();
+          const back = this._contextReturn;
+          (back?.isConnected && back !== this.el.ownerDocument.body ? back : this.el).focus();
         }
+        this._contextReturn = null;
+        this._contextPoint = null;
       };
       /**
        * While menu is open, you can recalculate its dimensions if its contents have changed.
@@ -1034,6 +1088,7 @@ var Expressive = (() => {
       this._originalInert = this.menuEl?.getAttribute("inert") ?? null;
       this.options = {
         ..._Menu.defaults,
+        contextMenu: el.hasAttribute("data-context-menu"),
         ...options
       };
       this.isOpen = false;
@@ -1041,10 +1096,12 @@ var Expressive = (() => {
       this.isTouchMoving = false;
       this.focusedIndex = -1;
       this.filterQuery = [];
-      this.el.ariaExpanded = "false";
-      if (!this.el.hasAttribute("aria-haspopup")) this.el.setAttribute("aria-haspopup", "menu");
-      if (this.id && !this.el.hasAttribute("aria-controls"))
-        this.el.setAttribute("aria-controls", this.id);
+      if (!this.options.contextMenu) {
+        this.el.ariaExpanded = "false";
+        if (!this.el.hasAttribute("aria-haspopup")) this.el.setAttribute("aria-haspopup", "menu");
+        if (this.id && !this.el.hasAttribute("aria-controls"))
+          this.el.setAttribute("aria-controls", this.id);
+      }
       this._moveMenuToElement();
       this._setupAccessibility();
       this._makeMenuFocusable();
@@ -1068,7 +1125,7 @@ var Expressive = (() => {
     destroy() {
       this._clearPendingTimers();
       this.isOpen = false;
-      this.el.ariaExpanded = "false";
+      this._setExpanded(false);
       clearTimeout(this.filterTimeout);
       this._resetMenuStyles();
       this._restoreInert();
@@ -1084,7 +1141,9 @@ var Expressive = (() => {
       if (this.menuEl?.querySelector(":scope > li > menu")) {
         this.menuEl.addEventListener("mouseover", this._handleSubmenuAlign);
       }
-      if (this.options.hover) {
+      if (this.options.contextMenu) {
+        this.el.addEventListener("contextmenu", this._handleContextMenu);
+      } else if (this.options.hover) {
         this.el.addEventListener("mouseenter", this._handleMouseEnter);
         this.el.addEventListener("mouseleave", this._handleMouseLeave);
         this.menuEl.addEventListener("mouseleave", this._handleMouseLeave);
@@ -1096,7 +1155,9 @@ var Expressive = (() => {
       this.el.removeEventListener("keydown", this._handleTriggerKeydown);
       this.menuEl?.removeEventListener("click", this._handleMenuClick);
       this.menuEl?.removeEventListener("mouseover", this._handleSubmenuAlign);
-      if (this.options.hover) {
+      if (this.options.contextMenu) {
+        this.el.removeEventListener("contextmenu", this._handleContextMenu);
+      } else if (this.options.hover) {
         this.el.removeEventListener("mouseenter", this._handleMouseEnter);
         this.el.removeEventListener("mouseleave", this._handleMouseLeave);
         this.menuEl?.removeEventListener("mouseleave", this._handleMouseLeave);
@@ -1112,6 +1173,7 @@ var Expressive = (() => {
       });
       this.menuEl?.addEventListener("keydown", this._handleMenuKeydown);
       window.addEventListener("resize", this._handleWindowResize);
+      if (this.options.contextMenu) document.addEventListener("contextmenu", this._handleDocumentContextMenu);
     }
     _removeTemporaryEventHandlers() {
       document.body.removeEventListener("click", this._handleDocumentClick);
@@ -1119,6 +1181,7 @@ var Expressive = (() => {
       document.body.removeEventListener("touchmove", this._handleDocumentTouchmove);
       this.menuEl?.removeEventListener("keydown", this._handleMenuKeydown);
       window.removeEventListener("resize", this._handleWindowResize);
+      document.removeEventListener("contextmenu", this._handleDocumentContextMenu);
     }
     _setupAccessibility() {
       if (!this.menuEl) return;
@@ -1216,6 +1279,7 @@ var Expressive = (() => {
       item.scrollIntoView({ block: "nearest", inline: "nearest" });
     }
     _resetMenuStyles() {
+      if (!this.menuEl) return;
       this.menuEl.style.display = "";
       this._resetMenuPositioningStyles();
       this.menuEl.style.transform = "";
@@ -1408,8 +1472,12 @@ var Expressive = (() => {
         closestOverflowParent.style.position = "relative";
       const natural = this.menuEl.getBoundingClientRect().width;
       const triggerWidth = this.el.getBoundingClientRect().width;
-      const idealWidth = this.options.constrainWidth && triggerWidth >= MIN_SURFACE_WIDTH ? triggerWidth : Math.min(MAX_SURFACE_WIDTH, Math.max(MIN_SURFACE_WIDTH, natural));
+      const idealWidth = this.options.constrainWidth && !this.options.contextMenu && triggerWidth >= MIN_SURFACE_WIDTH ? triggerWidth : Math.min(MAX_SURFACE_WIDTH, Math.max(MIN_SURFACE_WIDTH, natural));
       this.menuEl.style.width = idealWidth + "px";
+      if (this.options.contextMenu) {
+        this._placeMenuAtPoint(this._contextPoint ?? this._regionCorner(), closestOverflowParent);
+        return;
+      }
       const positionInfo = this._getMenuPosition(closestOverflowParent);
       this.menuEl.style.left = positionInfo.x + "px";
       this.menuEl.style.top = positionInfo.y + "px";
@@ -1417,6 +1485,58 @@ var Expressive = (() => {
       this.menuEl.style.width = positionInfo.width + "px";
       this.menuEl.style.transformOrigin = `${positionInfo.horizontalAlignment === "left" ? "0" : "100%"} ${positionInfo.verticalAlignment === "top" ? "0" : "100%"}`;
     }
+    /** Where a context menu opens without a pointer: the region's start corner. */
+    _regionCorner() {
+      const rect = this.el.getBoundingClientRect();
+      const rtl = getComputedStyle(this.el).direction === "rtl";
+      return { x: rtl ? rect.right : rect.left, y: rect.bottom };
+    }
+    /**
+     * Places a context menu with its start corner on the point, flipping to
+     * the other side of the point where it would not fit. The bounds are the
+     * viewport, narrowed to a scrolling or clipping ancestor the menu sits in;
+     * a menu taller than them gets their height and scrolls.
+     *
+     * The menu rests at left/top 0 of its containing block, so its rect is the
+     * offset to subtract - the same trick _getMenuPosition uses. It is measured
+     * without the entry animation's scale, which a second right-click can catch.
+     */
+    _placeMenuAtPoint({ x, y }, container) {
+      const { transform, transition } = this.menuEl.style;
+      this.menuEl.style.transition = "none";
+      this.menuEl.style.transform = "none";
+      const menu = this.menuEl.getBoundingClientRect();
+      this.menuEl.style.transform = transform;
+      this.menuEl.style.transition = transition;
+      let bounds = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+      if (container && getComputedStyle(container).overflow !== "visible") {
+        const clip = container.getBoundingClientRect();
+        bounds = {
+          left: Math.max(bounds.left, clip.left),
+          top: Math.max(bounds.top, clip.top),
+          right: Math.min(bounds.right, clip.right),
+          bottom: Math.min(bounds.bottom, clip.bottom)
+        };
+      }
+      const width = menu.width;
+      const height = Math.min(menu.height, bounds.bottom - bounds.top);
+      this.isScrollable = height < menu.height;
+      if (this.isScrollable) this.menuEl.style.height = height + "px";
+      const rtl = getComputedStyle(this.el).direction === "rtl";
+      const fitsRight = x + width <= bounds.right;
+      const fitsLeft = x - width >= bounds.left;
+      const leftward = rtl ? fitsLeft || !fitsRight : !fitsRight && fitsLeft;
+      const upward = y + height > bounds.bottom && y - height >= bounds.top;
+      const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+      const left = clamp(leftward ? x - width : x, bounds.left, bounds.right - width);
+      const top = clamp(upward ? y - height : y, bounds.top, bounds.bottom - height);
+      this.menuEl.style.left = left - menu.left + "px";
+      this.menuEl.style.top = top - menu.top + "px";
+      this.menuEl.style.transformOrigin = `${leftward ? "100%" : "0"} ${upward ? "100%" : "0"}`;
+    }
+    _setExpanded(expanded) {
+      if (!this.options.contextMenu) this.el.ariaExpanded = String(expanded);
+    }
   };
   _Menu._menus = [];
   var Menu = _Menu;
@@ -1471,8 +1591,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);
       };
@@ -1782,11 +1903,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]) {
@@ -1878,7 +2012,7 @@ var Expressive = (() => {
         );
       }
       if (this.options.isMultiSelect) {
-        this._renderMenu();
+        if (!open) this._renderMenu();
       } else {
         this._refreshInputText();
       }
@@ -2276,12 +2410,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;
@@ -2345,8 +2477,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);
@@ -2355,8 +2486,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);
@@ -2524,7 +2654,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;
@@ -2685,7 +2818,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
@@ -2727,10 +2860,20 @@ 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") {
+            const zone = target.closest(".drop-zone");
+            if (zone) _Forms.listDropZoneFiles(zone, target);
+          }
           if (target instanceof HTMLInputElement) {
             _Forms.validateField(target);
           }
@@ -2746,6 +2889,12 @@ var Expressive = (() => {
             }
           }
         });
+        document.addEventListener("click", _Forms.togglePassword);
+        document.addEventListener("submit", _Forms.resetFormExtras, true);
+        document.addEventListener("reset", _Forms.resetFormExtras, true);
+        for (const type of ["dragenter", "dragover", "dragleave", "drop"]) {
+          document.addEventListener(type, _Forms.markDropZone);
+        }
         document.querySelectorAll(".expressive-textarea").forEach((textArea) => {
           _Forms.InitTextarea(textArea);
         });
@@ -2754,6 +2903,75 @@ var Expressive = (() => {
         });
       });
     }
+    /**
+     * A .password-toggle button shows or hides the password in its field. The
+     * button's own name stays put ("Show password"); aria-pressed carries the
+     * state, so there is no generated text to translate.
+     */
+    static togglePassword(e) {
+      const button = e.target.closest?.(".password-toggle");
+      const input = button?.closest(".field")?.querySelector(
+        'input[type="password"], input[data-password]'
+      );
+      if (!input) return;
+      const show = input.type === "password";
+      input.toggleAttribute("data-password", show);
+      input.type = show ? "text" : "password";
+      button.setAttribute("aria-pressed", String(show));
+    }
+    /**
+     * A revealed password goes back to type="password" when its form is
+     * submitted or reset, so it is never sent or autofilled as plain text and
+     * a reset field does not stay revealed. A reset form also drops the file
+     * lists it would otherwise leave showing: reset fires no change event.
+     */
+    static resetFormExtras(e) {
+      const form = e.target;
+      if (!(form instanceof HTMLFormElement)) return;
+      form.querySelectorAll("input[data-password]").forEach((input) => {
+        input.removeAttribute("data-password");
+        input.type = "password";
+        input.closest(".field")?.querySelector(".password-toggle")?.setAttribute("aria-pressed", "false");
+      });
+      if (e.type === "reset") {
+        form.querySelectorAll(".drop-zone-files").forEach((list) => list.replaceChildren());
+        form.querySelectorAll(".drop-zone.dragover").forEach((zone) => zone.classList.remove("dragover"));
+      }
+    }
+    /**
+     * The native file input covers its .drop-zone, so the browser already takes
+     * a dropped file. This only shows the drag: the input is the topmost
+     * element, so every drag event over the zone targets it and leaving it is
+     * leaving the zone.
+     */
+    static markDropZone(e) {
+      const input = e.target;
+      if (!(input instanceof HTMLInputElement) || input.type !== "file") return;
+      const zone = input.closest(".drop-zone");
+      if (!zone) return;
+      const over = e.type === "dragenter" || e.type === "dragover";
+      zone.classList.toggle("dragover", over && !input.disabled);
+    }
+    /** Lists the chosen files, name and size, in the zone's .drop-zone-files. */
+    static listDropZoneFiles(zone, input) {
+      const list = zone.querySelector(".drop-zone-files");
+      if (!list) return;
+      const size = (bytes) => {
+        const [value, unit] = bytes >= 1e6 ? [bytes / 1e6, "megabyte"] : bytes >= 1e3 ? [bytes / 1e3, "kilobyte"] : [bytes, "byte"];
+        return new Intl.NumberFormat(void 0, { style: "unit", unit, maximumFractionDigits: 1 }).format(value);
+      };
+      list.replaceChildren(
+        ...Array.from(input.files ?? [], (file) => {
+          const item = document.createElement("li");
+          const name = document.createElement("span");
+          const meta = document.createElement("span");
+          name.textContent = file.name;
+          meta.textContent = size(file.size);
+          item.append(name, meta);
+          return item;
+        })
+      );
+    }
     static InitTextarea(textarea) {
       textarea.setAttribute("original-height", textarea.getBoundingClientRect().height.toString());
       _Forms.textareaAutoResize(textarea);
@@ -2775,6 +2993,8 @@ var Expressive = (() => {
       });
     }
   };
+  _Forms._initialized = false;
+  var Forms = _Forms;
 
   // src/ts/components/appBar.ts
   var _defaults7 = {};
@@ -3267,6 +3487,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;
@@ -3291,6 +3512,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);
@@ -3357,9 +3579,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);
         });
       };
@@ -3372,6 +3593,7 @@ var Expressive = (() => {
       };
       this._finishScroll = () => {
         this._ignoreScroll = false;
+        this._scroller.style.scrollSnapType = "";
         clearTimeout(this._scrollEndTimeout);
         this._scroller.removeEventListener("scrollend", this._handleScrollEnd);
       };
@@ -3551,9 +3773,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);
@@ -3572,9 +3791,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);
@@ -3641,6 +3858,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;
@@ -3667,40 +3891,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;
@@ -3725,7 +3940,7 @@ var Expressive = (() => {
       (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")
         );
@@ -3734,8 +3949,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`);
@@ -3788,6 +4004,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,
@@ -3865,60 +4082,1988 @@ var Expressive = (() => {
       this._setupCounter();
       this._setupEventHandlers();
     }
-    static get defaults() {
-      return _defaults11;
+    static get defaults() {
+      return _defaults11;
+    }
+    /**
+     * Initializes instances of CharacterCounter.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+      return super.init(els, options, _CharacterCounter);
+    }
+    static getInstance(el) {
+      return el["Expressive_CharacterCounter"];
+    }
+    destroy() {
+      this._removeEventHandlers();
+      this.el["Expressive_CharacterCounter"] = void 0;
+      this._removeCounter();
+    }
+    _setupEventHandlers() {
+      this.el.addEventListener("focus", this.updateCounter, true);
+      this.el.addEventListener("input", this.updateCounter, true);
+    }
+    _removeEventHandlers() {
+      this.el.removeEventListener("focus", this.updateCounter, true);
+      this.el.removeEventListener("input", this.updateCounter, true);
+    }
+    _setupCounter() {
+      this.counterEl = document.createElement("span");
+      this.counterEl.classList.add("character-counter");
+      this.counterEl.setAttribute("aria-live", "polite");
+      this.counterEl.setAttribute("aria-atomic", "true");
+      this.counterEl.style.float = "right";
+      this.counterEl.style.fontSize = "12px";
+      this.counterEl.style.height = "1";
+      this.el.parentElement.appendChild(this.counterEl);
+    }
+    _removeCounter() {
+      this.counterEl.remove();
+    }
+    _validateInput() {
+      if (this.isValidLength && this.isInvalid) {
+        this.isInvalid = false;
+        this.el.classList.remove("invalid");
+      } else if (!this.isValidLength && !this.isInvalid) {
+        this.isInvalid = true;
+        this.el.classList.remove("valid");
+        this.el.classList.add("invalid");
+      }
+    }
+  };
+
+  // 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/commandPalette.ts
+  var _defaults14 = {
+    shortcut: "k",
+    closeOnRun: true
+  };
+  var APPLE = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+  var fold = (text) => text.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+  var CommandPalette = class _CommandPalette extends Component {
+    constructor(el, options) {
+      super(el, options, _CommandPalette);
+      this._active = null;
+      this._generatedIds = [];
+      /** Wires and refilters commands the page adds or removes later. */
+      this._observer = null;
+      /** Opens the palette as a modal dialog with the search input focused. */
+      this.open = () => {
+        if (!this.el.open) this.el.showModal();
+        this.input?.focus();
+      };
+      /** Closes the palette. The dialog returns focus to where it was. */
+      this.close = () => {
+        if (this.el.open) this.el.close();
+      };
+      this._handleInput = () => this._filter();
+      this._handleKeydown = (e) => {
+        if (e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP) {
+          e.preventDefault();
+          this._move(e.key === Utils.keys.ARROW_DOWN ? 1 : -1);
+        } else if (e.key === Utils.keys.ENTER && !e.isComposing && e.keyCode !== 229 && this._active) {
+          e.preventDefault();
+          this._run(this._active);
+        }
+      };
+      this._handleListClick = (e) => {
+        const item = e.target.closest('[role="option"]');
+        if (!item || !this.list.contains(item) || item.getAttribute("aria-disabled") === "true") return;
+        const action = this._action(item);
+        if (action && !action.contains(e.target)) {
+          action.click();
+          return;
+        }
+        if (this.options.closeOnRun) this.close();
+      };
+      this._handlePointerMove = (e) => {
+        const item = e.target.closest('[role="option"]');
+        if (item && this.list.contains(item) && item.getAttribute("aria-disabled") !== "true") this._setActive(item);
+      };
+      /**
+       * Each opening starts from the full list. The close event is queued, so a
+       * palette reopened straight away may already be open again; its new search
+       * is left alone.
+       */
+      this._handleClose = () => {
+        if (this.el.open) return;
+        this.input.value = "";
+        this._filter();
+      };
+      this._handleShortcut = (e) => {
+        const { shortcut } = this.options;
+        if (!shortcut || e.defaultPrevented || e.altKey || e.shiftKey) return;
+        if (!(APPLE ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey)) return;
+        const letter = shortcut.toLowerCase();
+        const latin = /^[a-z]$/i.test(e.key);
+        const hit = e.key.toLowerCase() === letter || !latin && /^[a-z]$/.test(letter) && e.code === `Key${letter.toUpperCase()}`;
+        if (!hit) return;
+        e.preventDefault();
+        if (this.el.open) this.close();
+        else this.open();
+      };
+      this.el["Expressive_CommandPalette"] = this;
+      const shortcut = el.dataset.shortcut;
+      this.options = {
+        ..._CommandPalette.defaults,
+        ...shortcut !== void 0 ? { shortcut: shortcut || null } : {},
+        ...options
+      };
+      this.input = el.querySelector(":scope > input");
+      this.list = el.querySelector(":scope > :is(ul, ol)");
+      if (!this.input || !this.list) {
+        console.error("CommandPalette needs an <input> and a <ul> as children of the dialog.");
+        return;
+      }
+      this._setupAccessibility();
+      this._filter();
+      this._observer = new MutationObserver(() => this._filter(true));
+      this._observer.observe(this.list, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["hidden", "disabled"]
+      });
+      this.input.addEventListener("input", this._handleInput);
+      this.input.addEventListener("keydown", this._handleKeydown);
+      this.list.addEventListener("click", this._handleListClick);
+      this.list.addEventListener("pointermove", this._handlePointerMove);
+      this.el.addEventListener("close", this._handleClose);
+      document.addEventListener("keydown", this._handleShortcut);
+    }
+    static get defaults() {
+      return _defaults14;
+    }
+    /**
+     * Initializes instances of CommandPalette.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+      return super.init(els, options, _CommandPalette);
+    }
+    static getInstance(el) {
+      return el["Expressive_CommandPalette"];
+    }
+    /** If the palette is open. */
+    get isOpen() {
+      return this.el.open;
+    }
+    destroy() {
+      this._observer?.disconnect();
+      document.removeEventListener("keydown", this._handleShortcut);
+      this.el.removeEventListener("close", this._handleClose);
+      if (this.input && this.list) {
+        this.input.removeEventListener("input", this._handleInput);
+        this.input.removeEventListener("keydown", this._handleKeydown);
+        this.list.removeEventListener("click", this._handleListClick);
+        this.list.removeEventListener("pointermove", this._handlePointerMove);
+        for (const name of ["role", "aria-controls", "aria-expanded", "aria-autocomplete", "aria-activedescendant"]) {
+          this.input.removeAttribute(name);
+        }
+        this.list.removeAttribute("role");
+        for (const item of this._items()) {
+          for (const name of ["role", "aria-selected", "aria-disabled", "data-filtered"]) item.removeAttribute(name);
+          item.classList.remove("active");
+          this._action(item)?.removeAttribute("tabindex");
+        }
+        for (const label of this._labels()) {
+          label.removeAttribute("role");
+          label.removeAttribute("data-filtered");
+        }
+        for (const el of this._generatedIds) el.removeAttribute("id");
+        const empty = this._empty();
+        if (empty) empty.hidden = false;
+      }
+      this.el["Expressive_CommandPalette"] = void 0;
+    }
+    _items() {
+      return Array.from(this.list.children).filter(
+        (child) => child instanceof HTMLElement && !child.classList.contains("label")
+      );
+    }
+    _labels() {
+      return Array.from(this.list.querySelectorAll(":scope > .label"));
+    }
+    _empty() {
+      return this.el.querySelector(":scope > .command-palette-empty");
+    }
+    _action(item) {
+      return item.querySelector(":scope > :is(a[href], button)");
+    }
+    _ensureId(el, prefix) {
+      if (!el.id) {
+        el.id = `${prefix}-${Utils.guid()}`;
+        this._generatedIds.push(el);
+      }
+      return el.id;
+    }
+    _setupAccessibility() {
+      this.list.setAttribute("role", "listbox");
+      this.input.setAttribute("role", "combobox");
+      this.input.setAttribute("aria-controls", this._ensureId(this.list, "command-palette-list"));
+      this.input.setAttribute("aria-expanded", "true");
+      this.input.setAttribute("aria-autocomplete", "list");
+    }
+    /** Every command, including ones added since the last pass, is an option. */
+    _wireItems() {
+      for (const item of this._items()) {
+        if (item.getAttribute("role") === "option") continue;
+        item.setAttribute("role", "option");
+        this._ensureId(item, "command-palette-option");
+        this._action(item)?.setAttribute("tabindex", "-1");
+      }
+      for (const label of this._labels()) label.setAttribute("role", "none");
+    }
+    /** Commands on screen: neither hidden by the page nor filtered out. */
+    _shown() {
+      return this._items().filter((item) => !item.hidden && !item.hasAttribute("data-filtered"));
+    }
+    /** Shown commands the arrows and Enter can reach: disabled ones are skipped. */
+    _visible() {
+      return this._shown().filter((item) => item.getAttribute("aria-disabled") !== "true");
+    }
+    /** A disabled link or button cannot run, so its option says so. */
+    _isDisabled(item) {
+      const action = this._action(item);
+      return !!action && (action.matches(":disabled") || action.getAttribute("aria-disabled") === "true");
+    }
+    _setActive(item) {
+      if (this._active === item) return;
+      this._active?.classList.remove("active");
+      this._active?.removeAttribute("aria-selected");
+      this._active = item;
+      if (item) {
+        item.classList.add("active");
+        item.setAttribute("aria-selected", "true");
+        this.input.setAttribute("aria-activedescendant", item.id);
+        item.scrollIntoView({ block: "nearest" });
+      } else {
+        this.input.removeAttribute("aria-activedescendant");
+      }
+    }
+    /**
+     * Shows the commands matching the query. Filtering marks rows with
+     * data-filtered rather than hidden, so a command the page hides stays
+     * hidden. `keepActive` holds the active command while it is still
+     * reachable, for list changes the user did not make.
+     */
+    _filter(keepActive = false) {
+      this._wireItems();
+      const terms = fold(this.input.value).split(/\s+/).filter(Boolean);
+      for (const item of this._items()) {
+        const keywords = item.dataset.keywords ?? this._action(item)?.dataset.keywords ?? "";
+        const text = fold(`${item.textContent} ${keywords}`);
+        item.toggleAttribute("data-filtered", !terms.every((term) => text.includes(term)));
+        if (this._isDisabled(item)) item.setAttribute("aria-disabled", "true");
+        else item.removeAttribute("aria-disabled");
+      }
+      for (const label of this._labels()) {
+        let next = label.nextElementSibling;
+        let any = false;
+        while (next && !next.classList.contains("label")) {
+          if (!next.hidden && !next.hasAttribute("data-filtered")) any = true;
+          next = next.nextElementSibling;
+        }
+        label.toggleAttribute("data-filtered", !any);
+      }
+      const visible = this._visible();
+      const empty = this._empty();
+      if (empty) empty.hidden = this._shown().length > 0;
+      this._setActive(keepActive && visible.includes(this._active) ? this._active : visible[0] ?? null);
+    }
+    _move(step) {
+      const visible = this._visible();
+      if (!visible.length) return;
+      const index = visible.indexOf(this._active);
+      this._setActive(visible[(index + step + visible.length) % visible.length]);
+    }
+    /** Runs a command by clicking its link or button; the click handler closes. */
+    _run(item) {
+      (this._action(item) ?? item).click();
+    }
+  };
+
+  // src/ts/components/questionnaire.ts
+  var _defaults15 = {
+    progressLabel: "Question {current} of {total}",
+    requiredMessage: "Choose an answer to continue."
+  };
+  var NAVIGATION = ["previous", "skip", "next"];
+  var Questionnaire = class _Questionnaire extends Component {
+    constructor(el, options) {
+      super(el, options, _Questionnaire);
+      this._active = null;
+      this._generated = [];
+      this._generatedIds = [];
+      /** Set while one submission's invalid events arrive, so only the first opens. */
+      this._reporting = false;
+      /** Shows the question at `index` without checking the current one. */
+      this.goTo = (index) => {
+        const item = this.items[index];
+        if (!item) return;
+        this._active = item;
+        this._render();
+        const controls = this._controls(item).filter((control) => !control.disabled);
+        (controls.find((control) => control.checked) ?? controls[0])?.focus();
+      };
+      /** Checks the shown question and moves to the next one if it is answered. */
+      this.next = () => {
+        if (this._validate(this._active)) this.goTo(this.index + 1);
+      };
+      /** Moves to the previous question. */
+      this.previous = () => this.goTo(this.index - 1);
+      /** Clears the answer to the shown question and moves to the next one. */
+      this.skip = () => {
+        if (!this._active) return;
+        for (const control of this._controls(this._active)) {
+          const isChoice = control instanceof HTMLInputElement && (control.type === "radio" || control.type === "checkbox");
+          if (isChoice ? !control.checked : !control.value) continue;
+          if (isChoice) control.checked = false;
+          else control.value = "";
+          control.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+        this.goTo(this.index + 1);
+      };
+      this._handleClick = (e) => {
+        const button = e.target.closest?.("button");
+        if (!button || !this._buttons().includes(button)) return;
+        if (NAVIGATION.includes(button.value)) {
+          e.preventDefault();
+          this[button.value]();
+          return;
+        }
+        this._syncRequired();
+      };
+      // Enter in a field moves on instead of submitting the form early.
+      this._handleKeydown = (e) => {
+        if (e.key !== "Enter" || e.defaultPrevented || e.isComposing) return;
+        if (!(e.target instanceof HTMLInputElement) || this.index >= this.items.length - 1) return;
+        e.preventDefault();
+        this.next();
+      };
+      // A submission found an unanswered question, possibly a hidden one. Open the
+      // first instead of letting the browser report a control it cannot show.
+      // One submission fires its invalid events in a single task.
+      this._handleInvalid = (e) => {
+        const item = this.items.find((item2) => item2.contains(e.target));
+        if (!item) return;
+        e.preventDefault();
+        if (this._reporting) return;
+        this._reporting = true;
+        setTimeout(() => this._reporting = false);
+        this._active = item;
+        this._render();
+        this._validate(item);
+      };
+      // An answer clears the question's error.
+      this._handleInput = (e) => {
+        this._syncRequired();
+        const item = e.target.closest?.("fieldset");
+        if (item instanceof HTMLFieldSetElement && item.classList.contains("invalid")) this._setInvalid(item, false);
+      };
+      this.el["Expressive_Questionnaire"] = this;
+      const progressLabel = el.dataset.progressLabel;
+      this.options = {
+        ..._Questionnaire.defaults,
+        ...progressLabel ? { progressLabel } : {},
+        ...options
+      };
+      this._progress = document.createElement("div");
+      this._progress.className = "questionnaire-progress";
+      this._progressText = document.createElement("span");
+      this._progressText.id = `questionnaire-progress-${Utils.guid()}`;
+      this._progressBar = document.createElement("progress");
+      this._progressBar.className = "progress";
+      this._progressBar.setAttribute("aria-labelledby", this._progressText.id);
+      this._progress.append(this._progressText, this._progressBar);
+      this.el.prepend(this._progress);
+      for (const item of this._fieldsets()) {
+        const ids = Array.from(item.querySelectorAll(":scope > p:not(.questionnaire-error)")).map((p) => this._ensureId(p, "questionnaire-description"));
+        if (ids.length && !item.hasAttribute("aria-describedby")) {
+          item.setAttribute("aria-describedby", ids.join(" "));
+          this._generatedIds.push(item);
+        }
+      }
+      this._active = this.items[0] ?? null;
+      this._syncRequired();
+      this._render();
+      this._observer = new MutationObserver(() => {
+        this._syncRequired();
+        this._render();
+      });
+      this._observer.observe(this.el, { attributes: true, subtree: true, attributeFilter: ["disabled"] });
+      this.el.addEventListener("click", this._handleClick);
+      this.el.addEventListener("keydown", this._handleKeydown);
+      this.el.addEventListener("input", this._handleInput);
+      this.el.addEventListener("invalid", this._handleInvalid, true);
+    }
+    static get defaults() {
+      return _defaults15;
+    }
+    /**
+     * Initializes instances of Questionnaire.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+      return super.init(els, options, _Questionnaire);
+    }
+    static getInstance(el) {
+      return el["Expressive_Questionnaire"];
+    }
+    /** The questions that apply: every fieldset child that is not disabled. */
+    get items() {
+      return this._fieldsets().filter((item) => !item.disabled);
+    }
+    /** Position of the shown question in `items`. */
+    get index() {
+      return this.items.indexOf(this._active);
+    }
+    destroy() {
+      this._observer.disconnect();
+      this.el.removeEventListener("click", this._handleClick);
+      this.el.removeEventListener("keydown", this._handleKeydown);
+      this.el.removeEventListener("input", this._handleInput);
+      this.el.removeEventListener("invalid", this._handleInvalid, true);
+      for (const item of this._fieldsets()) {
+        if (item.hasAttribute("data-required")) for (const control of this._controls(item)) control.setCustomValidity("");
+        item.hidden = false;
+        this._setInvalid(item, false);
+      }
+      for (const button of this._buttons()) button.hidden = false;
+      this._progress.remove();
+      for (const el of this._generated) el.remove();
+      for (const el of this._generatedIds) {
+        el.removeAttribute(el instanceof HTMLFieldSetElement ? "aria-describedby" : "id");
+      }
+      this.el["Expressive_Questionnaire"] = void 0;
+    }
+    _fieldsets() {
+      return Array.from(this.el.querySelectorAll(":scope > fieldset"));
+    }
+    /** The footer's navigation and submit buttons. */
+    _buttons() {
+      return Array.from(this.el.querySelectorAll(":scope > footer > button")).filter(
+        (button) => NAVIGATION.includes(button.value) || button.type === "submit"
+      );
+    }
+    _controls(item) {
+      return Array.from(item.elements).filter(
+        (el) => el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement || el instanceof HTMLInputElement && el.type !== "button" && el.type !== "submit"
+      );
+    }
+    _required(item) {
+      return item.hasAttribute("data-required") || this._controls(item).some((control) => control.required);
+    }
+    _ensureId(el, prefix) {
+      if (!el.id) {
+        el.id = `${prefix}-${Utils.guid()}`;
+        this._generatedIds.push(el);
+      }
+      return el.id;
+    }
+    _render() {
+      const items = this.items;
+      if (!items.includes(this._active)) {
+        const all = this._fieldsets();
+        const after = all.slice(all.indexOf(this._active) + 1).find((item) => !item.disabled);
+        this._active = after ?? items[items.length - 1] ?? null;
+      }
+      const index = items.indexOf(this._active);
+      const last = index === items.length - 1;
+      for (const item of this._fieldsets()) item.hidden = item !== this._active;
+      for (const button of this._buttons()) {
+        if (button.value === "previous") button.hidden = index <= 0;
+        else if (button.value === "skip") button.hidden = last || !this._active || this._required(this._active);
+        else if (button.value === "next") button.hidden = last;
+        else button.hidden = !last;
+      }
+      this._progressText.textContent = this.options.progressLabel.replace("{current}", String(index + 1)).replace("{total}", String(items.length));
+      this._progressBar.max = Math.max(items.length, 1);
+      this._progressBar.value = index + 1;
+    }
+    /**
+     * Puts "choose at least one" on the first enabled checkbox of each
+     * data-required group with none checked, so the browser's validation, and
+     * every way of submitting, sees it. A disabled checkbox is not sent, so it
+     * does not count.
+     */
+    _syncRequired() {
+      for (const item of this._fieldsets()) {
+        if (!item.hasAttribute("data-required")) continue;
+        const boxes = this._controls(item).filter(
+          (control) => control instanceof HTMLInputElement && control.type === "checkbox"
+        );
+        const enabled = boxes.filter((box) => !box.disabled);
+        for (const box of boxes) box.setCustomValidity("");
+        if (enabled.length && !enabled.some((box) => box.checked)) {
+          const error = item.querySelector(":scope > .questionnaire-error:not([data-generated])");
+          enabled[0].setCustomValidity(error?.textContent.trim() || this.options.requiredMessage);
+        }
+      }
+    }
+    /** The first control in the question that still needs an answer. */
+    _invalidControl(item) {
+      return this._controls(item).find((control) => control.willValidate && !control.validity.valid);
+    }
+    /** Shows the question's error and returns false when it needs an answer. */
+    _validate(item) {
+      this._syncRequired();
+      const invalid = item && this._invalidControl(item);
+      if (!invalid) return true;
+      let error = item.querySelector(":scope > .questionnaire-error");
+      if (!error) {
+        error = document.createElement("p");
+        error.className = "questionnaire-error";
+        error.dataset.generated = "";
+        error.textContent = invalid.validationMessage || this.options.requiredMessage;
+        item.append(error);
+        this._generated.push(error);
+      }
+      this._setInvalid(item, true);
+      invalid.focus();
+      return false;
+    }
+    _setInvalid(item, invalid) {
+      item.classList.toggle("invalid", invalid);
+      const error = item.querySelector(":scope > .questionnaire-error");
+      const described = (item.getAttribute("aria-describedby") ?? "").split(" ").filter((id) => id && id !== error?.id);
+      if (invalid && error) described.push(this._ensureId(error, "questionnaire-error"));
+      if (described.length) item.setAttribute("aria-describedby", described.join(" "));
+      else item.removeAttribute("aria-describedby");
+      for (const control of this._controls(item)) {
+        if (invalid) control.setAttribute("aria-invalid", "true");
+        else control.removeAttribute("aria-invalid");
+      }
+      if (!invalid && this._generated.includes(error)) {
+        error.remove();
+        this._generated.splice(this._generated.indexOf(error), 1);
+      }
+    }
+  };
+
+  // src/ts/components/lineChart.ts
+  var _defaults16 = {
+    min: null,
+    max: null
+  };
+  var SVG = "http://www.w3.org/2000/svg";
+  var COLORS = 4;
+  function svgNode(name, attributes = {}) {
+    const element = document.createElementNS(SVG, name);
+    for (const key in attributes) element.setAttribute(key, attributes[key]);
+    return element;
+  }
+  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, ""));
+  }
+  function monotonePath(points) {
+    const n = points.length;
+    if (n === 0) return "";
+    if (n === 1) return `M${points[0][0]},${points[0][1]}h0`;
+    const slopes = [];
+    for (let i = 0; i < n - 1; i++) {
+      slopes.push((points[i + 1][1] - points[i][1]) / (points[i + 1][0] - points[i][0]));
+    }
+    const tangents = points.map((_, i) => {
+      if (i === 0) return slopes[0];
+      if (i === n - 1) return slopes[n - 2];
+      const [a, b] = [slopes[i - 1], slopes[i]];
+      return a * b <= 0 ? 0 : 2 / (1 / a + 1 / b);
+    });
+    let d = `M${points[0][0]},${points[0][1]}`;
+    for (let i = 0; i < n - 1; i++) {
+      const [[x0, y0], [x1, y1]] = [points[i], points[i + 1]];
+      const h = (x1 - x0) / 3;
+      d += `C${x0 + h},${y0 + tangents[i] * h} ${x1 - h},${y1 - tangents[i + 1] * h} ${x1},${y1}`;
+    }
+    return d;
+  }
+  var LineChart = class extends Component {
+    constructor(el, options) {
+      super(el, options, new.target);
+      /** The values' x positions and series, read from the table. */
+      this.labels = [];
+      this.series = [];
+      /** The highlighted row, or -1. */
+      this.activeIndex = -1;
+      this._generated = [];
+      /** The table's header cells and body rows, as read. */
+      this._header = [];
+      this._rows = [];
+      /**
+       * Whether the rows run right to left: a horizontal row axis in a
+       * right-to-left context, like the labels. Bar chart rows keep their order.
+       */
+      this._reversed = false;
+      this._onPointerMove = (e) => {
+        this.show(this._indexAt(e));
+      };
+      this._onFocus = () => {
+        if (this.activeIndex < 0 && this._plot.matches(":focus-visible")) this.show(0);
+      };
+      this._onLeave = (e) => {
+        if (e.pointerType === "touch" || this._plot.matches(":focus-visible")) return;
+        this.show(-1);
+      };
+      /** The browser took the touch to scroll the page. */
+      this._onCancel = () => {
+        this.show(-1);
+      };
+      this._onKeyDown = (e) => {
+        const next = this._keyTarget(e.key);
+        if (next === void 0) return;
+        e.preventDefault();
+        this.show(next);
+      };
+      this.el[this._key] = this;
+      this.options = {
+        ...new.target.defaults,
+        ...options
+      };
+      this._read();
+      if (!this.labels.length || !this.series.length) return;
+      this._reversed = !this._horizontal && getComputedStyle(this.el).direction === "rtl";
+      this._render();
+      if (!this.el.classList.contains("sparkline")) {
+        this._plot.tabIndex = 0;
+        this._plot.addEventListener("pointerdown", this._onPointerMove);
+        this._plot.addEventListener("pointermove", this._onPointerMove);
+        this._plot.addEventListener("pointerleave", this._onLeave);
+        this._plot.addEventListener("pointercancel", this._onCancel);
+        this._plot.addEventListener("keydown", this._onKeyDown);
+        this._plot.addEventListener("focus", this._onFocus);
+        this._plot.addEventListener("blur", this._onLeave);
+      }
+    }
+    /** The class prefix of the generated parts; ColumnChart reuses this class. */
+    get _type() {
+      return "line-chart";
+    }
+    /** Whether the y axis always includes zero, as columns grow from it. */
+    get _fromZero() {
+      return false;
+    }
+    /**
+     * Whether the rows run down the plot and the values across it, as in a
+     * bar chart. The rows then keep their order in a right-to-left context.
+     */
+    get _horizontal() {
+      return false;
+    }
+    /**
+     * Whether the rows go round a circle, as in a pie or radar chart. The
+     * arrows then step round it, wrapping from the last row to the first.
+     */
+    get _circular() {
+      return false;
+    }
+    /** Whether the cursor marks each series with a point. */
+    get _points() {
+      return true;
+    }
+    get _key() {
+      return "Expressive_LineChart";
+    }
+    static get defaults() {
+      return _defaults16;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options, this);
+    }
+    static getInstance(el) {
+      return el["Expressive_LineChart"];
+    }
+    destroy() {
+      this._generated.forEach((node) => node.remove());
+      this._generated = [];
+      this.el[this._key] = void 0;
+    }
+    /**
+     * Highlights one row: moves the cursor and fills the tooltip.
+     * Pass -1 to hide them. Does nothing for a chart without data.
+     */
+    show(index) {
+      if (!this._tooltip || index === this.activeIndex) return;
+      this.activeIndex = index;
+      const hidden = index < 0 || index >= this.labels.length;
+      this._cursor.hidden = this._tooltip.hidden = hidden;
+      if (hidden) return;
+      this._cursor.replaceChildren();
+      const title = document.createElement("strong");
+      title.textContent = this.labels[index];
+      this._tooltip.replaceChildren(title);
+      this.series.forEach((series, i) => {
+        const value = series.values[index];
+        if (value === null) return;
+        const color = String(i % COLORS + 1);
+        const top = series.tops[index];
+        if (top !== null && this._points) {
+          const dot = document.createElement("span");
+          dot.className = series.className;
+          dot.dataset.series = color;
+          dot.style.top = `${series.y(top)}%`;
+          this._cursor.append(dot);
+        }
+        const name = document.createElement("span");
+        name.dataset.series = color;
+        name.textContent = series.name;
+        const text = document.createElement("span");
+        text.textContent = series.text[index];
+        this._tooltip.append(name, text);
+      });
+      this._place(index);
+    }
+    /**
+     * Moves the filled cursor and tooltip to a row: beside its band, with the
+     * tooltip opening back over the plot past the middle.
+     */
+    _place(index) {
+      const x = this._x(index);
+      const side = this._horizontal ? "top" : "left";
+      this._cursor.style[side] = this._tooltip.style[side] = `${x}%`;
+      this._tooltip.classList.toggle("end", x > 50);
+    }
+    _read() {
+      const table = this.el.querySelector(":scope > table");
+      if (!table) return;
+      const headerRow = table.tHead?.rows[0] ?? table.rows[0];
+      const header = Array.from(headerRow?.cells ?? []);
+      const rows = Array.from(table.tBodies).flatMap((body) => Array.from(body.rows)).filter((row) => row !== headerRow);
+      [this._header, this._rows] = [header, rows];
+      this.labels = rows.map((row) => row.cells[0]?.textContent.trim() ?? "");
+      this.series = header.slice(1).map((cell, i) => {
+        const values = rows.map((row) => cellValue(row.cells[i + 1]));
+        return {
+          name: cell.textContent.trim(),
+          className: cell.className,
+          text: rows.map((row) => row.cells[i + 1]?.textContent.trim() ?? ""),
+          values,
+          tops: values,
+          y: void 0
+        };
+      });
+      const stacked = this.el.classList.contains("stacked");
+      if (stacked) {
+        const totals = this.labels.map(() => 0);
+        for (const series of this.series) {
+          series.base = [...totals];
+          series.tops = series.values.map((value, i) => totals[i] = value === null || totals[i] === null ? null : totals[i] + value);
+        }
+      }
+      if (this.series.every((series) => series.tops.every((value) => value === null))) this.series = [];
+      const option = (name) => this._number(name) ?? this.options[name];
+      this._y = this._scale(this.series, option("min"), option("max"));
+    }
+    /** A number from one of the chart's data attributes, or null. */
+    _number(name) {
+      const value = parseFloat(this.el.dataset[name] ?? "");
+      return Number.isFinite(value) ? value : null;
+    }
+    /**
+     * Fits a y scale to the series' tops, between `min` and `max` where they
+     * are set, and gives it to each series.
+     */
+    _scale(series, min, max, fromZero = this._fromZero) {
+      const stacked = this.el.classList.contains("stacked");
+      let [low, high] = [Infinity, -Infinity];
+      for (const { tops } of series) {
+        for (const value of tops) {
+          if (value === null) continue;
+          low = Math.min(low, value);
+          high = Math.max(high, value);
+        }
+      }
+      if (low > high) low = high = 0;
+      if (fromZero) {
+        const [bottom, top] = [Math.min(0, low), Math.max(0, high)];
+        const room = (top - (min ?? bottom)) * 0.1 || 1;
+        min ?? (min = bottom < 0 ? bottom - room : 0);
+        max ?? (max = top + room);
+      } else {
+        const pad = (high - low) * 0.1 || 1;
+        min ?? (min = stacked ? Math.min(0, low) : low - pad);
+        max ?? (max = high + (stacked ? (high - min) * 0.1 || 1 : pad));
+      }
+      const y = (value) => 100 - (value - min) / (max - min || 1) * 100;
+      for (const each of series) each.y = y;
+      return y;
+    }
+    /** Each row sits in the middle of an equal band, beside its label. */
+    _x(index) {
+      const x = (index + 0.5) / this.labels.length * 100;
+      return this._reversed ? 100 - x : x;
+    }
+    _render() {
+      const type = this._type;
+      this._plot = document.createElement("div");
+      this._plot.className = `${type}-plot`;
+      const caption = this.el.querySelector(":scope > figcaption")?.textContent.trim();
+      this._plot.setAttribute("role", "group");
+      this._plot.setAttribute("aria-roledescription", type.replace(/-/g, " "));
+      if (caption) this._plot.setAttribute("aria-label", caption);
+      this._cursor = document.createElement("div");
+      this._cursor.className = `${type}-cursor`;
+      this._cursor.hidden = true;
+      this._tooltip = document.createElement("div");
+      this._tooltip.className = `${type}-tooltip`;
+      this._tooltip.hidden = true;
+      this._tooltip.setAttribute("aria-live", "polite");
+      this._plot.append(this._draw(), this._cursor, this._tooltip);
+      this._generated = [this._plot, ...this._guides()];
+      this.el.append(...this._generated);
+    }
+    /**
+     * The <tfoot> row as a total to show over the plot, its value over its
+     * label, or null without one.
+     */
+    _total(className) {
+      const footer = this.el.querySelector(":scope > table")?.tFoot?.rows[0];
+      if (!footer) return null;
+      const total = document.createElement("div");
+      total.className = className;
+      const [label, value] = [document.createElement("span"), document.createElement("strong")];
+      label.textContent = footer.cells[0]?.textContent.trim() ?? "";
+      value.textContent = footer.cells[1]?.textContent.trim() ?? "";
+      total.append(value, label);
+      return total;
+    }
+    /** The parts below the plot: the row labels and the legend. */
+    _guides() {
+      const labels = document.createElement("ol");
+      labels.className = `${this._type}-labels`;
+      labels.setAttribute("aria-hidden", "true");
+      for (const text of this.labels) {
+        const li = document.createElement("li");
+        li.textContent = text;
+        labels.append(li);
+      }
+      return [labels, ...this._legend()];
+    }
+    /** The series legend, for more than one series. */
+    _legend() {
+      if (this.series.length < 2) return [];
+      const legend = document.createElement("ul");
+      legend.className = `${this._type}-legend`;
+      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.textContent = series.name;
+        return li;
+      }));
+      return [legend];
+    }
+    /** 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");
+      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 runs = [[]];
+        series.tops.forEach((value, index) => {
+          if (value === null) runs.push([]);
+          else runs[runs.length - 1].push(index);
+        });
+        const filled = runs.filter((run) => run.length);
+        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(""));
+        group.append(gradient, area, line);
+        svg.append(group);
+      }
+      return svg;
+    }
+    /** The row under the pointer, or -1. */
+    _indexAt(e) {
+      const box = this._plot.getBoundingClientRect();
+      const fraction = this._horizontal ? (e.clientY - box.top) / box.height : (e.clientX - box.left) / box.width;
+      const index = Math.floor((this._reversed ? 1 - fraction : fraction) * this.labels.length);
+      return Math.min(this.labels.length - 1, Math.max(0, index));
+    }
+    /**
+     * For a circular chart, the pointer's position from the plot's middle: a
+     * fraction of a turn clockwise from the top, and its distance as a share
+     * of the plot's width.
+     */
+    _polarAt(e) {
+      const box = this._plot.getBoundingClientRect();
+      const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.height / 2];
+      return [(Math.atan2(x, -y) / (2 * Math.PI) + 1) % 1, Math.hypot(x, y) / box.width];
+    }
+    /** The keys that move to the next row and to the one before. */
+    get _arrows() {
+      if (this._circular) return [["ArrowRight", "ArrowDown"], ["ArrowLeft", "ArrowUp"]];
+      if (this._horizontal) return [["ArrowDown"], ["ArrowUp"]];
+      return this._reversed ? [["ArrowLeft"], ["ArrowRight"]] : [["ArrowRight"], ["ArrowLeft"]];
+    }
+    /** The index a key moves to, or undefined for a key the chart ignores. */
+    _keyTarget(key) {
+      const last = this.labels.length - 1;
+      const [forward, back] = this._arrows;
+      const step = (by) => {
+        if (!this._circular) return Math.min(last, Math.max(0, this.activeIndex + by));
+        if (this.activeIndex < 0) return by > 0 ? 0 : last;
+        return (this.activeIndex + by + last + 1) % (last + 1);
+      };
+      if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
+      return forward.includes(key) ? step(1) : back.includes(key) ? step(-1) : { Home: 0, End: last }[key];
+    }
+  };
+
+  // src/ts/components/columnChart.ts
+  var ColumnChart = class extends LineChart {
+    get _type() {
+      return "column-chart";
+    }
+    get _key() {
+      return "Expressive_ColumnChart";
+    }
+    get _fromZero() {
+      return true;
+    }
+    get _points() {
+      return false;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options);
+    }
+    static getInstance(el) {
+      return el["Expressive_ColumnChart"];
+    }
+    _draw(drawn = this.series) {
+      const columns = document.createElement("div");
+      columns.className = "column-chart-columns";
+      columns.setAttribute("aria-hidden", "true");
+      const clamp = (value, y = drawn[0]?.y ?? this._y) => Math.min(100, Math.max(0, y(value)));
+      columns.style.setProperty("--zero", `${clamp(0)}%`);
+      this._plot.style.setProperty("--rows", String(this.labels.length));
+      this.labels.forEach((_, index) => {
+        const row = document.createElement("div");
+        drawn.forEach((series) => {
+          const to = series.tops[index];
+          const from = series.base?.[index] ?? 0;
+          if (series.base && (to === null || from === null)) return;
+          const column = document.createElement("span");
+          if (to !== null) {
+            column.className = series.className;
+            column.dataset.series = String(this.series.indexOf(series) % COLORS + 1);
+            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)}%`);
+            if (this._horizontal) column.dataset.text = series.text[index];
+          }
+          row.append(column);
+        });
+        columns.append(row);
+      });
+      return columns;
+    }
+  };
+
+  // src/ts/components/barChart.ts
+  var BarChart = class extends ColumnChart {
+    get _type() {
+      return "bar-chart";
+    }
+    get _key() {
+      return "Expressive_BarChart";
+    }
+    get _horizontal() {
+      return true;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options);
+    }
+    static getInstance(el) {
+      return el["Expressive_BarChart"];
+    }
+    /**
+     * The column chart's spans; CSS reads their --top and --bottom across the
+     * plot. With .values, a copy of the bars without their clipping holds each
+     * cell's text, so text longer than a short bar can run past its end.
+     */
+    _draw() {
+      const bars = super._draw();
+      bars.className = "bar-chart-bars";
+      bars.classList.toggle("rtl", getComputedStyle(this.el).direction === "rtl");
+      if (!this.el.classList.contains("values")) return bars;
+      const values = bars.cloneNode(true);
+      values.classList.replace("bar-chart-bars", "bar-chart-values");
+      values.querySelectorAll("span[data-text]").forEach((span) => {
+        span.textContent = span.dataset.text;
+      });
+      const layers = document.createElement("div");
+      layers.className = "bar-chart-layers";
+      layers.append(bars, values);
+      return layers;
+    }
+  };
+
+  // src/ts/components/pieChart.ts
+  var COLORS2 = 6;
+  var RADIUS = 46;
+  var GROWN = 1.06;
+  var LABEL_SHARE = 0.05;
+  var _maskId = 0;
+  var PieChart = class extends LineChart {
+    get _type() {
+      return "pie-chart";
+    }
+    get _key() {
+      return "Expressive_PieChart";
+    }
+    get _points() {
+      return false;
+    }
+    get _circular() {
+      return true;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options);
+    }
+    static getInstance(el) {
+      return el["Expressive_PieChart"];
+    }
+    show(index) {
+      if (!this._tooltip || index === this.activeIndex) return;
+      super.show(index);
+      this._slices.forEach((slice, i) => slice?.classList.toggle("active", i === index));
+      if (this._tooltip.hidden) return;
+      const color = this._colors[index];
+      this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
+        if (color) span.dataset.series = color;
+        else delete span.dataset.series;
+      });
+      const share = this._share(index);
+      const value = this._tooltip.querySelector("span:nth-of-type(2)");
+      if (share && value) value.textContent += ` (${share})`;
+    }
+    /** CSS places the tooltip on the slice's middle from --turn. */
+    _place(index) {
+      const middle = (this._turns[index][0] + this._turns[index][1]) / 2;
+      this._tooltip.style.setProperty("--turn", String(middle));
+      this._tooltip.classList.toggle("end", middle < 0.5);
+    }
+    /** 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 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 new Intl.NumberFormat(this.el.closest("[lang]")?.lang || void 0, options);
+      } catch {
+        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");
+      const text = this.series[0].text;
+      legend.append(...this.labels.map((label, i) => {
+        const li = document.createElement("li");
+        if (this._colors[i]) li.dataset.series = this._colors[i];
+        const [name, value, share] = [label, text[i], this._share(i)].map((content) => {
+          const span = document.createElement("span");
+          span.textContent = content;
+          return span;
+        });
+        li.append(name, value, share);
+        return li;
+      }));
+      return [legend];
+    }
+    /** The row under the pointer by its angle from the middle, or -1 off the slices. */
+    _indexAt(e) {
+      const [turn, share] = this._polarAt(e);
+      const distance = share * 100;
+      const hole = this.el.classList.contains("donut") ? parseFloat(getComputedStyle(this.el).getPropertyValue("--md-comp-pie-chart-hole")) || 0 : 0;
+      if (distance < RADIUS * hole) return -1;
+      const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);
+      return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;
+    }
+    /**
+     * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps
+     * between them and the donut's hole, which CSS sizes. The values and the
+     * total are HTML over it.
+     */
+    _draw() {
+      const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));
+      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;
+      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);
+      });
+      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");
+      const svg = svgNode("svg", { viewBox: "-50 -50 100 100", focusable: "false" });
+      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("") : ""
+        }),
+        svgNode("circle", { class: "pie-chart-hole", r: String(RADIUS), fill: "black" })
+      );
+      const slices = svgNode("g", { mask: `url(#${id})` });
+      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}${arc2} 1 1 0,${RADIUS}${arc2} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc2} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`
+        });
+        slices.append(slice2);
+        return slice2;
+      });
+      svg.append(mask, slices);
+      pie.append(svg);
+      if (this.el.classList.contains("values")) {
+        const labels = document.createElement("div");
+        labels.className = "pie-chart-values";
+        this._turns.forEach(([start, end], i) => {
+          if (end - start < LABEL_SHARE) return;
+          const label = document.createElement("span");
+          label.dataset.series = this._colors[i];
+          label.style.setProperty("--turn", String((start + end) / 2));
+          label.textContent = this._share(i);
+          labels.append(label);
+        });
+        pie.append(labels);
+      }
+      const middle = this._total("pie-chart-total");
+      if (middle) pie.append(middle);
+      return pie;
+    }
+  };
+
+  // src/ts/components/heatmapChart.ts
+  var HeatmapChart = class extends LineChart {
+    get _type() {
+      return "heatmap-chart";
+    }
+    get _key() {
+      return "Expressive_HeatmapChart";
+    }
+    static init(els, options = {}) {
+      return super.init(els, options);
+    }
+    static getInstance(el) {
+      return el["Expressive_HeatmapChart"];
+    }
+    /** 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;
+      this._tooltip.hidden = !cell;
+      if (!cell) return;
+      cell.classList.add("active");
+      const columns = this.series.length;
+      const [row, series] = [Math.floor(index / columns), this.series[index % columns]];
+      const title = document.createElement("strong");
+      title.textContent = this.labels[row];
+      const [name, text] = [document.createElement("span"), document.createElement("span")];
+      name.textContent = series.name;
+      if (this._levels[index] === null) name.className = "gap";
+      else name.style.setProperty("--level", String(this._levels[index]));
+      text.textContent = series.text[row];
+      this._tooltip.replaceChildren(title, name, text);
+      const end = left + width / 2 > plotWidth / 2;
+      this._tooltip.classList.toggle("end", end);
+      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) {
+      if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
+      const [columns, last] = [this.series.length, this.labels.length - 1];
+      const index = Math.max(0, this.activeIndex);
+      const [row, column] = [Math.floor(index / columns), index % columns];
+      const [next, back] = this._reversed ? ["ArrowLeft", "ArrowRight"] : ["ArrowRight", "ArrowLeft"];
+      const to = {
+        [next]: [row, column + 1],
+        [back]: [row, column - 1],
+        ArrowDown: [row + 1, column],
+        ArrowUp: [row - 1, column],
+        Home: [row, 0],
+        End: [row, columns - 1]
+      }[key];
+      if (!to) return void 0;
+      if (this.activeIndex < 0) return 0;
+      const clamp = (value, max) => Math.min(max, Math.max(0, value));
+      return clamp(to[0], last) * columns + clamp(to[1], columns - 1);
+    }
+    /**
+     * The cell under the pointer by its position, or -1 off the grid. A touch
+     * keeps its first target while it drags, so the target cannot be used. The
+     * cells and gaps are even, so each band's edge falls in a gap and a gap
+     * counts as the nearer cell.
+     */
+    _indexAt(e) {
+      const [columns, rows] = [this.series.length, this.labels.length];
+      const first = this._cells[0].getBoundingClientRect();
+      const last = this._cells[this._cells.length - 1].getBoundingClientRect();
+      const [left, right] = [Math.min(first.left, last.left), Math.max(first.right, last.right)];
+      const [x, y] = [e.clientX, e.clientY];
+      if (x < left || x > right || y < first.top || y > last.bottom) return -1;
+      const band = (offset, size, count) => Math.min(count - 1, Math.floor(offset / (size || 1) * count));
+      const column = band(x - left, right - left, columns);
+      return band(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);
+    }
+    /**
+     * The legend: a gradient from the lowest cell's shade to the highest's,
+     * labelled with their text. A fixed scale wider than the data shows only
+     * the part the data uses.
+     */
+    _guides() {
+      const legend = document.createElement("div");
+      legend.className = "heatmap-chart-legend";
+      legend.setAttribute("aria-hidden", "true");
+      const [low, scale, high] = ["span", "span", "span"].map((tag) => document.createElement(tag));
+      [low.textContent, high.textContent] = this._ends;
+      scale.className = "heatmap-chart-scale";
+      if (this._reversed) scale.style.setProperty("--heatmap-chart-to", "left");
+      scale.style.setProperty("--low", String(this._endLevels[0]));
+      scale.style.setProperty("--high", String(this._endLevels[1]));
+      legend.append(low, scale, high);
+      return [legend];
+    }
+    /**
+     * A grid of the row headers and cells, row by row, with the column headers
+     * below. Each cell's --level shades it in CSS.
+     */
+    _draw() {
+      const columns = this.series.length;
+      let [low, high] = [Infinity, -Infinity];
+      this._ends = ["", ""];
+      this.series.forEach((series) => series.values.forEach((value, row) => {
+        if (value === null) return;
+        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 [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)];
+      const grid = document.createElement("div");
+      grid.className = "heatmap-chart-grid";
+      grid.setAttribute("aria-hidden", "true");
+      grid.style.setProperty("--columns", String(columns));
+      grid.style.setProperty("--rows", String(this.labels.length));
+      const span = (className, text = "") => {
+        const element = document.createElement("span");
+        element.className = className;
+        element.textContent = text;
+        return element;
+      };
+      const label = (cell) => cell?.dataset.label ?? cell?.textContent.trim() ?? "";
+      const values = this.el.classList.contains("values");
+      this._cells = [];
+      this._levels = [];
+      this.labels.forEach((_, row) => {
+        grid.append(span("heatmap-chart-row", label(this._rows[row].cells[0])));
+        this.series.forEach((series) => {
+          const value = series.values[row];
+          const level = value === null ? null : shade(value);
+          const cell = span("heatmap-chart-cell", values ? series.text[row] : "");
+          if (level === null) cell.classList.add("gap");
+          else cell.style.setProperty("--level", String(level));
+          this._cells.push(cell);
+          this._levels.push(level);
+          grid.append(cell);
+        });
+      });
+      const labels = this._header.slice(1, columns + 1).map(label);
+      labels.forEach((text, column) => {
+        if (!text) return;
+        let end = column + 1;
+        while (end < columns && !labels[end]) end++;
+        const element = span("heatmap-chart-column", text);
+        element.classList.toggle("run", end > column + 1);
+        element.style.gridArea = `${this.labels.length + 1} / ${column + 2} / auto / ${end + 2}`;
+        grid.append(element);
+      });
+      return grid;
+    }
+  };
+
+  // src/ts/components/radarChart.ts
+  var RINGS = 4;
+  var RadarChart = class extends LineChart {
+    get _type() {
+      return "radar-chart";
+    }
+    get _key() {
+      return "Expressive_RadarChart";
+    }
+    /** The scale starts at zero, the middle, so shapes compare by size. */
+    get _fromZero() {
+      return true;
+    }
+    get _circular() {
+      return true;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options);
+    }
+    static getInstance(el) {
+      return el["Expressive_RadarChart"];
+    }
+    /**
+     * The cursor is a spoke turned by --turn, and the tooltip sits past its
+     * tip. LineChart's points on the spoke keep their top, a share of the
+     * radius, which stops at the rim and the middle like the shapes.
+     */
+    _place(index) {
+      for (const dot of this._cursor.children) {
+        dot.style.top = `${Math.min(100, Math.max(0, parseFloat(dot.style.top)))}%`;
+      }
+      const turn = this._turn(index);
+      this._cursor.style.setProperty("--turn", String(turn));
+      this._tooltip.style.setProperty("--turn", String(turn));
+      this._tooltip.classList.toggle("end", turn > 0 && turn < 0.5);
+    }
+    /** A row's spoke as a fraction of a turn clockwise from the top. */
+    _turn(index) {
+      return index / this.labels.length;
+    }
+    /** Only the legend; the labels go round the rim in _draw. */
+    _guides() {
+      return this._legend();
+    }
+    /** The nearest spoke to the pointer, by its angle from the middle. */
+    _indexAt(e) {
+      const [turn] = this._polarAt(e);
+      return Math.round(turn * this.labels.length) % this.labels.length;
+    }
+    /**
+     * An SVG in a -50 to 50 box: the rings and spokes of the grid, then each
+     * series' shape, with its points for .points. The rim is the box's edge;
+     * 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 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`;
+      const svg = svgNode("svg", { viewBox: "-50 -50 100 100", "aria-hidden": "true", focusable: "false" });
+      svg.append(svgNode("path", {
+        class: "radar-chart-grid",
+        d: Array.from({ length: RINGS }, (_, r) => ring((r + 1) / RINGS)).join("") + rows.map((i) => `M0,0L${at(i, 1)}`).join("")
+      }));
+      const points = this.el.classList.contains("points");
+      this.series.forEach((series, s) => {
+        const group = svgNode("g", {
+          class: `radar-chart-series ${series.className}`.trim(),
+          "data-series": String(s % COLORS + 1)
+        });
+        const drawn = rows.filter((i) => series.values[i] !== null);
+        const corners = drawn.map((i) => at(i, share(series.values[i])));
+        group.append(svgNode("path", { class: "radar-chart-shape", d: corners.length ? `M${corners.join("L")}Z` : "" }));
+        if (points) group.append(svgNode("path", { class: "radar-chart-points", d: corners.map((c) => `M${c}h0`).join("") }));
+        svg.append(group);
+      });
+      const labels = document.createElement("ol");
+      labels.className = "radar-chart-axes";
+      labels.setAttribute("aria-hidden", "true");
+      this.labels.forEach((text, i) => {
+        const li = document.createElement("li");
+        li.textContent = text;
+        li.style.setProperty("--turn", String(this._turn(i)));
+        labels.append(li);
+      });
+      const web = document.createElement("div");
+      web.className = "radar-chart-web";
+      web.append(svg, labels);
+      return web;
+    }
+  };
+
+  // src/ts/components/radialChart.ts
+  var RADIUS2 = 46;
+  var FILL = 0.8;
+  var RadialChart = class extends LineChart {
+    get _type() {
+      return "radial-chart";
+    }
+    get _key() {
+      return "Expressive_RadialChart";
+    }
+    get _points() {
+      return false;
+    }
+    get _circular() {
+      return true;
+    }
+    get _gauge() {
+      return this.el.classList.contains("gauge");
     }
-    /**
-     * Initializes instances of CharacterCounter.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
     static init(els, options = {}) {
-      return super.init(els, options, _CharacterCounter);
+      return super.init(els, options);
     }
     static getInstance(el) {
-      return el["Expressive_CharacterCounter"];
+      return el["Expressive_RadialChart"];
+    }
+    show(index) {
+      if (!this._tooltip || index === this.activeIndex) return;
+      super.show(index);
+      this._rings.forEach((ring, i) => ring.classList.toggle("active", i === index));
+      if (this._tooltip.hidden) return;
+      const color = this._color(index);
+      this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
+        span.dataset.series = color;
+      });
     }
-    destroy() {
-      this._removeEventHandlers();
-      this.el["Expressive_CharacterCounter"] = void 0;
-      this._removeCounter();
+    /** The tooltip sits where the ring's fill ends. */
+    _place(index) {
+      const turn = this._turn(this._fractions[index]);
+      const r = this._radii[index];
+      const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];
+      this._tooltip.style.left = `${50 + x}%`;
+      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;
+    }
+    /** For more than one row, a legend of every row with its color and cell. */
+    _guides() {
+      if (this.labels.length < 2) return [];
+      const legend = document.createElement("ul");
+      legend.className = "radial-chart-legend";
+      legend.setAttribute("aria-hidden", "true");
+      const text = this.series[0].text;
+      legend.append(...this.labels.map((label, i) => {
+        const li = document.createElement("li");
+        li.dataset.series = this._color(i);
+        const [name, value] = [label, text[i]].map((content) => {
+          const span = document.createElement("span");
+          span.textContent = content;
+          return span;
+        });
+        li.append(name, value);
+        return li;
+      }));
+      return [legend];
+    }
+    /** The ring under the pointer by its distance from the middle, or -1. */
+    _indexAt(e) {
+      const box = this._plot.getBoundingClientRect();
+      const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];
+      if (this._gauge && y > 0) return -1;
+      const distance = Math.hypot(x, y) / box.width * 100;
+      const step = this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;
+      return this._radii.findIndex((r) => Math.abs(distance - r) <= step / 2);
     }
-    _setupEventHandlers() {
-      this.el.addEventListener("focus", this.updateCounter, true);
-      this.el.addEventListener("input", this.updateCounter, true);
+    /**
+     * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row
+     * is a track circle and a fill circle whose dash is its share; CSS draws
+     * them from --radial-chart-dash. The total is HTML over it.
+     */
+    _draw() {
+      const style = getComputedStyle(this.el);
+      const token = (name, fallback) => {
+        const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));
+        return Number.isFinite(value) ? value : fallback;
+      };
+      const count = this.labels.length;
+      let [width, gap] = [Math.max(0, token("thickness", 8)), Math.max(0, token("gap", 2))];
+      const scale = Math.min(1, RADIUS2 * FILL / (count * width + (count - 1) * gap || 1));
+      [width, gap] = [width * scale, gap * scale];
+      this._width = width;
+      this._radii = this.labels.map((_, i) => RADIUS2 - width / 2 - i * (width + gap));
+      const max = [parseFloat(this.el.dataset.max ?? ""), this.options.max ?? NaN, 100].find((value) => value > 0);
+      this._fractions = this.series[0].values.map((value) => Math.min(1, Math.max(0, (value ?? 0) / max)));
+      const gauge = this._gauge;
+      const svg = svgNode("svg", { viewBox: gauge ? "-50 -50 100 50" : "-50 -50 100 100", focusable: "false" });
+      const transform = gauge ? "rotate(180)" : "rotate(-90)";
+      const span = gauge ? 0.5 : 1;
+      this._rings = this._radii.map((r, i) => {
+        const length = 2 * Math.PI * r;
+        const circle = (name, fraction, capped) => {
+          const ring2 = svgNode("circle", { class: name, r: r.toFixed(3), transform, "stroke-width": width.toFixed(3) });
+          const dash = Math.max(1e-3, fraction * span * length - (capped ? width : 0));
+          ring2.style.setProperty("--radial-chart-dash", `${dash.toFixed(3)} ${length.toFixed(3)}`);
+          if (capped) ring2.style.setProperty("--radial-chart-offset", (-width / 2).toFixed(3));
+          return ring2;
+        };
+        const ring = circle("radial-chart-ring", this._fractions[i], true);
+        ring.dataset.series = this._color(i);
+        if (!this._fractions[i]) ring.classList.add("empty");
+        svg.append(circle("radial-chart-track", 1, gauge), ring);
+        return ring;
+      });
+      const rings = document.createElement("div");
+      rings.className = "radial-chart-rings";
+      rings.setAttribute("aria-hidden", "true");
+      rings.style.setProperty("--radial-chart-middle", `${(this._radii[count - 1] - this._width / 2) * 2}%`);
+      rings.append(svg);
+      const total = this._total("radial-chart-total");
+      if (total) rings.append(total);
+      return rings;
     }
-    _removeEventHandlers() {
-      this.el.removeEventListener("focus", this.updateCounter, true);
-      this.el.removeEventListener("input", this.updateCounter, true);
+  };
+
+  // src/ts/components/mixedChart.ts
+  var has = (series, name) => series.className.split(/\s+/).includes(name);
+  var MixedChart = class extends ColumnChart {
+    get _type() {
+      return "mixed-chart";
     }
-    _setupCounter() {
-      this.counterEl = document.createElement("span");
-      this.counterEl.classList.add("character-counter");
-      this.counterEl.setAttribute("aria-live", "polite");
-      this.counterEl.setAttribute("aria-atomic", "true");
-      this.counterEl.style.float = "right";
-      this.counterEl.style.fontSize = "12px";
-      this.counterEl.style.height = "1";
-      this.el.parentElement.appendChild(this.counterEl);
+    get _key() {
+      return "Expressive_MixedChart";
     }
-    _removeCounter() {
-      this.counterEl.remove();
+    get _points() {
+      return true;
     }
-    _validateInput() {
-      if (this.isValidLength && this.isInvalid) {
-        this.isInvalid = false;
-        this.el.classList.remove("invalid");
-      } else if (!this.isValidLength && !this.isInvalid) {
-        this.isInvalid = true;
-        this.el.classList.remove("valid");
-        this.el.classList.add("invalid");
-      }
+    static init(els, options = {}) {
+      return super.init(els, options);
+    }
+    static getInstance(el) {
+      return el["Expressive_MixedChart"];
+    }
+    /** The start scale, then the end scale; each includes zero if it has columns. */
+    _scale(series, min, max) {
+      const end = series.filter((each) => has(each, "end"));
+      const start = series.filter((each) => !end.includes(each));
+      const columns = (list) => list.some((each) => has(each, "column"));
+      super._scale(end, this._number("endMin"), this._number("endMax"), columns(end));
+      return super._scale(start, min, max, columns(start));
+    }
+    /** Columns behind, then the lines and areas over them. */
+    _draw() {
+      const marks = document.createElement("div");
+      marks.className = "mixed-chart-marks";
+      const columns = super._draw(this.series.filter((series) => has(series, "column")));
+      columns.className = "mixed-chart-columns";
+      marks.append(columns, LineChart.prototype["_draw"].call(this, this.series.filter((series) => !has(series, "column"))));
+      return marks;
     }
   };
 
   // src/ts/components/select.ts
-  var _defaults12 = {
+  var _defaults17 = {
     classes: "",
     menuOptions: {}
   };
@@ -4000,7 +6145,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults12;
+      return _defaults17;
     }
     /**
      * Initializes instances of FormSelect.
@@ -4425,7 +6570,7 @@ var Expressive = (() => {
   };
 
   // src/ts/plugins/dockedDisplayPlugin.ts
-  var _defaults13 = {
+  var _defaults18 = {
     margin: 5,
     transition: 10,
     duration: 250,
@@ -4439,9 +6584,9 @@ var Expressive = (() => {
         }
       };
       /**
-       * 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);
@@ -4450,6 +6595,7 @@ 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 = `
@@ -4463,6 +6609,7 @@ var Expressive = (() => {
       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,
@@ -4474,14 +6621,13 @@ var Expressive = (() => {
       };
       this.el = el;
       this.options = {
-        ..._defaults13,
+        ..._defaults18,
         ...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);
     }
     /**
      * Initializes instance of DockedDisplayPlugin
@@ -4495,7 +6641,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/datepicker.ts
-  var _defaults14 = {
+  var _defaults19 = {
     // the default output format for the input field value
     format: "mmm dd, yyyy",
     // Used to create date object from current input string
@@ -4599,6 +6745,8 @@ var Expressive = (() => {
     constructor(el, options) {
       super(el, options, _Datepicker);
       this.multiple = false;
+      /** 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. */
@@ -4665,7 +6813,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;
@@ -4780,7 +6930,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults14;
+      return _defaults19;
     }
     /**
      * Initializes instances of Datepicker.
@@ -5222,7 +7372,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) {
@@ -5240,7 +7392,10 @@ 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 checked = rows.every((row) => this._checkedRows.has(row));
+      this._checkedRows.clear();
+      return "<tbody>" + (checked ? html : _Datepicker._calendarMarkup(html, "tbody")) + "</tbody>";
     }
     static _calendarMarkup(html, parent) {
       const template = document.createElement("template");
@@ -5595,8 +7750,789 @@ var Expressive = (() => {
         </div>`;
   var Datepicker = _Datepicker;
 
+  // src/ts/components/messageScroller.ts
+  var _defaults20 = {
+    autoScroll: true,
+    defaultScrollPosition: "end",
+    peek: 64
+  };
+  var EDGE = 2;
+  var UP_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "PageUp", "Home"]);
+  var RELEASE_EVENTS = ["pointerup", "pointercancel", "touchend", "touchcancel"];
+  var MessageScroller = class _MessageScroller extends Component {
+    constructor(el, options) {
+      super(el, options, _MessageScroller);
+      this._opened = false;
+      this._following = false;
+      /** A press is down: it may be a tap or a scrollbar drag. */
+      this._holding = false;
+      this._lastTop = 0;
+      /** Where a programmatic scroll is heading; null when none is running. */
+      this._target = null;
+      /** Distance left to the target at the last scroll event. */
+      this._distance = Infinity;
+      /** The first visible message and its offset from the viewport top. */
+      this._ref = null;
+      this._refOffset = 0;
+      /** The latest anchored turn, which the spacer lets reach the top. */
+      this._anchor = null;
+      this._spacer = 0;
+      this._last = null;
+      this._resizeObserver = null;
+      this._mutationObserver = null;
+      // A programmatic scroll ends when it arrives, or when a scroll moves away
+      // from its target because something else took over.
+      this._handleScroll = () => {
+        if (this._target !== null) {
+          const distance = Math.abs(this.viewport.scrollTop - this._resolve(this._target));
+          if (distance > EDGE && distance < this._distance) {
+            this._distance = distance;
+            return;
+          }
+          this._target = null;
+        }
+        this._settle();
+      };
+      this._handleUserScroll = (e) => {
+        if (e.type === "wheel" && e.deltaY >= 0) return;
+        if (e.type === "keydown" && !UP_KEYS.has(e.key)) return;
+        this._target = null;
+        if (e.type === "pointerdown" || e.type === "touchstart") this._holding = true;
+        else this._following = false;
+      };
+      this._handleRelease = () => {
+        if (!this._holding) return;
+        this._holding = false;
+        if (this._following) this.viewport.scrollTop = this.viewport.scrollHeight;
+        this._sync();
+      };
+      this._handleButtonClick = () => this.scrollToEnd();
+      this._handleMutations = (records) => {
+        for (const record of records) {
+          record.addedNodes.forEach((node) => {
+            if (node instanceof Element) this._resizeObserver?.observe(node);
+          });
+          record.removedNodes.forEach((node) => {
+            if (node instanceof Element) this._resizeObserver?.unobserve(node);
+          });
+        }
+        const previous = this._last;
+        this._last = this.viewport.lastElementChild;
+        if (!this._opened) return;
+        if (!this._following && this._target === null) this._restore();
+        if (!this.options.autoScroll) return;
+        if (previous && previous.parentElement !== this.viewport) return;
+        for (let item = this._last; item && item !== previous; item = item.previousElementSibling) {
+          if (item.hasAttribute("data-scroll-anchor")) {
+            this._anchor = item;
+            this._updateSpacer();
+            this._following = true;
+            this._scrollTo(this._top(item) - this.options.peek);
+            return;
+          }
+        }
+      };
+      this._handleResize = () => {
+        if (!this._opened) {
+          if (this.viewport.clientHeight > 0) this._open();
+          return;
+        }
+        this._updateSpacer();
+        const v = this.viewport;
+        if (this._target === "end") this._scrollTo("end");
+        else if (this._target === null) {
+          if (this._following && !this._holding) v.scrollTop = v.scrollHeight;
+          else this._restore();
+        }
+        this._sync();
+      };
+      this.el["Expressive_MessageScroller"] = this;
+      this.options = {
+        ..._MessageScroller.defaults,
+        ...options
+      };
+      this.viewport = el.querySelector(":scope > .message-scroller-viewport");
+      this.button = el.querySelector(":scope > .message-scroller-button");
+      if (!this.viewport) {
+        console.error("MessageScroller needs a .message-scroller-viewport child.");
+        return;
+      }
+      this._last = this.viewport.lastElementChild;
+      if (this.viewport.clientHeight > 0) this._open();
+      if (typeof ResizeObserver !== "undefined") {
+        this._resizeObserver = new ResizeObserver(this._handleResize);
+        this._resizeObserver.observe(this.viewport, { box: "border-box" });
+        for (const item of Array.from(this.viewport.children)) this._resizeObserver.observe(item);
+      }
+      this._mutationObserver = new MutationObserver(this._handleMutations);
+      this._mutationObserver.observe(this.viewport, { childList: true });
+      this.viewport.addEventListener("scroll", this._handleScroll, { passive: true });
+      for (const type of ["wheel", "touchstart", "pointerdown", "keydown"]) {
+        this.viewport.addEventListener(type, this._handleUserScroll, { passive: true });
+      }
+      for (const type of RELEASE_EVENTS) document.addEventListener(type, this._handleRelease);
+      this.button?.addEventListener("click", this._handleButtonClick);
+    }
+    static get defaults() {
+      return _defaults20;
+    }
+    /**
+     * Initializes instances of MessageScroller.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+      return super.init(els, options, _MessageScroller);
+    }
+    static getInstance(el) {
+      return el["Expressive_MessageScroller"];
+    }
+    destroy() {
+      this.el["Expressive_MessageScroller"] = void 0;
+      if (!this.viewport) return;
+      this._resizeObserver?.disconnect();
+      this._mutationObserver?.disconnect();
+      this.viewport.removeEventListener("scroll", this._handleScroll);
+      for (const type of ["wheel", "touchstart", "pointerdown", "keydown"]) {
+        this.viewport.removeEventListener(type, this._handleUserScroll);
+      }
+      for (const type of RELEASE_EVENTS) document.removeEventListener(type, this._handleRelease);
+      this.viewport.style.removeProperty("--md-comp-message-scroller-spacer");
+      if (this.button) {
+        this.button.removeEventListener("click", this._handleButtonClick);
+        this.button.inert = false;
+      }
+    }
+    /** Scrolls to the latest message and resumes following. */
+    scrollToEnd() {
+      this._following = this.options.autoScroll;
+      this._scrollTo("end");
+    }
+    /** Scrolls to the first message. */
+    scrollToStart() {
+      this._following = false;
+      this._scrollTo(0);
+    }
+    /**
+     * Scrolls the element with this id to the top of the viewport, below the
+     * peek, and stops following.
+     * @returns false when no such element is inside the viewport.
+     */
+    scrollToMessage(id) {
+      const target = Utils.getElementById(this.viewport, id);
+      if (!target || !this.viewport.contains(target)) return false;
+      this._following = false;
+      this._scrollTo(this._top(target) - this.options.peek);
+      return true;
+    }
+    _open() {
+      this._opened = true;
+      const v = this.viewport;
+      const position = this.options.defaultScrollPosition;
+      const anchors = v.querySelectorAll(":scope > [data-scroll-anchor]");
+      const anchor = position === "last-anchor" ? anchors[anchors.length - 1] : null;
+      if (position === "start") v.scrollTop = 0;
+      else if (anchor && this._contentEnd() - this._top(anchor) + this.options.peek > v.clientHeight) {
+        v.scrollTop = this._top(anchor) - this.options.peek;
+      } else v.scrollTop = v.scrollHeight;
+      this._settle();
+    }
+    /**
+     * Records where the reader is once no programmatic scroll is running.
+     * Content can grow between a scroll and the resize that re-pins the end,
+     * so only moving toward the start releases following.
+     */
+    _settle() {
+      const top = this.viewport.scrollTop;
+      const kept = this._following && top >= this._lastTop - EDGE;
+      this._following = this.options.autoScroll && (kept || this._atEnd());
+      this._lastTop = top;
+      this._capture();
+      this._sync();
+    }
+    _scrollTo(target) {
+      const v = this.viewport;
+      if (Math.abs(v.scrollTop - this._resolve(target)) <= EDGE) {
+        this._target = null;
+        this._settle();
+        return;
+      }
+      this._target = target;
+      this._distance = Infinity;
+      const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+      v.scrollTo({
+        top: target === "end" ? v.scrollHeight : target,
+        behavior: reduce ? "auto" : "smooth"
+      });
+    }
+    _resolve(target) {
+      const max = this.viewport.scrollHeight - this.viewport.clientHeight;
+      return target === "end" ? max : Math.max(0, Math.min(target, max));
+    }
+    _atEnd() {
+      const v = this.viewport;
+      return v.scrollHeight - v.scrollTop - v.clientHeight <= EDGE;
+    }
+    /** Offset of an element from the top of the scrolled content. */
+    _top(el) {
+      const v = this.viewport;
+      return el.getBoundingClientRect().top - v.getBoundingClientRect().top - v.clientTop + v.scrollTop;
+    }
+    /** Bottom of the content without the spacer, padding included. */
+    _contentEnd() {
+      const last = this.viewport.lastElementChild;
+      if (!last) return 0;
+      const padding = parseFloat(getComputedStyle(this.viewport).paddingBlockEnd) - this._spacer;
+      return this._top(last) + last.getBoundingClientRect().height + padding;
+    }
+    /** Remembers the first visible message so prepends can keep it in place. */
+    _capture() {
+      const items = this.viewport.children;
+      const top = this.viewport.getBoundingClientRect().top + this.viewport.clientTop;
+      let low = 0;
+      let high = items.length - 1;
+      while (low < high) {
+        const mid = low + high >> 1;
+        if (items[mid].getBoundingClientRect().bottom > top) high = mid;
+        else low = mid + 1;
+      }
+      this._ref = items[low] ?? null;
+      this._refOffset = this._ref ? this._ref.getBoundingClientRect().top - top : 0;
+    }
+    /** Moves the remembered message back to where the reader last saw it. */
+    _restore() {
+      if (this._ref?.parentElement !== this.viewport) {
+        this._capture();
+        return;
+      }
+      const top = this.viewport.getBoundingClientRect().top + this.viewport.clientTop;
+      const delta = this._ref.getBoundingClientRect().top - top - this._refOffset;
+      if (Math.abs(delta) >= 1) this.viewport.scrollTop += delta;
+    }
+    /** Sizes the blank space that lets the latest anchored turn reach the top. */
+    _updateSpacer() {
+      let space = 0;
+      if (this._anchor?.parentElement === this.viewport) {
+        const room = this._top(this._anchor) - this.options.peek + this.viewport.clientHeight;
+        space = Math.max(0, Math.ceil(room - this._contentEnd()));
+      } else this._anchor = null;
+      if (space === this._spacer) return;
+      this._spacer = space;
+      if (space) this.viewport.style.setProperty("--md-comp-message-scroller-spacer", `${space}px`);
+      else this.viewport.style.removeProperty("--md-comp-message-scroller-spacer");
+    }
+    /** The button is inert while there is nothing below. */
+    _sync() {
+      if (!this.button) return;
+      const idle = this._atEnd();
+      const root = this.button.getRootNode();
+      if (idle && root.activeElement === this.button) this.viewport.focus({ preventScroll: true });
+      this.button.inert = idle;
+    }
+  };
+
+  // src/ts/components/richTextEditor.ts
+  var _defaults21 = {
+    Editor: null,
+    extensions: []
+  };
+  var NAMING = ["aria-label", "aria-labelledby", "aria-describedby"];
+  var RichTextEditor = class _RichTextEditor extends Component {
+    constructor(el, options) {
+      super(el, options, _RichTextEditor);
+      /** The Tiptap editor. */
+      this.editor = null;
+      /** The element the editor is mounted in. */
+      this.content = null;
+      this._actions = /* @__PURE__ */ new Map();
+      this._label = null;
+      this._handleClick = (e) => {
+        const button = e.target.closest("button[data-command]");
+        const action = this._actions.get(button);
+        if (action && !button.disabled) this.editor.chain().focus()[action.command](action.attributes).run();
+      };
+      this._handleLabelClick = () => {
+        this.editor.chain().focus().run();
+      };
+      this._handleUpdate = () => {
+        this.textarea.value = this.editor.isEmpty ? "" : this.editor.getHTML();
+        this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+      };
+      this._handleTransaction = () => {
+        const can = this.editor.isEditable && this.editor.can();
+        for (const [button, { command, attributes, active }] of this._actions) {
+          button.disabled = !can || !(command in this.editor.commands) || !can[command](attributes);
+          if (!active) continue;
+          const on = this.editor.isActive(active, attributes);
+          button.setAttribute("aria-pressed", String(on));
+          button.classList.toggle("active", on);
+        }
+      };
+      this.el["Expressive_RichTextEditor"] = this;
+      this.options = {
+        ..._RichTextEditor.defaults,
+        ...options
+      };
+      this.textarea = el.querySelector(":scope > textarea");
+      if (!this.textarea || !this.options.Editor) {
+        console.error("RichTextEditor needs a <textarea> child and the Tiptap Editor class in options.Editor.");
+        return;
+      }
+      for (const button of el.querySelectorAll("button[data-command]")) {
+        const command = button.dataset.command;
+        const attributes2 = button.dataset.attributes ? JSON.parse(button.dataset.attributes) : void 0;
+        const active = command.startsWith("toggle") ? command[6].toLowerCase() + command.slice(7) : void 0;
+        this._actions.set(button, { command, attributes: attributes2, active });
+      }
+      const attributes = { role: "textbox", "aria-multiline": "true" };
+      for (const name of NAMING) {
+        const value = this.textarea.getAttribute(name);
+        if (value) attributes[name] = value;
+      }
+      this._label = this.textarea.labels?.[0] ?? null;
+      if (this._label && !attributes["aria-labelledby"]) {
+        if (!this._label.id) this._label.id = `rich-text-editor-label-${Utils.guid()}`;
+        attributes["aria-labelledby"] = this._label.id;
+        this._label.addEventListener("click", this._handleLabelClick);
+      }
+      this.content = document.createElement("div");
+      this.content.className = "rich-text-editor-content";
+      this.textarea.after(this.content);
+      this.textarea.hidden = true;
+      this.editor = new this.options.Editor({
+        element: this.content,
+        extensions: this.options.extensions,
+        content: this.textarea.value,
+        editable: !(this.textarea.disabled || this.textarea.readOnly),
+        editorProps: { attributes }
+      });
+      this.editor.on("update", this._handleUpdate);
+      this.editor.on("transaction", this._handleTransaction);
+      this._handleTransaction();
+      el.addEventListener("click", this._handleClick);
+    }
+    static get defaults() {
+      return _defaults21;
+    }
+    /**
+     * Initializes instances of RichTextEditor.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+      return super.init(els, options, _RichTextEditor);
+    }
+    static getInstance(el) {
+      return el["Expressive_RichTextEditor"];
+    }
+    destroy() {
+      this.el["Expressive_RichTextEditor"] = void 0;
+      if (!this.editor) return;
+      this.el.removeEventListener("click", this._handleClick);
+      this._label?.removeEventListener("click", this._handleLabelClick);
+      this.editor.off("update", this._handleUpdate);
+      this.editor.off("transaction", this._handleTransaction);
+      this.editor.destroy();
+      this.editor = null;
+      this.content.remove();
+      this.textarea.hidden = false;
+      for (const button of this._actions.keys()) {
+        button.disabled = false;
+        button.classList.remove("active");
+        button.removeAttribute("aria-pressed");
+      }
+    }
+  };
+
+  // src/ts/components/mapView.ts
+  var OPENFREEMAP = "https://tiles.openfreemap.org/styles/";
+  var _defaults22 = {
+    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 _defaults22;
+    }
+    /**
+     * 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 = "";
+      };
+      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: () => {
+          this.map.off("click", clusters, zoomIn);
+          for (const layer of [clusters, points]) {
+            this.map.off("mouseenter", layer, pointer);
+            this.map.off("mouseleave", layer, reset);
+          }
+        }
+      });
+      this.map.on("click", clusters, zoomIn);
+      for (const layer of [clusters, points]) {
+        this.map.on("mouseenter", layer, pointer);
+        this.map.on("mouseleave", layer, reset);
+      }
+    }
+    /** 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 _defaults15 = {
+  var _defaults23 = {
     inDuration: 275,
     outDuration: 200,
     onOpenStart: null,
@@ -5745,7 +8681,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults15;
+      return _defaults23;
     }
     /**
      * Initializes instances of Lightbox.
@@ -5951,7 +8887,7 @@ var Expressive = (() => {
 
   // src/ts/components/scrollspy.ts
   var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-  var _defaults16 = {
+  var _defaults24 = {
     scrollOffset: 200,
     activeClass: "active",
     getActiveElement: _defaultGetActiveElement,
@@ -5987,7 +8923,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults16;
+      return _defaults24;
     }
     static init(els, options = {}) {
       return super.init(els, options, _ScrollSpy);
@@ -6021,8 +8957,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;
@@ -6077,7 +9014,7 @@ var Expressive = (() => {
   var ScrollSpy = _ScrollSpy;
 
   // src/ts/components/navigationRail.ts
-  var _defaults17 = {
+  var _defaults25 = {
     onOpenStart: null,
     onOpenEnd: null,
     onCloseStart: null,
@@ -6164,7 +9101,7 @@ var Expressive = (() => {
       document.addEventListener("keydown", this._onKeyDown);
     }
     static get defaults() {
-      return _defaults17;
+      return _defaults25;
     }
     static init(els, options = {}) {
       return super.init(els, options, _NavigationRail);
@@ -6194,7 +9131,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/tabs.ts
-  var _defaults18 = {
+  var _defaults26 = {
     duration: 300,
     onShow: null,
     swipeable: false,
@@ -6207,13 +9144,17 @@ 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";
+          const left = this._calcLeftPos(this._activeTabLink);
+          const right = this._calcRightPos(this._activeTabLink);
+          this._indicator.style.left = left + "px";
+          this._indicator.style.right = right + "px";
         }
-      };
+      }, 200);
       this._handleTabClick = (e) => {
         const target = e.target;
         if (!target) return;
@@ -6281,7 +9222,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults18;
+      return _defaults26;
     }
     /**
      * Initializes instances of Tabs.
@@ -6468,7 +9409,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/timepicker.ts
-  var _defaults19 = {
+  var _defaults27 = {
     dialRadius: 135,
     outerRadius: 105,
     innerRadius: 70,
@@ -6664,7 +9605,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults19;
+      return _defaults27;
     }
     /**
      * Initializes instances of Timepicker.
@@ -7026,7 +9967,7 @@ var Expressive = (() => {
   var Timepicker = _Timepicker;
 
   // src/ts/components/snackbar.ts
-  var _defaults20 = {
+  var _defaults28 = {
     text: "",
     action: "",
     onAction: null,
@@ -7076,7 +10017,7 @@ var Expressive = (() => {
       this._setTimer();
     }
     static get defaults() {
-      return _defaults20;
+      return _defaults28;
     }
     static getInstance(el) {
       return el["Expressive_Snackbar"];
@@ -7116,6 +10057,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) {
@@ -7128,7 +10070,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();
       }
@@ -7141,7 +10083,7 @@ 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) {
@@ -7373,7 +10315,7 @@ var Expressive = (() => {
   var Snackbar = _Snackbar;
 
   // src/ts/components/tooltip.ts
-  var _defaults21 = {
+  var _defaults29 = {
     exitDelay: 200,
     enterDelay: 0,
     text: "",
@@ -7395,6 +10337,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);
@@ -7407,6 +10350,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();
       };
@@ -7455,7 +10399,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults21;
+      return _defaults29;
     }
     /**
      * Initializes instances of Tooltip.
@@ -7536,7 +10480,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]) {
@@ -7674,11 +10617,33 @@ var Expressive = (() => {
     },
     Carousel: { component: Carousel, selector: ".carousel" },
     Chips: { component: Chips, selector: ".chips" },
+    Confetti: { component: Confetti, selector: ".confetti" },
+    Particles: { component: Particles, selector: "canvas.particles" },
+    ColumnChart: { component: ColumnChart, selector: ".column-chart" },
+    BarChart: { component: BarChart, selector: ".bar-chart" },
+    PieChart: { component: PieChart, selector: ".pie-chart" },
+    HeatmapChart: { component: HeatmapChart, selector: ".heatmap-chart" },
+    RadarChart: { component: RadarChart, selector: ".radar-chart" },
+    RadialChart: { component: RadialChart, selector: ".radial-chart" },
+    MixedChart: { component: MixedChart, selector: ".mixed-chart" },
+    CommandPalette: {
+      component: CommandPalette,
+      selector: "dialog.command-palette"
+    },
+    Questionnaire: {
+      component: Questionnaire,
+      selector: "form.questionnaire"
+    },
     Datepicker: {
       component: Datepicker,
       selector: ".datepicker, .date-picker"
     },
+    LineChart: { component: LineChart, selector: ".line-chart" },
     Menu: { component: Menu, selector: ".menu-trigger" },
+    MessageScroller: {
+      component: MessageScroller,
+      selector: ".message-scroller"
+    },
     Lightbox: { component: Lightbox, selector: ".lightboxed" },
     ScrollSpy: { component: ScrollSpy, selector: ".scrollspy" },
     FormSelect: { component: FormSelect, selector: "select" },
@@ -7712,7 +10677,7 @@ var Expressive = (() => {
   }
 
   // src/ts/modular.ts
-  var version = "0.12.0";
+  var version = "0.14.1";
 
   // src/ts/index.ts
   Forms.Init();