@fusion.dev/helix-core 0.0.0-dev

package/dist/utils/anchor-element/anchor-element.js

@@ -0,0 +1,39 @@
+/** How far to descend before giving up on finding a box. */
+const DEPTH = 4;
+/**
+ * The element a floating surface should open against, given the slot it wraps.
+ *
+ * **A wrapper with no box is not an anchor.** `display: contents` puts an
+ * element's children into the layout and leaves the element itself without a
+ * box, so its `getBoundingClientRect()` is `0 0 0 0`. Measured: a tooltip host
+ * reports exactly that while the button inside it reports 32 by 32. Anchoring
+ * to it opens the surface against the top left of the window, and focusing it
+ * on close puts focus nowhere.
+ *
+ * That is not an edge case, because wrapping is how a tooltip attaches to the
+ * thing it describes. Without this, an icon button used as a trigger is the one
+ * button on a toolbar that cannot have a tooltip.
+ *
+ * So this descends past anything that draws nothing, and the first child with a
+ * box is the anchor. The wrapper is transparent by construction, so the thing
+ * with the box is the thing the reader is pointing at.
+ *
+ * Bounded rather than a walk to the leaves: a chain of box-less wrappers is
+ * already unusual, and descending without a limit through a tree this library
+ * does not own is worse than stopping and anchoring to something imperfect.
+ */
+export const anchorElement = (slot, fallback) => {
+    const assigned = slot?.assignedElements({ flatten: true })[0];
+    if (!assigned) {
+        return fallback;
+    }
+    let element = assigned;
+    for (let depth = 0; depth < DEPTH; depth += 1) {
+        const child = element.firstElementChild;
+        if (!child || element.getClientRects().length > 0) {
+            return element;
+        }
+        element = child;
+    }
+    return element;
+};

package/dist/utils/capture-pointer/capture-pointer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Takes the pointer for a drag, and carries on if the platform refuses.
+ *
+ * **Capture is an enhancement, and the drag has to survive losing it.** What it
+ * buys is events continuing to arrive once the pointer leaves the target, which
+ * matters because a thin divider is easy to outrun. What it costs, called bare,
+ * is the rest of the handler: `setPointerCapture` throws `NotFoundError` when
+ * the id names no active pointer, and every one of these calls sits above the
+ * lines that set the dragging flag and call `preventDefault`. So a refusal did
+ * not degrade the drag, it canceled it.
+ *
+ * That is reachable outside a test: a pointer released between the event being
+ * queued and the handler running is gone by the time this is called, and a
+ * synthetic `pointerdown` has no active pointer at all. The browser spec run
+ * reported four of those as uncaught page errors, and three splitter specs had
+ * each stubbed the method to get past it, which is the shape of a workaround
+ * that has been in place long enough to read as setup.
+ *
+ * Returns whether it took, for the callers that then ask `hasPointerCapture`
+ * before believing a move belongs to them.
+ */
+export declare const capturePointer: (target: Element, pointerId: number) => boolean;

package/dist/utils/capture-pointer/capture-pointer.js

