@fusion.dev/helix-headless 0.184.0 → 0.186.0

package/dist/accordion/item/accordion-item.js

@@ -83,7 +83,7 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        auditName(this, () => this.renderRoot.querySelector(`#${TRIGGER_ID}`), 'Write its title in the `summary` slot.');
+        auditName(this, () => this.renderRoot.querySelector(`#${TRIGGER_ID}`), 'accordion-item');
     }
     get accordion() {
         return closestInstance(this, HelixHeadlessAccordion);

package/dist/button-group/root/button-group-root.js

@@ -206,7 +206,7 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        auditName(this, () => null, 'Give it a `label`, or an `aria-label` that says what the buttons are for.', () => this.label !== '');
+        auditName(this, () => null, 'button-group', () => this.label !== '');
     }
     updated(changed) {
         super.updated(changed);

package/dist/canvas/root/canvas-root.js

@@ -1951,7 +1951,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
-        auditName(this, () => null, 'Give it a `label` that says what the board holds, such as "Release plan".', () => this.label !== '');
+        auditName(this, () => null, 'canvas', () => this.label !== '');
         if (this.waiting) {
             this.measured = this.box;
             this.view = this.waiting;

package/dist/data-table/root/data-table-root.d.ts

@@ -125,11 +125,12 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * `csv()` returns the result as text: every row that passes the filter, in the
  * order and the columns on screen. Saving the file is up to you.
  *
- * `DataTable` has no `columns` attribute. Each `TableColumn` is part of the
- * schema, so you size a column with its own `width`. `Table` has `columns`
- * because its cells are markup you write and it can have no columns at all.
- * Written on `DataTable`, `columns` has no effect, so watch for it when you
- * move a table from `Table` to `DataTable`.
+ * Size a column with its own `width`, or every column at once with `columns`,
+ * a track list dealt out one track to a column in the order they are written,
+ * as `Table` deals it. A column's `width` wins in its place. **A table that
+ * serves its first page takes its widths from `columns`**: a server and a
+ * stylesheet can read the table's own attributes and not its columns', so the
+ * served rows are laid out at the widths the table draws.
  *
  * **The columns are an import of their own.** A column is the Table family's
  * `TableColumn`, which the data table does not register, so a page that writes
@@ -275,6 +276,18 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * it. No default, so a table that sets none writes nothing onto its host.
      */
     childField?: string;
+    /**
+     * The column tracks, as a grid track list such as `2fr 1fr max-content`,
+     * dealt out one track to a column in the order the columns are written. A
+     * column's own `width` wins in its place, and a column it does not reach
+     * takes the track a column with no `width` takes.
+     *
+     * **The one track list a server can send.** A server rendering this element
+     * has no columns to read a `width` from, and neither has a stylesheet laying
+     * out the rows a page served before the table upgrades, so a table sized here
+     * lays those rows out at the widths it draws.
+     */
+    columns: string;
     /**
      * The keys of the rows open at the start, separated by commas. Used until
      * `expanded` is set.
@@ -786,7 +799,13 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private get shownFields();
     /** The columns reduced to what the ordering needs. */
     private get axes();
-    /** The track list, from the columns if there are any. */
+    /**
+     * The track list: each column's `width`, or its track in `columns`, or the
+     * track a column with neither takes.
+     *
+     * A render that knows no columns, on a server or hydrating what one sent,
+     * has `columns` alone, and sends it as it is.
+     */
     private get template();
     /**
      * How many rows this draws before it is worth saying something, and why 2,000.

package/dist/data-table/root/data-table-root.js

@@ -8,6 +8,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import { edgeOf } from '../../table/edge.js';
+import { tracksOf } from '../../table/tracks.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import { toggledOpen } from '../keys.js';
@@ -28,6 +29,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
+        this.columns = '';
         this.defaultExpanded = '';
         this.defaultFilter = '';
         this.defaultOrder = '';
@@ -573,11 +575,16 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     get template() {
         const declared = this.shownColumns;
-        if (declared.length === 0) {
-            return '';
-        }
-        const tracks = declared.map((column) => column.track).join(' ');
-        return [...Array.from({ length: this.lead }, () => 'max-content'), tracks].join(' ');
+        const written = this.tableColumns;
+        const listed = tracksOf(this.columns, written.length);
+        const tracks = written.length === 0
+            ? this.columns
+            : declared
+                .map((column) => column.width ? column.track : listed[written.indexOf(column)] || column.track)
+                .join(' ');
+        return tracks
+            ? [...Array.from({ length: this.lead }, () => 'max-content'), tracks].join(' ')
+            : '';
     }
     static { this.COMFORTABLE = 2_000; }
     warnIfCrowded(drawn) {
@@ -1217,6 +1224,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const pagination = this.tag('pagination');
         const counted = this.mode === 'server' ? Math.max(this.total, available) : matched;
         const countKnown = counted > 0 || (this.sourceKnown && !serving);
+        const held = serving &&
+            this.paginated &&
+            !countKnown &&
+            (!this.sourceKnown || this.servedRows.length >= this.pageSize);
         this.counts = {
             columns: columns.length ? columns.length + this.lead : undefined,
             rows: countKnown ? counted + 1 + (this.moreDrawn ? 1 : 0) : undefined,
@@ -1231,9 +1242,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         @scroll=${this.handleScroll}
       >
         <div part="head" role="row" aria-rowindex="1">
-          ${this.rowGrips && this.sourceKnown
-            ? this.renderGripHead(headStop && this.currentColumn === 0)
-            : nothing}${this.selectable && this.sourceKnown
+          ${this.rowGrips ? this.renderGripHead(headStop && this.currentColumn === 0) : nothing}${this.selectable
             ? this.renderSelectAll(headStop && this.currentColumn === this.selectAt)
             : nothing}${this.assignsByName && !this.hydrating
             ? this.orderedColumns.map((_, index) => html `<slot name=${`column-${index + 1}`} @slotchange=${this.handleSlotChange}></slot>`)
@@ -1247,7 +1256,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         ${this.renderMore(page)}${this.errorText === '' ? this.renderStatus(filled, 'gridcell') : this.renderError()}
       </div>
       ${this.errorText === '' ? this.renderLive(filled) : html `<span part="live" role="status">${this.errorText}</span>`}
-      <div part="footer">
+      <div part="footer" ?data-held=${held}>
         <slot name="footer"></slot>
         ${this.paginated
             ? html `<${pagination}
@@ -1557,6 +1566,9 @@ __decorate([
 __decorate([
     property({ attribute: 'child-field', reflect: true })
 ], HelixHeadlessDataTable.prototype, "childField", void 0);
+__decorate([
+    property()
+], HelixHeadlessDataTable.prototype, "columns", void 0);
 __decorate([
     property({ attribute: 'default-expanded' })
 ], HelixHeadlessDataTable.prototype, "defaultExpanded", void 0);

package/dist/dialog/root/dialog-root.js

@@ -144,7 +144,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             return;
         }
         if (this.open && !dialog.open) {
-            auditName(this, () => null, 'Give it a `label`, or a heading in the `header` slot.', () => this.label !== '' ||
+            auditName(this, () => null, 'dialog', () => this.label !== '' ||
                 this.namedByHeader ||
                 headingsIn(this.renderRoot
                     .querySelector('slot[name="header"]')

package/dist/drawer/root/drawer-root.js

@@ -242,7 +242,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             return;
         }
         if (this.open && !panel.open) {
-            auditName(this, () => null, 'Give it a `label`, or a heading in the `header` slot.', () => this.label !== '' ||
+            auditName(this, () => null, 'dialog', () => this.label !== '' ||
                 this.namedByHeader ||
                 headingsIn(this.renderRoot
                     .querySelector('slot[name="header"]')

package/dist/drilldown/item/drilldown-item.js

@@ -58,7 +58,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     updated(changed) {
         super.updated(changed);
         if (this.partNamed('item')) {
-            auditName(this, () => this.partNamed('item'), 'Give the row words in its default slot, or a label on the icon it holds.');
+            auditName(this, () => this.partNamed('item'), 'row');
         }
     }
     firstUpdated(changed) {

package/dist/element-events.generated.js

@@ -148,6 +148,13 @@ registerElementEvents({
     'helix-headless-icon-button': ['helix-press'],
     'helix-headless-image': ['error', 'load'],
     'helix-headless-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-headless-isometric-heatmap': [
+        'change',
+        'helix-before-change',
+        'helix-reading-change',
+        'helix-reading-press',
+        'helix-resize',
+    ],
     'helix-headless-kbd': ['helix-shortcut'],
     'helix-headless-legend': ['change', 'helix-before-change'],
     'helix-headless-lightbox': [

package/dist/graph/root/graph-root.d.ts

@@ -6,10 +6,12 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @summary A frame around a graph of notes drawn by another library, and the list that makes it readable.
  *
  * @description
- * Helix draws no graph. A force layout of thousands of notes is physics and
- * WebGL, which a renderer such as Sigma.js does. Put the renderer's box in the
- * frame, and `connectGraph` from `@fusion.dev/helix-graph` draws `nodes` and
- * `links` in it and keeps it in step with the frame.
+ * The frame draws no graph itself. A force layout of thousands of notes is
+ * physics and WebGL, which a renderer such as Sigma.js does, and an
+ * architecture diagram is drawn by `isometricDriver` from
+ * `@fusion.dev/helix-graph/isometric`. Put the drawing's box in the frame, and
+ * `connectGraph` from `@fusion.dev/helix-graph` draws `nodes` and `links` in
+ * it and keeps it in step with the frame.
  *
  * What the frame adds is what a drawing of a graph cannot do: a list of every
  * note beside it, which is the graph for a screen reader and a quick way to

package/dist/graph/root/graph-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { auditName, customElement, focusItemOf, formatWords, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, isRtl, KeyboardNavigationController, MixinControllerActive, MixinViewport, SCROLLER_RULE, scrollItemIntoView, scrollRoom, Typeahead, typeaheadBy, VIRTUAL_RULE, VirtualizeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { auditName, customElement, focusItemOf, formatWords, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, isRtl, KeyboardNavigationController, MixinControllerActive, MixinViewport, SCROLLER_RULE, scrollRoom, scrollWithin, Typeahead, typeaheadBy, VIRTUAL_RULE, VirtualizeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { list, magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -213,7 +213,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        auditName(this, () => null, 'Give it a `label` that says what the notes are, such as "Research notes".', () => this.label !== '');
+        auditName(this, () => null, 'graph', () => this.label !== '');
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -384,7 +384,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         if (this.cursor >= first && this.cursor < last) {
             const row = this.renderRoot.querySelector?.(`[data-index="${this.cursor}"]`);
             if (row) {
-                scrollItemIntoView(row, { scroller: list });
+                scrollWithin(row, list);
             }
             return;
         }

package/dist/heatmap/root/heatmap-root.d.ts

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, StatusController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
 import { type Reading } from './buckets.js';
@@ -309,7 +309,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * difference is a whole strip: unmeasured has to show everything, since a
      * first paint that shows one cell and then expands is a flicker on every load.
      */
-    private width;
+    protected width: number | undefined;
     /**
      * The cell and gap the strip is drawing, in pixels, once it has been read.
      *
@@ -353,13 +353,13 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     /** The `value` the last rectangle wrote. */
     private shaped;
     /** The region a change of selection is said in, rendered from the first change. */
-    private readonly status;
+    protected readonly status: StatusController;
     /**
      * The name each drawn cell stands for in `value`: the date its row's header
      * carries in a `<time datetime>`, or the header's words where it carries
      * none.
      */
-    private keysOf;
+    protected keysOf(cells: readonly Reading[]): string[];
     /**
      * Moves `value` to `next`, asking first: `helix-before-change` carries it,
      * a listener that refuses keeps the selection, and `change` follows, with
@@ -375,7 +375,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     private stretch;
     /** Notes where the keys rest before the pointer controller moves them. */
-    private readonly onStripKeydown;
+    protected readonly onStripKeydown: () => void;
     /**
      * Space and Enter select the cell the keys rest on, and Shift with a key
      * that moved them takes in the range from the anchor. After the pointer
@@ -386,7 +386,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * A press on a cell selects it, under `selection-mode`, and Shift takes the
      * rectangle to it under `selection-shape="rectangle"`.
      */
-    private readonly onClick;
+    protected readonly onClick: (event: MouseEvent) => void;
     /**
      * Every row in the table, oldest first, as the table is written, with its
      * reading where the row has one.
@@ -400,7 +400,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * cell along, while the tooltip still counted rows and named the day beside
      * the one under the pointer.
      */
-    private get points();
+    protected get points(): Reading[];
     /**
      * `rows` as a usable count, which is not always what the attribute says.
      *
@@ -408,7 +408,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * need it, and a `rows="0"` or a `rows="2.5"` that reached one of them and not
      * the other would draw a strip whose columns and whose capacity disagreed.
      */
-    private get rowCount();
+    protected get rowCount(): number;
     /**
      * The cell width the arithmetic should plan around, in pixels.
      *
@@ -416,11 +416,11 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * it is for; otherwise what the strip draws, and the declared default only
      * until the first measurement lands.
      */
-    private get cellPx();
+    protected get cellPx(): number;
     /** The gap the arithmetic should plan around, on the same terms as `cellPx`. */
-    private get gapPx();
+    protected get gapPx(): number;
     /** How many cells the container has room for, as a whole number of columns. */
-    private get room();
+    protected get room(): number;
     /**
      * Reads back the cell and the gap the strip resolved.
      *
@@ -443,7 +443,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * The tail rather than the head: a status strip that drops the newest days to
      * keep the oldest is answering a question nobody asked.
      */
-    private get drawn();
+    protected get drawn(): Reading[];
     /** How many of the oldest rows a narrow strip leaves undrawn. */
     private get dropped();
     /**
@@ -533,9 +533,9 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * bubbles, so one handler covers however many cells there are, and unlike
      * `mouseover` it is delivered for a pen.
      */
-    private readonly onPointerOver;
-    private readonly onPointerUp;
-    private readonly onPointerLeave;
+    protected readonly onPointerOver: (event: PointerEvent) => void;
+    protected readonly onPointerUp: (event: PointerEvent) => void;
+    protected readonly onPointerLeave: () => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/icon/all/index.js

@@ -1,4 +1 @@
-import { icons } from '@fusion.dev/helix-icons';
-import { registerIcons } from '../registry.js';
-registerIcons(icons);
 export * from '../index.js';

package/dist/icon/root/icon-root.d.ts

@@ -18,14 +18,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * a dark background. Shapes that set their own `fill` or `stroke` are
  * unaffected.
  *
- * **A name is looked up in a registry.** The family's entry registers a small
- * set: the four carets, `arrow-left`, `arrow-right`, `check`, `x`, `plus`,
- * `minus`, `magnifying-glass`, `info` and `warning`. `icon/all` registers the
- * whole set, so any name in it draws, and a name that resolves to nothing
- * says to import it. The element's own entry,
- * `@fusion.dev/helix-headless/icon/root`, registers none: a page that imports
- * it and calls `registerIcons` with the glyphs it names ships those and no
- * others. `registerIconLibrary` resolves names under a prefix of your own,
+ * **A name is looked up in a registry.** The family's entry registers the
+ * whole set, so any name in it draws, and `icon/all` registers the same set.
+ * The element's own entry, `@fusion.dev/helix-headless/icon/root`, registers
+ * none: a page that imports it and calls `registerIcons` with the glyphs it
+ * names ships those and no others. `registerIconLibrary` resolves names under a prefix of your own,
  * such as `lucide:camera`, at once or later, and the element fires `load` when
  * a glyph that came later is drawn. A glyph registered after the element
  * rendered is drawn then.
@@ -98,10 +95,12 @@ export declare class HelixHeadlessIcon extends HelixElement {
      * The name of the icon in the Helix set.
      *
      * **A lookup, and the reason both this and `icon` exist.** A name is a string,
-     * so it is what markup can carry, and resolving one means an index that no
-     * bundler can shake. The family's entry indexes a small set, `icon/all`
-     * indexes the whole set at 15 kB, and `icon/root` indexes nothing, for a
-     * page that registers the glyphs it names or hands over the value instead.
+     * so it is what markup can carry, and resolving one means an index of the
+     * whole set that no bundler can shake: 15 kB for a consumer who renders one
+     * mark. An attribute is the only thing an HTML author can write, and that is
+     * worth the index; a consumer who would rather not pay it imports the
+     * element from `icon/root` and registers the glyphs it names, or hands over
+     * the value instead.
      *
      * A name written `prefix:name` asks the library registered under that
      * prefix.
@@ -152,12 +151,6 @@ export declare class HelixHeadlessIcon extends HelixElement {
     protected updated(changed: PropertyValues): void;
     /** Hands the drawn `<svg>` to the mutator of the library `name` asks, where it has one. */
     private mutate;
-    /**
-     * Asks the button or link a decorative icon sits in whether it has a name.
-     * Its content is this icon alone where it has none, and the audit says so
-     * once, in a development build only. A Helix button reports its own name.
-     */
-    private auditControl;
     /** The name a report is waiting on the page to settle for, so it is asked once. */
     private pending;
     /**

package/dist/icon/root/icon-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { auditName, customElement, HelixElement, hostAria, MIRROR_RULE, reportRuntime, } from '@fusion.dev/helix-core';
+import { auditIconControl, customElement, HelixElement, hostAria, MIRROR_RULE, reportRuntime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -81,7 +81,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         super.updated(changed);
         if (this.drawn !== undefined) {
             this.mutate();
-            this.auditControl();
+            auditIconControl(this, this.label);
         }
         const asked = this.asked;
         if (this.arrived === asked && this.drawn !== undefined) {
@@ -105,16 +105,6 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
             mutator(svg);
         }
     }
-    auditControl() {
-        if (this.label !== '' || this.hasAttribute('aria-label')) {
-            return;
-        }
-        const control = this.closest('a[href], button, summary, [role="button"], [role="link"]');
-        if (control) {
-            auditName(control, () => null, `Its only content is <${this.localName}>, which is decorative: give the icon a \`label\`, or the control an \`aria-label\`.`, () => (control.textContent ?? '').trim() !== '' ||
-                control.querySelector('[alt]:not([alt=""]), [aria-label]:not([aria-label=""])') !== null);
-        }
-    }
     reportMissing() {
         const asked = this.pending;
         this.pending = '';
@@ -127,10 +117,8 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
             kind: 'unknown-icon',
             message: this.src === ''
                 ? `<${this.localName} name="${asked}"> names no registered icon, so it draws ` +
-                    `nothing. For a glyph of the Helix set, import '${this.localName.startsWith('helix-headless-')
-                        ? '@fusion.dev/helix-headless'
-                        : '@fusion.dev/helix'}/icon/all', which registers every one. Otherwise check the name, or register ` +
-                    'the glyph with `registerIcons`.'
+                    'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
+                    'and pass it as `icon`.'
                 : `<${this.localName} src="${asked}"> could not be fetched as an SVG file, so it ` +
                     'draws nothing. Check the URL, and that the file is an `<svg>`.',
             tag: this.localName,

package/dist/icon/set.js

@@ -1,17 +1,3 @@
-import { arrowLeft, arrowRight, caretDown, caretLeft, caretRight, caretUp, check, info, magnifyingGlass, minus, plus, warning, x, } from '@fusion.dev/helix-icons';
+import { icons } from '@fusion.dev/helix-icons';
 import { registerIcons } from './registry.js';
-registerIcons([
-    arrowLeft,
-    arrowRight,
-    caretDown,
-    caretLeft,
-    caretRight,
-    caretUp,
-    check,
-    info,
-    magnifyingGlass,
-    minus,
-    plus,
-    warning,
-    x,
-]);
+registerIcons(icons);

package/dist/index.d.ts

@@ -50,10 +50,11 @@ export * from './filter-input/menu/index.js';
 export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './heatmap/index.js';
-export * from './icon/all/index.js';
+export * from './icon/index.js';
 export * from './icon-button/index.js';
 export * from './image/index.js';
 export * from './input/index.js';
+export * from './isometric-heatmap/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
 export * from './lightbox/index.js';

package/dist/index.js

@@ -41,10 +41,11 @@ export * from './filter-input/menu/index.js';
 export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './heatmap/index.js';
-export * from './icon/all/index.js';
+export * from './icon/index.js';
 export * from './icon-button/index.js';
 export * from './image/index.js';
 export * from './input/index.js';
+export * from './isometric-heatmap/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
 export * from './lightbox/index.js';

package/dist/isometric-heatmap/index.d.ts

@@ -0,0 +1 @@
+export { HelixHeadlessIsometricHeatmap } from './root/isometric-heatmap-root.js';

package/dist/isometric-heatmap/index.js

@@ -0,0 +1 @@
+export { HelixHeadlessIsometricHeatmap } from './root/isometric-heatmap-root.js';

package/dist/isometric-heatmap/projection.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Where each reading of an isometric heatmap stands, as SVG path data.
+ *
+ * Kept apart from the element because it is arithmetic a picture hides: a face
+ * drawn in the wrong order is covered by the prism it should cover, and a
+ * height off by one reading's share still looks like a relief.
+ *
+ * **The units are cells.** A step along a column or a row is one cell, and a
+ * prism's height is in the same unit, so the drawing scales as a whole through
+ * the `viewBox` and a server can write it with no width to measure.
+ */
+/** How far across the page one step along either axis goes: the cosine of 30 degrees. */
+export declare const ACROSS: number;
+/** A point on the page, in cells. */
+export interface Point {
+    x: number;
+    y: number;
+}
+/** One reading drawn as a prism: three visible faces, as path data. */
+export interface Prism {
+    /** The reading's place among those drawn. */
+    index: number;
+    /** The face toward the next row, drawn at the lower left. */
+    left: string;
+    /** The middle of the top face, which is where the tooltip points. */
+    peak: Point;
+    /** The face toward the next column, drawn at the lower right. */
+    right: string;
+    /** The face the reading's tone is painted on. */
+    top: string;
+}
+/** Every prism, and the box they fit in. */
+export interface Relief {
+    /** The box every face fits in, in cells: its left, top, width, and height. */
+    box: {
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    };
+    /** In the order they are painted, which is the order of the readings. */
+    prisms: Prism[];
+}
+/**
+ * Each reading's height, from zero, as a share of the highest reading times
+ * `tallest`.
+ *
+ * **From zero, because the height is the value.** A height measured from the
+ * lowest reading would make a day of 9 against a day of 10 look like nothing
+ * against something. A blank reading, a zero, and a negative one stand at zero,
+ * a prism having nothing below the floor to show.
+ */
+export declare const heightsOf: (values: readonly (number | undefined)[], highest: number, tallest: number) => number[];
+/** The highest positive reading, or zero where there is none. */
+export declare const highestOf: (values: readonly (number | undefined)[]) => number;
+/**
+ * Every reading as a prism, filling down each column of `rows` and then
+ * across, as the flat heatmap does.
+ *
+ * **Columns run down to the right and rows down to the left, so the order of
+ * the readings is the order to paint them in.** A prism can only cover the
+ * neighbors behind it, which are the one before it in its column and the one in
+ * the same row of the column before, and both come earlier in the table. With
+ * the axes the other way round, the newest column would stand at the back and
+ * every tall reading in front of it would hide it.
+ *
+ * `footprint` is how much of its cell a prism covers along each edge, so `1`
+ * leaves no gap between neighbors.
+ */
+export declare const reliefOf: (heights: readonly number[], rows: number, footprint: number) => Relief;

package/dist/isometric-heatmap/projection.js

@@ -0,0 +1,49 @@
+export const ACROSS = Math.sqrt(3) / 2;
+export const heightsOf = (values, highest, tallest) => values.map((value) => highest > 0 && value !== undefined && value > 0
+    ? (Math.min(value, highest) / highest) * tallest
+    : 0);
+export const highestOf = (values) => values.reduce((high, value) => (value !== undefined && value > high ? value : high), 0);
+const short = (value) => String(Math.round(value * 1000) / 1000 || 0);
+const at = (column, row, height) => ({
+    x: (column - row) * ACROSS,
+    y: (column + row) / 2 - height,
+});
+const path = (points) => `M${points.map((point) => `${short(point.x)} ${short(point.y)}`).join('L')}Z`;
+export const reliefOf = (heights, rows, footprint) => {
+    const count = Math.max(1, Math.floor(rows) || 1);
+    const inset = (1 - Math.min(1, Math.max(0, footprint))) / 2;
+    let left = Number.POSITIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    let top = Number.POSITIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    const prisms = heights.map((height, index) => {
+        const column = Math.floor(index / count);
+        const row = index % count;
+        const near = column + inset;
+        const far = column + 1 - inset;
+        const start = row + inset;
+        const end = row + 1 - inset;
+        const back = at(near, start, height);
+        const across = at(far, start, height);
+        const front = at(far, end, height);
+        const down = at(near, end, height);
+        const acrossFloor = at(far, start, 0);
+        const frontFloor = at(far, end, 0);
+        const downFloor = at(near, end, 0);
+        left = Math.min(left, down.x);
+        right = Math.max(right, across.x);
+        top = Math.min(top, back.y);
+        bottom = Math.max(bottom, frontFloor.y);
+        return {
+            index,
+            left: path([down, front, frontFloor, downFloor]),
+            peak: at(column + 0.5, row + 0.5, height),
+            right: path([front, across, acrossFloor, frontFloor]),
+            top: path([back, across, front, down]),
+        };
+    });
+    if (prisms.length === 0) {
+        return { box: { height: 0, width: 0, x: 0, y: 0 }, prisms };
+    }
+    return { box: { height: bottom - top, width: right - left, x: left, y: top }, prisms };
+};