@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/{chunk-5CEAOLUA.mjs → chunk-B7DQFHA5.mjs}

@@ -1,17 +1,23 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/slider.ts
 var _defaults = {};
 var _authored = /* @__PURE__ */ new WeakMap();
-var Slider = class _Slider extends Component {
+var _Slider = class _Slider extends Component {
   constructor(el, options) {
-    super(el, options, _Slider);
+    super(el, options);
     this._resizeObserver = null;
+    // The reset event fires before the browser restores the values.
+    this._handleFormReset = () => {
+      setTimeout(() => {
+        if (_Slider.getInstance(this.el) === this) this._sync();
+      });
+    };
     this._handleRangeChange = () => {
       this._clampDual();
       this._sync();
@@ -41,39 +47,21 @@ var Slider = class _Slider extends Component {
         this.thumb.classList.remove("active");
       }
     };
-    this.el["Expressive_Slider"] = this;
-    this.options = {
-      ..._Slider.defaults,
-      ...options
-    };
     this._pointerDown = false;
     this._setupThumb();
     this._sync();
     this._setupEventHandlers();
-    if (typeof ResizeObserver !== "undefined") {
-      this._resizeObserver = new ResizeObserver(() => this._sync());
-      this._resizeObserver.observe(this.el);
-    }
+    this._resizeObserver = new ResizeObserver(() => this._sync());
+    this._resizeObserver.observe(this.el);
+    if (this.el.parentElement) this._resizeObserver.observe(this.el.parentElement);
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Slider.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Slider);
-  }
-  static getInstance(el) {
-    return el["Expressive_Slider"];
-  }
   destroy() {
     this._resizeObserver?.disconnect();
-    this._removeEventHandlers();
     this._removeThumb();
-    this.el["Expressive_Slider"] = void 0;
+    super.destroy();
     const host = this._host();
     for (const el of [this.el, host]) {
       for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);
@@ -91,22 +79,15 @@ var Slider = class _Slider extends Component {
   // twice - once for mouse, once for touch. One of the touch spellings,
   // `touchleave`, was never implemented by any browser at all.
   _setupEventHandlers() {
-    this.el.addEventListener("change", this._handleRangeChange);
-    this.el.addEventListener("pointerdown", this._handleRangePointerDown);
-    this.el.addEventListener("input", this._handleRangeInput);
-    this.el.addEventListener("pointerup", this._handleRangePointerUp);
-    this.el.addEventListener("pointercancel", this._handleRangePointerUp);
-    this.el.addEventListener("blur", this._handleRangeRelease);
-    this.el.addEventListener("mouseout", this._handleRangeRelease);
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("change", this._handleRangeChange);
-    this.el.removeEventListener("pointerdown", this._handleRangePointerDown);
-    this.el.removeEventListener("input", this._handleRangeInput);
-    this.el.removeEventListener("pointerup", this._handleRangePointerUp);
-    this.el.removeEventListener("pointercancel", this._handleRangePointerUp);
-    this.el.removeEventListener("blur", this._handleRangeRelease);
-    this.el.removeEventListener("mouseout", this._handleRangeRelease);
+    const { signal } = this._events;
+    this.el.addEventListener("change", this._handleRangeChange, { signal });
+    this.el.addEventListener("pointerdown", this._handleRangePointerDown, { signal });
+    this.el.addEventListener("input", this._handleRangeInput, { signal });
+    this.el.addEventListener("pointerup", this._handleRangePointerUp, { signal });
+    this.el.addEventListener("pointercancel", this._handleRangePointerUp, { signal });
+    this.el.addEventListener("blur", this._handleRangeRelease, { signal });
+    this.el.addEventListener("mouseout", this._handleRangeRelease, { signal });
+    this.el.form?.addEventListener("reset", this._handleFormReset, { signal });
   }
   _setupThumb() {
     this.thumb = document.createElement("span");
@@ -123,7 +104,7 @@ var Slider = class _Slider extends Component {
     return !!this.el.closest(".vertical");
   }
   _host() {
-    return this.el.closest(".slider, .range, .range-field, label");
+    return this.el.closest(".slider, label");
   }
   _clampDual() {
     const host = this._host();
@@ -193,12 +174,14 @@ var Slider = class _Slider extends Component {
    */
   static Init() {
     Utils.onDocumentReady(() => {
-      _Slider.init(document.querySelectorAll("input[type=range]"));
+      _Slider.init(document.querySelectorAll("input[type=range]:not(.image-compare > input, .color-picker-hue)"));
     });
   }
 };
+_Slider.key = "Expressive_Slider";
+var Slider = _Slider;
 
 export {
   Slider
 };
-//# sourceMappingURL=chunk-5CEAOLUA.mjs.map
+//# sourceMappingURL=chunk-B7DQFHA5.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/slider.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } 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);\n\n    this._pointerDown = false;\n    this._setupThumb();\n    this._sync();\n    this._setupEventHandlers();\n    this._resizeObserver = new ResizeObserver(() => this._sync());\n    this._resizeObserver.observe(this.el);\n    // The bubble and stop row are placed from the input's offsets, which\n    // move when the host resizes around an input that keeps its size.\n    if (this.el.parentElement) this._resizeObserver.observe(this.el.parentElement);\n  }\n\n  static get defaults(): SliderOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Slider';\n\n  destroy() {\n    this._resizeObserver?.disconnect();\n    this._removeThumb();\n    super.destroy();\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    const { signal } = this._events;\n    this.el.addEventListener('change', this._handleRangeChange, { signal });\n    this.el.addEventListener('pointerdown', this._handleRangePointerDown, { signal });\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, { signal });\n    this.el.addEventListener('pointerup', this._handleRangePointerUp, { signal });\n    this.el.addEventListener('pointercancel', this._handleRangePointerUp, { signal });\n    this.el.addEventListener('blur', this._handleRangeRelease, { signal });\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, { signal });\n    // A form reset restores the value without an input event.\n    this.el.form?.addEventListener('reset', this._handleFormReset, { signal });\n  }\n\n  // The reset event fires before the browser restores the values.\n  _handleFormReset = () => {\n    setTimeout(() => {\n      if (Slider.getInstance(this.el) === this) this._sync();\n    });\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, 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  /** The input's range, defaulting like the browser does: 0 to 100. */\n  private _bounds(el: HTMLInputElement) {\n    const parsedMax = parseFloat(el.max);\n    return { max: Number.isNaN(parsedMax) ? 100 : parsedMax, min: parseFloat(el.min) || 0 };\n  }\n\n  _fraction(el: HTMLInputElement): number {\n    const { max, min } = this._bounds(el);\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 { max, min } = this._bounds(this.el);\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      // An image compare's range is invisible and drawn by its container; a\n      // color picker's hue range paints its own track.\n      Slider.init(document.querySelectorAll<HTMLInputElement>('input[type=range]:not(.image-compare > input, .color-picker-hue)'));\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,153 @@
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/hoverCard.ts
+var _defaults = {
+  enterDelay: 500,
+  exitDelay: 300
+};
+var owners = /* @__PURE__ */ new WeakMap();
+var HoverCard = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    /** Whether the instance has the card showing. */
+    this._shown = false;
+    /** What keeps the card wanted: the pointer, keyboard focus, or both. */
+    this._holds = /* @__PURE__ */ new Set();
+    /** The anchor name the card is placed against while this link shows it. */
+    this._anchorName = `--hover-card-${Utils.guid()}`;
+    /**
+     * Show the card now, without enterDelay.
+     */
+    this.open = () => {
+      clearTimeout(this._timeout);
+      if (!this.cardEl || this._shown) return;
+      owners.get(this.cardEl)?.close();
+      this.cardEl.showPopover.call(this.cardEl, { source: this.el });
+      owners.set(this.cardEl, this);
+      this._shown = true;
+      this._listenForEscape(true);
+      this._anchor(true);
+      this._notify("open");
+    };
+    /**
+     * Hide the card now, without exitDelay.
+     */
+    this.close = () => {
+      clearTimeout(this._timeout);
+      if (!this._shown) return;
+      this.cardEl.hidePopover();
+      this._hidden();
+      this._notify("close");
+    };
+    // A touch is a tap that follows the link, never a hover; pointer events
+    // say so, and the mouse events a tap sends afterwards are not listened to.
+    this._handlePointerEnter = (e) => {
+      if (e.pointerType !== "touch") this._hold("pointer");
+    };
+    this._handlePointerLeave = (e) => {
+      if (e.pointerType !== "touch") this._release("pointer");
+    };
+    // A pointer press also focuses the link, and the hover already covers it,
+    // so only keyboard focus holds the card from the link.
+    this._handleLinkFocus = () => {
+      if (this.el.matches(":focus-visible")) this._hold("focus");
+    };
+    this._handleCardFocus = () => this._hold("focus");
+    this._handleFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (!next || !(this.el.contains(next) || this.cardEl.contains(next))) this._release("focus");
+    };
+    // Escape always hides the card, but it is only the card's key when focus is
+    // on the link or in the card; otherwise it still reaches the dialog or menu
+    // that has focus. An engine that does not know popover="hint" treats the
+    // card as manual, which Escape would not close.
+    this._handleKeydown = (e) => {
+      if (e.key !== "Escape" || Utils.isComposing(e)) return;
+      if (Utils.focusIsIn(this.el, this.cardEl)) this._takeEscape(e);
+      this.close();
+    };
+    this._handleToggle = (e) => {
+      if (e.newState !== "closed" || !this._shown) return;
+      this._hidden();
+      this._notify("close");
+    };
+    this.cardEl = Utils.getElementById(el, el.getAttribute("aria-details") ?? "");
+    if (!this.cardEl) {
+      console.error(`HoverCard: aria-details names no element; the link shows no card.`);
+      return;
+    }
+    const { signal } = this._events;
+    this.cardEl.addEventListener("toggle", this._handleToggle, { signal });
+    for (const target of [this.el, this.cardEl]) {
+      target.addEventListener("pointerenter", this._handlePointerEnter, { signal });
+      target.addEventListener("pointerleave", this._handlePointerLeave, { signal });
+      target.addEventListener("focusout", this._handleFocusOut, { signal });
+    }
+    this.el.addEventListener("focus", this._handleLinkFocus, { signal });
+    this.cardEl.addEventListener("focusin", this._handleCardFocus, { signal });
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    clearTimeout(this._timeout);
+    if (this._shown) {
+      this.cardEl.hidePopover();
+      this._hidden();
+    }
+    super.destroy();
+  }
+  _hidden() {
+    this._shown = false;
+    this._listenForEscape(false);
+    this._anchor(false);
+  }
+  // `source` anchors the card too, but Firefox keeps the first source's
+  // anchor for good, so a card two links share would stay at the first. A
+  // named anchor, set only while the card shows, follows the link that shows it.
+  _anchor(on) {
+    Utils.setAnchorName(this.el, this._anchorName, on);
+    if (on) this.cardEl.style.setProperty("position-anchor", this._anchorName);
+    else this.cardEl.style.removeProperty("position-anchor");
+    for (const el of [this.el, this.cardEl]) if (!el.getAttribute("style")) el.removeAttribute("style");
+  }
+  /** Wanted cards show after enterDelay; once nothing holds the card, it hides after exitDelay. */
+  _schedule() {
+    clearTimeout(this._timeout);
+    const wanted = this._holds.size > 0;
+    if (wanted === this._shown) return;
+    const [change, delay] = wanted ? [this.open, this.options.enterDelay] : [this.close, this.options.exitDelay];
+    this._timeout = setTimeout(change, delay);
+  }
+  _hold(by) {
+    this._holds.add(by);
+    this._schedule();
+  }
+  _release(by) {
+    this._holds.delete(by);
+    this._schedule();
+  }
+  /** Escape is listened for only while the card shows. close() removes it, and destroy() through the signal. */
+  _listenForEscape(on) {
+    const doc = this.el.ownerDocument;
+    if (on) doc.addEventListener("keydown", this._handleKeydown, { capture: true, signal: this._events.signal });
+    else doc.removeEventListener("keydown", this._handleKeydown, true);
+  }
+  /** Keeps Escape from the page and, when focus is in the card, takes it back to the link before the card hides. */
+  _takeEscape(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (Utils.focusIsIn(this.cardEl)) this.el.focus();
+  }
+};
+HoverCard.key = "Expressive_HoverCard";
+
+export {
+  HoverCard
+};
+//# sourceMappingURL=chunk-BIGU5RCJ.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/hoverCard.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions } from '../core/component';\n\nexport interface HoverCardOptions extends BaseOptions {\n  /**\n   * How long the pointer or keyboard focus rests on the link before the card shows.\n   * @default 500\n   */\n  enterDelay: number;\n  /**\n   * How long the card stays after the pointer and focus leave the link and the card.\n   * @default 300\n   */\n  exitDelay: number;\n}\n\nconst _defaults: HoverCardOptions = {\n  enterDelay: 500,\n  exitDelay: 300\n};\n\n// Links can share one card, such as a name mentioned twice; the link that\n// last showed it owns it, and the next one takes it over.\nconst owners = new WeakMap<HTMLElement, HoverCard>();\n\n/**\n * Hover card. A `.hover-card-trigger` link names its card, a `.popover` with\n * `popover=\"hint\"`, in `aria-details`. The card shows against the link after\n * `enterDelay` and stays while the pointer or focus is on either.\n */\nexport class HoverCard extends Component<HoverCardOptions> {\n  /** The card the link's `aria-details` names, or null when it names none. */\n  cardEl: HTMLElement | null;\n  /** Whether the instance has the card showing. */\n  private _shown = false;\n  /** What keeps the card wanted: the pointer, keyboard focus, or both. */\n  private _holds = new Set<'pointer' | 'focus'>();\n  private _timeout: ReturnType<typeof setTimeout>;\n  /** The anchor name the card is placed against while this link shows it. */\n  private _anchorName = `--hover-card-${Utils.guid()}`;\n\n  constructor(el: HTMLElement, options: Partial<HoverCardOptions>) {\n    super(el, options);\n    this.cardEl = Utils.getElementById(el, el.getAttribute('aria-details') ?? '');\n    if (!this.cardEl) {\n      console.error(`HoverCard: aria-details names no element; the link shows no card.`);\n      return;\n    }\n    // The browser hides a hint card itself on a click elsewhere, on Escape\n    // and when another hint opens.\n    const { signal } = this._events;\n    this.cardEl.addEventListener('toggle', this._handleToggle, { signal });\n    for (const target of [this.el, this.cardEl]) {\n      target.addEventListener('pointerenter', this._handlePointerEnter, { signal });\n      target.addEventListener('pointerleave', this._handlePointerLeave, { signal });\n      target.addEventListener('focusout', this._handleFocusOut, { signal });\n    }\n    this.el.addEventListener('focus', this._handleLinkFocus, { signal });\n    this.cardEl.addEventListener('focusin', this._handleCardFocus, { signal });\n  }\n\n  static get defaults(): HoverCardOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_HoverCard';\n\n  destroy() {\n    clearTimeout(this._timeout);\n    if (this._shown) {\n      this.cardEl.hidePopover();\n      this._hidden();\n    }\n    super.destroy();\n  }\n\n  /**\n   * Show the card now, without enterDelay.\n   */\n  open = () => {\n    clearTimeout(this._timeout);\n    if (!this.cardEl || this._shown) return;\n    owners.get(this.cardEl)?.close();\n    // `source` makes the link the card's anchor and invoker, so Tab moves from\n    // the link into the card. It throws for a card without the popover\n    // attribute, before any state changes.\n    (this.cardEl.showPopover as (options?: { source?: Element }) => void).call(this.cardEl, { source: this.el });\n    owners.set(this.cardEl, this);\n    this._shown = true;\n    this._listenForEscape(true);\n    this._anchor(true);\n    this._notify('open');\n  };\n\n  /**\n   * Hide the card now, without exitDelay.\n   */\n  close = () => {\n    clearTimeout(this._timeout);\n    if (!this._shown) return;\n    this.cardEl.hidePopover();\n    this._hidden();\n    this._notify('close');\n  };\n\n  private _hidden() {\n    this._shown = false;\n    this._listenForEscape(false);\n    this._anchor(false);\n  }\n\n  // `source` anchors the card too, but Firefox keeps the first source's\n  // anchor for good, so a card two links share would stay at the first. A\n  // named anchor, set only while the card shows, follows the link that shows it.\n  private _anchor(on: boolean) {\n    Utils.setAnchorName(this.el, this._anchorName, on);\n    if (on) this.cardEl.style.setProperty('position-anchor', this._anchorName);\n    else this.cardEl.style.removeProperty('position-anchor');\n    for (const el of [this.el, this.cardEl]) if (!el.getAttribute('style')) el.removeAttribute('style');\n  }\n\n  /** Wanted cards show after enterDelay; once nothing holds the card, it hides after exitDelay. */\n  private _schedule() {\n    clearTimeout(this._timeout);\n    const wanted = this._holds.size > 0;\n    if (wanted === this._shown) return;\n    const [change, delay] = wanted ? [this.open, this.options.enterDelay] as const : [this.close, this.options.exitDelay] as const;\n    this._timeout = setTimeout(change, delay);\n  }\n\n  private _hold(by: 'pointer' | 'focus') {\n    this._holds.add(by);\n    this._schedule();\n  }\n\n  private _release(by: 'pointer' | 'focus') {\n    this._holds.delete(by);\n    this._schedule();\n  }\n\n  // A touch is a tap that follows the link, never a hover; pointer events\n  // say so, and the mouse events a tap sends afterwards are not listened to.\n  private _handlePointerEnter = (e: PointerEvent) => {\n    if (e.pointerType !== 'touch') this._hold('pointer');\n  };\n\n  private _handlePointerLeave = (e: PointerEvent) => {\n    if (e.pointerType !== 'touch') this._release('pointer');\n  };\n\n  // A pointer press also focuses the link, and the hover already covers it,\n  // so only keyboard focus holds the card from the link.\n  private _handleLinkFocus = () => {\n    if (this.el.matches(':focus-visible')) this._hold('focus');\n  };\n\n  private _handleCardFocus = () => this._hold('focus');\n\n  private _handleFocusOut = (e: FocusEvent) => {\n    const next = e.relatedTarget as Node | null;\n    if (!next || !(this.el.contains(next) || this.cardEl.contains(next))) this._release('focus');\n  };\n\n  /** Escape is listened for only while the card shows. close() removes it, and destroy() through the signal. */\n  private _listenForEscape(on: boolean) {\n    const doc = this.el.ownerDocument;\n    if (on) doc.addEventListener('keydown', this._handleKeydown, { capture: true, signal: this._events.signal });\n    else doc.removeEventListener('keydown', this._handleKeydown, true);\n  }\n\n  // Escape always hides the card, but it is only the card's key when focus is\n  // on the link or in the card; otherwise it still reaches the dialog or menu\n  // that has focus. An engine that does not know popover=\"hint\" treats the\n  // card as manual, which Escape would not close.\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key !== 'Escape' || Utils.isComposing(e)) return;\n    if (Utils.focusIsIn(this.el, this.cardEl)) this._takeEscape(e);\n    this.close();\n  };\n\n  /** Keeps Escape from the page and, when focus is in the card, takes it back to the link before the card hides. */\n  private _takeEscape(e: KeyboardEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    if (Utils.focusIsIn(this.cardEl)) this.el.focus();\n  }\n\n  private _handleToggle = (e: Event) => {\n    if ((e as ToggleEvent).newState !== 'closed' || !this._shown) return;\n    this._hidden();\n    this._notify('close');\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-VGNYF6FB.mjs → chunk-BPF3I2MN.mjs}

@@ -1,30 +1,63 @@
 import {
   LineChart
-} from "./chunk-TCCA2HDG.mjs";
+} from "./chunk-ZM3XBHWV.mjs";
 
 // src/ts/components/heatmapChart.ts
+function band(level, steps) {
+  return Math.sign(level) * Math.min(steps - 1, Math.floor(Math.abs(level) * steps)) / (steps - 1);
+}
 var HeatmapChart = class extends LineChart {
   get _type() {
     return "heatmap-chart";
   }
-  get _key() {
-    return "Expressive_HeatmapChart";
+  /** Color carries the value, so there is no value axis. */
+  get _axis() {
+    return false;
   }
-  static init(els, options = {}) {
-    return super.init(els, options);
+  get _count() {
+    return this.labels.length * this.series.length;
   }
-  static getInstance(el) {
-    return el["Expressive_HeatmapChart"];
+  /** Redraws the grid, scrolled where it was. */
+  update() {
+    const left = this._scroll?.scrollLeft;
+    super.update();
+    if (this._scroll && left) this._scroll.scrollLeft = left;
   }
   /** 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._activate(this._cells[index], index);
+  }
+  _activate(cell, index) {
+    const box = cell ? this._box(cell) : null;
     this._cells[this.activeIndex]?.classList.remove("active");
     this.activeIndex = index;
-    this._tooltip.hidden = !cell;
+    this._tooltip.hidden = !box;
+    if (box) this._fill(cell, index, box);
+  }
+  /**
+   * A cell's left, top and width in the plot, past any scrolling of the
+   * grid, and the plot's width. A key can move to a cell scrolled out of a
+   * wide grid, so it scrolls into view first.
+   */
+  _box(cell) {
+    if (this._plot.matches(":focus-visible")) cell.scrollIntoView({ block: "nearest", inline: "nearest" });
+    return this._measure(cell);
+  }
+  _measure(cell) {
+    const [box, plot] = [cell.getBoundingClientRect(), this._plot.getBoundingClientRect()];
+    return [box.left - plot.left, box.top - plot.top, box.width, this._plot.clientWidth];
+  }
+  /** Keeps the tooltip on its cell as the grid scrolls, and hides it once the cell scrolls out. */
+  _follow(scroll) {
+    const cell = this._cells[this.activeIndex];
     if (!cell) return;
+    const [view, box] = [scroll.getBoundingClientRect(), cell.getBoundingClientRect()];
+    if (box.right <= view.left || box.left >= view.right) this.show(-1);
+    else this._position(this._measure(cell));
+  }
+  /** Marks the cell and fills the tooltip beside it, on the side with more room. */
+  _fill(cell, index, [left, top, width, plotWidth]) {
     cell.classList.add("active");
     const columns = this.series.length;
     const [row, series] = [Math.floor(index / columns), this.series[index % columns]];
@@ -36,6 +69,9 @@ var HeatmapChart = class extends LineChart {
     else name.style.setProperty("--level", String(this._levels[index]));
     text.textContent = series.text[row];
     this._tooltip.replaceChildren(title, name, text);
+    this._position([left, top, width, plotWidth]);
+  }
+  _position([left, top, width, plotWidth]) {
     const end = left + width / 2 > plotWidth / 2;
     this._tooltip.classList.toggle("end", end);
     this._tooltip.style.left = `${left + (end ? 0 : width)}px`;
@@ -73,10 +109,15 @@ var HeatmapChart = class extends LineChart {
     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);
+    if (this._off(x, y, [left, right, first.top, last.bottom])) return -1;
+    const band2 = (offset, size, count) => Math.min(count - 1, Math.floor(offset / (size || 1) * count));
+    const column = band2(x - left, right - left, columns);
+    return band2(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);
+  }
+  /** Whether a point is off the cells, or on cells scrolled out of view under the row labels. */
+  _off(x, y, [left, right, top, bottom]) {
+    const view = this._scroll.getBoundingClientRect();
+    return x < Math.max(left, view.left) || x > Math.min(right, view.right) || y < top || y > bottom;
   }
   /**
    * The legend: a gradient from the lowest cell's shade to the highest's,
@@ -91,11 +132,43 @@ var HeatmapChart = class extends LineChart {
     [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]));
+    const [from, to] = this._endLevels;
+    scale.style.setProperty("--low", String(from));
+    scale.style.setProperty("--high", String(to));
+    scale.classList.toggle("diverging", from < 0 && to > 0);
+    scale.style.setProperty("--mid", `${-from / (to - from || 1) * 100}%`);
+    scale.append(...this._bands().filter((level) => level >= from && level <= to).map((level) => {
+      const swatch = document.createElement("span");
+      swatch.style.setProperty("--level", String(level));
+      return swatch;
+    }));
     legend.append(low, scale, high);
     return [legend];
   }
+  /** With data-steps, every band's shade from the lowest to the highest; otherwise none. */
+  _bands() {
+    const steps = this._steps;
+    if (!steps) return [];
+    return Array.from({ length: 2 * steps - 1 }, (_, k) => (k - steps + 1) / (steps - 1));
+  }
+  /** The number of bands data-steps asks for, or 0 for a smooth scale. */
+  get _steps() {
+    const steps = Math.round(this._number("steps") ?? 0);
+    return steps > 1 ? steps : 0;
+  }
+  /**
+   * How a value shades its cell: from 0 at the scale's low end to 1 at its
+   * high end, or with data-mid from -1 to 1 either side of that midpoint,
+   * as far as the further end. With data-steps the shades fall into bands.
+   */
+  _shade(low, high) {
+    const option = (name, fallback) => this._number(name) ?? this.options[name] ?? fallback;
+    const [min, max, mid] = [option("min", low), option("max", high), this._number("mid")];
+    const clamp = (value, floor) => Math.min(1, Math.max(floor, value));
+    const level = mid === null ? (value) => clamp((value - min) / (max - min || 1), 0) : (value) => clamp((Math.min(max, Math.max(min, value)) - mid) / (Math.max(max - mid, mid - min) || 1), -1);
+    const steps = this._steps;
+    return steps ? (value) => band(level(value), steps) : level;
+  }
   /**
    * A grid of the row headers and cells, row by row, with the column headers
    * below. Each cell's --level shades it in CSS.
@@ -109,9 +182,7 @@ var HeatmapChart = class extends LineChart {
       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) => this._number(name) ?? 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)));
+    const shade = this._shade(low, high);
     this._endLevels = [shade(low), shade(high)];
     const grid = document.createElement("div");
     grid.className = "heatmap-chart-grid";
@@ -128,8 +199,11 @@ var HeatmapChart = class extends LineChart {
     const values = this.el.classList.contains("values");
     this._cells = [];
     this._levels = [];
+    const [rows, cells] = [document.createElement("div"), document.createElement("div")];
+    rows.className = "heatmap-chart-rows";
+    cells.className = "heatmap-chart-cells";
     this.labels.forEach((_, row) => {
-      grid.append(span("heatmap-chart-row", label(this._rows[row].cells[0])));
+      rows.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);
@@ -138,24 +212,35 @@ var HeatmapChart = class extends LineChart {
         else cell.style.setProperty("--level", String(level));
         this._cells.push(cell);
         this._levels.push(level);
-        grid.append(cell);
+        cells.append(cell);
       });
     });
     const labels = this._header.slice(1, columns + 1).map(label);
+    const columnLabels = [];
     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);
+      element.style.gridArea = `${this.labels.length + 1} / ${column + 1} / auto / ${end + 1}`;
+      cells.append(element);
+      columnLabels.push(element);
     });
+    this._observeLabels(cells, columnLabels.some((element) => element.classList.contains("run")) ? [] : columnLabels);
+    const scroll = this._scroll = document.createElement("div");
+    scroll.className = "heatmap-chart-scroll";
+    scroll.tabIndex = -1;
+    scroll.addEventListener("focus", () => this._plot.focus());
+    scroll.addEventListener("scroll", () => this._follow(scroll), { passive: true });
+    scroll.append(cells);
+    grid.append(rows, scroll);
     return grid;
   }
 };
+HeatmapChart.key = "Expressive_HeatmapChart";
 
 export {
   HeatmapChart
 };
-//# sourceMappingURL=chunk-VGNYF6FB.mjs.map
+//# sourceMappingURL=chunk-BPF3I2MN.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/heatmapChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions } from './lineChart';\n\nexport type HeatmapChartOptions = LineChartOptions;\n\n/**\n * A shade in one of `steps` bands, each side of zero on a diverging scale:\n * the lowest band is the empty color, and the highest is the full color.\n */\nfunction band(level: number, steps: number) {\n  return (Math.sign(level) * Math.min(steps - 1, Math.floor(Math.abs(level) * steps))) / (steps - 1);\n}\n\n/**\n * Heatmap chart. It reads its <table> like LineChart, but draws every cell\n * as a square of the grid, shaded from the lowest value to the highest, with\n * the row headers beside it and the column headers below. A `data-label` on\n * a header cell replaces its text on the grid; an empty one hides it. The\n * tooltip shows one cell, and the arrow keys move round the grid. With\n * `data-mid` the scale diverges either side of that value, and with\n * `data-steps` the shades fall into that many bands.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class HeatmapChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Every cell, row by row. */\n  private _cells: HTMLElement[];\n  /** Each cell's shade from 0 to 1, or -1 to 1 on a diverging scale, or null for a gap. */\n  private _levels: (number | null)[];\n  /** The text of the lowest and highest cells, for the legend. */\n  private _ends: [string, string];\n  /** The shades of the lowest and highest cells, where the legend's gradient runs. */\n  private _endLevels: [number, number];\n  /** The box the cells scroll in, beside the row labels. */\n  private _scroll: HTMLElement;\n\n  protected get _type() {\n    return 'heatmap-chart';\n  }\n\n  /** Color carries the value, so there is no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  static key = 'Expressive_HeatmapChart';\n\n  protected get _count() {\n    return this.labels.length * this.series.length;\n  }\n\n  /** Redraws the grid, scrolled where it was. */\n  update() {\n    const left = this._scroll?.scrollLeft;\n    super.update();\n    if (this._scroll && left) this._scroll.scrollLeft = left;\n  }\n\n  /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    this._activate(this._cells[index], index);\n  }\n\n  private _activate(cell: HTMLElement | undefined, index: number) {\n    // Measure before the writes below, which would otherwise force a layout.\n    const box = cell ? this._box(cell) : null;\n    this._cells[this.activeIndex]?.classList.remove('active');\n    this.activeIndex = index;\n    this._tooltip.hidden = !box;\n    if (box) this._fill(cell!, index, box);\n  }\n\n  /**\n   * A cell's left, top and width in the plot, past any scrolling of the\n   * grid, and the plot's width. A key can move to a cell scrolled out of a\n   * wide grid, so it scrolls into view first.\n   */\n  private _box(cell: HTMLElement) {\n    if (this._plot.matches(':focus-visible')) cell.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    return this._measure(cell);\n  }\n\n  private _measure(cell: HTMLElement) {\n    const [box, plot] = [cell.getBoundingClientRect(), this._plot.getBoundingClientRect()];\n    return [box.left - plot.left, box.top - plot.top, box.width, this._plot.clientWidth];\n  }\n\n  /** Keeps the tooltip on its cell as the grid scrolls, and hides it once the cell scrolls out. */\n  private _follow(scroll: HTMLElement) {\n    const cell = this._cells[this.activeIndex];\n    if (!cell) return;\n    const [view, box] = [scroll.getBoundingClientRect(), cell.getBoundingClientRect()];\n    if (box.right <= view.left || box.left >= view.right) this.show(-1);\n    else this._position(this._measure(cell));\n  }\n\n  /** Marks the cell and fills the tooltip beside it, on the side with more room. */\n  private _fill(cell: HTMLElement, index: number, [left, top, width, plotWidth]: number[]) {\n    cell.classList.add('active');\n    const columns = this.series.length;\n    const [row, series] = [Math.floor(index / columns), this.series[index % columns]];\n    const title = document.createElement('strong');\n    title.textContent = this.labels[row];\n    const [name, text] = [document.createElement('span'), document.createElement('span')];\n    name.textContent = series.name;\n    // A gap's swatch is outlined like its cell.\n    if (this._levels[index] === null) name.className = 'gap';\n    else name.style.setProperty('--level', String(this._levels[index]));\n    text.textContent = series.text[row];\n    this._tooltip.replaceChildren(title, name, text);\n    this._position([left, top, width, plotWidth]);\n  }\n\n  private _position([left, top, width, plotWidth]: number[]) {\n    const end = left + width / 2 > plotWidth / 2;\n    this._tooltip.classList.toggle('end', end);\n    this._tooltip.style.left = `${left + (end ? 0 : width)}px`;\n    this._tooltip.style.top = `${top}px`;\n  }\n\n  /** Arrows move the way they point, so left and right swap in RTL. */\n  protected _keyTarget(key: string): number | undefined {\n    // With nothing shown, Escape is left to a dialog or sheet around the chart.\n    if (key === 'Escape') return this.activeIndex < 0 ? undefined : -1;\n    const [columns, last] = [this.series.length, this.labels.length - 1];\n    const index = Math.max(0, this.activeIndex);\n    const [row, column] = [Math.floor(index / columns), index % columns];\n    const [next, back] = this._reversed ? ['ArrowLeft', 'ArrowRight'] : ['ArrowRight', 'ArrowLeft'];\n    const to = {\n      [next]: [row, column + 1],\n      [back]: [row, column - 1],\n      ArrowDown: [row + 1, column],\n      ArrowUp: [row - 1, column],\n      Home: [row, 0],\n      End: [row, columns - 1]\n    }[key];\n    if (!to) return undefined;\n    // The first key after focus or Escape shows the first cell.\n    if (this.activeIndex < 0) return 0;\n    const clamp = (value: number, max: number) => Math.min(max, Math.max(0, value));\n    return clamp(to[0], last) * columns + clamp(to[1], columns - 1);\n  }\n\n  /**\n   * The cell under the pointer by its position, or -1 off the grid. A touch\n   * keeps its first target while it drags, so the target cannot be used. The\n   * cells and gaps are even, so each band's edge falls in a gap and a gap\n   * counts as the nearer cell.\n   */\n  protected _indexAt(e: PointerEvent) {\n    const [columns, rows] = [this.series.length, this.labels.length];\n    const first = this._cells[0].getBoundingClientRect();\n    const last = this._cells[this._cells.length - 1].getBoundingClientRect();\n    const [left, right] = [Math.min(first.left, last.left), Math.max(first.right, last.right)];\n    const [x, y] = [e.clientX, e.clientY];\n    if (this._off(x, y, [left, right, first.top, last.bottom])) return -1;\n    const band = (offset: number, size: number, count: number) =>\n      Math.min(count - 1, Math.floor((offset / (size || 1)) * count));\n    const column = band(x - left, right - left, columns);\n    return band(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);\n  }\n\n  /** Whether a point is off the cells, or on cells scrolled out of view under the row labels. */\n  private _off(x: number, y: number, [left, right, top, bottom]: number[]) {\n    const view = this._scroll.getBoundingClientRect();\n    return x < Math.max(left, view.left) || x > Math.min(right, view.right) || y < top || y > bottom;\n  }\n\n  /**\n   * The legend: a gradient from the lowest cell's shade to the highest's,\n   * labelled with their text. A fixed scale wider than the data shows only\n   * the part the data uses.\n   */\n  protected _guides(): Element[] {\n    const legend = document.createElement('div');\n    legend.className = 'heatmap-chart-legend';\n    legend.setAttribute('aria-hidden', 'true');\n    const [low, scale, high] = ['span', 'span', 'span'].map((tag) => document.createElement(tag));\n    [low.textContent, high.textContent] = this._ends;\n    scale.className = 'heatmap-chart-scale';\n    if (this._reversed) scale.style.setProperty('--heatmap-chart-to', 'left');\n    const [from, to] = this._endLevels;\n    scale.style.setProperty('--low', String(from));\n    scale.style.setProperty('--high', String(to));\n    // A diverging scale whose data crosses the midpoint passes its empty color.\n    scale.classList.toggle('diverging', from < 0 && to > 0);\n    scale.style.setProperty('--mid', `${(-from / (to - from || 1)) * 100}%`);\n    scale.append(...this._bands().filter((level) => level >= from && level <= to).map((level) => {\n      const swatch = document.createElement('span');\n      swatch.style.setProperty('--level', String(level));\n      return swatch;\n    }));\n    legend.append(low, scale, high);\n    return [legend];\n  }\n\n  /** With data-steps, every band's shade from the lowest to the highest; otherwise none. */\n  private _bands() {\n    const steps = this._steps;\n    if (!steps) return [];\n    return Array.from({ length: 2 * steps - 1 }, (_, k) => (k - steps + 1) / (steps - 1));\n  }\n\n  /** The number of bands data-steps asks for, or 0 for a smooth scale. */\n  private get _steps() {\n    const steps = Math.round(this._number('steps') ?? 0);\n    return steps > 1 ? steps : 0;\n  }\n\n  /**\n   * How a value shades its cell: from 0 at the scale's low end to 1 at its\n   * high end, or with data-mid from -1 to 1 either side of that midpoint,\n   * as far as the further end. With data-steps the shades fall into bands.\n   */\n  private _shade(low: number, high: number) {\n    const option = (name: 'min' | 'max', fallback: number) => this._number(name) ?? this.options[name] ?? fallback;\n    const [min, max, mid] = [option('min', low), option('max', high), this._number('mid')];\n    const clamp = (value: number, floor: number) => Math.min(1, Math.max(floor, value));\n    const level = mid === null\n      ? (value: number) => clamp((value - min) / (max - min || 1), 0)\n      : (value: number) => clamp((Math.min(max, Math.max(min, value)) - mid) / (Math.max(max - mid, mid - min) || 1), -1);\n    const steps = this._steps;\n    return steps ? (value: number) => band(level(value), steps) : level;\n  }\n\n  /**\n   * A grid of the row headers and cells, row by row, with the column headers\n   * below. Each cell's --level shades it in CSS.\n   */\n  protected _draw(): Element {\n    const columns = this.series.length;\n    let [low, high] = [Infinity, -Infinity];\n    this._ends = ['', ''];\n    this.series.forEach((series) => series.values.forEach((value, row) => {\n      if (value === null) return;\n      if (value < low) [low, this._ends[0]] = [value, series.text[row]];\n      if (value > high) [high, this._ends[1]] = [value, series.text[row]];\n    }));\n    const shade = this._shade(low, high);\n    this._endLevels = [shade(low), shade(high)];\n\n    const grid = document.createElement('div');\n    grid.className = 'heatmap-chart-grid';\n    grid.setAttribute('aria-hidden', 'true');\n    grid.style.setProperty('--columns', String(columns));\n    grid.style.setProperty('--rows', String(this.labels.length));\n    const span = (className: string, text = '') => {\n      const element = document.createElement('span');\n      element.className = className;\n      element.textContent = text;\n      return element;\n    };\n    const label = (cell: HTMLTableCellElement | undefined) =>\n      cell?.dataset.label ?? cell?.textContent.trim() ?? '';\n    const values = this.el.classList.contains('values');\n\n    this._cells = [];\n    this._levels = [];\n    // The row labels stay put beside the cells, which scroll when they are too narrow.\n    const [rows, cells] = [document.createElement('div'), document.createElement('div')];\n    rows.className = 'heatmap-chart-rows';\n    cells.className = 'heatmap-chart-cells';\n    this.labels.forEach((_, row) => {\n      rows.append(span('heatmap-chart-row', label(this._rows[row].cells[0])));\n      this.series.forEach((series) => {\n        const value = series.values[row];\n        const level = value === null ? null : shade(value);\n        const cell = span('heatmap-chart-cell', values ? series.text[row] : '');\n        if (level === null) cell.classList.add('gap');\n        else cell.style.setProperty('--level', String(level));\n        this._cells.push(cell);\n        this._levels.push(level);\n        cells.append(cell);\n      });\n    });\n\n    // A column label runs on over the empty labels after it.\n    const labels = this._header.slice(1, columns + 1).map(label);\n    const columnLabels: HTMLElement[] = [];\n    labels.forEach((text, column) => {\n      if (!text) return;\n      let end = column + 1;\n      while (end < columns && !labels[end]) end++;\n      const element = span('heatmap-chart-column', text);\n      element.classList.toggle('run', end > column + 1);\n      element.style.gridArea = `${this.labels.length + 1} / ${column + 1} / auto / ${end + 1}`;\n      cells.append(element);\n      columnLabels.push(element);\n    });\n    // Labels the author already spaced out with empty ones are left as written.\n    this._observeLabels(cells, columnLabels.some((element) => element.classList.contains('run')) ? [] : columnLabels);\n\n    // The plot is the one Tab stop, so the scroll box is not another, and a\n    // press that focuses it hands focus on to the plot.\n    const scroll = (this._scroll = document.createElement('div'));\n    scroll.className = 'heatmap-chart-scroll';\n    scroll.tabIndex = -1;\n    scroll.addEventListener('focus', () => this._plot.focus());\n    scroll.addEventListener('scroll', () => this._follow(scroll), { passive: true });\n    scroll.append(cells);\n    grid.append(rows, scroll);\n    return grid;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["band"]
+}