@expressivecss/expressive 0.12.0 → 0.14.1

package/dist/js/chunks/chunk-BG6ZRB5H.mjs

@@ -0,0 +1,154 @@
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/particles.ts
+var _defaults = {
+  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 _defaults;
+  }
+  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;
+  }
+};
+
+export {
+  Particles
+};
+//# sourceMappingURL=chunk-BG6ZRB5H.mjs.map

package/dist/js/chunks/chunk-BG6ZRB5H.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/particles.ts"],
+  "sourcesContent": ["import { Component, BaseOptions, InitElements, InitElement } 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 _resizeObserver: ResizeObserver | null = null;\n  private _visibility: IntersectionObserver | null = null;\n\n  constructor(el: HTMLElement, options: Partial<ParticlesOptions>) {\n    super(el, options, Particles);\n    this.el['Expressive_Particles'] = this;\n    this.options = { ...Particles.defaults, ...options };\n    this._ctx = this.el.getContext('2d');\n    if (!this._ctx) return;\n    this._style = getComputedStyle(this.el);\n    this._still = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n    this._reset();\n    if (typeof ResizeObserver !== 'undefined') {\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    }\n    if (this._still) return;\n    if (typeof IntersectionObserver === 'undefined') {\n      this._start();\n      return;\n    }\n    // Animates only while on screen. A canvas scrolled away, hidden or\n    // removed without destroy() stops drawing and following the pointer.\n    this._visibility = new IntersectionObserver(([entry]) => entry.isIntersecting ? this._start() : this._stop());\n    this._visibility.observe(this.el);\n  }\n\n  static get defaults(): ParticlesOptions {\n    return _defaults;\n  }\n\n  static init(el: HTMLElement, options?: Partial<ParticlesOptions>): Particles;\n  static init(els: InitElements<InitElement>, options?: Partial<ParticlesOptions>): Particles[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<ParticlesOptions> = {}\n  ): Particles | Particles[] {\n    return super.init(els, options, Particles);\n  }\n\n  static getInstance(el: HTMLElement): Particles {\n    return el['Expressive_Particles'];\n  }\n\n  destroy() {\n    this._stop();\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    this.el['Expressive_Particles'] = undefined;\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-DLWYKFEI.mjs → chunk-CUQPB25U.mjs}

@@ -1,9 +1,9 @@
 import {
   installSheetDrag
-} from "./chunk-GZWPXXY6.mjs";
+} from "./chunk-QJABDLSD.mjs";
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 
 // src/ts/behaviors/bottomSheets.ts
 var SHEET_SELECTOR = "dialog.bottom-sheet, dialog.bottom";
@@ -52,4 +52,4 @@ var BottomSheets = _BottomSheets;
 export {
   BottomSheets
 };
-//# sourceMappingURL=chunk-DLWYKFEI.mjs.map
+//# sourceMappingURL=chunk-CUQPB25U.mjs.map

package/dist/js/chunks/{chunk-6WLSDZ4O.mjs → chunk-DAIU5SLG.mjs}

@@ -1,6 +1,6 @@
 import {
   installSheetDrag
-} from "./chunk-GZWPXXY6.mjs";
+} from "./chunk-QJABDLSD.mjs";
 
 // src/ts/behaviors/sideSheets.ts
 var startDocked = (dialog) => dialog.classList.contains("left") || dialog.classList.contains("left-sheet") || dialog.classList.contains("start");
