@expressivecss/expressive 0.13.1 → 0.14.1

package/dist/js/expressive.cjs

@@ -31,6 +31,7 @@ __export(index_exports, {
   Chips: () => Chips,
   ColumnChart: () => ColumnChart,
   CommandPalette: () => CommandPalette,
+  Confetti: () => Confetti,
   Datepicker: () => Datepicker,
   Dialogs: () => Dialogs,
   ExpandingCard: () => ExpandingCard,
@@ -40,10 +41,12 @@ __export(index_exports, {
   HeatmapChart: () => HeatmapChart,
   Lightbox: () => Lightbox,
   LineChart: () => LineChart,
+  MapView: () => MapView,
   Menu: () => Menu,
   MessageScroller: () => MessageScroller,
   MixedChart: () => MixedChart,
   NavigationRail: () => NavigationRail,
+  Particles: () => Particles,
   PieChart: () => PieChart,
   Questionnaire: () => Questionnaire,
   RadarChart: () => RadarChart,
@@ -239,9 +242,9 @@ var _Utils = class _Utils {
   static throttle(func, wait) {
     let timeout = null;
     let lastArgs = null;
-    let previous = 0;
+    let previous = -Infinity;
     return (...args) => {
-      const now = Date.now();
+      const now = performance.now();
       const remaining = wait - (now - previous);
       if (remaining <= 0) {
         clearTimeout(timeout);
@@ -252,7 +255,7 @@ var _Utils = class _Utils {
       } else if (!timeout) {
         lastArgs = args;
         timeout = setTimeout(() => {
-          previous = Date.now();
+          previous = performance.now();
           timeout = null;
           func(...lastArgs ?? []);
           lastArgs = null;
@@ -1276,6 +1279,7 @@ var _Menu = class _Menu extends Component {
     item.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
   _resetMenuStyles() {
+    if (!this.menuEl) return;
     this.menuEl.style.display = "";
     this._resetMenuPositioningStyles();
     this.menuEl.style.transform = "";
@@ -1587,8 +1591,9 @@ var _Autocomplete = class _Autocomplete extends Component {
     this._handleInput = () => {
       this.count = 0;
       const actualValue = this.el.value.toLocaleLowerCase();
-      if (this.oldVal !== actualValue && this.el.matches(":focus-visible")) {
-        this.open();
+      if (this.oldVal !== actualValue) {
+        this._resetCurrentElementPosition();
+        if (this.el.matches(":focus-visible") && (!this.menu.isOpen || actualValue.length < this.options.minLength)) this.open();
       }
       this._inputChangeDetection(actualValue);
     };
@@ -1898,11 +1903,24 @@ var _Autocomplete = class _Autocomplete extends Component {
       item.appendChild(img);
     }
     const inputText = this.el.value.toLocaleLowerCase();
-    const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
+    const label = (entry.text || entry.id).toString();
+    const parts = this._highlightPartialText(inputText, label);
     const div = document.createElement("div");
     div.setAttribute("style", "line-height:1.2;font-weight:500;");
     if (this.options.allowUnsafeHTML) {
-      div.innerHTML = parts[0] + '<span class="highlight">' + parts[1] + "</span>" + parts[2];
+      div.innerHTML = label;
+      const walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const [before, match] = this._highlightPartialText(inputText, node.data);
+        if (!match) continue;
+        const matched = node.splitText(before.length);
+        matched.splitText(match.length);
+        const highlight = document.createElement("span");
+        highlight.classList.add("highlight");
+        matched.replaceWith(highlight);
+        highlight.append(matched);
+        break;
+      }
     } else {
       div.appendChild(document.createTextNode(parts[0]));
       if (parts[1]) {
@@ -1994,7 +2012,7 @@ var _Autocomplete = class _Autocomplete extends Component {
       );
     }
     if (this.options.isMultiSelect) {
-      this._renderMenu();
+      if (!open) this._renderMenu();
     } else {
       this._refreshInputText();
     }
@@ -2392,12 +2410,10 @@ var Slider = class _Slider extends Component {
       this._sync();
       this.thumb.classList.add("active");
     };
-    this._handleRangeInputOrMove = (e) => {
-      if (e.type === "input" || this._pointerDown) {
-        this._clampDual();
-        this._sync();
-        this.thumb.classList.add("active");
-      }
+    this._handleRangeInput = () => {
+      this._clampDual();
+      this._sync();
+      this.thumb.classList.add("active");
     };
     this._handleRangePointerUp = (e) => {
       if (!e.isPrimary) return;
@@ -2461,8 +2477,7 @@ var Slider = class _Slider extends Component {
   _setupEventHandlers() {
     this.el.addEventListener("change", this._handleRangeChange);
     this.el.addEventListener("pointerdown", this._handleRangePointerDown);
-    this.el.addEventListener("input", this._handleRangeInputOrMove);
-    this.el.addEventListener("pointermove", this._handleRangeInputOrMove, { passive: true });
+    this.el.addEventListener("input", this._handleRangeInput);
     this.el.addEventListener("pointerup", this._handleRangePointerUp);
     this.el.addEventListener("pointercancel", this._handleRangePointerUp);
     this.el.addEventListener("blur", this._handleRangeRelease);
@@ -2471,8 +2486,7 @@ var Slider = class _Slider extends Component {
   _removeEventHandlers() {
     this.el.removeEventListener("change", this._handleRangeChange);
     this.el.removeEventListener("pointerdown", this._handleRangePointerDown);
-    this.el.removeEventListener("input", this._handleRangeInputOrMove);
-    this.el.removeEventListener("pointermove", this._handleRangeInputOrMove);
+    this.el.removeEventListener("input", this._handleRangeInput);
     this.el.removeEventListener("pointerup", this._handleRangePointerUp);
     this.el.removeEventListener("pointercancel", this._handleRangePointerUp);
     this.el.removeEventListener("blur", this._handleRangeRelease);
@@ -2640,7 +2654,10 @@ var DISMISS_DISTANCE = 96;
 var DISMISS_VELOCITY = 0.5;
 var FLICK_TIMEOUT = 100;
 var DRAG_SLOP = 4;
+var installed = /* @__PURE__ */ new Set();
 function installSheetDrag(config) {
+  if (installed.has(config.selector)) return;
+  installed.add(config.selector);
   const coord = (event) => config.axis === "x" ? event.clientX : event.clientY;
   let observer;
   let drag = null;
@@ -2801,7 +2818,7 @@ var SideSheets = class {
 };
 
 // src/ts/behaviors/forms.ts
-var Forms = class _Forms {
+var _Forms = class _Forms {
   /**
    * Checks if the label has validation and apply
    * the correct class and styles
@@ -2843,7 +2860,13 @@ var Forms = class _Forms {
     const contentHeight = textarea.scrollHeight + borders;
     textarea.style.height = Math.max(originalHeight, contentHeight) + "px";
   }
+  /**
+   * Safe to call more than once: the root entry calls it on import, and a page
+   * that also loads the modular entry may call it again.
+   */
   static Init() {
+    if (_Forms._initialized) return;
+    _Forms._initialized = true;
     Utils.onDocumentReady(() => {
       document.addEventListener("change", (e) => {
         const target = e.target;
@@ -2970,6 +2993,8 @@ var Forms = class _Forms {
     });
   }
 };
+_Forms._initialized = false;
+var Forms = _Forms;
 
 // src/ts/components/appBar.ts
 var _defaults7 = {};
@@ -3462,6 +3487,7 @@ var _Carousel = class _Carousel extends Component {
       this._dragStartX = e.clientX;
       this._dragStartY = e.clientY;
       this._dragStartScroll = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
+      this._setDragListeners(true);
     };
     this._handleTrackPointerMove = (e) => {
       if (!this.pressed || e.pointerId !== this._dragPointerId) return;
@@ -3486,6 +3512,7 @@ var _Carousel = class _Carousel extends Component {
       if (!this.pressed || e.pointerId !== this._dragPointerId) return;
       this.pressed = false;
       this._dragPointerId = null;
+      this._setDragListeners(false);
       this.el.classList.remove("dragging");
       try {
         this._scroller.releasePointerCapture(e.pointerId);
@@ -3552,9 +3579,8 @@ var _Carousel = class _Carousel extends Component {
       if (this._trackRaf !== null) return;
       this._trackRaf = requestAnimationFrame(() => {
         this._trackRaf = null;
+        const index = this._ignoreScroll ? this.center : this._nearestIndex();
         this._updateParallax();
-        if (this._ignoreScroll) return;
-        const index = this._nearestIndex();
         if (index !== this.center) this._syncActive(index, this.dragged);
       });
     };
@@ -3567,6 +3593,7 @@ var _Carousel = class _Carousel extends Component {
     };
     this._finishScroll = () => {
       this._ignoreScroll = false;
+      this._scroller.style.scrollSnapType = "";
       clearTimeout(this._scrollEndTimeout);
       this._scroller.removeEventListener("scrollend", this._handleScrollEnd);
     };
@@ -3746,9 +3773,6 @@ var _Carousel = class _Carousel extends Component {
     });
     this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown);
     this._scroller.addEventListener("wheel", this._handleNativeScroll, { passive: true });
-    document.addEventListener("pointermove", this._handleTrackPointerMove);
-    document.addEventListener("pointerup", this._handleTrackPointerUp);
-    document.addEventListener("pointercancel", this._handleTrackPointerUp);
     this._scroller.addEventListener("click", this._handleTrackClick, true);
     this._scroller.addEventListener("dragstart", this._handleTrackDragStart);
     this._scroller.addEventListener("transitionend", this._handleItemResize);
@@ -3767,9 +3791,7 @@ var _Carousel = class _Carousel extends Component {
     this._scroller.removeEventListener("scroll", this._handleTrackScroll);
     this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
     this._scroller.removeEventListener("wheel", this._handleNativeScroll);
-    document.removeEventListener("pointermove", this._handleTrackPointerMove);
-    document.removeEventListener("pointerup", this._handleTrackPointerUp);
-    document.removeEventListener("pointercancel", this._handleTrackPointerUp);
+    this._setDragListeners(false);
     this._scroller.removeEventListener("click", this._handleTrackClick, true);
     this._scroller.removeEventListener("dragstart", this._handleTrackDragStart);
     this._scroller.removeEventListener("transitionend", this._handleItemResize);
@@ -3836,6 +3858,13 @@ var _Carousel = class _Carousel extends Component {
       this._autoAdvanceTimer = null;
     }
   }
+  /** The document only hears from a carousel while a mouse press is down on its track. */
+  _setDragListeners(on) {
+    const method = on ? "addEventListener" : "removeEventListener";
+    document[method]("pointermove", this._handleTrackPointerMove);
+    document[method]("pointerup", this._handleTrackPointerUp);
+    document[method]("pointercancel", this._handleTrackPointerUp);
+  }
   _paintIndicators(center) {
     if (!this.showIndicators || !this._indicators) return;
     const pos = (center % this.count + this.count) % this.count;
@@ -3862,40 +3891,31 @@ var _Carousel = class _Carousel extends Component {
     }
   }
   _syncLayoutRoles(index) {
-    const setSize = (item, size) => {
-      if (this._authoredItemSizes.has(item)) return;
-      item.setAttribute("data-carousel-size", size);
-      this._generatedItemSizes.add(item);
+    const sizes = this.images.map(() => "large");
+    const setSize = (i, size) => {
+      if (this.images[i]) sizes[i] = size;
     };
-    this.images.forEach((item) => setSize(item, "large"));
     if (this.el.classList.contains("flat") || this.el.classList.contains("uncontained") || this.el.classList.contains("full-screen") && this._vertical) {
-      return;
-    }
-    if (this.el.classList.contains("hero") || this.el.classList.contains("full-screen-horizontal")) {
-      const next = this.images[index + 1];
-      if (next) setSize(next, "small");
-      if (this.el.classList.contains("center-aligned")) {
-        const previous = this.images[index - 1];
-        if (previous) setSize(previous, "small");
-      }
-      return;
-    }
-    const width = this.el.clientWidth;
-    const desiredLargeCount = width >= 1600 ? 4 : width >= 1200 ? 3 : width >= 600 ? 2 : 1;
-    const largeCount = Math.min(desiredLargeCount, Math.max(1, this.count - 2));
-    this.el.classList.remove("multi-wide", "multi-large", "multi-extra-large");
-    if (largeCount === 2) this.el.classList.add("multi-wide");
-    else if (largeCount === 3) this.el.classList.add("multi-large");
-    else if (largeCount >= 4) this.el.classList.add("multi-extra-large");
-    this._generatedWideLayout = this._generatedWideLayout || largeCount > 1;
-    for (let offset = 1; offset < largeCount; offset += 1) {
-      const item = this.images[index + offset];
-      if (item) setSize(item, "large");
-    }
-    const medium = this.images[index + largeCount];
-    const small = this.images[index + largeCount + 1];
-    if (medium) setSize(medium, "medium");
-    if (small) setSize(small, "small");
+    } else if (this.el.classList.contains("hero") || this.el.classList.contains("full-screen-horizontal")) {
+      setSize(index + 1, "small");
+      if (this.el.classList.contains("center-aligned")) setSize(index - 1, "small");
+    } else {
+      const width = this.el.clientWidth;
+      const desiredLargeCount = width >= 1600 ? 4 : width >= 1200 ? 3 : width >= 600 ? 2 : 1;
+      const largeCount = Math.min(desiredLargeCount, Math.max(1, this.count - 2));
+      this.el.classList.remove("multi-wide", "multi-large", "multi-extra-large");
+      if (largeCount === 2) this.el.classList.add("multi-wide");
+      else if (largeCount === 3) this.el.classList.add("multi-large");
+      else if (largeCount >= 4) this.el.classList.add("multi-extra-large");
+      this._generatedWideLayout = this._generatedWideLayout || largeCount > 1;
+      setSize(index + largeCount, "medium");
+      setSize(index + largeCount + 1, "small");
+    }
+    this.images.forEach((item, i) => {
+      if (this._authoredItemSizes.has(item)) return;
+      item.setAttribute("data-carousel-size", sizes[i]);
+      this._generatedItemSizes.add(item);
+    });
   }
   _syncAdaptiveMode() {
     if (!this.el.classList.contains("full-screen")) return;
@@ -3920,7 +3940,7 @@ var _Carousel = class _Carousel extends Component {
     (focusable ?? item).focus({ preventScroll: true });
   }
   _updateParallax() {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    if (this._motion.matches) {
       this.images.forEach(
         (item) => item.style.setProperty("--md-comp-carousel-item-parallax", "0px")
       );
@@ -3929,8 +3949,9 @@ var _Carousel = class _Carousel extends Component {
     const scrollerRect = this._scroller.getBoundingClientRect();
     const viewportCenter = this._vertical ? scrollerRect.top + scrollerRect.height / 2 : scrollerRect.left + scrollerRect.width / 2;
     const viewportSize = Math.max(1, this._vertical ? scrollerRect.height : scrollerRect.width);
-    this.images.forEach((item) => {
-      const rect = item.getBoundingClientRect();
+    const rects = this.images.map((item) => item.getBoundingClientRect());
+    this.images.forEach((item, i) => {
+      const rect = rects[i];
       const itemCenter = this._vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
       const progress = Math.max(-1, Math.min(1, (itemCenter - viewportCenter) / viewportSize));
       item.style.setProperty("--md-comp-carousel-item-parallax", `${progress * -24}px`);
@@ -3983,6 +4004,7 @@ var _Carousel = class _Carousel extends Component {
     const left = centered ? el.offsetLeft - (this._scroller.clientWidth - el.offsetWidth) / 2 : style.direction === "rtl" ? el.offsetLeft + el.offsetWidth - this._scroller.clientWidth + inlinePadding : el.offsetLeft - inlinePadding;
     const top = el.offsetTop - blockPadding;
     this._ignoreScroll = true;
+    this._scroller.style.scrollSnapType = "none";
     this._scroller.scrollTo({
       left: this._vertical ? 0 : left,
       top: this._vertical ? top : 0,
@@ -4112,8 +4134,360 @@ var CharacterCounter = class _CharacterCounter extends Component {
   }
 };
 
-// src/ts/components/commandPalette.ts
+// src/ts/components/confetti.ts
 var _defaults12 = {
+  particleCount: 50,
+  angle: 90,
+  spread: 45,
+  startVelocity: 45,
+  decay: 0.9,
+  gravity: 1,
+  drift: 0,
+  ticks: 200,
+  origin: { x: 0.5, y: 0.5 },
+  colors: [],
+  shapes: ["square", "circle"],
+  scalar: 1,
+  manualStart: false
+};
+var THEME_COLORS = ["primary", "secondary", "tertiary", "primary-container", "secondary-container", "tertiary-container"];
+var FALLBACK_COLORS = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"];
+var RAD = Math.PI / 180;
+var scenes = /* @__PURE__ */ new Map();
+var overlay = null;
+var Confetti = class _Confetti extends Component {
+  constructor(el, options) {
+    super(el, options, _Confetti);
+    this._onClick = () => {
+      this.fire();
+    };
+    this.el["Expressive_Confetti"] = this;
+    this.options = { ..._Confetti.defaults, ...options };
+    if (!(el instanceof HTMLCanvasElement)) el.addEventListener("click", this._onClick);
+    else if (!this.options.manualStart) this.fire();
+  }
+  static get defaults() {
+    return _defaults12;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _Confetti);
+  }
+  static getInstance(el) {
+    return el["Expressive_Confetti"];
+  }
+  /**
+   * Bursts over the whole viewport. Resolves when the last piece is gone.
+   */
+  static fire(options = {}) {
+    return burst(viewportCanvas, document.body, { ..._Confetti.defaults, ...options });
+  }
+  /**
+   * Bursts on this canvas, or from this element's center over the viewport.
+   * Resolves when the last piece is gone.
+   */
+  fire(options = {}) {
+    const merged = { ...this.options, ...options };
+    if (this.el instanceof HTMLCanvasElement) {
+      const canvas = this.el;
+      return burst(() => canvas, canvas.parentElement ?? document.body, merged);
+    }
+    const r = this.el.getBoundingClientRect();
+    merged.origin = { x: (r.left + r.width / 2) / innerWidth, y: (r.top + r.height / 2) / innerHeight };
+    return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);
+  }
+  destroy() {
+    this.el.removeEventListener("click", this._onClick);
+    if (this.el instanceof HTMLCanvasElement) stop(this.el);
+    this.el["Expressive_Confetti"] = void 0;
+  }
+};
+function burst(getCanvas, themed, o) {
+  if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
+  const canvas = getCanvas();
+  let scene = scenes.get(canvas);
+  if (!scene) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return Promise.resolve();
+    scene = { ctx, pieces: [], frame: 0, last: 0, done: [], overlay: canvas === overlay };
+    scenes.set(canvas, scene);
+  }
+  const { width, height } = fit(canvas);
+  const colors = o.colors.length ? o.colors : themeColors(themed);
+  const x = (o.origin.x ?? 0.5) * width;
+  const y = (o.origin.y ?? 0.5) * height;
+  for (let i = 0; i < o.particleCount; i++) {
+    scene.pieces.push({
+      x,
+      y,
+      velocity: o.startVelocity * (0.5 + Math.random()),
+      angle: -o.angle * RAD + (0.5 - Math.random()) * o.spread * RAD,
+      wobble: Math.random() * 10,
+      wobbleSpeed: 0.05 + Math.random() * 0.05,
+      tilt: (0.25 + Math.random() / 2) * Math.PI,
+      tick: 0,
+      color: colors[i % colors.length],
+      shape: o.shapes[Math.floor(Math.random() * o.shapes.length)] ?? "square",
+      options: o
+    });
+  }
+  const s = scene;
+  if (!s.frame) s.frame = requestAnimationFrame((now) => {
+    s.last = now;
+    draw(canvas, s, now);
+  });
+  return new Promise((resolve) => s.done.push(resolve));
+}
+function draw(canvas, scene, now) {
+  const step = Math.min((now - scene.last) / (1e3 / 60), 4);
+  scene.last = now;
+  const { width, height } = fit(canvas);
+  const { ctx } = scene;
+  const dpr = canvas.width / (width || 1);
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  scene.pieces = scene.pieces.filter((p) => {
+    const o = p.options;
+    p.x += (Math.cos(p.angle) * p.velocity + o.drift) * step;
+    p.y += (Math.sin(p.angle) * p.velocity + o.gravity * 3) * step;
+    p.velocity *= o.decay ** step;
+    p.wobble += p.wobbleSpeed * step;
+    p.tilt += 0.1 * step;
+    p.tick += step;
+    if (p.tick >= o.ticks) return false;
+    const size = 8 * o.scalar;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.translate(p.x + 10 * o.scalar * Math.cos(p.wobble), p.y + 10 * o.scalar * Math.sin(p.wobble));
+    ctx.rotate(p.tilt);
+    ctx.scale(1, Math.cos(p.wobble));
+    ctx.globalAlpha = 1 - p.tick / o.ticks;
+    ctx.fillStyle = p.color;
+    ctx.beginPath();
+    if (p.shape === "circle") ctx.arc(0, 0, size / 2, 0, 2 * Math.PI);
+    else if (p.shape === "star") star(ctx, size * 0.75);
+    else ctx.rect(-size / 2, -size / 2, size, size);
+    ctx.fill();
+    return true;
+  });
+  if (scene.pieces.length) scene.frame = requestAnimationFrame((t) => draw(canvas, scene, t));
+  else stop(canvas);
+}
+function stop(canvas) {
+  const scene = scenes.get(canvas);
+  if (!scene) return;
+  cancelAnimationFrame(scene.frame);
+  scenes.delete(canvas);
+  scene.ctx.setTransform(1, 0, 0, 1, 0, 0);
+  scene.ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (scene.overlay) {
+    canvas.remove();
+    overlay = null;
+  }
+  for (const resolve of scene.done) resolve();
+}
+function star(ctx, r) {
+  for (let i = 0; i < 10; i++) {
+    const a = i * Math.PI / 5 - Math.PI / 2;
+    const d = i % 2 ? r / 2 : r;
+    ctx.lineTo(Math.cos(a) * d, Math.sin(a) * d);
+  }
+  ctx.closePath();
+}
+function fit(canvas) {
+  const width = canvas.clientWidth;
+  const height = canvas.clientHeight;
+  const w = Math.round(width * devicePixelRatio);
+  const h = Math.round(height * devicePixelRatio);
+  if (canvas.width !== w || canvas.height !== h) {
+    canvas.width = w;
+    canvas.height = h;
+  }
+  return { width, height };
+}
+function viewportCanvas() {
+  if (overlay?.isConnected) return overlay;
+  overlay = document.createElement("canvas");
+  overlay.className = "confetti-overlay";
+  overlay.setAttribute("aria-hidden", "true");
+  Object.assign(overlay.style, {
+    position: "fixed",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    margin: "0",
+    padding: "0",
+    border: "0",
+    background: "transparent",
+    pointerEvents: "none",
+    zIndex: "10001"
+  });
+  document.body.append(overlay);
+  if (typeof overlay.showPopover === "function") {
+    overlay.popover = "manual";
+    overlay.showPopover();
+  }
+  return overlay;
+}
+function themeColors(themed) {
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  themed.append(probe);
+  const style = getComputedStyle(probe);
+  const colors = THEME_COLORS.filter((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).map((role) => {
+    probe.style.color = `var(--md-sys-color-${role})`;
+    return getComputedStyle(probe).color;
+  });
+  probe.remove();
+  return colors.length ? colors : FALLBACK_COLORS;
+}
+
+// src/ts/components/particles.ts
+var _defaults13 = {
+  quantity: 100,
+  staticity: 50,
+  ease: 50,
+  size: 0.4,
+  color: "",
+  vx: 0,
+  vy: 0
+};
+var Particles = class _Particles extends Component {
+  constructor(el, options) {
+    super(el, options, _Particles);
+    this._particles = [];
+    this._width = 0;
+    this._height = 0;
+    this._frame = 0;
+    this._last = 0;
+    // Pointer offset from the canvas center, kept from its last move inside.
+    this._mouse = { x: 0, y: 0 };
+    this._still = false;
+    this._resizeObserver = null;
+    this._visibility = null;
+    this._onPointerMove = (e) => {
+      const r = this.el.getBoundingClientRect();
+      const x = e.clientX - r.left - r.width / 2;
+      const y = e.clientY - r.top - r.height / 2;
+      if (Math.abs(x) < r.width / 2 && Math.abs(y) < r.height / 2) this._mouse = { x, y };
+    };
+    this.el["Expressive_Particles"] = this;
+    this.options = { ..._Particles.defaults, ...options };
+    this._ctx = this.el.getContext("2d");
+    if (!this._ctx) return;
+    this._style = getComputedStyle(this.el);
+    this._still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    this._reset();
+    if (typeof ResizeObserver !== "undefined") {
+      this._resizeObserver = new ResizeObserver(() => {
+        if (this.el.clientWidth !== this._width || this.el.clientHeight !== this._height) this._reset();
+      });
+      this._resizeObserver.observe(this.el);
+    }
+    if (this._still) return;
+    if (typeof IntersectionObserver === "undefined") {
+      this._start();
+      return;
+    }
+    this._visibility = new IntersectionObserver(([entry]) => entry.isIntersecting ? this._start() : this._stop());
+    this._visibility.observe(this.el);
+  }
+  static get defaults() {
+    return _defaults13;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _Particles);
+  }
+  static getInstance(el) {
+    return el["Expressive_Particles"];
+  }
+  destroy() {
+    this._stop();
+    this._resizeObserver?.disconnect();
+    this._visibility?.disconnect();
+    if (this._ctx) {
+      this._ctx.setTransform(1, 0, 0, 1, 0, 0);
+      this._ctx.clearRect(0, 0, this.el.width, this.el.height);
+    }
+    this.el["Expressive_Particles"] = void 0;
+  }
+  _start() {
+    if (this._frame) return;
+    window.addEventListener("pointermove", this._onPointerMove, { passive: true });
+    this._frame = requestAnimationFrame((now) => {
+      this._last = now;
+      this._draw(now);
+    });
+  }
+  _stop() {
+    cancelAnimationFrame(this._frame);
+    this._frame = 0;
+    window.removeEventListener("pointermove", this._onPointerMove);
+  }
+  // Matches the pixel buffer to the canvas box and scatters a new set.
+  _reset() {
+    this._width = this.el.clientWidth;
+    this._height = this.el.clientHeight;
+    this.el.width = Math.round(this._width * devicePixelRatio);
+    this.el.height = Math.round(this._height * devicePixelRatio);
+    this._particles = Array.from({ length: this.options.quantity }, () => this._particle());
+    if (this._still) {
+      for (const p of this._particles) p.alpha = p.targetAlpha;
+      this._paint();
+    }
+  }
+  _particle() {
+    return {
+      x: Math.floor(Math.random() * this._width),
+      y: Math.floor(Math.random() * this._height),
+      translateX: 0,
+      translateY: 0,
+      size: Math.floor(Math.random() * 2) + this.options.size,
+      alpha: 0,
+      targetAlpha: Math.round((Math.random() * 0.6 + 0.1) * 10) / 10,
+      dx: (Math.random() - 0.5) * 0.1,
+      dy: (Math.random() - 0.5) * 0.1,
+      magnetism: 0.1 + Math.random() * 4
+    };
+  }
+  _draw(now) {
+    const step = Math.min((now - this._last) / (1e3 / 60), 4);
+    this._last = now;
+    const { staticity, ease, vx, vy } = this.options;
+    const follow = Math.min(step / ease, 1);
+    this._particles = this._particles.map((p) => {
+      p.x += (p.dx + vx) * step;
+      p.y += (p.dy + vy) * step;
+      p.translateX += (this._mouse.x / (staticity / p.magnetism) - p.translateX) * follow;
+      p.translateY += (this._mouse.y / (staticity / p.magnetism) - p.translateY) * follow;
+      const x = p.x + p.translateX;
+      const y = p.y + p.translateY;
+      const edge = Math.min(x - p.size, this._width - x - p.size, y - p.size, this._height - y - p.size) / 20;
+      p.alpha = edge > 1 ? Math.min(p.alpha + 0.02 * step, p.targetAlpha) : p.targetAlpha * edge;
+      const gone = p.x < -p.size || p.x > this._width + p.size || p.y < -p.size || p.y > this._height + p.size;
+      return gone ? this._particle() : p;
+    });
+    this._paint();
+    this._frame = requestAnimationFrame((t) => this._draw(t));
+  }
+  _paint() {
+    const ctx = this._ctx;
+    const dpr = devicePixelRatio;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, this.el.width, this.el.height);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.fillStyle = this.options.color || this._style.color;
+    for (const p of this._particles) {
+      if (p.alpha <= 0) continue;
+      ctx.globalAlpha = p.alpha;
+      ctx.beginPath();
+      ctx.arc(p.x + p.translateX, p.y + p.translateY, p.size, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+  }
+};
+
+// src/ts/components/commandPalette.ts
+var _defaults14 = {
   shortcut: "k",
   closeOnRun: true
 };
@@ -4211,7 +4585,7 @@ var CommandPalette = class _CommandPalette extends Component {
     document.addEventListener("keydown", this._handleShortcut);
   }
   static get defaults() {
-    return _defaults12;
+    return _defaults14;
   }
   /**
    * Initializes instances of CommandPalette.
@@ -4364,7 +4738,7 @@ var CommandPalette = class _CommandPalette extends Component {
 };
 
 // src/ts/components/questionnaire.ts
-var _defaults13 = {
+var _defaults15 = {
   progressLabel: "Question {current} of {total}",
   requiredMessage: "Choose an answer to continue."
 };
@@ -4478,7 +4852,7 @@ var Questionnaire = class _Questionnaire extends Component {
     this.el.addEventListener("invalid", this._handleInvalid, true);
   }
   static get defaults() {
-    return _defaults13;
+    return _defaults15;
   }
   /**
    * Initializes instances of Questionnaire.
@@ -4623,7 +4997,7 @@ var Questionnaire = class _Questionnaire extends Component {
 };
 
 // src/ts/components/lineChart.ts
-var _defaults14 = {
+var _defaults16 = {
   min: null,
   max: null
 };
@@ -4751,7 +5125,7 @@ var LineChart = class extends Component {
     return "Expressive_LineChart";
   }
   static get defaults() {
-    return _defaults14;
+    return _defaults16;
   }
   static init(els, options = {}) {
     return super.init(els, options, this);
@@ -5154,18 +5528,25 @@ var PieChart = class extends LineChart {
   }
   /** The row's share of the whole as a percentage, or '' for none. */
   _share(index) {
+    var _a;
     const [start, end] = this._turns[index];
     if (end <= start) return "";
     const share = end - start;
-    const options = { style: "percent", maximumFractionDigits: share < 0.1 ? 1 : 0 };
+    const digits = share < 0.1 ? 1 : 0;
+    (_a = this._percents ?? (this._percents = []))[digits] ?? (_a[digits] = this._percent(digits));
+    return this._percents[digits].format(share);
+  }
+  _percent(digits) {
+    const options = { style: "percent", maximumFractionDigits: digits };
     try {
-      return share.toLocaleString(this.el.closest("[lang]")?.lang || void 0, options);
+      return new Intl.NumberFormat(this.el.closest("[lang]")?.lang || void 0, options);
     } catch {
-      return share.toLocaleString(void 0, options);
+      return new Intl.NumberFormat(void 0, options);
     }
   }
   /** The legend: every row with its color, its cell and its share. */
   _guides() {
+    this._percents = [];
     const legend = document.createElement("ul");
     legend.className = "pie-chart-legend";
     legend.setAttribute("aria-hidden", "true");
@@ -5231,14 +5612,14 @@ var PieChart = class extends LineChart {
       svgNode("circle", { class: "pie-chart-hole", r: String(RADIUS), fill: "black" })
     );
     const slices = svgNode("g", { mask: `url(#${id})` });
-    const arc = `A${RADIUS},${RADIUS} 0`;
+    const arc2 = `A${RADIUS},${RADIUS} 0`;
     this._slices = this._turns.map(([start, end], i) => {
       if (end <= start) return null;
       const slice2 = svgNode("path", {
         class: "pie-chart-slice",
         "data-series": this._colors[i],
         // A whole circle is two half arcs; one arc cannot end where it starts.
-        d: end - start >= 1 ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`
+        d: end - start >= 1 ? `M0,${-RADIUS}${arc2} 1 1 0,${RADIUS}${arc2} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc2} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`
       });
       slices.append(slice2);
       return slice2;
@@ -5281,9 +5662,10 @@ var HeatmapChart = class extends LineChart {
   /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
   show(index) {
     if (!this._tooltip || index === this.activeIndex) return;
+    const cell = this._cells[index];
+    const [left, top, width, plotWidth] = cell ? [cell.offsetLeft, cell.offsetTop, cell.offsetWidth, this._plot.clientWidth] : [];
     this._cells[this.activeIndex]?.classList.remove("active");
     this.activeIndex = index;
-    const cell = this._cells[index];
     this._tooltip.hidden = !cell;
     if (!cell) return;
     cell.classList.add("active");
@@ -5297,10 +5679,10 @@ var HeatmapChart = class extends LineChart {
     else name.style.setProperty("--level", String(this._levels[index]));
     text.textContent = series.text[row];
     this._tooltip.replaceChildren(title, name, text);
-    const end = cell.offsetLeft + cell.offsetWidth / 2 > this._plot.clientWidth / 2;
+    const end = left + width / 2 > plotWidth / 2;
     this._tooltip.classList.toggle("end", end);
-    this._tooltip.style.left = `${cell.offsetLeft + (end ? 0 : cell.offsetWidth)}px`;
-    this._tooltip.style.top = `${cell.offsetTop}px`;
+    this._tooltip.style.left = `${left + (end ? 0 : width)}px`;
+    this._tooltip.style.top = `${top}px`;
   }
   /** Arrows move the way they point, so left and right swap in RTL. */
   _keyTarget(key) {
@@ -5681,7 +6063,7 @@ var MixedChart = class extends ColumnChart {
 };
 
 // src/ts/components/select.ts
-var _defaults15 = {
+var _defaults17 = {
   classes: "",
   menuOptions: {}
 };
@@ -5763,7 +6145,7 @@ var FormSelect = class _FormSelect extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults15;
+    return _defaults17;
   }
   /**
    * Initializes instances of FormSelect.
@@ -6188,7 +6570,7 @@ var FormSelect = class _FormSelect extends Component {
 };
 
 // src/ts/plugins/dockedDisplayPlugin.ts
-var _defaults16 = {
+var _defaults18 = {
   margin: 5,
   transition: 10,
   duration: 250,
@@ -6202,9 +6584,9 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
       }
     };
     /**
-     * Tears the plugin down. The document listener holds a reference to this
-     * instance - and through it the whole picker subtree - so the owning
-     * component must call this from its own destroy().
+     * Tears the plugin down. While shown, the document listener holds a
+     * reference to this instance - and through it the whole picker subtree - so
+     * the owning component must call this from its own destroy().
      */
     this.destroy = () => {
       document.removeEventListener("click", this._handleDocumentClick);
@@ -6213,6 +6595,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.show = () => {
       if (this.visible) return;
       this.visible = true;
+      document.addEventListener("click", this._handleDocumentClick);
       const coordinates = Utils._setAbsolutePosition(this.el, this.container, "bottom", this.options.margin, this.options.transition, this.options.align);
       this.container.style.visibility = "visible";
       this.container.style.transition = `
@@ -6226,6 +6609,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.hide = () => {
       if (!this.visible) return;
       this.visible = false;
+      document.removeEventListener("click", this._handleDocumentClick);
       this.container.removeAttribute("style");
       this.container.style.transition = `
       transform ${this.options.duration}ms ease-out,
@@ -6237,14 +6621,13 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     };
     this.el = el;
     this.options = {
-      ..._defaults16,
+      ..._defaults18,
       ...options
     };
     this.container = document.createElement("div");
     this.container.classList.add("display-docked");
     this.container.append(container);
     el.parentElement.append(this.container);
-    document.addEventListener("click", this._handleDocumentClick);
   }
   /**
    * Initializes instance of DockedDisplayPlugin
@@ -6258,7 +6641,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 };
 
 // src/ts/components/datepicker.ts
-var _defaults17 = {
+var _defaults19 = {
   // the default output format for the input field value
   format: "mmm dd, yyyy",
   // Used to create date object from current input string
@@ -6362,6 +6745,8 @@ var _Datepicker = class _Datepicker extends Component {
   constructor(el, options) {
     super(el, options, _Datepicker);
     this.multiple = false;
+    /** Rows renderRow has already checked, so renderBody does not parse them again. */
+    this._checkedRows = /* @__PURE__ */ new Set();
     /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
     this._drawDepth = 0;
     /** Whether a draw was requested while batching. */
@@ -6428,7 +6813,9 @@ var _Datepicker = class _Datepicker extends Component {
       if (maxDate && date > maxDate) date.setTime(maxDate.getTime());
       if (date.getFullYear() < minYear || date.getFullYear() > maxYear || date.getFullYear() === minYear && date.getMonth() < (minMonth ?? 0) || date.getFullYear() === maxYear && date.getMonth() > (maxMonth ?? 11)) return;
       this._focusedDate = date;
-      this.gotoDate(date);
+      const { year, month } = this.calendars[0];
+      if (date.getFullYear() === year && date.getMonth() === month) this._syncCalendarFocus(true);
+      else this.gotoDate(date);
     };
     this._handleCalendarClick = (e) => {
       const target = e.target;
@@ -6543,7 +6930,7 @@ var _Datepicker = class _Datepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults17;
+    return _defaults19;
   }
   /**
    * Initializes instances of Datepicker.
@@ -6985,7 +7372,9 @@ var _Datepicker = class _Datepicker extends Component {
   }
   /** Assemble calendar cells; reject unsupported elements and attributes. */
   renderRow(days, isRTL, isRowSelected) {
-    return '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
+    const row = '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
+    this._checkedRows.add(row);
+    return row;
   }
   /** Assemble calendar rows; reject unsupported elements and attributes. */
   renderTable(opts, data, randId) {
@@ -7003,7 +7392,10 @@ var _Datepicker = class _Datepicker extends Component {
   }
   /** Wrap calendar rows after validating and encoding their contents. */
   renderBody(rows) {
-    return "<tbody>" + _Datepicker._calendarMarkup(rows.join(""), "tbody") + "</tbody>";
+    const html = rows.join("");
+    const checked = rows.every((row) => this._checkedRows.has(row));
+    this._checkedRows.clear();
+    return "<tbody>" + (checked ? html : _Datepicker._calendarMarkup(html, "tbody")) + "</tbody>";
   }
   static _calendarMarkup(html, parent) {
     const template = document.createElement("template");
@@ -7359,7 +7751,7 @@ _Datepicker._template = `
 var Datepicker = _Datepicker;
 
 // src/ts/components/messageScroller.ts
-var _defaults18 = {
+var _defaults20 = {
   autoScroll: true,
   defaultScrollPosition: "end",
   peek: 64
@@ -7482,7 +7874,7 @@ var MessageScroller = class _MessageScroller extends Component {
     this.button?.addEventListener("click", this._handleButtonClick);
   }
   static get defaults() {
-    return _defaults18;
+    return _defaults20;
   }
   /**
    * Initializes instances of MessageScroller.
@@ -7640,7 +8032,7 @@ var MessageScroller = class _MessageScroller extends Component {
 };
 
 // src/ts/components/richTextEditor.ts
-var _defaults19 = {
+var _defaults21 = {
   Editor: null,
   extensions: []
 };
@@ -7720,7 +8112,7 @@ var RichTextEditor = class _RichTextEditor extends Component {
     el.addEventListener("click", this._handleClick);
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults21;
   }
   /**
    * Initializes instances of RichTextEditor.
@@ -7752,8 +8144,395 @@ var RichTextEditor = class _RichTextEditor extends Component {
   }
 };
 
+// src/ts/components/mapView.ts
+var OPENFREEMAP = "https://tiles.openfreemap.org/styles/";
+var _defaults22 = {
+  maplibregl: null,
+  style: { light: `${OPENFREEMAP}positron`, dark: `${OPENFREEMAP}dark` },
+  center: [0, 20],
+  zoom: 1,
+  mapOptions: {}
+};
+var lngLat = (el) => el.dataset.lngLat.split(",").map(Number);
+function arc([x0, y0], [x2, y2], steps = 32) {
+  const bow = x2 >= x0 ? 0.25 : -0.25;
+  const x1 = (x0 + x2) / 2 - (y2 - y0) * bow;
+  const y1 = (y0 + y2) / 2 + (x2 - x0) * bow;
+  return Array.from({ length: steps + 1 }, (_, i) => {
+    const t = i / steps, u = 1 - t;
+    return [u * u * x0 + 2 * u * t * x1 + t * t * x2, u * u * y0 + 2 * u * t * y1 + t * t * y2];
+  });
+}
+var MapView = class _MapView extends Component {
+  constructor(el, options) {
+    super(el, options, _MapView);
+    /** The MapLibre map. */
+    this.map = null;
+    /** The MapLibre markers made from `.map-marker` children, in order. */
+    this.markers = [];
+    this._children = [];
+    this._popups = [];
+    this._markerPopups = /* @__PURE__ */ new Map();
+    this._overlays = /* @__PURE__ */ new Map();
+    this._styleReady = false;
+    this._dark = false;
+    this._location = null;
+    this._media = null;
+    this._observer = null;
+    // Looked up once: `move` fires every frame of a pan or zoom.
+    this._zoomIn = [];
+    this._zoomOut = [];
+    this._handleStyleLoad = () => {
+      this._styleReady = true;
+      for (const overlay2 of this._overlays.values()) overlay2.draw();
+    };
+    this._handleScheme = () => {
+      const dark = this._isDark();
+      if (dark === this._dark) return;
+      this._dark = dark;
+      this._styleReady = false;
+      this.map.setStyle(this._style(), { diff: false });
+    };
+    this._sync = () => {
+      const zoom = this.map.getZoom();
+      for (const button of this._zoomIn) button.disabled = zoom >= this.map.getMaxZoom();
+      for (const button of this._zoomOut) button.disabled = zoom <= this.map.getMinZoom();
+      this.el.style.setProperty("--md-comp-map-bearing", `${-this.map.getBearing()}deg`);
+    };
+    this._handleFullscreen = () => {
+      for (const button of this._buttons("fullscreen")) {
+        button.setAttribute("aria-pressed", String(document.fullscreenElement === this.el));
+      }
+    };
+    this._handleClick = (e) => {
+      const target = e.target;
+      const button = target.closest(".map-controls [data-action]");
+      const action = button?.dataset.action;
+      if (action === "zoom-in") this.map.zoomIn();
+      else if (action === "zoom-out") this.map.zoomOut();
+      else if (action === "compass") this.map.resetNorthPitch();
+      else if (action === "locate") this._locate(button);
+      else if (action === "fullscreen") {
+        if (document.fullscreenElement === this.el) document.exitFullscreen();
+        else this.el.requestFullscreen();
+      } else {
+        const marker = target.closest(".map-marker");
+        if (this._markerPopups.has(marker)) this._toggle(marker);
+      }
+    };
+    // A click on the map closes marker popups, but not the one being toggled.
+    this._handleMapClick = (e) => {
+      const target = e.originalEvent.target;
+      for (const [marker, popup] of this._markerPopups) {
+        if (!marker.contains(target) && !popup.getElement()?.contains(target)) popup.remove();
+      }
+    };
+    this._handleKeydown = (e) => {
+      if (e.key !== "Escape") return;
+      for (const popup of this._popups) {
+        if (popup.getElement()?.contains(e.target)) {
+          e.preventDefault();
+          popup.remove();
+        }
+      }
+    };
+    this.el["Expressive_MapView"] = this;
+    this.options = {
+      ..._MapView.defaults,
+      ...options
+    };
+    const lib = this.options.maplibregl;
+    if (!lib) {
+      console.error("MapView needs the maplibre-gl module in options.maplibregl.");
+      return;
+    }
+    this._children = [...el.children];
+    this._zoomIn = [...this._buttons("zoom-in")];
+    this._zoomOut = [...this._buttons("zoom-out")];
+    this._dark = this._isDark();
+    this.map = new lib.Map({
+      ...this.options.mapOptions,
+      container: el,
+      style: this._style(),
+      center: this.options.center,
+      zoom: this.options.zoom
+    });
+    this.map.on("style.load", this._handleStyleLoad);
+    this.map.on("move", this._sync);
+    this.map.on("click", this._handleMapClick);
+    const children = this._children.filter((child) => child instanceof HTMLElement);
+    const claimed = /* @__PURE__ */ new Set();
+    for (const marker of children.filter((child) => child.matches(".map-marker[data-lng-lat]"))) {
+      const target = marker.hasAttribute("aria-controls") ? Utils.getElementById(marker, marker.getAttribute("aria-controls")) : null;
+      const popup = target?.parentElement === el && target.matches(".map-popup") ? target : null;
+      if (popup) claimed.add(popup);
+      this._addMarker(marker, popup);
+    }
+    for (const popup of children.filter((child) => child.matches(".map-popup[data-lng-lat]") && !claimed.has(child))) {
+      this._popup(popup, 0).setLngLat(lngLat(popup)).addTo(this.map);
+    }
+    if (this._themed()) {
+      this._media = matchMedia("(prefers-color-scheme: dark)");
+      this._media.addEventListener("change", this._handleScheme);
+      this._observer = new MutationObserver(this._handleScheme);
+      this._observer.observe(document.documentElement, { attributes: true, attributeFilter: ["theme"], subtree: true });
+    }
+    for (const button of this._buttons("fullscreen")) button.hidden = !document.fullscreenEnabled;
+    document.addEventListener("fullscreenchange", this._handleFullscreen);
+    el.addEventListener("click", this._handleClick);
+    el.addEventListener("keydown", this._handleKeydown);
+    this._sync();
+  }
+  static get defaults() {
+    return _defaults22;
+  }
+  /**
+   * Initializes instances of MapView.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _MapView);
+  }
+  static getInstance(el) {
+    return el["Expressive_MapView"];
+  }
+  destroy() {
+    this.el["Expressive_MapView"] = void 0;
+    if (!this.map) return;
+    this.el.removeEventListener("click", this._handleClick);
+    this.el.removeEventListener("keydown", this._handleKeydown);
+    document.removeEventListener("fullscreenchange", this._handleFullscreen);
+    this._media?.removeEventListener("change", this._handleScheme);
+    this._observer?.disconnect();
+    for (const overlay2 of this._overlays.values()) overlay2.off?.();
+    for (const popup of this._popups) popup.remove();
+    for (const marker of this.markers) {
+      marker.remove();
+      const element = marker.getElement();
+      element.classList.remove(...[...element.classList].filter((name) => name.startsWith("maplibregl-")));
+      element.style.removeProperty("transform");
+      element.style.removeProperty("opacity");
+      if (element.hasAttribute("aria-controls")) element.removeAttribute("aria-expanded");
+    }
+    this._location?.remove();
+    this._location = null;
+    this.map.remove();
+    this.map = null;
+    this.markers = [];
+    this._popups = [];
+    this._markerPopups.clear();
+    this._overlays.clear();
+    this.el.style.removeProperty("--md-comp-map-bearing");
+    for (const button of this.el.querySelectorAll(".map-controls [data-action]")) {
+      button.disabled = false;
+      button.hidden = false;
+      button.removeAttribute("aria-pressed");
+    }
+    this.el.append(...this._children);
+  }
+  /** Draws a line through `[longitude, latitude]` points. Replaces an overlay with the same id. */
+  addRoute(id, coordinates, options = {}) {
+    this._line(id, { type: "LineString", coordinates }, "route", { width: 4, ...options });
+  }
+  /** Draws a curved line for each `{ from, to }`. Replaces an overlay with the same id. */
+  addArcs(id, arcs, options = {}) {
+    this._line(id, { type: "MultiLineString", coordinates: arcs.map(({ from, to }) => arc(from, to)) }, "arc", { width: 2, ...options });
+  }
+  /**
+   * Draws GeoJSON points, or the URL of a GeoJSON file, as clusters that
+   * show their count and zoom in when clicked. The layers are
+   * `${id}-clusters`, `${id}-count` and `${id}-points`.
+   */
+  addClusters(id, data, options = {}) {
+    const clusters = `${id}-clusters`, points = `${id}-points`;
+    const zoomIn = async (e) => {
+      const [feature] = e.features;
+      const zoom = await this.map.getSource(id).getClusterExpansionZoom(feature.properties.cluster_id);
+      this.map.easeTo({ center: feature.geometry.coordinates, zoom });
+    };
+    const pointer = () => {
+      this.map.getCanvas().style.cursor = "pointer";
+    };
+    const reset = () => {
+      this.map.getCanvas().style.cursor = "";
+    };
+    this._draw(id, {
+      draw: () => {
+        const color = options.color ?? this._color("var(--md-comp-map-cluster-color)");
+        const surface = this._color("var(--md-comp-map-marker-ring-color)");
+        this.map.addSource(id, {
+          type: "geojson",
+          data,
+          cluster: true,
+          clusterRadius: options.radius ?? 50,
+          clusterMaxZoom: options.maxZoom ?? 14
+        });
+        this.map.addLayer({
+          id: clusters,
+          type: "circle",
+          source: id,
+          filter: ["has", "point_count"],
+          paint: {
+            "circle-color": color,
+            "circle-radius": ["step", ["get", "point_count"], 16, 10, 20, 100, 26],
+            "circle-stroke-width": 6,
+            "circle-stroke-color": color,
+            "circle-stroke-opacity": 0.3
+          }
+        });
+        const style = this.map.getStyle();
+        const font = style.glyphs && style.layers.find((layer) => layer.layout?.["text-font"])?.layout["text-font"];
+        if (font) {
+          this.map.addLayer({
+            id: `${id}-count`,
+            type: "symbol",
+            source: id,
+            filter: ["has", "point_count"],
+            layout: { "text-field": ["get", "point_count_abbreviated"], "text-font": font, "text-size": 12 },
+            paint: { "text-color": this._color("var(--md-comp-map-cluster-label-color)") }
+          });
+        }
+        this.map.addLayer({
+          id: points,
+          type: "circle",
+          source: id,
+          filter: ["!", ["has", "point_count"]],
+          paint: { "circle-color": color, "circle-radius": 6, "circle-stroke-width": 2, "circle-stroke-color": surface }
+        });
+      },
+      off: () => {
+        this.map.off("click", clusters, zoomIn);
+        for (const layer of [clusters, points]) {
+          this.map.off("mouseenter", layer, pointer);
+          this.map.off("mouseleave", layer, reset);
+        }
+      }
+    });
+    this.map.on("click", clusters, zoomIn);
+    for (const layer of [clusters, points]) {
+      this.map.on("mouseenter", layer, pointer);
+      this.map.on("mouseleave", layer, reset);
+    }
+  }
+  /** Removes a route, arcs or clusters added with this id. */
+  removeOverlay(id) {
+    const overlay2 = this._overlays.get(id);
+    if (!overlay2) return;
+    this._overlays.delete(id);
+    overlay2.off?.();
+    if (!this._styleReady || !this.map.getSource(id)) return;
+    for (const layer of this.map.getStyle().layers) if (layer.source === id) this.map.removeLayer(layer.id);
+    this.map.removeSource(id);
+  }
+  _line(id, geometry, token, options) {
+    this._draw(id, {
+      draw: () => {
+        this.map.addSource(id, { type: "geojson", data: { type: "Feature", properties: {}, geometry } });
+        this.map.addLayer({
+          id,
+          type: "line",
+          source: id,
+          layout: { "line-cap": "round", "line-join": "round" },
+          paint: {
+            "line-color": options.color ?? this._color(`var(--md-comp-map-${token}-color)`),
+            "line-width": options.width,
+            "line-opacity": options.opacity ?? 1,
+            ...options.dashArray && { "line-dasharray": options.dashArray }
+          }
+        });
+      }
+    });
+  }
+  // Sources and layers go with the style, so every overlay is drawn again
+  // when a theme change swaps it.
+  _draw(id, overlay2) {
+    this.removeOverlay(id);
+    this._overlays.set(id, overlay2);
+    if (this._styleReady) overlay2.draw();
+  }
+  _addMarker(element, content) {
+    const marker = new this.options.maplibregl.Marker({
+      element,
+      draggable: element.hasAttribute("data-draggable")
+    }).setLngLat(lngLat(element)).addTo(this.map);
+    marker.on("dragend", () => {
+      const { lng, lat } = marker.getLngLat();
+      element.dataset.lngLat = `${lng},${lat}`;
+      element.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    this.markers.push(marker);
+    if (!content) return;
+    element.setAttribute("aria-expanded", "false");
+    const popup = this._popup(content, 16);
+    popup.on("open", () => element.setAttribute("aria-expanded", "true"));
+    popup.on("close", () => {
+      element.setAttribute("aria-expanded", "false");
+      if (!document.activeElement || document.activeElement === document.body) element.focus();
+    });
+    this._markerPopups.set(element, popup);
+  }
+  _popup(content, offset) {
+    const popup = new this.options.maplibregl.Popup({ closeOnClick: false, maxWidth: "none", offset }).setDOMContent(content);
+    this._popups.push(popup);
+    return popup;
+  }
+  _toggle(marker) {
+    const popup = this._markerPopups.get(marker);
+    if (popup.isOpen()) popup.remove();
+    else popup.setLngLat(this.markers.find((m) => m.getElement() === marker).getLngLat()).addTo(this.map);
+  }
+  _buttons(action) {
+    return this.el.querySelectorAll(`.map-controls [data-action="${action}"]`);
+  }
+  _locate(button) {
+    navigator.geolocation?.getCurrentPosition(
+      ({ coords }) => {
+        if (!this.map) return;
+        const center = [coords.longitude, coords.latitude];
+        if (!this._location) {
+          const dot = document.createElement("span");
+          dot.className = "map-marker location";
+          dot.setAttribute("aria-hidden", "true");
+          this._location = new this.options.maplibregl.Marker({ element: dot });
+        }
+        this._location.setLngLat(center).addTo(this.map);
+        this.map.flyTo({ center, zoom: Math.max(this.map.getZoom(), 14) });
+      },
+      (error) => {
+        if (this.map && error.code === error.PERMISSION_DENIED) button.disabled = true;
+      }
+    );
+  }
+  // Resolves a CSS color where the map is, so light-dark() and scoped
+  // themes apply, then paints it on a canvas to read back the sRGB value.
+  // MapLibre does not parse the oklch() the theme tokens compute to.
+  _color(value) {
+    const probe = document.createElement("span");
+    probe.hidden = true;
+    probe.style.color = value;
+    this.el.append(probe);
+    const context = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+    context.fillStyle = getComputedStyle(probe).color;
+    probe.remove();
+    context.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+    return `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 100) / 100})`;
+  }
+  _isDark() {
+    return this._color("light-dark(black, white)") === "rgba(255, 255, 255, 1)";
+  }
+  _themed() {
+    const style = this.options.style;
+    return typeof style === "object" && "light" in style && "dark" in style;
+  }
+  _style() {
+    return this._themed() ? this.options.style[this._dark ? "dark" : "light"] : this.options.style;
+  }
+};
+
 // src/ts/components/lightbox.ts
-var _defaults20 = {
+var _defaults23 = {
   inDuration: 275,
   outDuration: 200,
   onOpenStart: null,
@@ -7902,7 +8681,7 @@ var _Lightbox = class _Lightbox extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults20;
+    return _defaults23;
   }
   /**
    * Initializes instances of Lightbox.
@@ -8108,7 +8887,7 @@ var Lightbox = _Lightbox;
 
 // src/ts/components/scrollspy.ts
 var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-var _defaults21 = {
+var _defaults24 = {
   scrollOffset: 200,
   activeClass: "active",
   getActiveElement: _defaultGetActiveElement,
@@ -8144,7 +8923,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     }
   }
   static get defaults() {
-    return _defaults21;
+    return _defaults24;
   }
   static init(els, options = {}) {
     return super.init(els, options, _ScrollSpy);
@@ -8178,8 +8957,9 @@ var _ScrollSpy = class _ScrollSpy extends Component {
       const retained = elements.filter((spy) => spy.options.keepTopElementActive);
       best = _ScrollSpy._nearestAbove(retained) ?? retained[0];
     }
-    const next = best ? _ScrollSpy._linkFor(best.el.id, best.options) : null;
     const active = _ScrollSpy._active.get(resolver);
+    if (best && active === best && best._link?.isConnected) return;
+    const next = best ? _ScrollSpy._linkFor(best.el.id, best.options) : null;
     if (active === best && active?._link === next) return;
     _ScrollSpy._clearActive(resolver);
     if (!next) return;
@@ -8234,7 +9014,7 @@ _ScrollSpy._active = /* @__PURE__ */ new Map();
 var ScrollSpy = _ScrollSpy;
 
 // src/ts/components/navigationRail.ts
-var _defaults22 = {
+var _defaults25 = {
   onOpenStart: null,
   onOpenEnd: null,
   onCloseStart: null,
@@ -8321,7 +9101,7 @@ var NavigationRail = class _NavigationRail extends Component {
     document.addEventListener("keydown", this._onKeyDown);
   }
   static get defaults() {
-    return _defaults22;
+    return _defaults25;
   }
   static init(els, options = {}) {
     return super.init(els, options, _NavigationRail);
@@ -8351,7 +9131,7 @@ var NavigationRail = class _NavigationRail extends Component {
 };
 
 // src/ts/components/tabs.ts
-var _defaults23 = {
+var _defaults26 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -8364,13 +9144,17 @@ var Tabs = class _Tabs extends Component {
     super(el, options, _Tabs);
     this._originalPanels = /* @__PURE__ */ new Map();
     this._originalLinks = /* @__PURE__ */ new Map();
-    this._handleWindowResize = () => {
+    // Throttled like Carousel's: every bar re-measures on resize, and the left
+    // and right positions are both read before either is written.
+    this._handleWindowResize = Utils.throttle(() => {
       this._setTabsAndTabWidth();
       if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
-        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + "px";
-        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + "px";
+        const left = this._calcLeftPos(this._activeTabLink);
+        const right = this._calcRightPos(this._activeTabLink);
+        this._indicator.style.left = left + "px";
+        this._indicator.style.right = right + "px";
       }
-    };
+    }, 200);
     this._handleTabClick = (e) => {
       const target = e.target;
       if (!target) return;
@@ -8438,7 +9222,7 @@ var Tabs = class _Tabs extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults23;
+    return _defaults26;
   }
   /**
    * Initializes instances of Tabs.
@@ -8625,7 +9409,7 @@ var Tabs = class _Tabs extends Component {
 };
 
 // src/ts/components/timepicker.ts
-var _defaults24 = {
+var _defaults27 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -8821,7 +9605,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults24;
+    return _defaults27;
   }
   /**
    * Initializes instances of Timepicker.
@@ -9183,7 +9967,7 @@ _Timepicker._template = `<div class="timepicker-container">
 var Timepicker = _Timepicker;
 
 // src/ts/components/snackbar.ts
-var _defaults25 = {
+var _defaults28 = {
   text: "",
   action: "",
   onAction: null,
@@ -9233,7 +10017,7 @@ var _Snackbar = class _Snackbar {
     this._setTimer();
   }
   static get defaults() {
-    return _defaults25;
+    return _defaults28;
   }
   static getInstance(el) {
     return el["Expressive_Snackbar"];
@@ -9273,6 +10057,7 @@ var _Snackbar = class _Snackbar {
       snackbar.velocityX = 0;
       snackbar.time = Date.now();
       snackbar.xPos = e.clientX;
+      snackbar._activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
     }
   }
   static _onDragMove(e) {
@@ -9285,7 +10070,7 @@ var _Snackbar = class _Snackbar {
       snackbar.velocityX = snackbar.deltaX / (Date.now() - snackbar.time);
       snackbar.time = Date.now();
       const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
-      const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
+      const activationDistance = snackbar._activationDistance;
       snackbar.el.style.transform = `translateX(${totalDeltaX}px)`;
       snackbar.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
     }
@@ -9298,7 +10083,7 @@ var _Snackbar = class _Snackbar {
       snackbar.panning = false;
       snackbar.el.classList.remove("panning");
       const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
-      const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
+      const activationDistance = snackbar._activationDistance;
       const velocity = Date.now() - snackbar.time < 100 ? snackbar.velocityX : 0;
       const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || velocity > 1;
       if (shouldBeDismissed) {
@@ -9530,7 +10315,7 @@ _Snackbar._draggedSnackbar = null;
 var Snackbar = _Snackbar;
 
 // src/ts/components/tooltip.ts
-var _defaults26 = {
+var _defaults29 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -9552,6 +10337,7 @@ var Tooltip = class _Tooltip extends Component {
       clearTimeout(this._exitDelayTimeout);
       clearTimeout(this._animationTimeout);
       this.isOpen = true;
+      this.el.ownerDocument.addEventListener("keydown", this._handleKeydown, true);
       this.options = { ...this.options, ...this._getAttributeOptions() };
       this._updateTooltipContent();
       this._setEnterDelayTimeout(isManual);
@@ -9564,6 +10350,7 @@ var Tooltip = class _Tooltip extends Component {
       this.isHovered = false;
       this.isFocused = false;
       this.isOpen = false;
+      this.el.ownerDocument.removeEventListener("keydown", this._handleKeydown, true);
       clearTimeout(this._enterDelayTimeout);
       this._setExitDelayTimeout();
     };
@@ -9612,7 +10399,7 @@ var Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults26;
+    return _defaults29;
   }
   /**
    * Initializes instances of Tooltip.
@@ -9693,7 +10480,6 @@ var Tooltip = class _Tooltip extends Component {
       el.addEventListener("focus", this._handleFocus, true);
       el.addEventListener("blur", this._handleBlur, true);
     }
-    this.el.ownerDocument.addEventListener("keydown", this._handleKeydown, true);
   }
   _removeEventHandlers() {
     for (const el of [this.el, this.tooltipEl]) {
@@ -9831,6 +10617,8 @@ var AUTO_INIT_COMPONENTS = {
   },
   Carousel: { component: Carousel, selector: ".carousel" },
   Chips: { component: Chips, selector: ".chips" },
+  Confetti: { component: Confetti, selector: ".confetti" },
+  Particles: { component: Particles, selector: "canvas.particles" },
   ColumnChart: { component: ColumnChart, selector: ".column-chart" },
   BarChart: { component: BarChart, selector: ".bar-chart" },
   PieChart: { component: PieChart, selector: ".pie-chart" },
@@ -9889,7 +10677,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/modular.ts
-var version = "0.13.1";
+var version = "0.14.1";
 
 // src/ts/index.ts
 Forms.Init();