@expressivecss/expressive 0.11.0 → 0.13.1

package/dist/js/expressive.cjs

@@ -22,22 +22,34 @@ __export(index_exports, {
   AppBar: () => AppBar,
   AutoInit: () => AutoInit,
   Autocomplete: () => Autocomplete,
+  BarChart: () => BarChart,
   BottomSheets: () => BottomSheets,
   ButtonGroup: () => ButtonGroup,
   Cards: () => Cards,
   Carousel: () => Carousel,
   CharacterCounter: () => CharacterCounter,
   Chips: () => Chips,
+  ColumnChart: () => ColumnChart,
+  CommandPalette: () => CommandPalette,
   Datepicker: () => Datepicker,
   Dialogs: () => Dialogs,
   ExpandingCard: () => ExpandingCard,
   FloatingActionButton: () => FloatingActionButton,
   FormSelect: () => FormSelect,
   Forms: () => Forms,
+  HeatmapChart: () => HeatmapChart,
   Lightbox: () => Lightbox,
+  LineChart: () => LineChart,
   Menu: () => Menu,
+  MessageScroller: () => MessageScroller,
+  MixedChart: () => MixedChart,
   NavigationRail: () => NavigationRail,
+  PieChart: () => PieChart,
+  Questionnaire: () => Questionnaire,
+  RadarChart: () => RadarChart,
+  RadialChart: () => RadialChart,
   Range: () => Slider,
+  RichTextEditor: () => RichTextEditor,
   ScrollSpy: () => ScrollSpy,
   SideSheets: () => SideSheets,
   Slider: () => Slider,
@@ -271,12 +283,7 @@ var _Utils = class _Utils {
     button.type = "button";
     button.tabIndex = !!visibility ? 0 : -1;
     button.innerText = text;
-    if (typeof callback === "function") {
-      button.addEventListener("click", callback);
-      button.addEventListener("keypress", (e) => {
-        if (e.key === _Utils.keys.ENTER) callback(e);
-      });
-    }
+    if (typeof callback === "function") button.addEventListener("click", callback);
     container.append(button);
   }
   static _setAbsolutePosition(origin, container, position, margin, transitionMovement, align = "center") {
@@ -315,6 +322,13 @@ var _Utils = class _Utils {
       transitionMovement,
       align
     );
+    const parent = container.offsetParent;
+    if (parent && (parent !== document.body || getComputedStyle(parent).position !== "static")) {
+      const rect = parent.getBoundingClientRect();
+      const root = parent === document.scrollingElement;
+      newCoordinates.x -= rect.left + _Utils.getDocumentScrollLeft() + parent.clientLeft - (root ? 0 : parent.scrollLeft);
+      newCoordinates.y -= rect.top + _Utils.getDocumentScrollTop() + parent.clientTop - (root ? 0 : parent.scrollTop);
+    }
     container.style.top = newCoordinates.y + "px";
     container.style.left = newCoordinates.x + "px";
     return { x: xMovement, y: yMovement };
@@ -396,7 +410,7 @@ var Component = class {
     let instances = null;
     if (els instanceof Element) {
       instances = new classDef(els, options);
-    } else if (!!els && els.length) {
+    } else if (els) {
       instances = [];
       for (let i = 0; i < els.length; i++) {
         instances.push(new classDef(els[i], options));
@@ -770,6 +784,7 @@ var _defaults3 = {
   coverTrigger: false,
   closeOnClick: true,
   hover: false,
+  contextMenu: false,
   inDuration: 150,
   outDuration: 250,
   onOpenStart: null,
@@ -784,6 +799,41 @@ var _Menu = class _Menu extends Component {
     super(el, options, _Menu);
     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) {
@@ -812,11 +862,15 @@ var _Menu = class _Menu extends Component {
       }
     };
     this._handleDocumentClick = (e) => {
-      const target = e.target;
+      const path = e.composedPath();
+      const menuTarget = this._menuClickTargets.get(e);
+      this._menuClickTargets.delete(e);
+      const target = menuTarget ?? (path[0] || e.target);
+      const inside = !!menuTarget || path.includes(this.menuEl) || this.menuEl?.contains(target);
       if (this._isSubmenuTriggerClick(target)) return;
-      if (this.options.closeOnClick && this.menuEl?.contains(target) && !this.isTouchMoving) {
+      if (this.options.closeOnClick && inside && !this.isTouchMoving) {
         this.close();
-      } else if (!this.menuEl?.contains(target)) {
+      } else if (!inside) {
         this._schedule(() => {
           if (this.isOpen) {
             this.close();
@@ -826,6 +880,7 @@ var _Menu = class _Menu extends Component {
       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();
@@ -834,12 +889,13 @@ var _Menu = class _Menu extends Component {
     };
     this._handleDocumentTouchmove = (e) => {
       const target = e.target;
-      if (this.menuEl?.contains(target)) {
+      if (e.composedPath().includes(this.menuEl) || this.menuEl?.contains(target)) {
         this.isTouchMoving = true;
       }
     };
     this._handleMenuClick = (e) => {
       const target = e.target;
+      this._menuClickTargets.set(e, target);
       const li = target.closest("li");
       if (li?.matches('.disabled, [aria-disabled="true"]')) {
         e.preventDefault();
@@ -983,7 +1039,7 @@ var _Menu = class _Menu extends Component {
       this._placeMenu();
       this._schedule(() => this._setupTemporaryEventHandlers(), 0);
       this._animateIn();
-      this.el.ariaExpanded = "true";
+      this._setExpanded(true);
     };
     /**
      * Close menu.
@@ -1005,10 +1061,13 @@ var _Menu = class _Menu extends Component {
       if (transition !== this._transition) return;
       this._animateOut();
       this._removeTemporaryEventHandlers();
-      this.el.ariaExpanded = "false";
-      if (this.options.autoFocus && (root.activeElement === focused || !root.activeElement || root.activeElement === document.body)) {
-        this.el.focus();
+      this._setExpanded(false);
+      if (this.options.autoFocus && this.menuEl.contains(focused) && (root.activeElement === focused || this.el.ownerDocument.activeElement === this.el.ownerDocument.body)) {
+        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.
@@ -1026,6 +1085,7 @@ var _Menu = class _Menu extends Component {
     this._originalInert = this.menuEl?.getAttribute("inert") ?? null;
     this.options = {
       ..._Menu.defaults,
+      contextMenu: el.hasAttribute("data-context-menu"),
       ...options
     };
     this.isOpen = false;
@@ -1033,10 +1093,12 @@ var _Menu = class _Menu extends Component {
     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();
@@ -1060,7 +1122,7 @@ var _Menu = class _Menu extends Component {
   destroy() {
     this._clearPendingTimers();
     this.isOpen = false;
-    this.el.ariaExpanded = "false";
+    this._setExpanded(false);
     clearTimeout(this.filterTimeout);
     this._resetMenuStyles();
     this._restoreInert();
@@ -1076,7 +1138,9 @@ var _Menu = class _Menu extends Component {
     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);
@@ -1088,7 +1152,9 @@ var _Menu = class _Menu extends Component {
     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);
@@ -1098,17 +1164,21 @@ var _Menu = class _Menu extends Component {
   }
   _setupTemporaryEventHandlers() {
     document.body.addEventListener("click", this._handleDocumentClick);
+    this.menuEl?.addEventListener("touchmove", this._handleDocumentTouchmove, { passive: true });
     document.body.addEventListener("touchmove", this._handleDocumentTouchmove, {
       passive: true
     });
     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);
+    this.menuEl?.removeEventListener("touchmove", this._handleDocumentTouchmove);
     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;
@@ -1398,8 +1468,12 @@ var _Menu = class _Menu extends Component {
       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";
@@ -1407,6 +1481,58 @@ var _Menu = class _Menu extends Component {
     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;
@@ -1539,7 +1665,6 @@ var _Autocomplete = class _Autocomplete extends Component {
       const inputText = this.el.value.toLocaleLowerCase();
       this._resetAutocomplete();
       if (inputText.length >= this.options.minLength) {
-        this.isOpen = true;
         this._renderMenu();
         this._announce(this.menuItems.length ? this.options.i18n.results(this.menuItems.length) : this.options.i18n.noResults);
       }
@@ -1633,6 +1758,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
     this._removeEventHandlers();
     this.menu.destroy();
+    this.isOpen = false;
     this._removeMenu();
     this._statusInfo.remove();
     this._announcer.remove();
@@ -1680,6 +1806,16 @@ var _Autocomplete = class _Autocomplete extends Component {
       ..._Autocomplete.defaults.menuOptions,
       ...this.options.menuOptions
     };
+    const userOnOpenStart = menuOptions.onOpenStart;
+    const userOnCloseStart = menuOptions.onCloseStart;
+    menuOptions.onOpenStart = (el) => {
+      this.isOpen = true;
+      if (typeof userOnOpenStart === "function") userOnOpenStart.call(this.menu, el);
+    };
+    menuOptions.onCloseStart = (el) => {
+      this.isOpen = false;
+      if (typeof userOnCloseStart === "function") userOnCloseStart.call(this.menu, el);
+    };
     const userOnItemClick = menuOptions.onItemClick;
     menuOptions.onItemClick = (li) => {
       if (!li) return;
@@ -1692,10 +1828,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     const label = this.el.parentElement.querySelector("label");
     if (label) this.el.after(label);
     this.el.removeEventListener("click", this.menu._handleClick);
-    if (!this.options.isMultiSelect && !(this.options.selected.length === 0)) {
-      const selectedValue = this.menuItems.filter((value) => value.id === this.selectedValues[0].id);
-      this.el.value = selectedValue[0].text;
-    }
+    if (!this.options.isMultiSelect) this._refreshInputText();
     if (this.el.value) this.selectOption(this.el.value);
     const div = document.createElement("div");
     div.classList.add("status-info");
@@ -1723,7 +1856,6 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.container.replaceChildren();
     this._resetCurrentElementPosition();
     this.oldVal = null;
-    this.isOpen = false;
     this._pointerDown = false;
   }
   _highlightPartialText(input, label) {
@@ -1841,7 +1973,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
   }
   _triggerChanged() {
-    this.el.dispatchEvent(new Event("change"));
+    this.el.dispatchEvent(new Event("change", { bubbles: true, cancelable: true, composed: true }));
     if (typeof this.options.onAutocomplete === "function")
       this.options.onAutocomplete.call(this, this.selectedValues);
   }
@@ -1950,7 +2082,7 @@ var _Chips = class _Chips extends Component {
     this._handleInputKeydown = (e) => {
       _Chips._keydown = true;
       if (e.key === Utils.keys.ENTER) {
-        if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
+        if (this.hasAutocomplete && this.autocomplete?.isOpen && this.autocomplete.container.querySelector('[role="option"]')) {
           return;
         }
         e.preventDefault();
@@ -2016,6 +2148,9 @@ var _Chips = class _Chips extends Component {
     return this.chipsData;
   }
   destroy() {
+    if (this.autocomplete && Autocomplete.getInstance(this._input) === this.autocomplete) {
+      this.autocomplete.destroy();
+    }
     if (this.options.allowUserInput) {
       this._removeEventHandlers();
     }
@@ -2081,7 +2216,7 @@ var _Chips = class _Chips extends Component {
     }
   }
   _renderChip(chip) {
-    if (!chip.id) return;
+    if (!chip.id && chip.id !== 0) return;
     const label = chip.text || chip.id;
     const renderedChip = document.createElement("span");
     renderedChip.classList.add("chip");
@@ -2115,14 +2250,16 @@ var _Chips = class _Chips extends Component {
   }
   _setupAutocomplete() {
     this.options.autocompleteOptions.onAutocomplete = (items) => {
-      if (items.length > 0)
+      if (_Chips.getInstance(this.el) !== this) return;
+      if (items.length > 0) {
         this.addChip({
           id: items[0].id,
           text: items[0].text,
           image: items[0].image
         });
-      this._input.value = "";
-      this._input.focus();
+        this._input.value = "";
+        this._input.focus();
+      }
     };
     this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
   }
@@ -2143,6 +2280,7 @@ var _Chips = class _Chips extends Component {
     if (this._label && this._input) this._label.setAttribute("for", this._input.getAttribute("id"));
   }
   _setPlaceholder() {
+    if (!this._input) return;
     if (this.chipsData !== void 0 && !this.chipsData.length && this.options.placeholder) {
       this._input.placeholder = this.options.placeholder;
     } else if ((this.chipsData === void 0 || !!this.chipsData.length) && this.options.secondaryPlaceholder) {
@@ -2150,7 +2288,7 @@ var _Chips = class _Chips extends Component {
     }
   }
   _isValidAndNotExist(chip) {
-    const isValid = !!chip.id;
+    const isValid = !!chip.id || chip.id === 0;
     const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
     return isValid && doesNotExist;
   }
@@ -2163,7 +2301,8 @@ var _Chips = class _Chips extends Component {
     const renderedChip = this._renderChip(chip);
     this._chips.push(renderedChip);
     this.chipsData.push(chip);
-    this._input.before(renderedChip);
+    if (this._input) this._input.before(renderedChip);
+    else this.el.append(renderedChip);
     this._setPlaceholder();
     if (typeof this.options.onChipAdd === "function") {
       this.options.onChipAdd(this.el, renderedChip);
@@ -2234,6 +2373,7 @@ var Chips = _Chips;
 
 // src/ts/components/slider.ts
 var _defaults6 = {};
+var _authored = /* @__PURE__ */ new WeakMap();
 var Slider = class _Slider extends Component {
   constructor(el, options) {
     super(el, options, _Slider);
@@ -2302,6 +2442,18 @@ var Slider = class _Slider extends Component {
     this._removeEventHandlers();
     this._removeThumb();
     this.el["Expressive_Slider"] = void 0;
+    const host = this._host();
+    for (const el of [this.el, host]) {
+      for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);
+      _authored.delete(el);
+    }
+    host?.querySelectorAll('input[type="range"]').forEach((el) => el["Expressive_Slider"]?._sync());
+  }
+  _set(el, name, value) {
+    const authored = _authored.get(el) ?? {};
+    _authored.set(el, authored);
+    authored[name] ?? (authored[name] = el.style.getPropertyValue(name));
+    el.style.setProperty(name, value);
   }
   // Eleven listeners used to cover four stages, because each one was written
   // twice - once for mouse, once for touch. One of the touch spellings,
@@ -2372,25 +2524,28 @@ var Slider = class _Slider extends Component {
     const handle = parseFloat(style.getPropertyValue("--md-comp-slider-handle-width")) || 4;
     const length = vertical ? height : width;
     const position = handle / 2 + percent * (length - handle);
-    this.el.style.setProperty("--md-comp-slider-active-fraction", fraction);
-    this.el.style.setProperty("--md-comp-slider-active-position", `${position}px`);
+    this._set(this.el, "--md-comp-slider-active-fraction", fraction);
+    this._set(this.el, "--md-comp-slider-active-position", `${position}px`);
     const host = this._host();
     const peers = host?.querySelectorAll('input[type="range"]');
     if (host && peers && peers.length === 2) {
       const nums = Array.from(peers).map((el) => this._fraction(el));
-      host.style.setProperty("--md-comp-slider-start-fraction", `${Math.min(...nums) * 100}%`);
-      host.style.setProperty("--md-comp-slider-end-fraction", `${Math.max(...nums) * 100}%`);
-      host.style.setProperty("--md-comp-slider-start-position", `${handle / 2 + Math.min(...nums) * (length - handle)}px`);
-      host.style.setProperty("--md-comp-slider-end-position", `${handle / 2 + Math.max(...nums) * (length - handle)}px`);
+      this._set(host, "--md-comp-slider-start-fraction", `${Math.min(...nums) * 100}%`);
+      this._set(host, "--md-comp-slider-end-fraction", `${Math.max(...nums) * 100}%`);
+      this._set(host, "--md-comp-slider-start-position", `${handle / 2 + Math.min(...nums) * (length - handle)}px`);
+      this._set(host, "--md-comp-slider-end-position", `${handle / 2 + Math.max(...nums) * (length - handle)}px`);
     }
     if (host?.classList.contains("stops")) {
       const parsedMax = parseFloat(this.el.max);
       const max = Number.isNaN(parsedMax) ? 100 : parsedMax;
       const min = parseFloat(this.el.min) || 0;
       const step = parseFloat(this.el.step);
-      if (step > 0 && Number.isFinite(step)) {
-        const n = Math.round((max - min) / step) + 1;
-        host.style.setProperty("--md-comp-slider-stop-count", String(Math.max(2, n)));
+      const stops = step > 0 && Number.isFinite(step) && max > min;
+      this._set(host, "--md-comp-slider-stop-count", stops ? String(Math.floor((max - min) / step + 1e-9) + 1) : "");
+      this._set(host, "--md-comp-slider-stop-spacing", stops ? `${(length - handle) * step / (max - min)}px` : "");
+      if (peers?.length === 1) {
+        this._set(host, "--md-comp-slider-active-position", `${position}px`);
+        this._set(host, "--md-comp-slider-track-center", `${top + height / 2}px`);
       }
     }
     this.value.textContent = this.el.value;
@@ -2483,6 +2638,7 @@ var Dialogs = _Dialogs;
 // src/ts/behaviors/sheetDrag.ts
 var DISMISS_DISTANCE = 96;
 var DISMISS_VELOCITY = 0.5;
+var FLICK_TIMEOUT = 100;
 var DRAG_SLOP = 4;
 function installSheetDrag(config) {
   const coord = (event) => config.axis === "x" ? event.clientX : event.clientY;
@@ -2519,6 +2675,7 @@ function installSheetDrag(config) {
       start: coord(event),
       last: coord(event),
       lastT: Date.now(),
+      velocity: 0,
       shift: 0
     };
     observer.observe(document, { childList: true, subtree: true, attributes: true, attributeFilter: ["open"], attributeOldValue: true });
@@ -2531,8 +2688,12 @@ function installSheetDrag(config) {
     }
     const delta = coord(event) - drag.start;
     drag.shift = drag.direction === 1 ? Math.max(0, delta) : Math.min(0, delta);
-    drag.last = coord(event);
-    drag.lastT = Date.now();
+    if (coord(event) !== drag.last) {
+      const now = Date.now();
+      drag.velocity = (coord(event) - drag.last) / Math.max(1, now - drag.lastT);
+      drag.last = coord(event);
+      drag.lastT = now;
+    }
     drag.dialog.style.setProperty(config.property, `${drag.shift}px`);
   };
   const onUp = (event) => {
@@ -2542,13 +2703,14 @@ function installSheetDrag(config) {
       onCancel();
       return;
     }
+    onMove(event);
     drag = null;
     observer.disconnect();
     held.dialog.style.transition = "";
-    const dt = Math.max(1, Date.now() - held.lastT);
-    const velocity = (coord(event) - held.last) / dt;
-    config.onRelease?.(Math.abs(held.shift) > DRAG_SLOP);
-    const dismiss = held.direction === 1 ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY;
+    const velocity = Date.now() - held.lastT < FLICK_TIMEOUT ? held.velocity : 0;
+    const dragged = Math.abs(held.shift) > DRAG_SLOP;
+    config.onRelease?.(dragged);
+    const dismiss = dragged && (held.direction === 1 ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY);
     if (dismiss && held.dialog.open) held.dialog.close();
     held.dialog.style.setProperty(config.property, "0px");
   };
@@ -2685,6 +2847,10 @@ var Forms = class _Forms {
     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);
         }
@@ -2700,6 +2866,12 @@ var Forms = class _Forms {
           }
         }
       });
+      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);
       });
@@ -2708,6 +2880,75 @@ var Forms = class _Forms {
       });
     });
   }
+  /**
+   * 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);
@@ -2743,7 +2984,10 @@ var AppBar = class _AppBar extends Component {
     this._onIntersect = (entries) => {
       const entry = entries[0];
       if (!entry) return;
-      this.el.classList.toggle("collapsed", !entry.isIntersecting);
+      this.el.classList.toggle(
+        "collapsed",
+        !entry.isIntersecting && entry.boundingClientRect.top < this.el.getBoundingClientRect().top
+      );
     };
     this._onSearchViewClose = () => {
       this._searchOpen = this._view.open;
@@ -2790,8 +3034,8 @@ var AppBar = class _AppBar extends Component {
     if (typeof IntersectionObserver === "undefined") return;
     this._sentinel = document.createElement("span");
     this._sentinel.setAttribute("aria-hidden", "true");
-    this._sentinel.style.cssText = "display:block;width:100%;height:1px;margin-top:-1px;pointer-events:none;visibility:hidden";
-    this.el.insertAdjacentElement("beforebegin", this._sentinel);
+    this._sentinel.style.cssText = "display:block;height:0;position:relative;top:-64px;pointer-events:none;visibility:hidden";
+    this.el.insertAdjacentElement("afterend", this._sentinel);
     this._observer = new IntersectionObserver(this._onIntersect);
     this._observer.observe(this._sentinel);
   }
@@ -3218,10 +3462,6 @@ var _Carousel = class _Carousel extends Component {
       this._dragStartX = e.clientX;
       this._dragStartY = e.clientY;
       this._dragStartScroll = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
-      try {
-        this._scroller.setPointerCapture(e.pointerId);
-      } catch {
-      }
     };
     this._handleTrackPointerMove = (e) => {
       if (!this.pressed || e.pointerId !== this._dragPointerId) return;
@@ -3233,6 +3473,10 @@ var _Carousel = class _Carousel extends Component {
         if (Math.abs(primaryDelta) < 6 || Math.abs(primaryDelta) <= Math.abs(crossDelta)) return;
         this.dragged = true;
         this.el.classList.add("dragging");
+        try {
+          this._scroller.setPointerCapture(e.pointerId);
+        } catch {
+        }
       }
       if (this._vertical) this._scroller.scrollTop = this._dragStartScroll - deltaY;
       else this._scroller.scrollLeft = this._dragStartScroll - deltaX;
@@ -3262,7 +3506,7 @@ var _Carousel = class _Carousel extends Component {
       e.stopImmediatePropagation();
     };
     this._handleTrackDragStart = (e) => {
-      if (e.target.closest("img, picture, video")) e.preventDefault();
+      if (e.target.closest("a, img, picture, video")) e.preventDefault();
     };
     this._handleItemResize = (e) => {
       if (this._alignAfterResize && !this.pressed && e.propertyName === "flex-basis" && this.images.includes(e.target)) {
@@ -3318,7 +3562,7 @@ var _Carousel = class _Carousel extends Component {
       if (!this._started || !this.images.length) return;
       this._syncAdaptiveMode();
       this._syncLayoutRoles(this.center);
-      this._scrollToIndex(this.center, false);
+      if (!this.pressed) this._scrollToIndex(this.center, false);
       this._updateParallax();
     };
     this._finishScroll = () => {
@@ -3502,9 +3746,9 @@ var _Carousel = class _Carousel extends Component {
     });
     this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown);
     this._scroller.addEventListener("wheel", this._handleNativeScroll, { passive: true });
-    this._scroller.addEventListener("pointermove", this._handleTrackPointerMove);
-    this._scroller.addEventListener("pointerup", this._handleTrackPointerUp);
-    this._scroller.addEventListener("pointercancel", this._handleTrackPointerUp);
+    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);
@@ -3523,9 +3767,9 @@ var _Carousel = class _Carousel extends Component {
     this._scroller.removeEventListener("scroll", this._handleTrackScroll);
     this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
     this._scroller.removeEventListener("wheel", this._handleNativeScroll);
-    this._scroller.removeEventListener("pointermove", this._handleTrackPointerMove);
-    this._scroller.removeEventListener("pointerup", this._handleTrackPointerUp);
-    this._scroller.removeEventListener("pointercancel", this._handleTrackPointerUp);
+    document.removeEventListener("pointermove", this._handleTrackPointerMove);
+    document.removeEventListener("pointerup", this._handleTrackPointerUp);
+    document.removeEventListener("pointercancel", this._handleTrackPointerUp);
     this._scroller.removeEventListener("click", this._handleTrackClick, true);
     this._scroller.removeEventListener("dragstart", this._handleTrackDragStart);
     this._scroller.removeEventListener("transitionend", this._handleItemResize);
@@ -3784,92 +4028,1660 @@ var _Carousel = class _Carousel extends Component {
     this._cycleTo(n, callback);
   }
 };
-_Carousel._live = /* @__PURE__ */ new Set();
-_Carousel._resizeListening = false;
-_Carousel._onResize = Utils.throttle(() => {
-  _Carousel._live.forEach((c) => c._handleResize());
-}, 200);
-var Carousel = _Carousel;
+_Carousel._live = /* @__PURE__ */ new Set();
+_Carousel._resizeListening = false;
+_Carousel._onResize = Utils.throttle(() => {
+  _Carousel._live.forEach((c) => c._handleResize());
+}, 200);
+var Carousel = _Carousel;
+
+// src/ts/components/characterCounter.ts
+var _defaults11 = Object.freeze({});
+var CharacterCounter = class _CharacterCounter extends Component {
+  constructor(el, options) {
+    super(el, {}, _CharacterCounter);
+    this.updateCounter = () => {
+      const maxLength = parseInt(this.el.getAttribute("maxlength")), actualLength = this.el.value.length;
+      this.isValidLength = actualLength <= maxLength;
+      let counterString = actualLength.toString();
+      if (maxLength) {
+        counterString += "/" + maxLength;
+        this._validateInput();
+      }
+      this.counterEl.textContent = counterString;
+    };
+    this.el["Expressive_CharacterCounter"] = this;
+    this.options = {
+      ..._CharacterCounter.defaults,
+      ...options
+    };
+    this.isInvalid = false;
+    this.isValidLength = false;
+    this._setupCounter();
+    this._setupEventHandlers();
+  }
+  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/commandPalette.ts
+var _defaults12 = {
+  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 _defaults12;
+  }
+  /**
+   * 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 _defaults13 = {
+  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 _defaults13;
+  }
+  /**
+   * 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 _defaults14 = {
+  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 _defaults14;
+  }
+  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) {
+    const [start, end] = this._turns[index];
+    if (end <= start) return "";
+    const share = end - start;
+    const options = { style: "percent", maximumFractionDigits: share < 0.1 ? 1 : 0 };
+    try {
+      return share.toLocaleString(this.el.closest("[lang]")?.lang || void 0, options);
+    } catch {
+      return share.toLocaleString(void 0, options);
+    }
+  }
+  /** The legend: every row with its color, its cell and its share. */
+  _guides() {
+    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 arc = `A${RADIUS},${RADIUS} 0`;
+    this._slices = this._turns.map(([start, end], i) => {
+      if (end <= start) return null;
+      const slice2 = svgNode("path", {
+        class: "pie-chart-slice",
+        "data-series": this._colors[i],
+        // A whole circle is two half arcs; one arc cannot end where it starts.
+        d: end - start >= 1 ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`
+      });
+      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;
+    this._cells[this.activeIndex]?.classList.remove("active");
+    this.activeIndex = index;
+    const cell = this._cells[index];
+    this._tooltip.hidden = !cell;
+    if (!cell) return;
+    cell.classList.add("active");
+    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 = cell.offsetLeft + cell.offsetWidth / 2 > this._plot.clientWidth / 2;
+    this._tooltip.classList.toggle("end", end);
+    this._tooltip.style.left = `${cell.offsetLeft + (end ? 0 : cell.offsetWidth)}px`;
+    this._tooltip.style.top = `${cell.offsetTop}px`;
+  }
+  /** 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/characterCounter.ts
-var _defaults11 = Object.freeze({});
-var CharacterCounter = class _CharacterCounter extends Component {
-  constructor(el, options) {
-    super(el, {}, _CharacterCounter);
-    this.updateCounter = () => {
-      const maxLength = parseInt(this.el.getAttribute("maxlength")), actualLength = this.el.value.length;
-      this.isValidLength = actualLength <= maxLength;
-      let counterString = actualLength.toString();
-      if (maxLength) {
-        counterString += "/" + maxLength;
-        this._validateInput();
-      }
-      this.counterEl.textContent = counterString;
-    };
-    this.el["Expressive_CharacterCounter"] = this;
-    this.options = {
-      ..._CharacterCounter.defaults,
-      ...options
-    };
-    this.isInvalid = false;
-    this.isValidLength = false;
-    this._setupCounter();
-    this._setupEventHandlers();
+// src/ts/components/radialChart.ts
+var RADIUS2 = 46;
+var FILL = 0.8;
+var RadialChart = class extends LineChart {
+  get _type() {
+    return "radial-chart";
   }
-  static get defaults() {
-    return _defaults11;
+  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 _defaults15 = {
   classes: "",
   menuOptions: {}
 };
@@ -3951,7 +5763,7 @@ var FormSelect = class _FormSelect extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults12;
+    return _defaults15;
   }
   /**
    * Initializes instances of FormSelect.
@@ -4335,8 +6147,7 @@ var FormSelect = class _FormSelect extends Component {
     this._values.forEach((value) => this._deselectValue(value));
   }
   _isValueSelected(value) {
-    const realValues = this.getSelectedValues();
-    return realValues.some((realValue) => realValue === value.el.value);
+    return value.el.selected;
   }
   _toggleEntryFromArray(value) {
     if (this._isValueSelected(value)) this._deselectValue(value);
@@ -4377,7 +6188,7 @@ var FormSelect = class _FormSelect extends Component {
 };
 
 // src/ts/plugins/dockedDisplayPlugin.ts
-var _defaults13 = {
+var _defaults16 = {
   margin: 5,
   transition: 10,
   duration: 250,
@@ -4426,7 +6237,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     };
     this.el = el;
     this.options = {
-      ..._defaults13,
+      ..._defaults16,
       ...options
     };
     this.container = document.createElement("div");
@@ -4447,7 +6258,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 };
 
 // src/ts/components/datepicker.ts
-var _defaults14 = {
+var _defaults17 = {
   // the default output format for the input field value
   format: "mmm dd, yyyy",
   // Used to create date object from current input string
@@ -4561,9 +6372,7 @@ var _Datepicker = class _Datepicker extends Component {
     this._randId = null;
     this._focusedDate = null;
     this._handleInputClick = (e) => {
-      if (e.type == "date") {
-        e.preventDefault();
-      }
+      if (e.target.type == "date" && (this.options.openByDefault || this.options.container)) e.preventDefault();
       this._batchDraws(() => {
         this.setDateFromInput(e.target);
         this.draw();
@@ -4673,26 +6482,8 @@ var _Datepicker = class _Datepicker extends Component {
       this.gotoYear(e.target.value);
     };
     this._handleInputChange = (e) => {
-      let date;
-      const el = e.target;
       if (e["detail"]?.firedBy === this) return;
-      if (el == this.endDateEl && !this.date) return;
-      if (this.options.parse) {
-        date = this.options.parse(
-          e.target.value,
-          typeof this.options.format === "function" ? this.options.format(new Date(this.el.value)) : this.options.format
-        );
-      } else {
-        date = _Datepicker._parseDate(e.target.value);
-      }
-      if (_Datepicker._isDate(date)) {
-        if (el == this.endDateEl && date < this.date) return this.setInputValue(el, this.endDate);
-        this.setDate(date, false, el == this.endDateEl, true);
-        if (e.type == "date") {
-          this.setDataDate(e, date);
-          this.setInputValues();
-        }
-      }
+      this.setDateFromInput(e.target);
     };
     this._finishSelection = () => {
       this.setInputValues();
@@ -4724,7 +6515,7 @@ var _Datepicker = class _Datepicker extends Component {
     this._insertHTMLIntoDOM();
     this._setupEventHandlers();
     if (!this.options.defaultDate) {
-      this.options.defaultDate = _Datepicker._parseDate(this.el.value);
+      this.options.defaultDate = this._parseInput(this.el.value);
     }
     const defDate = this.options.defaultDate;
     if (_Datepicker._isDate(defDate)) {
@@ -4752,7 +6543,7 @@ var _Datepicker = class _Datepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults14;
+    return _defaults17;
   }
   /**
    * Initializes instances of Datepicker.
@@ -4783,6 +6574,13 @@ var _Datepicker = class _Datepicker extends Component {
     const date = /* @__PURE__ */ new Date(value + "T00:00:00");
     return date.getDate() === Number(value.slice(-2)) ? date : /* @__PURE__ */ new Date(NaN);
   }
+  _parseInput(value) {
+    if (!value.trim() || !this.options.parse) return _Datepicker._parseDate(value);
+    return this.options.parse(
+      value,
+      typeof this.options.format === "string" ? this.options.format : ""
+    );
+  }
   static _isWeekend(date) {
     const day = date.getDay();
     return day === 0 || day === 6;
@@ -4892,8 +6690,22 @@ var _Datepicker = class _Datepicker extends Component {
    * Sets date from input field.
    */
   setDateFromInput(el) {
-    const date = _Datepicker._parseDate(el.value);
-    this.setDate(date, false, el == this.endDateEl, true);
+    if (el.type === "date") this.setDataDate(el, _Datepicker._parseDate(el.value));
+    if ((this.options.isDateRange || !this.options.isMultipleSelection) && !el.value.trim()) {
+      this.setSingleDate(null, el === this.endDateEl);
+      this.draw();
+      return;
+    }
+    const parsedDate = this._parseInput(el.value);
+    if (!_Datepicker._isDate(parsedDate)) return;
+    const date = new Date(parsedDate.getTime());
+    _Datepicker._setToStartOfDay(date);
+    const isEndDate = el === this.endDateEl;
+    if (this.options.isDateRange && (isEndDate ? this.date && date < this.date : this.endDate && date > this.endDate)) {
+      this.setInputValue(el, isEndDate ? this.endDate : this.date);
+      return;
+    }
+    this.setDate(date, false, isEndDate, true);
   }
   /**
    * Set a date on the datepicker.
@@ -4965,7 +6777,7 @@ var _Datepicker = class _Datepicker extends Component {
    * Sets the data-date attribute on the date input field
    */
   setDataDate(el, date) {
-    el.setAttribute("data-date", this.toString(date));
+    el.setAttribute("data-date", _Datepicker._isDate(date) ? this.toString(date) : "");
   }
   /**
    * Sets dates on the input values.
@@ -4991,16 +6803,15 @@ var _Datepicker = class _Datepicker extends Component {
    */
   setInputValue(el, date) {
     if (!el) return;
+    if (el.type == "date") this.setDataDate(el, date);
     if (!_Datepicker._isDate(date)) {
       el.value = "";
-      if (el.type === "date") el.setAttribute("data-date", "");
     } else if (el.type == "date") {
-      this.setDataDate(el, date);
       el.value = this.formatDate(date, "yyyy-mm-dd");
     } else {
       el.value = this.toString(date);
     }
-    this.el.dispatchEvent(
+    el.dispatchEvent(
       new CustomEvent("change", {
         bubbles: true,
         cancelable: true,
@@ -5091,7 +6902,7 @@ var _Datepicker = class _Datepicker extends Component {
     cells += 7 - after;
     let isWeekSelected = false;
     for (let i = 0, r = 0; i < cells; i++) {
-      const day = new Date(year, month, 1 + (i - before)), isToday = _Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && _Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && _Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange && this.options.endRange && this.options.startRange < day && day < this.options.endRange, isDisabled = this.options.minDate && day < this.options.minDate || this.options.maxDate && day > this.options.maxDate || this.options.disableWeekends && _Datepicker._isWeekend(day) || this.options.disableDayFn && this.options.disableDayFn(day), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && _Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && _Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && _Datepicker._isDate(this.endDate) && _Datepicker._compareWithinRange(day, this.date, this.endDate);
+      const day = new Date(year, month, 1 + (i - before)), isToday = _Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && _Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && _Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange && this.options.endRange && this.options.startRange < day && day < this.options.endRange, isDisabled = this.options.minDate && day < this.options.minDate || this.options.maxDate && day > this.options.maxDate || this.options.disableWeekends && _Datepicker._isWeekend(day) || this.options.disableDayFn && this.options.disableDayFn(day), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && _Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && _Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && _Datepicker._isDate(this.date) && _Datepicker._isDate(this.endDate) && _Datepicker._compareWithinRange(day, this.date, this.endDate);
       let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
       let isSelected = false;
       if (_Datepicker._isDate(this.date)) {
@@ -5526,6 +7337,7 @@ var _Datepicker = class _Datepicker extends Component {
   createDateInput() {
     const dateInput = this.el.cloneNode(true);
     dateInput.removeAttribute("id");
+    dateInput.classList.add("no-autoinit");
     dateInput.addEventListener("click", this._handleInputClick);
     dateInput.addEventListener("keydown", this._handleInputKeydown);
     dateInput.addEventListener("change", this._handleInputChange);
@@ -5546,8 +7358,402 @@ _Datepicker._template = `
         </div>`;
 var Datepicker = _Datepicker;
 
+// src/ts/components/messageScroller.ts
+var _defaults18 = {
+  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 _defaults18;
+  }
+  /**
+   * 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 _defaults19 = {
+  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 _defaults19;
+  }
+  /**
+   * 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/lightbox.ts
-var _defaults15 = {
+var _defaults20 = {
   inDuration: 275,
   outDuration: 200,
   onOpenStart: null,
@@ -5696,7 +7902,7 @@ var _Lightbox = class _Lightbox extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults15;
+    return _defaults20;
   }
   /**
    * Initializes instances of Lightbox.
@@ -5902,7 +8108,7 @@ var Lightbox = _Lightbox;
 
 // src/ts/components/scrollspy.ts
 var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-var _defaults16 = {
+var _defaults21 = {
   scrollOffset: 200,
   activeClass: "active",
   getActiveElement: _defaultGetActiveElement,
@@ -5938,7 +8144,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     }
   }
   static get defaults() {
-    return _defaults16;
+    return _defaults21;
   }
   static init(els, options = {}) {
     return super.init(els, options, _ScrollSpy);
@@ -6028,7 +8234,7 @@ _ScrollSpy._active = /* @__PURE__ */ new Map();
 var ScrollSpy = _ScrollSpy;
 
 // src/ts/components/navigationRail.ts
-var _defaults17 = {
+var _defaults22 = {
   onOpenStart: null,
   onOpenEnd: null,
   onCloseStart: null,
@@ -6088,8 +8294,19 @@ var NavigationRail = class _NavigationRail extends Component {
       }
     };
     this._onKeyDown = (e) => {
-      if (e.key !== "Escape") return;
-      if (this.isExpanded && this._isModal()) this.collapse();
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      if (this.isExpanded && this._isModal()) {
+        const root = this.el.getRootNode();
+        const restoreFocus = this.el.contains(root.activeElement);
+        let focused = root.activeElement;
+        while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
+        this.collapse();
+        let active = root.activeElement;
+        while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+        if (!this.isExpanded && restoreFocus && active === focused) {
+          this._toggle?.focus();
+        }
+      }
     };
     this.el["Expressive_NavigationRail"] = this;
     this.options = {
@@ -6104,7 +8321,7 @@ var NavigationRail = class _NavigationRail extends Component {
     document.addEventListener("keydown", this._onKeyDown);
   }
   static get defaults() {
-    return _defaults17;
+    return _defaults22;
   }
   static init(els, options = {}) {
     return super.init(els, options, _NavigationRail);
@@ -6134,7 +8351,7 @@ var NavigationRail = class _NavigationRail extends Component {
 };
 
 // src/ts/components/tabs.ts
-var _defaults18 = {
+var _defaults23 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -6221,7 +8438,7 @@ var Tabs = class _Tabs extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults18;
+    return _defaults23;
   }
   /**
    * Initializes instances of Tabs.
@@ -6408,7 +8625,7 @@ var Tabs = class _Tabs extends Component {
 };
 
 // src/ts/components/timepicker.ts
-var _defaults19 = {
+var _defaults24 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -6449,6 +8666,7 @@ var _Timepicker = class _Timepicker extends Component {
     /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
     this._clockBuilt = false;
     this._handleInputClick = () => {
+      this._updateTimeFromInput();
       this._ensureClockBuilt();
       if (this.displayPlugin) this.displayPlugin.show();
       this.inputHours.focus();
@@ -6457,10 +8675,7 @@ var _Timepicker = class _Timepicker extends Component {
     this._handleInputKeydown = (e) => {
       if (e.key === Utils.keys.ENTER) {
         e.preventDefault();
-        this._ensureClockBuilt();
-        if (this.displayPlugin) this.displayPlugin.show();
-        this.inputHours.focus();
-        if (typeof this.options.onInputInteraction === "function") this.options.onInputInteraction.call(this);
+        this._handleInputClick();
       }
     };
     this._handleClockClickStart = (e) => {
@@ -6504,7 +8719,9 @@ var _Timepicker = class _Timepicker extends Component {
         this.inputMinutes.focus();
         this.showView("minutes", this.options.duration / 2);
       } else {
-        setTimeout(() => {
+        clearTimeout(this._autoSubmitTimer);
+        this._autoSubmitTimer = setTimeout(() => {
+          this._autoSubmitTimer = null;
           if (this.options.autoSubmit) this.done();
         }, this.options.duration / 2);
       }
@@ -6556,6 +8773,7 @@ var _Timepicker = class _Timepicker extends Component {
       const input = event.target;
       const isHours = input === this.inputHours;
       if (!isHours && input !== this.inputMinutes) return;
+      this._cancelClockReset();
       const value = Number(input.value);
       const min = isHours && this.options.twelveHour ? 1 : 0;
       const max = isHours ? this.options.twelveHour ? 12 : 23 : 59;
@@ -6603,7 +8821,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults24;
   }
   /**
    * Initializes instances of Timepicker.
@@ -6624,6 +8842,10 @@ var _Timepicker = class _Timepicker extends Component {
     return el["Expressive_Timepicker"];
   }
   destroy() {
+    clearTimeout(this._autoSubmitTimer);
+    clearTimeout(this.toggleViewTimer);
+    clearTimeout(this.vibrateTimer);
+    this._cancelClockReset();
     this._removeEventHandlers();
     this.displayPlugin?.destroy();
     this.containerEl.remove();
@@ -6810,6 +9032,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   _updateTimeFromInput() {
+    this._cancelClockReset();
     let value = ((this.el.value || this.options.defaultTime || "") + "").trim().toUpperCase().split(":");
     const period = value[1]?.match(/AM|PM/)?.[0];
     value[1] = value[1]?.replace(/AM|PM/, "");
@@ -6827,12 +9050,17 @@ var _Timepicker = class _Timepicker extends Component {
     this.inputMinutes.value = _Timepicker._addLeadingZero(this.minutes);
     this._updateAmPmView();
   }
+  _cancelClockReset() {
+    clearTimeout(this._clockResetTimer);
+    this._clockResetTimer = null;
+    this._canvas?.classList.remove("timepicker-canvas-out");
+  }
   resetClock(delay) {
+    this._cancelClockReset();
     const view = this.currentView, value = this[view], isHours = view === "hours", unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius;
     if (delay) {
       this._canvas?.classList.add("timepicker-canvas-out");
-      setTimeout(() => {
-        this._canvas?.classList.remove("timepicker-canvas-out");
+      this._clockResetTimer = setTimeout(() => {
         this.setHand(x, y);
       }, delay);
     } else {
@@ -6851,6 +9079,7 @@ var _Timepicker = class _Timepicker extends Component {
     this.setClockAttributes(radian, radius);
   }
   setHand(x, y, roundBy5 = false) {
+    this._cancelClockReset();
     const isHours = this.currentView === "hours", unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;
     let radian = Math.atan2(x, -y), radius = inner ? this.options.innerRadius : this.options.outerRadius;
     if (this.options.twelveHour) {
@@ -6954,7 +9183,7 @@ _Timepicker._template = `<div class="timepicker-container">
 var Timepicker = _Timepicker;
 
 // src/ts/components/snackbar.ts
-var _defaults20 = {
+var _defaults25 = {
   text: "",
   action: "",
   onAction: null,
@@ -6971,6 +9200,7 @@ var _Snackbar = class _Snackbar {
   constructor(options = {}) {
     this._dismissed = false;
     this._returnFocus = null;
+    this._restoreElement = null;
     this.options = {
       ..._Snackbar.defaults,
       ...options
@@ -6985,27 +9215,25 @@ var _Snackbar = class _Snackbar {
     while (_Snackbar._snackbars.length > 0) {
       const snackbar = _Snackbar._snackbars.shift();
       snackbar._dismissed = true;
-      clearTimeout(snackbar.counterTimeout);
-      snackbar._restoreFocus();
-      snackbar.el.remove();
+      snackbar._restoreFocus(true);
     }
     let focused = document.activeElement;
     while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
     this._returnFocus = focused instanceof HTMLElement ? focused : null;
+    this.el = this._createSnackbar();
     const root = Utils.portalRoot(this.options.root ?? document.body);
     if (!_Snackbar._container || !_Snackbar._container.isConnected || _Snackbar._container.parentNode !== root) {
       if (_Snackbar._container) _Snackbar._removeContainer();
       _Snackbar._createContainer(root);
     }
+    _Snackbar._container.appendChild(this.el);
+    this.el["Expressive_Snackbar"] = this;
     _Snackbar._snackbars.push(this);
-    const snackbarElement = this._createSnackbar();
-    snackbarElement["Expressive_Snackbar"] = this;
-    this.el = snackbarElement;
     this._animateIn();
     this._setTimer();
   }
   static get defaults() {
-    return _defaults20;
+    return _defaults25;
   }
   static getInstance(el) {
     return el["Expressive_Snackbar"];
@@ -7042,6 +9270,7 @@ var _Snackbar = class _Snackbar {
       snackbar.el.style.transition = "";
       _Snackbar._dragPointerId = e.pointerId;
       snackbar.startingXPos = e.clientX;
+      snackbar.velocityX = 0;
       snackbar.time = Date.now();
       snackbar.xPos = e.clientX;
     }
@@ -7070,7 +9299,8 @@ var _Snackbar = class _Snackbar {
       snackbar.el.classList.remove("panning");
       const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
       const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
-      const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || snackbar.velocityX > 1;
+      const velocity = Date.now() - snackbar.time < 100 ? snackbar.velocityX : 0;
+      const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || velocity > 1;
       if (shouldBeDismissed) {
         snackbar.wasSwiped = true;
         snackbar.dismiss();
@@ -7114,7 +9344,23 @@ var _Snackbar = class _Snackbar {
     if (snackbar instanceof HTMLTemplateElement) {
       const node = snackbar.content.cloneNode(true);
       snackbar = node.firstElementChild;
+    } else if (snackbar && this.options.snackbarId) {
+      const placeholder = document.createComment("");
+      snackbar.before(placeholder);
+      const children = [...snackbar.childNodes];
+      const attributes = ["class", "style", "role", "aria-live", "aria-atomic", "inert"].map((name) => [name, snackbar.getAttribute(name)]);
+      this._restoreElement = () => {
+        snackbar.replaceChildren(...children);
+        for (const [name, value] of attributes) {
+          if (value === null) snackbar.removeAttribute(name);
+          else snackbar.setAttribute(name, value);
+        }
+        placeholder.replaceWith(snackbar);
+      };
     }
+    if (!snackbar) throw new Error("Snackbar body not found");
+    this._events = new (snackbar.ownerDocument.defaultView ?? window).AbortController();
+    const listenerOptions = { signal: this._events.signal };
     snackbar.classList.add("snackbar");
     snackbar.setAttribute("role", "status");
     snackbar.setAttribute("aria-live", "polite");
@@ -7125,16 +9371,19 @@ var _Snackbar = class _Snackbar {
         this._returnFocus = e.relatedTarget;
       }
       this._pauseTimer();
-    });
+    }, listenerOptions);
     snackbar.addEventListener("keydown", (e) => {
       if (e.key !== "Escape" || e.defaultPrevented || this._dismissed) return;
       e.preventDefault();
       e.stopPropagation();
       this.dismiss();
-    });
-    snackbar.addEventListener("focusout", () => setTimeout(() => this._resumeTimer(), 0));
-    snackbar.addEventListener("pointerenter", () => this._pauseTimer());
-    snackbar.addEventListener("pointerleave", () => this._resumeTimer());
+    }, listenerOptions);
+    snackbar.addEventListener("focusout", () => {
+      clearTimeout(this._focusTimer);
+      this._focusTimer = setTimeout(() => this._resumeTimer(), 0);
+    }, listenerOptions);
+    snackbar.addEventListener("pointerenter", () => this._pauseTimer(), listenerOptions);
+    snackbar.addEventListener("pointerleave", () => this._resumeTimer(), listenerOptions);
     if (this.options.classes.length > 0) {
       snackbar.classList.add(...this.options.classes.split(" ").filter(Boolean));
     }
@@ -7155,7 +9404,7 @@ var _Snackbar = class _Snackbar {
         } finally {
           this.dismiss();
         }
-      });
+      }, listenerOptions);
       snackbar.appendChild(action);
     }
     if (this.options.dismissible) {
@@ -7171,12 +9420,32 @@ var _Snackbar = class _Snackbar {
       close.addEventListener("click", (e) => {
         e.stopPropagation();
         this.dismiss();
-      });
+      }, listenerOptions);
       snackbar.appendChild(close);
     }
-    _Snackbar._container.appendChild(snackbar);
     return snackbar;
   }
+  _remove() {
+    if (this._events.signal.aborted) return;
+    this._events.abort();
+    clearTimeout(this.counterTimeout);
+    clearTimeout(this._transitionTimer);
+    clearTimeout(this._dismissTimer);
+    clearTimeout(this._focusTimer);
+    this.counterTimeout = null;
+    if (_Snackbar._draggedSnackbar === this) {
+      _Snackbar._draggedSnackbar = null;
+      _Snackbar._dragPointerId = null;
+    }
+    this.el["Expressive_Snackbar"] = void 0;
+    if (this._restoreElement) this._restoreElement();
+    else this.el.remove();
+    const index = _Snackbar._snackbars.indexOf(this);
+    if (index >= 0) _Snackbar._snackbars.splice(index, 1);
+    if (!_Snackbar._snackbars.length && _Snackbar._container?.childElementCount === 0) {
+      _Snackbar._removeContainer();
+    }
+  }
   _animateIn() {
     this.el.style.display = "";
     this.el.style.opacity = "0";
@@ -7185,7 +9454,7 @@ var _Snackbar = class _Snackbar {
       transform ${this.options.inDuration}ms ease,
       opacity ${this.options.inDuration}ms ease
     `;
-    setTimeout(() => {
+    this._transitionTimer = setTimeout(() => {
       this.el.style.transform = "";
       this.el.style.opacity = "1";
     }, 1);
@@ -7214,12 +9483,12 @@ var _Snackbar = class _Snackbar {
     if (this._dismissed || this.panning || this.el.matches(":hover, :focus-within") || this.counterTimeout != null) return;
     this._setTimer();
   }
-  _restoreFocus() {
+  _restoreFocus(remove = false) {
     const focused = this.el.getRootNode().activeElement;
-    if (focused && this.el.contains(focused) && this._returnFocus?.isConnected) {
-      this._returnFocus.focus({ preventScroll: true });
-    }
+    const returnFocus = focused && this.el.contains(focused) ? this._returnFocus : null;
     this.el.inert = true;
+    if (remove) this._remove();
+    if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
   }
   /**
    * Dismiss snackbar with animation.
@@ -7230,6 +9499,7 @@ var _Snackbar = class _Snackbar {
     clearTimeout(this.counterTimeout);
     this.counterTimeout = null;
     this._restoreFocus();
+    if (this._events.signal.aborted) return;
     const activationDistance = this.el.offsetWidth * this.options.activationPercent;
     if (this.wasSwiped) {
       this.el.style.transition = "transform .05s, opacity .05s";
@@ -7239,22 +9509,16 @@ var _Snackbar = class _Snackbar {
     this.el.style.transition = `
       margin ${this.options.outDuration}ms ease,
       opacity ${this.options.outDuration}ms ease`;
-    setTimeout(() => {
+    clearTimeout(this._transitionTimer);
+    this._transitionTimer = setTimeout(() => {
       this.el.style.opacity = "0";
       this.el.style.marginTop = "-40px";
     }, 1);
-    setTimeout(() => {
+    this._dismissTimer = setTimeout(() => {
+      this._remove();
       if (typeof this.options.completeCallback === "function") {
         this.options.completeCallback();
       }
-      if (this.el.id != this.options.snackbarId) {
-        this.el.remove();
-        const index = _Snackbar._snackbars.indexOf(this);
-        if (index >= 0) _Snackbar._snackbars.splice(index, 1);
-        if (_Snackbar._snackbars.length === 0 && _Snackbar._container && _Snackbar._container.childElementCount === 0) {
-          _Snackbar._removeContainer();
-        }
-      }
     }, this.options.outDuration);
   }
 };
@@ -7266,7 +9530,7 @@ _Snackbar._draggedSnackbar = null;
 var Snackbar = _Snackbar;
 
 // src/ts/components/tooltip.ts
-var _defaults21 = {
+var _defaults26 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -7283,9 +9547,8 @@ var Tooltip = class _Tooltip extends Component {
     /**
      * Show tooltip.
      */
-    this.open = (isManual) => {
+    this.open = (isManual = true) => {
       if (this.isOpen) return;
-      isManual = isManual === void 0 ? true : void 0;
       clearTimeout(this._exitDelayTimeout);
       clearTimeout(this._animationTimeout);
       this.isOpen = true;
@@ -7349,7 +9612,7 @@ var Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults21;
+    return _defaults26;
   }
   /**
    * Initializes instances of Tooltip.
@@ -7369,8 +9632,21 @@ var Tooltip = class _Tooltip extends Component {
     this.isOpen = false;
     this.isHovered = false;
     this.isFocused = false;
-    if (this.el.getAttribute("aria-describedby") === this.tooltipEl.id) {
-      this.el.removeAttribute("aria-describedby");
+    const descriptions = this.el.getAttribute("aria-describedby")?.split(/\s+/);
+    if (descriptions?.includes(this.tooltipEl.id)) {
+      const remaining = descriptions.filter((id) => id && id !== this.tooltipEl.id).join(" ");
+      if (remaining) this.el.setAttribute("aria-describedby", remaining);
+      else this.el.removeAttribute("aria-describedby");
+    }
+    if (this._originalContent) {
+      const { el, marker, display, priority, hidden, contentClass } = this._originalContent;
+      el.style.setProperty("display", display, priority);
+      if (hidden === null) el.removeAttribute("hidden");
+      else el.setAttribute("hidden", hidden);
+      el.classList.toggle("tooltip-content", contentClass);
+      if (!el.className) el.removeAttribute("class");
+      marker.replaceWith(el);
+      this._originalContent = null;
     }
     this.tooltipEl.remove();
     this._removeEventHandlers();
@@ -7381,10 +9657,21 @@ var Tooltip = class _Tooltip extends Component {
     this.tooltipEl.classList.add("tooltip");
     this.tooltipEl.id = `tooltip-${Utils.guid()}`;
     this.tooltipEl.setAttribute("role", "tooltip");
-    this.el.setAttribute("aria-describedby", this.tooltipEl.id);
+    this.el.setAttribute("aria-describedby", [this.el.getAttribute("aria-describedby"), this.tooltipEl.id].filter(Boolean).join(" "));
     const tooltipContentEl = this.options.tooltipId ? Utils.getElementById(this.el, this.options.tooltipId) : document.createElement("div");
     if (this.options.tooltipId) {
       this.tooltipEl.classList.add("rich");
+      const marker = document.createComment("");
+      tooltipContentEl.before(marker);
+      this._originalContent = {
+        el: tooltipContentEl,
+        marker,
+        display: tooltipContentEl.style.display,
+        priority: tooltipContentEl.style.getPropertyPriority("display"),
+        hidden: tooltipContentEl.getAttribute("hidden"),
+        contentClass: tooltipContentEl.classList.contains("tooltip-content")
+      };
+      tooltipContentEl.removeAttribute("hidden");
     }
     tooltipContentEl.style.display = "";
     tooltipContentEl.classList.add("tooltip-content");
@@ -7544,11 +9831,31 @@ var AUTO_INIT_COMPONENTS = {
   },
   Carousel: { component: Carousel, selector: ".carousel" },
   Chips: { component: Chips, selector: ".chips" },
+  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" },
@@ -7582,7 +9889,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/modular.ts
-var version = "0.11.0";
+var version = "0.13.1";
 
 // src/ts/index.ts
 Forms.Init();