@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/{chunk-C6CHEWYP.mjs → chunk-5KIHWJI2.mjs}

@@ -1,6 +1,6 @@
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-CMGXGYUC.mjs";
 
 // src/ts/components/particles.ts
 var _defaults = {
@@ -12,9 +12,9 @@ var _defaults = {
   vx: 0,
   vy: 0
 };
-var Particles = class _Particles extends Component {
+var Particles = class extends Component {
   constructor(el, options) {
-    super(el, options, _Particles);
+    super(el, options);
     this._particles = [];
     this._width = 0;
     this._height = 0;
@@ -23,53 +23,66 @@ var Particles = class _Particles extends Component {
     // Pointer offset from the canvas center, kept from its last move inside.
     this._mouse = { x: 0, y: 0 };
     this._still = false;
+    this._visible = true;
+    this._motion = null;
+    this._theme = null;
     this._resizeObserver = null;
     this._visibility = null;
+    this._onMotion = () => {
+      this._still = this._motion.matches;
+      if (this._still) {
+        for (const p of this._particles) p.alpha = p.targetAlpha;
+        this._paint();
+      }
+      this._animate();
+    };
+    this._repaint = () => {
+      if (this._still) this._paint();
+    };
     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._motion = matchMedia("(prefers-reduced-motion: reduce)");
+    const { signal } = this._events;
+    this._motion.addEventListener("change", this._onMotion, { signal });
+    matchMedia("(prefers-color-scheme: dark)").addEventListener("change", this._repaint, { signal });
+    this._theme = new MutationObserver(this._repaint);
+    this._theme.observe(document.documentElement, { attributes: true, attributeFilter: ["theme"], subtree: true });
+    this._still = this._motion.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._resizeObserver = new ResizeObserver(() => {
+      if (this.el.clientWidth !== this._width || this.el.clientHeight !== this._height) this._reset();
+    });
+    this._resizeObserver.observe(this.el);
+    this._visibility = new IntersectionObserver((entries) => {
+      this._visible = entries[entries.length - 1].isIntersecting;
+      this._animate();
+    });
     this._visibility.observe(this.el);
   }
   static get defaults() {
     return _defaults;
   }
-  static init(els, options = {}) {
-    return super.init(els, options, _Particles);
-  }
-  static getInstance(el) {
-    return el["Expressive_Particles"];
-  }
   destroy() {
     this._stop();
+    this._theme?.disconnect();
     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;
+    super.destroy();
+  }
+  _animate() {
+    if (this._visible && !this._still) this._start();
+    else this._stop();
   }
   _start() {
     if (this._frame) return;
@@ -147,8 +160,9 @@ var Particles = class _Particles extends Component {
     ctx.globalAlpha = 1;
   }
 };
+Particles.key = "Expressive_Particles";
 
 export {
   Particles
 };
-//# sourceMappingURL=chunk-C6CHEWYP.mjs.map
+//# sourceMappingURL=chunk-5KIHWJI2.mjs.map

package/dist/js/chunks/chunk-5KIHWJI2.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/particles.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\n\nexport interface ParticlesOptions extends BaseOptions {\n  /**\n   * Number of particles.\n   * @default 100\n   */\n  quantity: number;\n  /**\n   * How firmly particles hold their place against the pointer. Lower\n   * follows the pointer further.\n   * @default 50\n   */\n  staticity: number;\n  /**\n   * Frames a particle takes to catch up with the pointer. Higher is slower.\n   * @default 50\n   */\n  ease: number;\n  /**\n   * Base radius in pixels. Each particle adds 0 or 1 to it.\n   * @default 0.4\n   */\n  size: number;\n  /**\n   * A CSS color. Empty uses the canvas's CSS `color`, which defaults to the\n   * theme's on-surface color.\n   * @default ''\n   */\n  color: string;\n  /**\n   * Horizontal drift in pixels per frame. Negative drifts left.\n   * @default 0\n   */\n  vx: number;\n  /**\n   * Vertical drift in pixels per frame. Negative drifts up.\n   * @default 0\n   */\n  vy: number;\n}\n\nconst _defaults: ParticlesOptions = {\n  quantity: 100,\n  staticity: 50,\n  ease: 50,\n  size: 0.4,\n  color: '',\n  vx: 0,\n  vy: 0\n};\n\ninterface Particle {\n  x: number;\n  y: number;\n  translateX: number;\n  translateY: number;\n  size: number;\n  alpha: number;\n  targetAlpha: number;\n  dx: number;\n  dy: number;\n  magnetism: number;\n}\n\n/**\n * Particles. A `<canvas class=\"particles\">` covers its nearest positioned\n * ancestor with slowly drifting dots that lean toward the pointer. Under\n * reduced motion the dots are drawn once and stay still.\n */\nexport class Particles extends Component<ParticlesOptions> {\n  declare el: HTMLCanvasElement;\n  private _ctx: CanvasRenderingContext2D | null;\n  private _style: CSSStyleDeclaration;\n  private _particles: Particle[] = [];\n  private _width = 0;\n  private _height = 0;\n  private _frame = 0;\n  private _last = 0;\n  // Pointer offset from the canvas center, kept from its last move inside.\n  private _mouse = { x: 0, y: 0 };\n  private _still = false;\n  private _visible = true;\n  private _motion: MediaQueryList | null = null;\n  private _theme: MutationObserver | null = null;\n  private _resizeObserver: ResizeObserver | null = null;\n  private _visibility: IntersectionObserver | null = null;\n\n  constructor(el: HTMLElement, options: Partial<ParticlesOptions>) {\n    super(el, options);\n    this._ctx = this.el.getContext('2d');\n    if (!this._ctx) return;\n    this._style = getComputedStyle(this.el);\n    this._motion = matchMedia('(prefers-reduced-motion: reduce)');\n    const { signal } = this._events;\n    this._motion.addEventListener('change', this._onMotion, { signal });\n    // Still dots are painted once, so a theme or color-scheme change\n    // repaints them. Moving ones read the color every frame anyway.\n    matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._repaint, { signal });\n    this._theme = new MutationObserver(this._repaint);\n    this._theme.observe(document.documentElement, { attributes: true, attributeFilter: ['theme'], subtree: true });\n    this._still = this._motion.matches;\n    this._reset();\n    this._resizeObserver = new ResizeObserver(() => {\n      if (this.el.clientWidth !== this._width || this.el.clientHeight !== this._height) this._reset();\n    });\n    this._resizeObserver.observe(this.el);\n    // Animates only while on screen. A canvas scrolled away, hidden or\n    // removed without destroy() stops drawing and following the pointer.\n    // Entries arrive oldest first, so the last one is the current state.\n    this._visibility = new IntersectionObserver((entries) => {\n      this._visible = entries[entries.length - 1].isIntersecting;\n      this._animate();\n    });\n    this._visibility.observe(this.el);\n  }\n\n  static get defaults(): ParticlesOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Particles';\n\n  destroy() {\n    this._stop();\n    this._theme?.disconnect();\n    this._resizeObserver?.disconnect();\n    this._visibility?.disconnect();\n    if (this._ctx) {\n      this._ctx.setTransform(1, 0, 0, 1, 0, 0);\n      this._ctx.clearRect(0, 0, this.el.width, this.el.height);\n    }\n    super.destroy();\n  }\n\n  private _animate() {\n    if (this._visible && !this._still) this._start();\n    else this._stop();\n  }\n\n  private _onMotion = () => {\n    this._still = this._motion.matches;\n    if (this._still) {\n      for (const p of this._particles) p.alpha = p.targetAlpha;\n      this._paint();\n    }\n    this._animate();\n  };\n\n  private _repaint = () => {\n    if (this._still) this._paint();\n  };\n\n  private _start() {\n    if (this._frame) return;\n    window.addEventListener('pointermove', this._onPointerMove, { passive: true });\n    this._frame = requestAnimationFrame((now) => { this._last = now; this._draw(now); });\n  }\n\n  private _stop() {\n    cancelAnimationFrame(this._frame);\n    this._frame = 0;\n    window.removeEventListener('pointermove', this._onPointerMove);\n  }\n\n  private _onPointerMove = (e: PointerEvent) => {\n    const r = this.el.getBoundingClientRect();\n    const x = e.clientX - r.left - r.width / 2;\n    const y = e.clientY - r.top - r.height / 2;\n    if (Math.abs(x) < r.width / 2 && Math.abs(y) < r.height / 2) this._mouse = { x, y };\n  };\n\n  // Matches the pixel buffer to the canvas box and scatters a new set.\n  private _reset() {\n    this._width = this.el.clientWidth;\n    this._height = this.el.clientHeight;\n    this.el.width = Math.round(this._width * devicePixelRatio);\n    this.el.height = Math.round(this._height * devicePixelRatio);\n    this._particles = Array.from({ length: this.options.quantity }, () => this._particle());\n    if (this._still) {\n      for (const p of this._particles) p.alpha = p.targetAlpha;\n      this._paint();\n    }\n  }\n\n  private _particle(): Particle {\n    return {\n      x: Math.floor(Math.random() * this._width),\n      y: Math.floor(Math.random() * this._height),\n      translateX: 0,\n      translateY: 0,\n      size: Math.floor(Math.random() * 2) + this.options.size,\n      alpha: 0,\n      targetAlpha: Math.round((Math.random() * 0.6 + 0.1) * 10) / 10,\n      dx: (Math.random() - 0.5) * 0.1,\n      dy: (Math.random() - 0.5) * 0.1,\n      magnetism: 0.1 + Math.random() * 4\n    };\n  }\n\n  private _draw(now: number) {\n    // Frames are counted at 60 per second whatever the display rate.\n    const step = Math.min((now - this._last) / (1000 / 60), 4);\n    this._last = now;\n    const { staticity, ease, vx, vy } = this.options;\n    const follow = Math.min(step / ease, 1);\n    this._particles = this._particles.map((p) => {\n      p.x += (p.dx + vx) * step;\n      p.y += (p.dy + vy) * step;\n      p.translateX += (this._mouse.x / (staticity / p.magnetism) - p.translateX) * follow;\n      p.translateY += (this._mouse.y / (staticity / p.magnetism) - p.translateY) * follow;\n      // Fades in, and fades out within 20px of an edge.\n      const x = p.x + p.translateX;\n      const y = p.y + p.translateY;\n      const edge = Math.min(x - p.size, this._width - x - p.size, y - p.size, this._height - y - p.size) / 20;\n      p.alpha = edge > 1 ? Math.min(p.alpha + 0.02 * step, p.targetAlpha) : p.targetAlpha * edge;\n      const gone = p.x < -p.size || p.x > this._width + p.size || p.y < -p.size || p.y > this._height + p.size;\n      return gone ? this._particle() : p;\n    });\n    this._paint();\n    this._frame = requestAnimationFrame((t) => this._draw(t));\n  }\n\n  private _paint() {\n    const ctx = this._ctx!;\n    const dpr = devicePixelRatio;\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, this.el.width, this.el.height);\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    // Read every frame, so a theme or color-scheme change applies at once.\n    ctx.fillStyle = this.options.color || this._style.color;\n    for (const p of this._particles) {\n      if (p.alpha <= 0) continue;\n      ctx.globalAlpha = p.alpha;\n      ctx.beginPath();\n      ctx.arc(p.x + p.translateX, p.y + p.translateY, p.size, 0, 2 * Math.PI);\n      ctx.fill();\n    }\n    ctx.globalAlpha = 1;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-L27Q6ZMI.mjs → chunk-67ZPPKXS.mjs}

@@ -1,15 +1,18 @@
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  restoreAttribute
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/buttonGroup.ts
 var _defaults = {};
 var VALID_SELECTION_MODES = /* @__PURE__ */ new Set(["single", "multiple"]);
 var PRESSED_CLASS = "button-group-pressed";
 var MAX_ICON_COMPRESSION = 0.15;
-var ButtonGroup = class _ButtonGroup extends Component {
+var ButtonGroup = class extends Component {
   constructor(el, options = {}) {
-    super(el, options, _ButtonGroup);
+    super(el, options);
     this._pressedStyles = /* @__PURE__ */ new Map();
     this._releaseStyles = /* @__PURE__ */ new Map();
     this._releaseTimer = null;
@@ -34,6 +37,7 @@ var ButtonGroup = class _ButtonGroup extends Component {
         });
       }
       item.setAttribute("aria-pressed", willSelect ? "true" : "false");
+      this._notify("change", null, { detail: { button: item, pressed: willSelect } });
     };
     this._handlePointerDown = (event) => {
       if (event.button !== 0) return;
@@ -69,46 +73,28 @@ var ButtonGroup = class _ButtonGroup extends Component {
       for (const [item, style] of this._releaseStyles) item.style.width = style.width;
       this._releaseStyles.clear();
     };
-    this.el["Expressive_ButtonGroup"] = this;
-    this.options = { ..._ButtonGroup.defaults, ...options };
+    const { signal } = this._events;
     if (this._selectionMode) {
       this._normalizeSelection();
-      this.el.addEventListener("click", this._handleClick, true);
+      this.el.addEventListener("click", this._handleClick, { capture: true, signal });
     }
-    this.el.addEventListener("pointerdown", this._handlePointerDown);
-    this.el.addEventListener("keydown", this._handleKeyDown);
-    this.el.addEventListener("focusout", this._handleFocusOut);
-    document.addEventListener("pointerup", this._resetPress);
-    document.addEventListener("pointercancel", this._resetPress);
-    document.addEventListener("keyup", this._handleKeyUp);
-    window.addEventListener("blur", this._resetPress);
+    this.el.addEventListener("pointerdown", this._handlePointerDown, { signal });
+    this.el.addEventListener("keydown", this._handleKeyDown, { signal });
+    this.el.addEventListener("focusout", this._handleFocusOut, { signal });
+    document.addEventListener("pointerup", this._resetPress, { signal });
+    document.addEventListener("pointercancel", this._resetPress, { signal });
+    document.addEventListener("keyup", this._handleKeyUp, { signal });
+    window.addEventListener("blur", this._resetPress, { signal });
   }
   static get defaults() {
     return _defaults;
   }
-  static init(els, options = {}) {
-    return super.init(els, options, _ButtonGroup);
-  }
-  static getInstance(el) {
-    return el["Expressive_ButtonGroup"];
-  }
   destroy() {
     this._resetPress();
     this._finishRelease();
-    this.el.removeEventListener("click", this._handleClick, true);
-    this.el.removeEventListener("pointerdown", this._handlePointerDown);
-    this.el.removeEventListener("keydown", this._handleKeyDown);
-    this.el.removeEventListener("focusout", this._handleFocusOut);
-    document.removeEventListener("pointerup", this._resetPress);
-    document.removeEventListener("pointercancel", this._resetPress);
-    document.removeEventListener("keyup", this._handleKeyUp);
-    window.removeEventListener("blur", this._resetPress);
-    for (const [item, value] of this._originalPressed) {
-      if (value === null) item.removeAttribute("aria-pressed");
-      else item.setAttribute("aria-pressed", value);
-    }
+    for (const [item, value] of this._originalPressed) restoreAttribute(item, "aria-pressed", value);
     this._originalPressed.clear();
-    this.el["Expressive_ButtonGroup"] = void 0;
+    super.destroy();
   }
   get _selectionMode() {
     const mode = this.el.dataset.selection;
@@ -219,8 +205,9 @@ var ButtonGroup = class _ButtonGroup extends Component {
     return Math.max(0, rect.width - minimumWidth);
   }
 };
+ButtonGroup.key = "Expressive_ButtonGroup";
 
 export {
   ButtonGroup
 };
-//# sourceMappingURL=chunk-L27Q6ZMI.mjs.map
+//# sourceMappingURL=chunk-67ZPPKXS.mjs.map

package/dist/js/chunks/chunk-67ZPPKXS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/buttonGroup.ts"],
+  "sourcesContent": ["import { restoreAttribute } from '../core/utils';\nimport { Component, BaseOptions } from \"../core/component\";\n\nexport interface ButtonGroupOptions extends BaseOptions {}\n\ntype SavedItemStyle = {\n  width: string;\n  baseWidth: number;\n};\n\nconst _defaults: ButtonGroupOptions = {};\nconst VALID_SELECTION_MODES = new Set([\"single\", \"multiple\"]);\nconst PRESSED_CLASS = \"button-group-pressed\";\nconst MAX_ICON_COMPRESSION = 0.15;\n\n/**\n * Coordinates Material button-group press geometry and optional toggle state.\n *\n * Standard groups redistribute the pressed item's 15% width growth from its\n * immediate neighbors. `data-selection=\"single|multiple\"` also enables\n * `aria-pressed` state management.\n */\nexport class ButtonGroup extends Component<ButtonGroupOptions> {\n  private _pressedStyles = new Map<HTMLElement, SavedItemStyle>();\n  private _releaseStyles = new Map<HTMLElement, SavedItemStyle>();\n  private _releaseTimer: number | null = null;\n  private _originalPressed = new Map<HTMLButtonElement, string | null>();\n  private _activeItem: HTMLElement | null = null;\n\n  constructor(el: HTMLElement, options: Partial<ButtonGroupOptions> = {}) {\n    super(el, options);\n\n    const { signal } = this._events;\n    if (this._selectionMode) {\n      this._normalizeSelection();\n      this.el.addEventListener(\"click\", this._handleClick, { capture: true, signal });\n    }\n    this.el.addEventListener(\"pointerdown\", this._handlePointerDown, { signal });\n    this.el.addEventListener(\"keydown\", this._handleKeyDown, { signal });\n    this.el.addEventListener(\"focusout\", this._handleFocusOut, { signal });\n    document.addEventListener(\"pointerup\", this._resetPress, { signal });\n    document.addEventListener(\"pointercancel\", this._resetPress, { signal });\n    document.addEventListener(\"keyup\", this._handleKeyUp, { signal });\n    window.addEventListener(\"blur\", this._resetPress, { signal });\n  }\n\n  static get defaults() {\n    return _defaults;\n  }\n\n  static key = 'Expressive_ButtonGroup';\n\n  destroy() {\n    this._resetPress();\n    this._finishRelease();\n    for (const [item, value] of this._originalPressed) restoreAttribute(item, \"aria-pressed\", value);\n    this._originalPressed.clear();\n    super.destroy();\n  }\n\n  private get _selectionMode(): \"single\" | \"multiple\" | null {\n    const mode = this.el.dataset.selection;\n    return VALID_SELECTION_MODES.has(mode) ? (mode as \"single\" | \"multiple\") : null;\n  }\n\n  private get _items(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child): child is HTMLElement =>\n        child instanceof HTMLButtonElement ||\n        (child instanceof HTMLAnchorElement && child.classList.contains(\"button\")),\n    );\n  }\n\n  private get _toggleItems(): HTMLButtonElement[] {\n    return this._items.filter(\n      (item): item is HTMLButtonElement => item instanceof HTMLButtonElement,\n    );\n  }\n\n  private _normalizeSelection() {\n    const items = this._toggleItems;\n    items.forEach((item) => {\n      this._rememberPressed(item);\n      if (![\"true\", \"false\"].includes(item.getAttribute(\"aria-pressed\") || \"\")) {\n        item.setAttribute(\"aria-pressed\", \"false\");\n      }\n    });\n\n    if (this._selectionMode === \"single\") {\n      const selected = items.filter((item) => item.getAttribute(\"aria-pressed\") === \"true\");\n      selected.slice(1).forEach((item) => item.setAttribute(\"aria-pressed\", \"false\"));\n    }\n\n    if (\n      this.el.hasAttribute(\"data-selection-required\") &&\n      !items.some((item) => item.getAttribute(\"aria-pressed\") === \"true\")\n    ) {\n      items.find((item) => !this._isDisabled(item))?.setAttribute(\"aria-pressed\", \"true\");\n    }\n  }\n\n  private _itemFromEvent(event: Event): HTMLElement | null {\n    if (!(event.target instanceof Element)) return null;\n    const item = event.target.closest(\"button, a.button\");\n    return item instanceof HTMLElement && item.parentElement === this.el ? item : null;\n  }\n\n  private _isDisabled(item: HTMLElement): boolean {\n    return (\n      (item instanceof HTMLButtonElement && item.disabled) ||\n      item.getAttribute(\"aria-disabled\") === \"true\" ||\n      item.classList.contains(\"disabled\")\n    );\n  }\n\n  private _handleClick = (event: MouseEvent) => {\n    if (!this._selectionMode) return;\n    const item = this._itemFromEvent(event);\n    if (!(item instanceof HTMLButtonElement) || this._isDisabled(item)) return;\n    this._rememberPressed(item);\n\n    const willSelect = item.getAttribute(\"aria-pressed\") !== \"true\";\n    const selectedCount = this._toggleItems.filter(\n      (button) => button.getAttribute(\"aria-pressed\") === \"true\",\n    ).length;\n    if (\n      !willSelect &&\n      this.el.hasAttribute(\"data-selection-required\") &&\n      selectedCount === 1\n    ) {\n      return;\n    }\n    if (this._selectionMode === \"single\" && willSelect) {\n      this._toggleItems.forEach((button) => {\n        this._rememberPressed(button);\n        button.setAttribute(\"aria-pressed\", \"false\");\n      });\n    }\n    item.setAttribute(\"aria-pressed\", willSelect ? \"true\" : \"false\");\n    this._notify(\"change\", null, { detail: { button: item, pressed: willSelect } });\n  };\n\n  private _rememberPressed(item: HTMLButtonElement) {\n    if (!this._originalPressed.has(item)) {\n      this._originalPressed.set(item, item.getAttribute(\"aria-pressed\"));\n    }\n  }\n\n  private _handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0) return;\n    const item = this._itemFromEvent(event);\n    if (item && !this._isDisabled(item)) this._startPress(item);\n  };\n\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.repeat || (event.key !== \" \" && event.key !== \"Enter\")) return;\n    const item = this._itemFromEvent(event);\n    if (item && !this._isDisabled(item)) this._startPress(item);\n  };\n\n  private _handleKeyUp = (event: KeyboardEvent) => {\n    if (event.key === \" \" || event.key === \"Enter\") this._resetPress();\n  };\n\n  private _handleFocusOut = (event: FocusEvent) => {\n    if (event.target === this._activeItem) this._resetPress();\n  };\n\n  private _startPress(item: HTMLElement) {\n    if (this._activeItem) return;\n    this._finishRelease();\n\n    const items = this._items;\n    const activeIndex = items.indexOf(item);\n    if (activeIndex < 0) return;\n\n    this._activeItem = item;\n    item.classList.add(PRESSED_CLASS);\n    if (this.el.classList.contains(\"connected\") || items.length < 2) return;\n\n    const rects = items.map((candidate) => candidate.getBoundingClientRect());\n    const activeWidth = rects[activeIndex].width;\n    if (activeWidth <= 0) return;\n\n    const parsedMultiplier = Number.parseFloat(\n      getComputedStyle(this.el).getPropertyValue(\n        \"--md-comp-button-group-pressed-item-width-multiplier\",\n      ),\n    );\n    const multiplier = Number.isFinite(parsedMultiplier) ? parsedMultiplier : 0.15;\n    const desiredGrowth = activeWidth * multiplier;\n    const neighborIndexes = [activeIndex - 1, activeIndex + 1].filter(\n      (index) => index >= 0 && index < items.length,\n    );\n    const compression = new Map<number, number>();\n\n    if (neighborIndexes.length === 1) {\n      const index = neighborIndexes[0];\n      compression.set(\n        index,\n        Math.min(desiredGrowth, this._compressionCapacity(items[index], rects[index])),\n      );\n    } else {\n      const half = desiredGrowth / 2;\n      for (const index of neighborIndexes) {\n        compression.set(\n          index,\n          Math.min(half, this._compressionCapacity(items[index], rects[index])),\n        );\n      }\n      let remaining = desiredGrowth - [...compression.values()].reduce((sum, value) => sum + value, 0);\n      for (const index of neighborIndexes) {\n        if (remaining <= 0) break;\n        const capacity =\n          this._compressionCapacity(items[index], rects[index]) - compression.get(index);\n        const extra = Math.min(remaining, capacity);\n        compression.set(index, compression.get(index) + extra);\n        remaining -= extra;\n      }\n    }\n\n    const actualGrowth = [...compression.values()].reduce((sum, value) => sum + value, 0);\n    if (actualGrowth <= 0) return;\n\n    items.forEach((candidate, index) => {\n      this._pressedStyles.set(candidate, {\n        width: candidate.style.width,\n        baseWidth: rects[index].width,\n      });\n      candidate.style.width = `${rects[index].width}px`;\n    });\n    void this.el.offsetWidth;\n    items.forEach((candidate, index) => {\n      const adjustment =\n        index === activeIndex ? actualGrowth : -(compression.get(index) || 0);\n      candidate.style.width = `${rects[index].width + adjustment}px`;\n    });\n  }\n\n  private _compressionCapacity(item: HTMLElement, rect: DOMRect): number {\n    const minimumWidth = item.classList.contains(\"icon-button\")\n      ? rect.width * (1 - MAX_ICON_COMPRESSION)\n      : rect.height;\n    return Math.max(0, rect.width - minimumWidth);\n  }\n\n  private _resetPress = () => {\n    this._activeItem?.classList.remove(PRESSED_CLASS);\n    this._activeItem = null;\n    if (!this._pressedStyles.size) return;\n    this._finishRelease();\n    this._releaseStyles = new Map(this._pressedStyles);\n    for (const [item, style] of this._releaseStyles) {\n      item.style.width = `${style.baseWidth}px`;\n    }\n    this._pressedStyles.clear();\n    this._releaseTimer = window.setTimeout(this._finishRelease, 200);\n  };\n\n  private _finishRelease = () => {\n    if (this._releaseTimer !== null) window.clearTimeout(this._releaseTimer);\n    this._releaseTimer = null;\n    for (const [item, style] of this._releaseStyles) item.style.width = style.width;\n    this._releaseStyles.clear();\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-XAEAEHIX.mjs → chunk-6FSEUFVW.mjs}

@@ -1,19 +1,26 @@
 import {
   LineChart,
-  polarPoint,
-  seriesColor,
+  polarPoint
+} from "./chunk-ZM3XBHWV.mjs";
+import {
   svgNode
-} from "./chunk-TCCA2HDG.mjs";
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/radarChart.ts
 var RINGS = 4;
+function runs(values) {
+  const list = [[]];
+  values.forEach((value, i) => value === null ? list.push([]) : list[list.length - 1].push(i));
+  if (list.length > 1) list[0] = [...list.pop(), ...list[0]];
+  return list.filter((run) => run.length);
+}
+var closed = (corners) => `M${corners.join("L")}Z`;
+var open = (corners) => `M${corners.join("L")}${corners.length > 1 ? "" : "h0"}`;
+var wedge = (corners) => `M0,0L${corners.join("L")}Z`;
 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;
@@ -21,12 +28,6 @@ var RadarChart = class extends LineChart {
   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
@@ -54,6 +55,28 @@ var RadarChart = class extends LineChart {
     const [turn] = this._polarAt(e);
     return Math.round(turn * this.labels.length) % this.labels.length;
   }
+  /** The grid rings' shares of the radius: one per .axis label above zero, or quarters. */
+  _rings(share) {
+    if (!this._axis) return Array.from({ length: RINGS }, (_, r) => (r + 1) / RINGS);
+    return this.series[0].scale.ticks.filter((tick) => tick > 0).map(share);
+  }
+  /**
+   * One series' group: its outline, broken at a gap like a line chart's,
+   * its .area fill and its .points.
+   */
+  _series(series, corner) {
+    const group = svgNode("g", {
+      class: `radar-chart-series ${series.className}`.trim(),
+      "data-series": series.color
+    });
+    const lines = runs(series.values).map((run) => run.map(corner));
+    const [outline, fill] = series.values.includes(null) ? [open, wedge] : [closed, closed];
+    group.append(svgNode("path", { class: "radar-chart-shape", d: lines.map(outline).join("") }));
+    const list = this.el.classList;
+    if (list.contains("area")) group.append(svgNode("path", { class: "radar-chart-area", d: lines.map(fill).join("") }));
+    if (list.contains("points")) group.append(svgNode("path", { class: "radar-chart-points", d: lines.flat().map((c) => `M${c}h0`).join("") }));
+    return group;
+  }
   /**
    * 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;
@@ -67,20 +90,9 @@ var RadarChart = class extends LineChart {
     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("")
+      d: this._rings(share).map(ring).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": seriesColor(s)
-      });
-      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);
-    });
+    this.series.forEach((series) => svg.append(this._series(series, (i) => at(i, share(series.values[i])))));
     const labels = document.createElement("ol");
     labels.className = "radar-chart-axes";
     labels.setAttribute("aria-hidden", "true");
@@ -96,8 +108,9 @@ var RadarChart = class extends LineChart {
     return web;
   }
 };
+RadarChart.key = "Expressive_RadarChart";
 
 export {
   RadarChart
 };
-//# sourceMappingURL=chunk-XAEAEHIX.mjs.map
+//# sourceMappingURL=chunk-6FSEUFVW.mjs.map

package/dist/js/chunks/chunk-6FSEUFVW.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/radarChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, polarPoint, Series } from './lineChart';\nimport { svgNode as node } from '../core/utils';\n\nexport type RadarChartOptions = LineChartOptions;\n\n/** Grid rings, evenly spaced from the middle to the rim. */\nconst RINGS = 4;\n\n/**\n * A series' rows split at its gaps into runs, the last carrying on round\n * past the top spoke into the first.\n */\nfunction runs(values: (number | null)[]) {\n  const list: number[][] = [[]];\n  values.forEach((value, i) => (value === null ? list.push([]) : list[list.length - 1].push(i)));\n  if (list.length > 1) list[0] = [...list.pop()!, ...list[0]];\n  return list.filter((run) => run.length);\n}\n\n// A run of corners as a path: closed round a whole shape; open where a gap\n// breaks it, a dot for a lone corner; and filled as a wedge from the middle.\nconst closed = (corners: string[]) => `M${corners.join('L')}Z`;\nconst open = (corners: string[]) => `M${corners.join('L')}${corners.length > 1 ? '' : 'h0'}`;\nconst wedge = (corners: string[]) => `M0,0L${corners.join('L')}Z`;\n\n/**\n * Radar chart. It reads its <table> like LineChart, but each row is a spoke,\n * clockwise from the top, and each value column is a series drawn as a\n * shape joining its values on the spokes, from zero in the middle to the\n * scale's top at the rim. The row labels sit round the rim.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class RadarChart extends LineChart {\n  protected get _type() {\n    return 'radar-chart';\n  }\n\n  /** The scale starts at zero, the middle, so shapes compare by size. */\n  protected get _fromZero() {\n    return true;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  static key = 'Expressive_RadarChart';\n\n  /**\n   * The cursor is a spoke turned by --turn, and the tooltip sits past its\n   * tip. LineChart's points on the spoke keep their top, a share of the\n   * radius, which stops at the rim and the middle like the shapes.\n   */\n  protected _place(index: number) {\n    for (const dot of this._cursor.children as HTMLCollectionOf<HTMLElement>) {\n      dot.style.top = `${Math.min(100, Math.max(0, parseFloat(dot.style.top)))}%`;\n    }\n    const turn = this._turn(index);\n    this._cursor.style.setProperty('--turn', String(turn));\n    this._tooltip.style.setProperty('--turn', String(turn));\n    // On the right half it opens leftwards, over the chart.\n    this._tooltip.classList.toggle('end', turn > 0 && turn < 0.5);\n  }\n\n  /** A row's spoke as a fraction of a turn clockwise from the top. */\n  private _turn(index: number) {\n    return index / this.labels.length;\n  }\n\n  /** Only the legend; the labels go round the rim in _draw. */\n  protected _guides(): Element[] {\n    return this._legend();\n  }\n\n  /** The nearest spoke to the pointer, by its angle from the middle. */\n  protected _indexAt(e: PointerEvent) {\n    const [turn] = this._polarAt(e);\n    return Math.round(turn * this.labels.length) % this.labels.length;\n  }\n\n  /** The grid rings' shares of the radius: one per .axis label above zero, or quarters. */\n  private _rings(share: (value: number) => number) {\n    if (!this._axis) return Array.from({ length: RINGS }, (_, r) => (r + 1) / RINGS);\n    return this.series[0].scale.ticks.filter((tick) => tick > 0).map(share);\n  }\n\n  /**\n   * One series' group: its outline, broken at a gap like a line chart's,\n   * its .area fill and its .points.\n   */\n  private _series(series: Series, corner: (index: number) => string) {\n    const group = node('g', {\n      class: `radar-chart-series ${series.className}`.trim(),\n      'data-series': series.color\n    });\n    const lines = runs(series.values).map((run) => run.map(corner));\n    const [outline, fill] = series.values.includes(null) ? [open, wedge] : [closed, closed];\n    group.append(node('path', { class: 'radar-chart-shape', d: lines.map(outline).join('') }));\n    const list = this.el.classList;\n    if (list.contains('area')) group.append(node('path', { class: 'radar-chart-area', d: lines.map(fill).join('') }));\n    // Round caps on zero-length lines, so CSS sizes the points in pixels.\n    if (list.contains('points')) group.append(node('path', { class: 'radar-chart-points', d: lines.flat().map((c) => `M${c}h0`).join('') }));\n    return group;\n  }\n\n  /**\n   * An SVG in a -50 to 50 box: the rings and spokes of the grid, then each\n   * series' shape, with its points for .points. The rim is the box's edge;\n   * the labels round it are HTML.\n   */\n  protected _draw(): Element {\n    const at = (index: number, share: number) => polarPoint(this._turn(index), 50 * share);\n    // The rim is the scale's top, so _y is the distance in from the rim.\n    const share = (value: number) => Math.min(1, Math.max(0, 1 - this._y(value) / 100));\n    const rows = this.labels.map((_, i) => i);\n    const ring = (r: number) => `M${rows.map((i) => at(i, r)).join('L')}Z`;\n\n    const svg = node('svg', { viewBox: '-50 -50 100 100', 'aria-hidden': 'true', focusable: 'false' });\n    svg.append(node('path', {\n      class: 'radar-chart-grid',\n      d: this._rings(share).map(ring).join('')\n        + rows.map((i) => `M0,0L${at(i, 1)}`).join('')\n    }));\n    this.series.forEach((series) => svg.append(this._series(series, (i) => at(i, share(series.values[i]!)))));\n\n    const labels = document.createElement('ol');\n    labels.className = 'radar-chart-axes';\n    labels.setAttribute('aria-hidden', 'true');\n    this.labels.forEach((text, i) => {\n      const li = document.createElement('li');\n      li.textContent = text;\n      li.style.setProperty('--turn', String(this._turn(i)));\n      labels.append(li);\n    });\n\n    const web = document.createElement('div');\n    web.className = 'radar-chart-web';\n    web.append(svg, labels);\n    return web;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["share"]
+}

package/dist/js/chunks/chunk-752ADW4M.mjs

@@ -0,0 +1,225 @@
+import {
+  LineChart,
+  affix,
+  cellValue,
+  morph,
+  numberFormat,
+  pace,
+  tickText
+} from "./chunk-ZM3XBHWV.mjs";
+import {
+  svgNode
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/scatterChart.ts
+var dots = (marks) => marks.map(({ x, y }) => `M${x},${y}h0`).join("");
+var place = ({ row, series }) => `${row} ${series.column}`;
+var span = (text) => Object.assign(document.createElement("span"), { textContent: text });
+var ms = (time) => parseFloat(time) * (time.trim().endsWith("ms") ? 1 : 1e3);
+function sized(path, size, was, timing) {
+  path.style.setProperty("--scatter-chart-size", `${size}`);
+  if (!timing || !was || was.size === size) return;
+  path.animate({ "--scatter-chart-size": [`${was.size}`, `${size}`] }, { duration: ms(timing.dur), easing: `cubic-bezier(${timing.keySplines})` });
+}
+var ScatterChart = class extends LineChart {
+  get _type() {
+    return "scatter-chart";
+  }
+  get _seriesFrom() {
+    return 2;
+  }
+  get _seriesTo() {
+    return this._bubble ? -1 : void 0;
+  }
+  get _bubble() {
+    return this.el.classList.contains("bubble");
+  }
+  static get defaults() {
+    return { ...LineChart.defaults, xMin: null, xMax: null };
+  }
+  /**
+   * Reads each row's x value into `_xs` and its size into `_sizes`, which
+   * the scales and the points use, and leaves out the values of rows
+   * without either, so they neither draw nor stretch a scale. Nothing stacks.
+   */
+  _arrange(series) {
+    const xs = this._xs = this._rows.map((row) => cellValue(row.cells[1]));
+    const sizes = this._sizes = this._rows.map((row) => this._size(row));
+    for (const each of series) {
+      each.values = each.tops = each.values.map((value, row) => xs[row] === null || sizes[row] === null ? null : value);
+    }
+  }
+  /** A row's size: 1 without .bubble, or its last cell's value, null unless positive. */
+  _size(row) {
+    if (!this._bubble) return 1;
+    const size = cellValue(row.cells[this._header.length - 1]) ?? 0;
+    return size > 0 ? size : null;
+  }
+  get _count() {
+    return this._marks?.length ?? 0;
+  }
+  /** Highlights one point, numbered as `_marks` lists them. Pass -1 to hide the tooltip. */
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    this.activeIndex = index;
+    const mark = this._marks[index];
+    this._cursor.hidden = this._tooltip.hidden = !mark;
+    if (mark) this._fill(mark);
+  }
+  /**
+   * Puts the marker on a point, at a bubble's size, and fills the tooltip
+   * beside it: the row, its x header and text, the series and its text, and
+   * with .bubble the size header and text, as the author wrote them. Past
+   * the middle the tooltip opens back over the plot.
+   */
+  _fill({ row, series, x, y, size }) {
+    this._cursor.dataset.series = series.color;
+    this._cursor.style.setProperty("--scatter-chart-size", `${size}`);
+    for (const part of [this._cursor, this._tooltip]) Object.assign(part.style, { left: `${x}%`, top: `${y}%` });
+    this._tooltip.classList.toggle("end", x > 50);
+    const [title, name] = [document.createElement("strong"), span(series.name)];
+    title.textContent = this.labels[row];
+    name.dataset.series = series.color;
+    const sizeText = this._bubble ? this._cellText(row, this._header.length - 1) : [];
+    this._tooltip.replaceChildren(title, ...this._cellText(row, 1), name, span(series.text[row]), ...sizeText);
+  }
+  /** A column's header, without a swatch since it names no series, and the row's text in it. */
+  _cellText(row, column) {
+    const header = span(this._header[column].textContent.trim());
+    header.className = "x";
+    return [header, span(this._rows[row].cells[column]?.textContent.trim() ?? "")];
+  }
+  /** The point nearest the pointer, or -1 with none. */
+  _indexAt(e) {
+    const [plot, box] = [this._plot, this._plot.getBoundingClientRect()];
+    const away = ({ x, y }) => Math.hypot(
+      box.left + plot.clientLeft + x / 100 * plot.clientWidth - e.clientX,
+      box.top + plot.clientTop + y / 100 * plot.clientHeight - e.clientY
+    );
+    return this._marks.reduce((nearest, mark, i) => nearest < 0 || away(mark) < away(this._marks[nearest]) ? i : nearest, -1);
+  }
+  /**
+   * Steps through the points in table order. The arrows keep their meaning
+   * in a right-to-left chart, since table order is no direction on screen.
+   */
+  _keyTarget(key) {
+    if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
+    const last = this._marks.length - 1;
+    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[key];
+    if (step) return Math.min(last, Math.max(0, this.activeIndex + step));
+    return { Home: 0, End: last }[key];
+  }
+  _read() {
+    [this._drawn, this._marks] = [this._marks ?? [], []];
+    super._read();
+    if (!this.series.length) return;
+    this._xFit = this._xScale();
+    this._xAffix = affix(this._rows.map((row) => row.cells[1]));
+  }
+  /** The x scale over the rows with a point, between `xMin` and `xMax` where they are set. */
+  _xScale() {
+    const [low, high] = this._xRange();
+    const [min, max] = [this._xEnd("xMin"), this._xEnd("xMax")];
+    return this._fit(min ?? low, max ?? high, [min !== null, max !== null]);
+  }
+  /** The x values of the rows with a point, with 10% of their span to spare each side. */
+  _xRange() {
+    const xs = this._xs.filter((_, row) => this._hasPoint(row));
+    if (!xs.length) return [-1, 1];
+    const [low, high] = [xs.reduce((a, b) => Math.min(a, b)), xs.reduce((a, b) => Math.max(a, b))];
+    const pad = (high - low) * 0.1 || 1;
+    return [low - pad, high + pad];
+  }
+  /** An x scale end from its data attribute or option, or null. */
+  _xEnd(name) {
+    return this._number(name) ?? this.options[name] ?? null;
+  }
+  /** A value's distance across the plot from its inline start, in percent. */
+  _xAt(value) {
+    const { min, max } = this._xFit;
+    const x = (value - min) / (max - min || 1) * 100;
+    return this._reversed ? 100 - x : x;
+  }
+  /** Whether any series shown draws a point in a row. */
+  _hasPoint(row) {
+    return this.series.some((series) => series.values[row] !== null);
+  }
+  /** The points, each diameter the square root of its row's share of the largest size drawn, so areas follow sizes. */
+  _layout() {
+    const largest = this._sizes.reduce((most, size, row) => this._hasPoint(row) ? Math.max(most, size) : most, 0);
+    return this.labels.flatMap((_, row) => this.series.filter((series) => series.values[row] !== null).map((series) => ({
+      row,
+      series,
+      x: this._xAt(this._xs[row]),
+      y: series.y(series.values[row]),
+      size: Math.sqrt(this._sizes[row] / largest)
+    })));
+  }
+  /** One group per series, its points round caps on zero-length lines, so CSS sizes them in pixels. */
+  _draw() {
+    this._marks = this._layout();
+    const svg = svgNode("svg", {
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    });
+    const timing = this._before.length ? pace(this.el) : null;
+    const was = new Map(this._drawn.map((old) => [place(old), old]));
+    svg.append(...this.series.map((series) => this._group(series, timing, was)));
+    return svg;
+  }
+  /**
+   * A series' points, in one path, or with .bubble one path each, largest
+   * first so smaller bubbles stay on top.
+   */
+  _group(series, timing, was) {
+    const group = svgNode("g", {
+      class: `scatter-chart-series ${series.className}`.trim(),
+      "data-series": series.color
+    });
+    const marks = this._marks.filter((mark) => mark.series === series);
+    const sets = this._bubble ? marks.sort((a, b) => b.size - a.size).map((mark) => [mark]) : [marks];
+    group.append(...sets.map((set) => this._pointPath(set, timing, was)));
+    return group;
+  }
+  /**
+   * A path of points. After update() each moves from where its row's point
+   * in the same column was drawn, or appears where it is.
+   */
+  _pointPath(marks, timing, was) {
+    const path = svgNode("path", { class: "scatter-chart-points", d: dots(marks) });
+    if (timing) morph(path, dots(marks.map((mark) => was.get(place(mark)) ?? mark)), timing);
+    if (this._bubble) sized(path, marks[0].size, was.get(place(marks[0])), timing);
+    return path;
+  }
+  /** With .axis, the y scale's labels, and the x scale's below the plot with a grid line at each. */
+  _axes() {
+    return this._axis ? [...super._axes(), this._xAxis()] : [];
+  }
+  _xAxis() {
+    const axis = document.createElement("ol");
+    axis.className = "scatter-chart-axis x";
+    axis.setAttribute("aria-hidden", "true");
+    const number = numberFormat(this.el, { notation: "compact", maximumSignificantDigits: 3 });
+    for (const tick of this._xFit.ticks) {
+      const li = document.createElement("li");
+      const label = document.createElement("span");
+      label.textContent = tickText(number, tick, this._xAffix);
+      li.style.setProperty("--at", `${this._xAt(tick)}%`);
+      li.append(label);
+      axis.append(li);
+    }
+    return axis;
+  }
+  /** The legend only: the rows have no labels along an axis. */
+  _guides() {
+    return this._legend();
+  }
+};
+ScatterChart.key = "Expressive_ScatterChart";
+
+export {
+  ScatterChart
+};
+//# sourceMappingURL=chunk-752ADW4M.mjs.map