@@ -25,4 +25,4 @@ var SideSheets = class {
 export {
   SideSheets
 };
-//# sourceMappingURL=chunk-6WLSDZ4O.mjs.map
+//# sourceMappingURL=chunk-DAIU5SLG.mjs.map

package/dist/js/chunks/chunk-FS7XY3HT.mjs

@@ -0,0 +1,124 @@
+import {
+  Utils
+} from "./chunk-MNPROCZF.mjs";
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/richTextEditor.ts
+var _defaults = {
+  Editor: null,
+  extensions: []
+};
+var NAMING = ["aria-label", "aria-labelledby", "aria-describedby"];
+var RichTextEditor = class _RichTextEditor extends Component {
+  constructor(el, options) {
+    super(el, options, _RichTextEditor);
+    /** The Tiptap editor. */
+    this.editor = null;
+    /** The element the editor is mounted in. */
+    this.content = null;
+    this._actions = /* @__PURE__ */ new Map();
+    this._label = null;
+    this._handleClick = (e) => {
+      const button = e.target.closest("button[data-command]");
+      const action = this._actions.get(button);
+      if (action && !button.disabled) this.editor.chain().focus()[action.command](action.attributes).run();
+    };
+    this._handleLabelClick = () => {
+      this.editor.chain().focus().run();
+    };
+    this._handleUpdate = () => {
+      this.textarea.value = this.editor.isEmpty ? "" : this.editor.getHTML();
+      this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    };
+    this._handleTransaction = () => {
+      const can = this.editor.isEditable && this.editor.can();
+      for (const [button, { command, attributes, active }] of this._actions) {
+        button.disabled = !can || !(command in this.editor.commands) || !can[command](attributes);
+        if (!active) continue;
+        const on = this.editor.isActive(active, attributes);
+        button.setAttribute("aria-pressed", String(on));
+        button.classList.toggle("active", on);
+      }
+    };
+    this.el["Expressive_RichTextEditor"] = this;
+    this.options = {
+      ..._RichTextEditor.defaults,
+      ...options
+    };
+    this.textarea = el.querySelector(":scope > textarea");
+    if (!this.textarea || !this.options.Editor) {
+      console.error("RichTextEditor needs a <textarea> child and the Tiptap Editor class in options.Editor.");
+      return;
+    }
+    for (const button of el.querySelectorAll("button[data-command]")) {
+      const command = button.dataset.command;
+      const attributes2 = button.dataset.attributes ? JSON.parse(button.dataset.attributes) : void 0;
+      const active = command.startsWith("toggle") ? command[6].toLowerCase() + command.slice(7) : void 0;
+      this._actions.set(button, { command, attributes: attributes2, active });
+    }
+    const attributes = { role: "textbox", "aria-multiline": "true" };
+    for (const name of NAMING) {
+      const value = this.textarea.getAttribute(name);
+      if (value) attributes[name] = value;
+    }
+    this._label = this.textarea.labels?.[0] ?? null;
+    if (this._label && !attributes["aria-labelledby"]) {
+      if (!this._label.id) this._label.id = `rich-text-editor-label-${Utils.guid()}`;
+      attributes["aria-labelledby"] = this._label.id;
+      this._label.addEventListener("click", this._handleLabelClick);
+    }
+    this.content = document.createElement("div");
+    this.content.className = "rich-text-editor-content";
+    this.textarea.after(this.content);
+    this.textarea.hidden = true;
+    this.editor = new this.options.Editor({
+      element: this.content,
+      extensions: this.options.extensions,
+      content: this.textarea.value,
+      editable: !(this.textarea.disabled || this.textarea.readOnly),
+      editorProps: { attributes }
+    });
+    this.editor.on("update", this._handleUpdate);
+    this.editor.on("transaction", this._handleTransaction);
+    this._handleTransaction();
+    el.addEventListener("click", this._handleClick);
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /**
+   * Initializes instances of RichTextEditor.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _RichTextEditor);
+  }
+  static getInstance(el) {
+    return el["Expressive_RichTextEditor"];
+  }
+  destroy() {
+    this.el["Expressive_RichTextEditor"] = void 0;
+    if (!this.editor) return;
+    this.el.removeEventListener("click", this._handleClick);
+    this._label?.removeEventListener("click", this._handleLabelClick);
+    this.editor.off("update", this._handleUpdate);
+    this.editor.off("transaction", this._handleTransaction);
+    this.editor.destroy();
+    this.editor = null;
+    this.content.remove();
+    this.textarea.hidden = false;
+    for (const button of this._actions.keys()) {
+      button.disabled = false;
+      button.classList.remove("active");
+      button.removeAttribute("aria-pressed");
+    }
+  }
+};
+
+export {
+  RichTextEditor
+};
+//# sourceMappingURL=chunk-FS7XY3HT.mjs.map

package/dist/js/chunks/chunk-FS7XY3HT.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/richTextEditor.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions, InitElements, InitElement } from '../core/component';\n\n/**\n * The parts of a Tiptap `Editor` this component uses. Declared here so the\n * published types do not depend on Tiptap.\n */\nexport interface RichTextEditorInstance {\n  commands: object;\n  isEditable: boolean;\n  isEmpty: boolean;\n  chain(): any;\n  can(): any;\n  isActive(name: string, attributes?: object): boolean;\n  getHTML(): string;\n  on(event: string, callback: () => void): unknown;\n  off(event: string, callback: () => void): unknown;\n  destroy(): void;\n}\n\nexport interface RichTextEditorOptions extends BaseOptions {\n  /**\n   * Tiptap's `Editor` class. ExpressiveCSS does not bundle Tiptap, so the\n   * page imports it and passes it in.\n   * @default null\n   */\n  Editor: (new (options: any) => RichTextEditorInstance) | null;\n  /**\n   * Tiptap extensions, usually `[StarterKit]`.\n   * @default []\n   */\n  extensions: unknown[];\n}\n\nconst _defaults: RichTextEditorOptions = {\n  Editor: null,\n  extensions: []\n};\n\ntype Action = { command: string; attributes?: object; active?: string };\n\n// Copied from the textarea onto the editable element.\nconst NAMING = ['aria-label', 'aria-labelledby', 'aria-describedby'];\n\n/**\n * A rich text editor built on Tiptap: a `.rich-text-editor` holding a\n * `<textarea>` and, usually, a `.toolbar` of `[data-command]` buttons.\n *\n * The textarea's value is the starting HTML. The component hides it, mounts\n * the editor after it and writes the editor's HTML back on every change, so\n * the textarea still submits with its form. A button's `data-command` names a\n * Tiptap command and `data-attributes` holds its JSON argument. Buttons are\n * disabled when their command cannot run, and `toggle*` commands report their\n * state with `aria-pressed` and `.active`.\n */\nexport class RichTextEditor extends Component<RichTextEditorOptions> {\n  /** The Tiptap editor. */\n  editor: RichTextEditorInstance | null = null;\n  /** The form value. */\n  textarea: HTMLTextAreaElement | null;\n  /** The element the editor is mounted in. */\n  content: HTMLElement | null = null;\n  private _actions = new Map<HTMLButtonElement, Action>();\n  private _label: HTMLLabelElement | null = null;\n\n  constructor(el: HTMLElement, options: Partial<RichTextEditorOptions>) {\n    super(el, options, RichTextEditor);\n    this.el['Expressive_RichTextEditor'] = this;\n    this.options = {\n      ...RichTextEditor.defaults,\n      ...options\n    };\n    this.textarea = el.querySelector(':scope > textarea');\n    if (!this.textarea || !this.options.Editor) {\n      console.error('RichTextEditor needs a <textarea> child and the Tiptap Editor class in options.Editor.');\n      return;\n    }\n\n    for (const button of el.querySelectorAll<HTMLButtonElement>('button[data-command]')) {\n      const command = button.dataset.command;\n      const attributes = button.dataset.attributes ? JSON.parse(button.dataset.attributes) : undefined;\n      // toggleBulletList is active while the selection is in a bulletList.\n      const active = command.startsWith('toggle') ? command[6].toLowerCase() + command.slice(7) : undefined;\n      this._actions.set(button, { command, attributes, active });\n    }\n\n    const attributes: Record<string, string> = { role: 'textbox', 'aria-multiline': 'true' };\n    for (const name of NAMING) {\n      const value = this.textarea.getAttribute(name);\n      if (value) attributes[name] = value;\n    }\n    // A <label for> names the hidden textarea, so it has to name the editor\n    // instead, and a click on it has to focus the editor.\n    this._label = this.textarea.labels?.[0] ?? null;\n    if (this._label && !attributes['aria-labelledby']) {\n      if (!this._label.id) this._label.id = `rich-text-editor-label-${Utils.guid()}`;\n      attributes['aria-labelledby'] = this._label.id;\n      this._label.addEventListener('click', this._handleLabelClick);\n    }\n\n    this.content = document.createElement('div');\n    this.content.className = 'rich-text-editor-content';\n    this.textarea.after(this.content);\n    this.textarea.hidden = true;\n    this.editor = new this.options.Editor({\n      element: this.content,\n      extensions: this.options.extensions,\n      content: this.textarea.value,\n      editable: !(this.textarea.disabled || this.textarea.readOnly),\n      editorProps: { attributes }\n    });\n    this.editor.on('update', this._handleUpdate);\n    this.editor.on('transaction', this._handleTransaction);\n    this._handleTransaction();\n    el.addEventListener('click', this._handleClick);\n  }\n\n  static get defaults(): RichTextEditorOptions {\n    return _defaults;\n  }\n\n  /**\n   * Initializes instance of RichTextEditor.\n   * @param el HTML element.\n   * @param options Component options.\n   */\n  static init(el: HTMLElement, options?: Partial<RichTextEditorOptions>): RichTextEditor;\n  /**\n   * Initializes instances of RichTextEditor.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: InitElements<InitElement>,\n    options?: Partial<RichTextEditorOptions>\n  ): RichTextEditor[];\n  /**\n   * Initializes instances of RichTextEditor.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<RichTextEditorOptions> = {}\n  ): RichTextEditor | RichTextEditor[] {\n    return super.init(els, options, RichTextEditor);\n  }\n\n  static getInstance(el: HTMLElement): RichTextEditor {\n    return el['Expressive_RichTextEditor'];\n  }\n\n  destroy() {\n    this.el['Expressive_RichTextEditor'] = undefined;\n    if (!this.editor) return;\n    this.el.removeEventListener('click', this._handleClick);\n    this._label?.removeEventListener('click', this._handleLabelClick);\n    this.editor.off('update', this._handleUpdate);\n    this.editor.off('transaction', this._handleTransaction);\n    this.editor.destroy();\n    this.editor = null;\n    this.content.remove();\n    this.textarea.hidden = false;\n    for (const button of this._actions.keys()) {\n      button.disabled = false;\n      button.classList.remove('active');\n      button.removeAttribute('aria-pressed');\n    }\n  }\n\n  private _handleClick = (e: MouseEvent) => {\n    const button = (e.target as Element).closest<HTMLButtonElement>('button[data-command]');\n    const action = this._actions.get(button);\n    if (action && !button.disabled) this.editor.chain().focus()[action.command](action.attributes).run();\n  };\n\n  private _handleLabelClick = () => {\n    this.editor.chain().focus().run();\n  };\n\n  private _handleUpdate = () => {\n    this.textarea.value = this.editor.isEmpty ? '' : this.editor.getHTML();\n    this.textarea.dispatchEvent(new Event('input', { bubbles: true }));\n  };\n\n  private _handleTransaction = () => {\n    const can = this.editor.isEditable && this.editor.can();\n    for (const [button, { command, attributes, active }] of this._actions) {\n      button.disabled = !can || !(command in this.editor.commands) || !can[command](attributes);\n      if (!active) continue;\n      const on = this.editor.isActive(active, attributes);\n      button.setAttribute('aria-pressed', String(on));\n      button.classList.toggle('active', on);\n    }\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["attributes"]
+}

package/dist/js/chunks/{chunk-WJXDBPXQ.mjs → chunk-GIW4K4SE.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 import {
   Component
 } from "./chunk-LTWPGFBR.mjs";
@@ -26,12 +26,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;
@@ -95,8 +93,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);
@@ -105,8 +102,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);
@@ -204,4 +200,4 @@ var Slider = class _Slider extends Component {
 export {
   Slider
 };
-//# sourceMappingURL=chunk-WJXDBPXQ.mjs.map
+//# sourceMappingURL=chunk-GIW4K4SE.mjs.map

package/dist/js/chunks/chunk-GIW4K4SE.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/slider.ts"],
+  "sourcesContent": ["import { Component, BaseOptions, InitElements, InitElement } from '../core/component';\nimport { Utils } from '../core/utils';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface SliderOptions extends BaseOptions {}\n\nconst _defaults: SliderOptions = {};\n\n// Inline values _set() replaced, per element, so destroy() can put back what\n// an author wrote. Per element, not per instance: both handles of a range\n// write the same host properties.\nconst _authored = new WeakMap<HTMLElement, Record<string, string>>();\n\nexport class Slider extends Component<SliderOptions> {\n  declare el: HTMLInputElement;\n  private _pointerDown: boolean;\n  private _resizeObserver: ResizeObserver | null = null;\n  value: HTMLElement;\n  thumb: HTMLElement;\n\n  constructor(el: HTMLInputElement, options: Partial<SliderOptions>) {\n    super(el, options, Slider);\n    this.el['Expressive_Slider'] = this;\n\n    this.options = {\n      ...Slider.defaults,\n      ...options\n    };\n\n    this._pointerDown = false;\n    this._setupThumb();\n    this._sync();\n    this._setupEventHandlers();\n    if (typeof ResizeObserver !== 'undefined') {\n      this._resizeObserver = new ResizeObserver(() => this._sync());\n      this._resizeObserver.observe(this.el);\n    }\n  }\n\n  static get defaults(): SliderOptions {\n    return _defaults;\n  }\n\n  /**\n   * Initializes instance of Slider.\n   * @param el HTML element.\n   * @param options Component options.\n   */\n  static init(el: HTMLInputElement, options?: Partial<SliderOptions>): Slider;\n  /**\n   * Initializes instances of Slider.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: InitElements<HTMLInputElement | InitElement>,\n    options?: Partial<SliderOptions>\n  ): Slider[];\n  /**\n   * Initializes instances of Slider.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: HTMLInputElement | InitElements<HTMLInputElement | InitElement>,\n    options: Partial<SliderOptions> = {}\n  ): Slider | Slider[] {\n    return super.init(els, options, Slider);\n  }\n\n  static getInstance(el: HTMLInputElement): Slider {\n    return el['Expressive_Slider'];\n  }\n\n  destroy() {\n    this._resizeObserver?.disconnect();\n    this._removeEventHandlers();\n    this._removeThumb();\n    this.el['Expressive_Slider'] = undefined;\n    const host = this._host();\n    for (const el of [this.el, host]) {\n      for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);\n      _authored.delete(el);\n    }\n    // The other handle of a range writes the shared host properties again.\n    host?.querySelectorAll('input[type=\"range\"]').forEach((el) => el['Expressive_Slider']?._sync());\n  }\n\n  _set(el: HTMLElement, name: string, value: string) {\n    const authored = _authored.get(el) ?? {};\n    _authored.set(el, authored);\n    authored[name] ??= el.style.getPropertyValue(name);\n    el.style.setProperty(name, value);\n  }\n\n  // Eleven listeners used to cover four stages, because each one was written\n  // twice - once for mouse, once for touch. One of the touch spellings,\n  // `touchleave`, was never implemented by any browser at all.\n  _setupEventHandlers() {\n    this.el.addEventListener('change', this._handleRangeChange);\n    this.el.addEventListener('pointerdown', this._handleRangePointerDown);\n    // `input` alone tracks a drag. A `pointermove` sync used to run as well,\n    // twice per frame, and before the browser had moved the value.\n    this.el.addEventListener('input', this._handleRangeInput);\n    this.el.addEventListener('pointerup', this._handleRangePointerUp);\n    this.el.addEventListener('pointercancel', this._handleRangePointerUp);\n    this.el.addEventListener('blur', this._handleRangeRelease);\n    // `mouseout`, not `pointerout`: this used to be a `mouseout`/`touchleave`\n    // pair, and `touchleave` was never implemented by any browser, so the\n    // handler has only ever run for a mouse. `pointerout` also fires when a\n    // touch lifts, which would clear the thumb's active state at a moment\n    // nothing cleared it before.\n    this.el.addEventListener('mouseout', this._handleRangeRelease);\n  }\n\n  _removeEventHandlers() {\n    this.el.removeEventListener('change', this._handleRangeChange);\n    this.el.removeEventListener('pointerdown', this._handleRangePointerDown);\n    this.el.removeEventListener('input', this._handleRangeInput);\n    this.el.removeEventListener('pointerup', this._handleRangePointerUp);\n    this.el.removeEventListener('pointercancel', this._handleRangePointerUp);\n    this.el.removeEventListener('blur', this._handleRangeRelease);\n    this.el.removeEventListener('mouseout', this._handleRangeRelease);\n  }\n\n  _handleRangeChange = () => {\n    this._clampDual();\n    this._sync();\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangePointerDown = (e: PointerEvent) => {\n    if (!e.isPrimary) return;\n    if (e.pointerType === 'mouse' && e.button !== 0) return;\n    this._pointerDown = true;\n    this.el.classList.add('active');\n    this._clampDual();\n    this._sync();\n    // An `e.type !== 'input'` guard used to sit here. This handler is only ever\n    // bound to a press, so it was never anything but true.\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangeInput = () => {\n    this._clampDual();\n    this._sync();\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangePointerUp = (e: PointerEvent) => {\n    if (!e.isPrimary) return;\n    this._pointerDown = false;\n    this.el.classList.remove('active');\n  };\n\n  _handleRangeRelease = () => {\n    if (!this._pointerDown) {\n      this.thumb.classList.remove('active');\n    }\n  };\n\n  _setupThumb() {\n    this.thumb = document.createElement('span');\n    this.value = document.createElement('span');\n    this.thumb.classList.add('thumb');\n    this.value.classList.add('value');\n    this.thumb.append(this.value);\n    this.el.after(this.thumb);\n  }\n\n  _removeThumb() {\n    this.thumb.remove();\n  }\n\n  _isVertical(): boolean {\n    return !!this.el.closest('.vertical');\n  }\n\n  _host(): HTMLElement | null {\n    // `.slider` is the documented host now; without it here a dual-handle\n    // control could not find its wrapper, so the handles never clamped and the\n    // shared start/end fractions never tracked the interval.\n    return this.el.closest('.slider, .range, .range-field, label');\n  }\n\n  _clampDual() {\n    const host = this._host();\n    const peers = host?.querySelectorAll('input[type=\"range\"]');\n    if (!peers || peers.length !== 2) return;\n    const start = peers[0] as HTMLInputElement;\n    const end = peers[1] as HTMLInputElement;\n    if (this.el === start && +start.value > +end.value) start.value = end.value;\n    if (this.el === end && +end.value < +start.value) end.value = start.value;\n  }\n\n  _fraction(el: HTMLInputElement): number {\n    const parsedMax = parseFloat(el.max);\n    const max = Number.isNaN(parsedMax) ? 100 : parsedMax;\n    const min = parseFloat(el.min) || 0;\n    const val = parseFloat(el.value) || 0;\n    return max === min ? 0 : (val - min) / (max - min);\n  }\n\n  _sync() {\n    const percent = this._fraction(this.el);\n    const fraction = `${percent * 100}%`;\n\n    // Read before writing. This runs on every pointer move during a drag, and\n    // setting the custom property first made each of the four offset reads\n    // below flush a fresh layout.\n    const left = this.el.offsetLeft;\n    const top = this.el.offsetTop;\n    const width = this.el.offsetWidth;\n    const height = this.el.offsetHeight;\n    const style = getComputedStyle(this.el);\n    const rtl = style.direction === 'rtl';\n    const vertical = this._isVertical();\n    const handle = parseFloat(style.getPropertyValue('--md-comp-slider-handle-width')) || 4;\n    const length = vertical ? height : width;\n    const position = handle / 2 + percent * (length - handle);\n\n    this._set(this.el, '--md-comp-slider-active-fraction', fraction);\n    this._set(this.el, '--md-comp-slider-active-position', `${position}px`);\n\n    const host = this._host();\n    const peers = host?.querySelectorAll('input[type=\"range\"]');\n    if (host && peers && peers.length === 2) {\n      const nums = Array.from(peers).map((el) => this._fraction(el as HTMLInputElement));\n      this._set(host, '--md-comp-slider-start-fraction', `${Math.min(...nums) * 100}%`);\n      this._set(host, '--md-comp-slider-end-fraction', `${Math.max(...nums) * 100}%`);\n      this._set(host, '--md-comp-slider-start-position', `${handle / 2 + Math.min(...nums) * (length - handle)}px`);\n      this._set(host, '--md-comp-slider-end-position', `${handle / 2 + Math.max(...nums) * (length - handle)}px`);\n    }\n    if (host?.classList.contains('stops')) {\n      const parsedMax = parseFloat(this.el.max);\n      const max = Number.isNaN(parsedMax) ? 100 : parsedMax;\n      const min = parseFloat(this.el.min) || 0;\n      const step = parseFloat(this.el.step);\n      // Stops sit at min + k * step up to max, so a step that does not divide\n      // the range ends short of max. No step, `any`, zero or a negative step\n      // clears the spacing, and the host paints no dots.\n      const stops = step > 0 && Number.isFinite(step) && max > min;\n      this._set(host, '--md-comp-slider-stop-count', stops ? String(Math.floor((max - min) / step + 1e-9) + 1) : '');\n      this._set(host, '--md-comp-slider-stop-spacing', stops ? `${((length - handle) * step) / (max - min)}px` : '');\n      // The tick row is the host's ::after, which cannot read the input's\n      // properties. A dual host has no single position.\n      if (peers?.length === 1) {\n        this._set(host, '--md-comp-slider-active-position', `${position}px`);\n        this._set(host, '--md-comp-slider-track-center', `${top + height / 2}px`);\n      }\n    }\n\n    this.value.textContent = this.el.value;\n    if (vertical) {\n      this.thumb.style.left = `${left + width / 2}px`;\n      this.thumb.style.top = `${top + height - position}px`;\n    } else {\n      this.thumb.style.left = `${left + (rtl ? width - position : position)}px`;\n      this.thumb.style.top = `${top}px`;\n    }\n  }\n\n  /**\n   * Initializes every range input in the current document.\n   */\n  static Init() {\n    // Deferred like every other Init(): this ran at import time, so a bundle\n    // loaded in <head> found no inputs at all.\n    Utils.onDocumentReady(() => {\n      Slider.init(document.querySelectorAll('input[type=range]') as NodeListOf<HTMLInputElement>, {});\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-GUB3TNO2.mjs

@@ -0,0 +1,164 @@
+import {
+  LineChart
+} from "./chunk-O5XPWXIQ.mjs";
+
+// src/ts/components/heatmapChart.ts
+var HeatmapChart = class extends LineChart {
+  get _type() {
+    return "heatmap-chart";
+  }
+  get _key() {
+    return "Expressive_HeatmapChart";
+  }
+  static init(els, options = {}) {
+    return super.init(els, options);
+  }
+  static getInstance(el) {
+    return el["Expressive_HeatmapChart"];
+  }
+  /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    const cell = this._cells[index];
+    const [left, top, width, plotWidth] = cell ? [cell.offsetLeft, cell.offsetTop, cell.offsetWidth, this._plot.clientWidth] : [];
+    this._cells[this.activeIndex]?.classList.remove("active");
+    this.activeIndex = index;
+    this._tooltip.hidden = !cell;
+    if (!cell) return;
+    cell.classList.add("active");
+    const columns = this.series.length;
+    const [row, series] = [Math.floor(index / columns), this.series[index % columns]];
+    const title = document.createElement("strong");
+    title.textContent = this.labels[row];
+    const [name, text] = [document.createElement("span"), document.createElement("span")];
+    name.textContent = series.name;
+    if (this._levels[index] === null) name.className = "gap";
+    else name.style.setProperty("--level", String(this._levels[index]));
+    text.textContent = series.text[row];
+    this._tooltip.replaceChildren(title, name, text);
+    const end = left + width / 2 > plotWidth / 2;
+    this._tooltip.classList.toggle("end", end);
+    this._tooltip.style.left = `${left + (end ? 0 : width)}px`;
+    this._tooltip.style.top = `${top}px`;
+  }
+  /** Arrows move the way they point, so left and right swap in RTL. */
+  _keyTarget(key) {
+    if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
+    const [columns, last] = [this.series.length, this.labels.length - 1];
+    const index = Math.max(0, this.activeIndex);
+    const [row, column] = [Math.floor(index / columns), index % columns];
+    const [next, back] = this._reversed ? ["ArrowLeft", "ArrowRight"] : ["ArrowRight", "ArrowLeft"];
+    const to = {
+      [next]: [row, column + 1],
+      [back]: [row, column - 1],
+      ArrowDown: [row + 1, column],
+      ArrowUp: [row - 1, column],
+      Home: [row, 0],
+      End: [row, columns - 1]
+    }[key];
+    if (!to) return void 0;
+    if (this.activeIndex < 0) return 0;
+    const clamp = (value, max) => Math.min(max, Math.max(0, value));
+    return clamp(to[0], last) * columns + clamp(to[1], columns - 1);
+  }
+  /**
+   * The cell under the pointer by its position, or -1 off the grid. A touch
+   * keeps its first target while it drags, so the target cannot be used. The
+   * cells and gaps are even, so each band's edge falls in a gap and a gap
+   * counts as the nearer cell.
+   */
+  _indexAt(e) {
+    const [columns, rows] = [this.series.length, this.labels.length];
+    const first = this._cells[0].getBoundingClientRect();
+    const last = this._cells[this._cells.length - 1].getBoundingClientRect();
+    const [left, right] = [Math.min(first.left, last.left), Math.max(first.right, last.right)];
+    const [x, y] = [e.clientX, e.clientY];
+    if (x < left || x > right || y < first.top || y > last.bottom) return -1;
+    const band = (offset, size, count) => Math.min(count - 1, Math.floor(offset / (size || 1) * count));
+    const column = band(x - left, right - left, columns);
+    return band(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);
+  }
+  /**
+   * The legend: a gradient from the lowest cell's shade to the highest's,
+   * labelled with their text. A fixed scale wider than the data shows only
+   * the part the data uses.
+   */
+  _guides() {
+    const legend = document.createElement("div");
+    legend.className = "heatmap-chart-legend";
+    legend.setAttribute("aria-hidden", "true");
+    const [low, scale, high] = ["span", "span", "span"].map((tag) => document.createElement(tag));
+    [low.textContent, high.textContent] = this._ends;
+    scale.className = "heatmap-chart-scale";
+    if (this._reversed) scale.style.setProperty("--heatmap-chart-to", "left");
+    scale.style.setProperty("--low", String(this._endLevels[0]));
+    scale.style.setProperty("--high", String(this._endLevels[1]));
+    legend.append(low, scale, high);
+    return [legend];
+  }
+  /**
+   * A grid of the row headers and cells, row by row, with the column headers
+   * below. Each cell's --level shades it in CSS.
+   */
+  _draw() {
+    const columns = this.series.length;
+    let [low, high] = [Infinity, -Infinity];
+    this._ends = ["", ""];
+    this.series.forEach((series) => series.values.forEach((value, row) => {
+      if (value === null) return;
+      if (value < low) [low, this._ends[0]] = [value, series.text[row]];
+      if (value > high) [high, this._ends[1]] = [value, series.text[row]];
+    }));
+    const option = (name) => {
+      const value = parseFloat(this.el.dataset[name] ?? "");
+      return Number.isFinite(value) ? value : this.options[name];
+    };
+    const [min, max] = [option("min") ?? low, option("max") ?? high];
+    const shade = (value) => Math.min(1, Math.max(0, (value - min) / (max - min || 1)));
+    this._endLevels = [shade(low), shade(high)];
+    const grid = document.createElement("div");
+    grid.className = "heatmap-chart-grid";
+    grid.setAttribute("aria-hidden", "true");
+    grid.style.setProperty("--columns", String(columns));
+    grid.style.setProperty("--rows", String(this.labels.length));
+    const span = (className, text = "") => {
+      const element = document.createElement("span");
+      element.className = className;
+      element.textContent = text;
+      return element;
+    };
+    const label = (cell) => cell?.dataset.label ?? cell?.textContent.trim() ?? "";
+    const values = this.el.classList.contains("values");
+    this._cells = [];
+    this._levels = [];
+    this.labels.forEach((_, row) => {
+      grid.append(span("heatmap-chart-row", label(this._rows[row].cells[0])));
+      this.series.forEach((series) => {
+        const value = series.values[row];
+        const level = value === null ? null : shade(value);
+        const cell = span("heatmap-chart-cell", values ? series.text[row] : "");
+        if (level === null) cell.classList.add("gap");
+        else cell.style.setProperty("--level", String(level));
+        this._cells.push(cell);
+        this._levels.push(level);
+        grid.append(cell);
+      });
+    });
+    const labels = this._header.slice(1, columns + 1).map(label);
+    labels.forEach((text, column) => {
+      if (!text) return;
+      let end = column + 1;
+      while (end < columns && !labels[end]) end++;
+      const element = span("heatmap-chart-column", text);
+      element.classList.toggle("run", end > column + 1);
+      element.style.gridArea = `${this.labels.length + 1} / ${column + 2} / auto / ${end + 2}`;
+      grid.append(element);
+    });
+    return grid;
+  }
+};
+
+export {
+  HeatmapChart
+};
+//# sourceMappingURL=chunk-GUB3TNO2.mjs.map