@fusion.dev/helix-headless 0.185.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/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 };
+};

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

@@ -0,0 +1,118 @@
+import { nothing, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
+/**
+ * @summary A heatmap drawn as a relief, where each reading stands as tall as its value.
+ *
+ * @description
+ * The same strip as `Heatmap`, seen from above at an angle. Each reading is a
+ * prism: its top face takes the cell's tone, and its height repeats the value,
+ * measured from zero against the highest reading in the table. `rows="7"`
+ * makes a contribution graph, with each week a column running down to the
+ * right.
+ *
+ * **The height says what the tone says.** Read the exact value from the tooltip
+ * or the table, and compare readings by tone. A tall reading at the front can
+ * hide a short one behind it, so the newest column stands at the front, where
+ * nothing covers it.
+ *
+ * **Everything else is `Heatmap`.** The table named by `for`, the tones and
+ * thresholds, the keys, the tooltip, the overview, `selection-mode`, and the
+ * events all work as they do there. The class extends the headless heatmap,
+ * and its own entry point carries the drawing, so a page using only `Heatmap`
+ * loads none of it.
+ *
+ * **`flat` lays every prism down** at no height, which leaves the tones on a
+ * plane at the same angle.
+ *
+ * **`gap` and `min-cell` set the smallest cell.** The drawing scales as a
+ * whole, so a wider box draws larger cells and the gap grows with them. A box
+ * too narrow for every column at `min-cell` draws the newest that fit.
+ *
+ * **The drawing is SVG and holds still.** It scales with its box through its
+ * `viewBox`, needs no WebGL, and has no motion to pause.
+ *
+ * **Keyboard.** The keys are `Heatmap`'s. Down moves to the next reading in a
+ * column, drawn down to the left, and Right to the same reading in the next
+ * column, drawn down to the right.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the strip and shows the first cell. |
+ * | Down, Up | Moves to the next or the previous cell. |
+ * | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
+ * | Home, End | Moves to the first or the last cell. |
+ * | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
+ * | Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |
+ * | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
+ * | Escape | Puts the cell's tooltip away. |
+ *
+ * @since 0.185.0
+ * @status experimental
+ * @category charts
+ * @aliases Isometric chart, 3D heatmap, Relief chart, Isometric contribution graph
+ * @documentation https://fusion.dev/helix/components/isometric-heatmap
+ *
+ * @csspart cell - One reading: a group holding its three faces.
+ * @csspart drawing - The SVG every prism is drawn in. It is mirrored on a right-to-left page.
+ * @csspart left-face - The face of a prism toward the next row, drawn at its lower left.
+ * @csspart right-face - The face of a prism toward the next column, drawn at its lower right.
+ * @csspart row - A column of prisms, which a grid reads as a row, under `selection-mode`.
+ * @csspart strip - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
+ * @csspart top-face - The top of a prism, which carries the reading's tone.
+ *
+ * @cssproperty --isometric-heatmap-span - How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
+ */
+export declare class HelixHeadlessIsometricHeatmap extends HelixHeadlessHeatmap {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-isometric-heatmap': { emptyText: 'Keine Werte' } })`.
+     */
+    static words: string;
+    protected static markRules: string[];
+    /**
+     * Draws every prism at no height, so the tones lie on a plane.
+     */
+    flat: boolean;
+    /**
+     * How tall the highest reading stands, in cells. Every other reading stands
+     * at its share of it.
+     */
+    relief: number;
+    /** The prisms drawn on the last render, which the tooltip is placed against. */
+    private shown;
+    /**
+     * How many readings fit, as whole columns, newest kept.
+     *
+     * The drawing runs at 30 degrees, so a cell takes `ACROSS` of its width, and
+     * the rows run across too: a strip `rows` deep starts that many cells to the
+     * left of its first column.
+     */
+    protected get room(): number;
+    /** The drawn readings as prisms, standing against the highest reading in the table. */
+    private drawnRelief;
+    protected render(): TemplateResult;
+    /**
+     * One reading as a prism. The sides come first, so the top face is painted
+     * over the edge they share with it.
+     *
+     * Under `selection-mode` the prism is a `gridcell` named by its row in the
+     * table and saying whether it is selected, as the flat strip's cell is.
+     */
+    private renderPrism;
+    /**
+     * The prisms as a grid's rows, one for each column of the strip, which is
+     * also the order they are painted in.
+     */
+    private renderPrismRows;
+    /**
+     * The bubble over the top face of the reading the pointer or the keys rest
+     * on, placed as a share of the drawing, which the strip's box matches.
+     */
+    protected renderTooltip(grid?: boolean): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-isometric-heatmap': HelixHeadlessIsometricHeatmap;
+    }
+}