@@ -0,0 +1,30 @@
+/**
+ * Takes the pointer for a drag, and carries on if the platform refuses.
+ *
+ * **Capture is an enhancement, and the drag has to survive losing it.** What it
+ * buys is events continuing to arrive once the pointer leaves the target, which
+ * matters because a thin divider is easy to outrun. What it costs, called bare,
+ * is the rest of the handler: `setPointerCapture` throws `NotFoundError` when
+ * the id names no active pointer, and every one of these calls sits above the
+ * lines that set the dragging flag and call `preventDefault`. So a refusal did
+ * not degrade the drag, it canceled it.
+ *
+ * That is reachable outside a test: a pointer released between the event being
+ * queued and the handler running is gone by the time this is called, and a
+ * synthetic `pointerdown` has no active pointer at all. The browser spec run
+ * reported four of those as uncaught page errors, and three splitter specs had
+ * each stubbed the method to get past it, which is the shape of a workaround
+ * that has been in place long enough to read as setup.
+ *
+ * Returns whether it took, for the callers that then ask `hasPointerCapture`
+ * before believing a move belongs to them.
+ */
+export const capturePointer = (target, pointerId) => {
+    try {
+        target.setPointerCapture(pointerId);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/dist/utils/closest-instance/closest-instance.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The nearest ancestor that is an instance of a class, crossing shadow roots.
+ *
+ * **Identity rather than tag name, and the rule already existed.** `Accordion`'s
+ * root states it two files from a violation of it: "Items are matched with
+ * `instanceof`, never by tag name. Matching `helix-accordion-item` would tie
+ * this tier to the styled one." Nine headless families resolve their
+ * relationships that way; two did it by tag, and both named `helix-*` tags that
+ * only `@fusion.dev/helix` registers, which is a headless package depending on a
+ * styled one by string.
+ *
+ * The consequence is silent rather than loud. Subclassing a headless element under
+ * a different tag is exactly what the headless tier exists to allow, and it is
+ * what `helix/styled` itself does. Under a third tag the lookup returned `null`,
+ * so an accordion's `mode` was ignored and every section behaved as `multiple`
+ * with no error anywhere.
+ *
+ * **`closest()` alone is not enough**, which is why this walks rather than
+ * delegating. `closest()` stops at a shadow boundary: a component slotted into
+ * another component's shadow root has a `parentNode` chain that ends at a
+ * `ShadowRoot`, and `closest` will not step across it. Following `host` is what
+ * makes a nested arrangement resolve, and nesting through a slot is the
+ * ordinary case for anything composable.
+ */
+export declare const closestInstance: <T extends Element>(from: Element | null | undefined, Ctor: abstract new (...args: never[]) => T) => T | null;

package/dist/utils/closest-instance/closest-instance.js

@@ -0,0 +1,34 @@
+/**
+ * The nearest ancestor that is an instance of a class, crossing shadow roots.
+ *
+ * **Identity rather than tag name, and the rule already existed.** `Accordion`'s
+ * root states it two files from a violation of it: "Items are matched with
+ * `instanceof`, never by tag name. Matching `helix-accordion-item` would tie
+ * this tier to the styled one." Nine headless families resolve their
+ * relationships that way; two did it by tag, and both named `helix-*` tags that
+ * only `@fusion.dev/helix` registers, which is a headless package depending on a
+ * styled one by string.
+ *
+ * The consequence is silent rather than loud. Subclassing a headless element under
+ * a different tag is exactly what the headless tier exists to allow, and it is
+ * what `helix/styled` itself does. Under a third tag the lookup returned `null`,
+ * so an accordion's `mode` was ignored and every section behaved as `multiple`
+ * with no error anywhere.
+ *
+ * **`closest()` alone is not enough**, which is why this walks rather than
+ * delegating. `closest()` stops at a shadow boundary: a component slotted into
+ * another component's shadow root has a `parentNode` chain that ends at a
+ * `ShadowRoot`, and `closest` will not step across it. Following `host` is what
+ * makes a nested arrangement resolve, and nesting through a slot is the
+ * ordinary case for anything composable.
+ */
+export const closestInstance = (from, Ctor) => {
+    let node = from ?? null;
+    while (node) {
+        if (node instanceof Ctor) {
+            return node;
+        }
+        node = node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode;
+    }
+    return null;
+};

package/dist/utils/create-sheet/create-sheet.d.ts

@@ -0,0 +1,16 @@
+import { type CSSResult } from 'lit';
+/**
+ * Builds a stylesheet from CSS authored in a `.css` file.
+ *
+ * Component styles live in real `.css` files rather than `css` tagged
+ * templates, so they get CSS tooling: syntax highlighting, formatters, the
+ * token linter, and a diff that reads as CSS. `bun run styles` compiles each
+ * one into a sibling `.css.ts` that calls this.
+ *
+ * The `unsafe` in `unsafeCSS` warns about interpolating untrusted input into a
+ * stylesheet. That is not what happens here: the argument is a build-time
+ * constant read from a file in this repo, never a runtime value. Wrapping it
+ * keeps the warning where it belongs, on `unsafeCSS` itself, and gives one seam
+ * to change if constructable stylesheets become the better primitive.
+ */
+export declare const createSheet: (cssText: string) => CSSResult;

package/dist/utils/create-sheet/create-sheet.js

@@ -0,0 +1,16 @@
+import { unsafeCSS } from 'lit';
+/**
+ * Builds a stylesheet from CSS authored in a `.css` file.
+ *
+ * Component styles live in real `.css` files rather than `css` tagged
+ * templates, so they get CSS tooling: syntax highlighting, formatters, the
+ * token linter, and a diff that reads as CSS. `bun run styles` compiles each
+ * one into a sibling `.css.ts` that calls this.
+ *
+ * The `unsafe` in `unsafeCSS` warns about interpolating untrusted input into a
+ * stylesheet. That is not what happens here: the argument is a build-time
+ * constant read from a file in this repo, never a runtime value. Wrapping it
+ * keeps the warning where it belongs, on `unsafeCSS` itself, and gives one seam
+ * to change if constructable stylesheets become the better primitive.
+ */
+export const createSheet = (cssText) => unsafeCSS(cssText);

package/dist/utils/custom-element/custom-element.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Registers a custom element, once.
+ *
+ * A drop-in replacement for Lit's `@customElement` that does not throw when the
+ * tag is already registered.
+ *
+ * The duplicate is not hypothetical. Next.js evaluates a module in both the
+ * server and client graphs, so a component imported by a server component and a
+ * client component runs its registration twice against one registry, and
+ * `customElements.define` throws:
+ *
+ * > Failed to execute 'define': the name "helix-card" has already been used
+ *
+ * That failure takes down the whole prerender, and it appears only once an app
+ * mixes server and client usage of the same component, which is exactly what a
+ * real app does.
+ *
+ * The analyzer detects `@customElement` **by decorator name**, not by where it
+ * is imported from, so the manifest still records `tagName` and nothing
+ * downstream changes.
+ */
+/** Every tag registered twice by different classes, in registration order. */
+export declare const duplicateRegistrations: () => string[];
+/** Every tag registered through `customElement`, whoever imported it first. */
+export declare const definedTags: () => string[];
+export declare const customElement: (tagName: string) => (target: CustomElementConstructor) => void;

package/dist/utils/custom-element/custom-element.js

@@ -0,0 +1,114 @@
+/**
+ * Registers a custom element, once.
+ *
+ * A drop-in replacement for Lit's `@customElement` that does not throw when the
+ * tag is already registered.
+ *
+ * The duplicate is not hypothetical. Next.js evaluates a module in both the
+ * server and client graphs, so a component imported by a server component and a
+ * client component runs its registration twice against one registry, and
+ * `customElements.define` throws:
+ *
+ * > Failed to execute 'define': the name "helix-card" has already been used
+ *
+ * That failure takes down the whole prerender, and it appears only once an app
+ * mixes server and client usage of the same component, which is exactly what a
+ * real app does.
+ *
+ * The analyzer detects `@customElement` **by decorator name**, not by where it
+ * is imported from, so the manifest still records `tagName` and nothing
+ * downstream changes.
+ */
+/**
+ * Tags already reported, so a page holding duplicates says each one once rather
+ * than once per module that tried.
+ */
+const reported = new Set();
+/**
+ * The tags this page registered twice, for a reader that is not a person.
+ *
+ * **The warning below is the right thing and it is not a readable output.** It
+ * fires at the moment of the second registration, which is the best possible
+ * position and better than anything a later pass can do, and it goes to a
+ * console: a CI job cannot see it, and a developer whose console already has
+ * forty lines in it will not. `@fusion.dev/helix-diagnostics` reads this instead, so the
+ * same fault reaches a structured report without a second detector guessing at
+ * it from the outside. Detect once, at the source; surface twice.
+ */
+const duplicates = new Set();
+/** Every tag registered twice by different classes, in registration order. */
+export const duplicateRegistrations = () => [...duplicates];
+/**
+ * Every tag this decorator has defined, in definition order.
+ *
+ * **Recorded here because here is the only place that sees all of them once.** A
+ * spec wanting "every element this package defines" reached for patching
+ * `customElements.define` around an import of the barrel, and that answers
+ * correctly only for the first importer in the process: a second import is a
+ * module-cache hit and defines nothing, so any spec that touched a component
+ * first silently shrank the list. Measured when one did, and what it reported
+ * was a floor count, 164 against 250, which names nothing about the cause.
+ *
+ * Not `registerElementEvents`, which was tried and is a different set: the
+ * generated map holds the tags that *dispatch* something, so it came out 68
+ * against 90. Definition is the question, so the definition site is the answer.
+ */
+const defined = [];
+/** Every tag registered through `customElement`, whoever imported it first. */
+export const definedTags = () => [...defined];
+/**
+ * Says so when a second, different class asks for a tag that is already taken.
+ *
+ * **Returning quietly is right and saying nothing is not.** The registry keeps
+ * the first constructor, so on a page carrying two copies of Helix every
+ * `<helix-button>` is the first copy's class whatever the second copy exports.
+ * Nothing fails: the element renders, behaves, and answers its own API. What
+ * breaks is identity, `el instanceof HelixButton` returning `false` against an
+ * element that is visibly a button, and a version's fixes being absent from
+ * elements the consumer believes are on that version. Both are hours of
+ * debugging with no error to search for, which is the worst shape a library
+ * failure can take.
+ *
+ * **Only in a browser, which is the line that keeps this quiet where the guard
+ * was written for.** The prerender case above is a server one: Lit's SSR shim
+ * provides `customElements` and `document` and leaves `window` undefined, so
+ * `typeof window` separates a real page from a render pass exactly. Measured
+ * against `@lit-labs/ssr`'s global DOM shim rather than assumed, because a
+ * diagnostic that fires during a build is a diagnostic somebody turns off.
+ *
+ * **Different constructors, not merely a second call.** A module evaluated
+ * twice in one graph produces two class objects and is a genuine duplicate; the
+ * same class arriving twice through two import specifiers is not, and has
+ * nothing to report.
+ *
+ * No `throw`. The first definition is already live and elements are already
+ * upgraded against it, so there is nothing left to refuse and a lot to take
+ * down.
+ */
+const warnDuplicate = (tagName) => {
+    if (typeof window === 'undefined' || reported.has(tagName)) {
+        return;
+    }
+    reported.add(tagName);
+    duplicates.add(tagName);
+    console.warn(`<${tagName}> is already registered by a different class, so this page holds two copies of ` +
+        'Helix. The first one keeps the tag: every element of this name is built from it, whatever ' +
+        'the second copy exports, so `instanceof` against the second copy is false and its fixes are ' +
+        'not in the DOM. Two dependencies asking for different versions is the usual cause, and a ' +
+        'bundler shipping the same version twice is the other. Deduplicate the dependency.');
+};
+export const customElement = (tagName) => (target) => {
+    // Lit SSR shims the registry, but a bare Node context may have none.
+    if (typeof customElements === 'undefined') {
+        return;
+    }
+    const existing = customElements.get(tagName);
+    if (existing) {
+        if (existing !== target) {
+            warnDuplicate(tagName);
+        }
+        return;
+    }
+    customElements.define(tagName, target);
+    defined.push(tagName);
+};

package/dist/utils/draw-icon/draw-icon.d.ts

@@ -0,0 +1,38 @@
+import type { HelixIcon } from '@fusion.dev/helix-icons';
+import { type TemplateResult } from 'lit';
+/** Where a glyph goes, which is the one attribute that varies. */
+export interface DrawIconOptions {
+    /**
+     * A `slot`, for a glyph being handed to another component.
+     */
+    slot?: string;
+}
+/**
+ * Draws an icon that was imported by name, rather than looked up by string.
+ *
+ * **`<helix-icon name="play">` indexes the whole icon set at runtime.** Its
+ * render is `icons[this.name]`, and no bundler can shake a dynamic index, so
+ * every consumer of any component that renders one ships all of the generated
+ * path data: measured at 50,814 bytes raw and 15,010 gzipped for 102 icons, and
+ * growing about 147 gzipped bytes per icon added. A named import ships one path
+ * and is checked when the package compiles rather than when `check:icons` runs.
+ *
+ * That element still earns its place as *public* API, where a consumer writes a
+ * name in markup and a lookup is the only thing that can work. What it should
+ * not be is how this library draws its own marks.
+ *
+ * **There is no `part` option, and there cannot be.** A part name behind an
+ * interpolation is a part the manifest cannot see, so `check:selectors` reports
+ * the component's own stylesheet as matching nothing and the part stops being
+ * API. `Trend` needs one and therefore writes its `<svg>` out with a literal
+ * `part="icon"`, which is the honest cost: a helper can carry everything except
+ * the thing static analysis has to read.
+ *
+ * `data-glyph` rather than a class, because the sizing lives in
+ * `helix/styled/src/icon/glyph.css` and a component's own `--icon-size`
+ * declarations have to keep working untouched: the variable was read by
+ * `helix-icon`, and now it is read by the rule that sheet carries. Without it
+ * every one of those declarations would go quietly dead and every mark in six
+ * families would change size.
+ */
+export declare const drawIcon: (icon: HelixIcon, options?: DrawIconOptions) => TemplateResult;

package/dist/utils/draw-icon/draw-icon.js

@@ -0,0 +1,39 @@
+import { html, nothing } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+/**
+ * Draws an icon that was imported by name, rather than looked up by string.
+ *
+ * **`<helix-icon name="play">` indexes the whole icon set at runtime.** Its
+ * render is `icons[this.name]`, and no bundler can shake a dynamic index, so
+ * every consumer of any component that renders one ships all of the generated
+ * path data: measured at 50,814 bytes raw and 15,010 gzipped for 102 icons, and
+ * growing about 147 gzipped bytes per icon added. A named import ships one path
+ * and is checked when the package compiles rather than when `check:icons` runs.
+ *
+ * That element still earns its place as *public* API, where a consumer writes a
+ * name in markup and a lookup is the only thing that can work. What it should
+ * not be is how this library draws its own marks.
+ *
+ * **There is no `part` option, and there cannot be.** A part name behind an
+ * interpolation is a part the manifest cannot see, so `check:selectors` reports
+ * the component's own stylesheet as matching nothing and the part stops being
+ * API. `Trend` needs one and therefore writes its `<svg>` out with a literal
+ * `part="icon"`, which is the honest cost: a helper can carry everything except
+ * the thing static analysis has to read.
+ *
+ * `data-glyph` rather than a class, because the sizing lives in
+ * `helix/styled/src/icon/glyph.css` and a component's own `--icon-size`
+ * declarations have to keep working untouched: the variable was read by
+ * `helix-icon`, and now it is read by the rule that sheet carries. Without it
+ * every one of those declarations would go quietly dead and every mark in six
+ * families would change size.
+ */
+export const drawIcon = (icon, options = {}) => html `<svg
+    aria-hidden="true"
+    data-glyph
+    fill="currentColor"
+    slot=${options.slot ?? nothing}
+    viewBox=${icon.viewBox}
+  >
+    ${unsafeSVG(icon.content)}
+  </svg>`;

package/dist/utils/draw-tooltip/draw-tooltip.d.ts

@@ -0,0 +1,56 @@
+import { nothing, type TemplateResult } from 'lit';
+import { type StaticValue } from 'lit/static-html.js';
+import type { Row } from '../read-series/read-series.js';
+/** Where a tooltip points, in the plot's own percentages, and which side it prefers. */
+export interface TooltipAt {
+    /**
+     * The side the bubble prefers. It moves if that side does not fit.
+     */
+    placement: 'bottom' | 'left' | 'right' | 'top';
+    /**
+     * How far across the plot the reading is, as a percentage.
+     */
+    x: string;
+    /**
+     * How far down the plot the reading is, as a percentage.
+     */
+    y: string;
+}
+/**
+ * What a pointer resting on a reading shows, as `Tooltip` pointed at a mark.
+ *
+ * **A chart does not draw its own tooltip, and the top layer is why.** `Tooltip`
+ * renders `popover="manual"` through `PopoverController`, so it clears every
+ * stacking context and every `overflow` on the page. A box drawn by the chart is
+ * `position: absolute` inside the plot and is confined to the chart's own
+ * context, so it is clipped by, or layered under, whatever sits beside the
+ * chart. Escaping that means reimplementing `PopoverController`, which is
+ * `Tooltip` with extra steps and a second copy of the hard part.
+ *
+ * **`for` was already the anchor and needed nothing added.** It resolves through
+ * `getRootNode().getElementById()`, and a chart's shadow root *is* a
+ * `ShadowRoot`, so a chart names an element inside itself and `Tooltip` finds
+ * it. What the chart provides is an invisible mark at the reading's point.
+ *
+ * **An HTML mark rather than the `<rect>` or `<circle>` already there.**
+ * `FloatingController` types its anchor as `HTMLElement` and an SVG element is
+ * not one; and a slice's `<circle>` has the bounding box of the whole ring
+ * rather than of its arc, so anchoring to it would point at the ring's center
+ * for every slice.
+ *
+ * **And the arrow now follows from placement rather than from a compass.** The
+ * chart says which side it prefers and `FloatingController` moves it if that
+ * side does not fit, which is how a slice at any bearing gets a bubble that
+ * points at it. Four hard-coded sides could not express a bearing, which is what
+ * made the donut's arrow miss its own ring.
+ *
+ * **It shows the table's text and not the chart's numbers.** `$128k` is what the
+ * cell says and `128000` is what the drawing measured. Every cell of the row is
+ * here, including columns nothing was plotted from, because a note beside the
+ * figures is most of the reason to want a tooltip.
+ *
+ * **Hidden from assistive technology, on purpose.** The table is the accessible
+ * representation and the drawing is `aria-hidden`; a reader on a keyboard gets
+ * the table, which they can reach, rather than a tooltip which they cannot.
+ */
+export declare const drawTooltip: (rows: Row[], at: number, tag: StaticValue, where?: TooltipAt) => TemplateResult | typeof nothing;

package/dist/utils/draw-tooltip/draw-tooltip.js

@@ -0,0 +1,89 @@
+import { nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { html } from 'lit/static-html.js';
+import { seriesIndex } from '../../mixins/mixin-chart-source/mixin-chart-source.js';
+/**
+ * What a pointer resting on a reading shows, as `Tooltip` pointed at a mark.
+ *
+ * **A chart does not draw its own tooltip, and the top layer is why.** `Tooltip`
+ * renders `popover="manual"` through `PopoverController`, so it clears every
+ * stacking context and every `overflow` on the page. A box drawn by the chart is
+ * `position: absolute` inside the plot and is confined to the chart's own
+ * context, so it is clipped by, or layered under, whatever sits beside the
+ * chart. Escaping that means reimplementing `PopoverController`, which is
+ * `Tooltip` with extra steps and a second copy of the hard part.
+ *
+ * **`for` was already the anchor and needed nothing added.** It resolves through
+ * `getRootNode().getElementById()`, and a chart's shadow root *is* a
+ * `ShadowRoot`, so a chart names an element inside itself and `Tooltip` finds
+ * it. What the chart provides is an invisible mark at the reading's point.
+ *
+ * **An HTML mark rather than the `<rect>` or `<circle>` already there.**
+ * `FloatingController` types its anchor as `HTMLElement` and an SVG element is
+ * not one; and a slice's `<circle>` has the bounding box of the whole ring
+ * rather than of its arc, so anchoring to it would point at the ring's center
+ * for every slice.
+ *
+ * **And the arrow now follows from placement rather than from a compass.** The
+ * chart says which side it prefers and `FloatingController` moves it if that
+ * side does not fit, which is how a slice at any bearing gets a bubble that
+ * points at it. Four hard-coded sides could not express a bearing, which is what
+ * made the donut's arrow miss its own ring.
+ *
+ * **It shows the table's text and not the chart's numbers.** `$128k` is what the
+ * cell says and `128000` is what the drawing measured. Every cell of the row is
+ * here, including columns nothing was plotted from, because a note beside the
+ * figures is most of the reason to want a tooltip.
+ *
+ * **Hidden from assistive technology, on purpose.** The table is the accessible
+ * representation and the drawing is `aria-hidden`; a reader on a keyboard gets
+ * the table, which they can reach, rather than a tooltip which they cannot.
+ */
+export const drawTooltip = (rows, at, tag, where) => {
+    const row = rows[at];
+    if (!row || rows.length === 0) {
+        return nothing;
+    }
+    const slot = 100 / rows.length;
+    const place = where ?? {
+        placement: 'top',
+        x: `${at * slot + slot / 2}%`,
+        y: '0%',
+    };
+    /* The mark and the bubble are siblings, and the id is fixed rather than
+       generated: it is scoped to this chart's shadow root, where it is the only
+       one, so nothing can collide with it and nothing has to be threaded through
+       a render to stay in step. */
+    return html `<div
+      id="helix-chart-mark"
+      part="mark"
+      style=${styleMap({ insetBlockStart: place.y, insetInlineStart: place.x })}
+    ></div>
+    <${tag}
+      exportparts="tooltip"
+      for="helix-chart-mark"
+      open
+      part="tooltip-anchor"
+      placement=${place.placement}
+      within="helix-chart-plot"
+    >
+      <div aria-hidden="true" slot="content">
+        <span part="tooltip-label">${row.label}</span>
+        ${row.cells.map((cell, index) => 
+    /* A palette color only where something was plotted in it.
+     *
+     * A cell with no number is a column no chart drew: a note, a status,
+     * a name. Given `data-series` anyway it takes a series color and the
+     * stylesheet draws a dot, so a row reading `Note  Outage` arrived
+     * wearing series three's green while the legend beside the chart said
+     * series three was something else. */
+    html `<span
+              data-series=${cell.value === undefined ? nothing : seriesIndex(index)}
+              part="tooltip-cell"
+            >
+              <span part="tooltip-name">${cell.name}</span>
+              <span part="tooltip-value">${cell.text}</span>
+            </span>`)}
+      </div>
+    </${tag}>`;
+};

package/dist/utils/elapsed-time/elapsed-time.d.ts

@@ -0,0 +1,10 @@
+import type { Relative } from '../relative-time/relative-time.js';
+/**
+ * A formatter for one locale, kept.
+ *
+ * `now` is a parameter rather than read from the clock, for the reason
+ * `relativeTime` gives: a function that reads `Date.now()` internally can only
+ * be tested by waiting or by replacing a global, and both produce specs that
+ * fail on a slow machine.
+ */
+export declare const elapsedTime: (locale: string) => ((from: Date, now: Date) => Relative);