@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/format-date/root/format-date-root.js

@@ -4,9 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, elapsedTime, HelixElement, subscribe } from '@fusion.dev/helix-core';
+import { customElement, elapsedTime, HelixElement, relativeTime, subscribe, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { formatOptions } from '../options.js';
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement {
     constructor() {
         super(...arguments);
@@ -18,6 +20,9 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.stopTicking = undefined;
         this.watching = undefined;
     }
+    get dateOnly() {
+        return DATE_ONLY.test((this.date || this.written).trim());
+    }
     get moment() {
         const source = this.date || this.written;
         if (source === '') {
@@ -27,35 +32,33 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     }
     get options() {
-        const asked = {};
-        if (this.day) {
-            asked.day = this.day;
-        }
-        if (this.hour) {
-            asked.hour = this.hour;
-        }
-        if (this.minute) {
-            asked.minute = this.minute;
-        }
-        if (this.month) {
-            asked.month = this.month;
-        }
-        if (this.second) {
-            asked.second = this.second;
-        }
-        if (this.timeZone) {
-            asked.timeZone = this.timeZone;
-        }
-        if (this.timeZoneName) {
-            asked.timeZoneName = this.timeZoneName;
-        }
-        if (this.weekday) {
-            asked.weekday = this.weekday;
-        }
-        if (this.year) {
-            asked.year = this.year;
-        }
-        return asked;
+        return formatOptions({
+            dateOnly: this.dateOnly,
+            dateStyle: this.dateStyle,
+            day: this.day,
+            era: this.era,
+            hour: this.hour,
+            hourCycle: this.hourCycle,
+            minute: this.minute,
+            month: this.month,
+            second: this.second,
+            timeStyle: this.timeStyle,
+            timeZone: this.timeZone,
+            timeZoneName: this.timeZoneName,
+            weekday: this.weekday,
+            year: this.year,
+        });
+    }
+    get reading() {
+        return this.elapsed || this.relative !== undefined;
+    }
+    readingAt(moment, now) {
+        return this.elapsed
+            ? elapsedTime(this.locale)(moment, now)
+            : relativeTime(this.locale, {
+                numeric: this.numeric ?? 'auto',
+                style: this.relative ?? 'long',
+            })(moment, now);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -81,7 +84,11 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         if (this.childrenKnown) {
             this.read();
         }
-        if (changed.has('date') || changed.has('elapsed') || changed.has('locale')) {
+        if (changed.has('date') ||
+            changed.has('elapsed') ||
+            changed.has('locale') ||
+            changed.has('numeric') ||
+            changed.has('relative')) {
             this.tick();
         }
     }
@@ -104,12 +111,12 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.stopTicking?.();
         this.stopTicking = undefined;
         const moment = this.moment;
-        if (!moment || !this.elapsed) {
+        if (!moment || !this.reading) {
             return;
         }
         const now = new Date();
         this.clock = now.getTime();
-        const { next } = elapsedTime(this.locale)(moment, now);
+        const { next } = this.readingAt(moment, now);
         if (!Number.isFinite(next) || !this.isConnected) {
             return;
         }
@@ -120,24 +127,49 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         if (!moment) {
             return nothing;
         }
-        const text = this.elapsed
-            ? elapsedTime(this.locale)(moment, new Date(this.clock ?? Date.now())).text
-            : new Intl.DateTimeFormat(this.locale || undefined, this.options).format(moment);
-        return html `<time part="time" datetime=${moment.toISOString()}>${text}</time>`;
+        const datetime = this.dateOnly ? (this.date || this.written).trim() : moment.toISOString();
+        if (!this.reading) {
+            const text = new Intl.DateTimeFormat(this.locale || undefined, this.options).format(moment);
+            return html `<time part="time" datetime=${datetime}>${text}</time>`;
+        }
+        const now = new Date(this.clock ?? Date.now());
+        const zone = this.timeZone || (this.dateOnly ? 'UTC' : undefined);
+        const whole = new Intl.DateTimeFormat(this.locale || undefined, {
+            dateStyle: 'long',
+            ...(this.dateOnly ? {} : { timeStyle: 'short' }),
+            ...(this.hourCycle ? { hourCycle: this.hourCycle } : {}),
+            ...(zone ? { timeZone: zone } : {}),
+        }).format(moment);
+        const spoken = relativeTime(this.locale, { numeric: this.numeric ?? 'auto' })(moment, now).text;
+        return html `<time
+      part="time"
+      datetime=${datetime}
+      aria-label=${spoken}
+      title=${whole}
+    >${this.readingAt(moment, now).text}</time>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "date", void 0);
+__decorate([
+    property({ attribute: 'date-style' })
+], HelixHeadlessFormatDate.prototype, "dateStyle", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "day", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "elapsed", void 0);
+__decorate([
+    property()
+], HelixHeadlessFormatDate.prototype, "era", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "hour", void 0);
+__decorate([
+    property({ attribute: 'hour-cycle' })
+], HelixHeadlessFormatDate.prototype, "hourCycle", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "locale", void 0);
@@ -147,9 +179,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "month", void 0);
+__decorate([
+    property()
+], HelixHeadlessFormatDate.prototype, "numeric", void 0);
+__decorate([
+    property()
+], HelixHeadlessFormatDate.prototype, "relative", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "second", void 0);
+__decorate([
+    property({ attribute: 'time-style' })
+], HelixHeadlessFormatDate.prototype, "timeStyle", void 0);
 __decorate([
     property({ attribute: 'time-zone' })
 ], HelixHeadlessFormatDate.prototype, "timeZone", void 0);

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

@@ -232,16 +232,37 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     /**
      * Moves the keyboard to a row, and the list to show it.
      *
-     * **Scrolled by the row's own box where it is drawn, and by the estimate
-     * where it is not**, so a jump to the end of ten thousand notes lands there
-     * and the row is drawn by the update the scroll asks for.
+     * **The row the keys are on is always drawn**, beside the window where it is
+     * outside it, so `aria-activedescendant` names a row that exists. The list
+     * then scrolls to it, see `revealCursor`.
      */
     private moveTo;
+    /**
+     * Brings the cursor's row into the list's box.
+     *
+     * **By the row's own box once it is in the window, and by the window
+     * otherwise.** The offset of a row that has not been drawn is a guess at its
+     * height, and a guess at 32 pixels was where End and Page Down sent the list
+     * when rows were taller: the list landed far from the row, which then was
+     * not drawn. So the window is moved toward the row, the rows it draws are
+     * measured, and the next try starts from there, a few times at most.
+     */
+    private revealCursor;
+    /** The cursor's row, where it is outside the window and drawn beside it. */
+    private get keptRow();
     /**
      * The keys in the list. **Kept from the frame**, whose arrows pan the
      * drawing: a reader moving through the list was moving the graph under it.
      */
     private readonly handleListKeydown;
+    /** What has been typed toward a note's name, and when the last letter came. */
+    private typed;
+    /**
+     * Moves to the next note whose name starts with what was typed, as a
+     * listbox does. Letters within half a second of each other run together,
+     * and a repeated letter steps through the names that start with it.
+     */
+    private typeahead;
     /**
      * The search field's keys, which belong to the field and never pan the
      * graph. Escape empties a search that has words in it, and passes through

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

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, scrollItemIntoView, VirtualizeController, } 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';
+import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { adjacencyOf, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
 const PAGE = 10;
@@ -65,8 +66,15 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 event.preventDefault();
                 event.stopPropagation();
                 this.choose(this.cursor);
+                return;
+            }
+            if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.typeahead(event.key);
             }
         };
+        this.typed = { at: 0, text: '' };
         this.handleSearchKeydown = (event) => {
             if (event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -236,18 +244,50 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
     moveTo(index) {
         const last = this.entries.length - 1;
         this.cursor = Math.min(Math.max(index, 0), Math.max(last, 0));
+        void this.updateComplete.then(() => this.revealCursor());
+    }
+    revealCursor(attempts = 8) {
         const list = this.partNamed('list');
         if (!list) {
             return;
         }
-        const row = this.renderRoot.querySelector?.(`[data-index="${this.cursor}"]`);
-        if (row) {
-            row.scrollIntoView?.({ block: 'nearest' });
+        const { first, last } = this.virtualize.window;
+        if (this.cursor >= first && this.cursor < last) {
+            const row = this.renderRoot.querySelector?.(`[data-index="${this.cursor}"]`);
+            if (row) {
+                scrollItemIntoView(row, { scroller: list });
+            }
+            return;
         }
-        else {
-            list.scrollTop = this.cursor * 32;
+        if (attempts === 0) {
+            return;
         }
+        this.virtualize.reveal(this.cursor);
         this.virtualize.measure();
+        void this.updateComplete.then(() => this.revealCursor(attempts - 1));
+    }
+    get keptRow() {
+        const { first, last } = this.virtualize.window;
+        const cursor = this.cursor;
+        return this.entries.length > 0 && (cursor < first || cursor >= last) ? cursor : undefined;
+    }
+    typeahead(letter) {
+        const now = Date.now();
+        const text = now - this.typed.at < 500 ? this.typed.text + letter : letter;
+        this.typed = { at: now, text };
+        const wanted = text.toLocaleLowerCase();
+        const repeated = [...wanted].every((one) => one === wanted[0]);
+        const prefix = repeated ? (wanted[0] ?? '') : wanted;
+        const entries = this.entries;
+        const start = repeated ? this.cursor + 1 : this.cursor;
+        for (let step = 0; step < entries.length; step += 1) {
+            const at = (start + step) % entries.length;
+            const entry = entries[at];
+            if (entry && nameOf(entry.node).toLocaleLowerCase().startsWith(prefix)) {
+                this.moveTo(at);
+                return;
+            }
+        }
     }
     togglePanel(open = !this.panelOpen) {
         const inside = this.panelOpen && this.partNamed('panel')?.contains(this.shadowRoot?.activeElement ?? null);
@@ -290,8 +330,18 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
     renderRows() {
         const { first, last } = this.virtualize.window;
         const total = this.entries.length;
-        return this.entries.slice(first, last).map((entry, offset) => {
-            const index = first + offset;
+        const indices = Array.from({ length: Math.max(0, Math.min(last, total) - first) }, (_, at) => first + at);
+        const kept = this.keptRow;
+        if (kept !== undefined && kept < total) {
+            if (kept < first) {
+                indices.unshift(kept);
+            }
+            else {
+                indices.push(kept);
+            }
+        }
+        return html `${repeat(indices, (index) => index, (index) => {
+            const entry = this.entries[index];
             const relation = this.relationText(entry);
             const chosen = entry.relation === 'selected';
             return html `<div
@@ -311,10 +361,14 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         <span part="note-name">${nameOf(entry.node)}</span>
         ${relation ? html `<span part="note-relation" aria-hidden="true">${relation}</span>` : nothing}
       </div>`;
-        });
+        })}`;
     }
     render() {
-        const { after, before } = this.virtualize.window;
+        const window = this.virtualize.window;
+        const kept = this.keptRow;
+        const room = kept === undefined ? 0 : this.virtualize.sizeOf(kept);
+        const before = Math.max(0, window.before - (kept !== undefined && kept < window.first ? room : 0));
+        const after = Math.max(0, window.after - (kept !== undefined && kept >= window.last ? room : 0));
         const cursor = this.entries.length > 0 ? `note-${this.cursor}` : nothing;
         return html `<div
       part="region"
@@ -368,9 +422,9 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             @keydown=${this.handleListKeydown}
             @scroll=${() => this.virtualize.measure()}
           >
-            <div part="before" style="block-size: ${before}px"></div>
+            <div part="before" role="presentation" style="block-size: ${before}px"></div>
             ${this.renderRows()}
-            <div part="after" style="block-size: ${after}px"></div>
+            <div part="after" role="presentation" style="block-size: ${after}px"></div>
           </div>
         </div>
       </div>

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

@@ -10,7 +10,8 @@
 /** A reading, reduced to what the bucketing needs. */
 export interface Reading {
     tone?: string | undefined;
-    value: number;
+    /** The number, or undefined for a row whose cell was blank. */
+    value: number | undefined;
 }
 /**
  * The tone for one reading, from its own `data-tone` or from the thresholds.

package/dist/heatmap/root/buckets.js

@@ -6,8 +6,12 @@ export const toneOf = (reading, thresholds, tones) => {
         return undefined;
     }
     let chosen;
+    const value = reading.value;
+    if (value === undefined) {
+        return undefined;
+    }
     for (const [index, bound] of thresholds.entries()) {
-        if (reading.value >= bound) {
+        if (value >= bound) {
             chosen = tones[index] ?? chosen;
         }
     }

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
 declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
@@ -26,6 +26,12 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * your own stylesheet defines that property. The headless tier does not use
  * `var(--helix-color-*)`.
  *
+ * **The strip is read by key.** It takes focus once it has cells. The up and
+ * down arrows move a cell, the left and right arrows move a column, which is a
+ * week with `rows="7"`, and Home and End go to the first and the last. The
+ * tooltip follows, the `live` part says the cell's row in words, and Escape
+ * puts the tooltip away.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -39,12 +45,14 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @event {HelixResizeEvent} helix-resize - Fired when the number of cells drawn changes, with the new number.
  *
  * @csspart cell - One reading.
+ * @csspart cell-active - The cell the pointer or the keys rest on. Set alongside `cell`.
  * @csspart empty - Shown when the table has no readings. It stays hidden until the table can be read: on the server and during hydration, there is no document to resolve `for` in.
  * @csspart end - The trailing slot's box.
  * @csspart footer - The three-slot row under the strip.
+ * @csspart live - The readout: a polite live region that says the cell the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart start - The leading slot's box.
- * @csspart strip - The grid of cells.
+ * @csspart strip - The grid of cells, 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 summary - The middle slot's box.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
@@ -55,6 +63,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the series keys rest on, in the charts whose readings hold several series. A strip draws one, so it is never set here.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
@@ -184,18 +193,36 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     private metrics;
     /**
-     * Which drawn cell the pointer is on, as an index into `drawn`, or -1 for
-     * none.
+     * Carries a host `aria-labelledby` and `aria-describedby` to the strip, the
+     * image a reader lands on. The host is a generic around it.
+     */
+    protected readonly aria: AriaForwardController;
+    /**
+     * Hears an `aria-label` written on the element, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * belongs to the platform.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called by the browser when an observed attribute changes. A new
+     * `aria-label` asks for an update, because it names the strip.
      */
-    private hovered;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     private observer;
     private announced;
     /**
-     * Every reading in the table, oldest first, as the table is written.
+     * Every row in the table, oldest first, as the table is written, with its
+     * reading where the row has one.
      *
      * **Not `readings`, which the mixin already has and which means a count.**
      * Two members of the same name meaning a number and an array is the kind of
      * collision that type-checks in one direction and reads wrong in both.
+     *
+     * **One cell per row, and a blank row is a cell with no reading.** Taken from
+     * the series alone, a blank dropped its day and every day after it moved one
+     * cell along, while the tooltip still counted rows and named the day beside
+     * the one under the pointer.
      */
     private get points();
     /**
@@ -260,9 +287,21 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * keep the oldest is answering a question nobody asked.
      */
     private get drawn();
+    /**
+     * The number of cells drawn, which the keys walk.
+     *
+     * The mixin counts the table's rows, and a strip too narrow for all of them
+     * draws the newest, so a key stepping by rows would walk off the drawing.
+     */
+    get readings(): number;
+    /**
+     * Tells the keys how many days stand in a column, so the up and down arrows
+     * move a day and the across pair a week. Here rather than in `updated`, for
+     * the reason `BarChart` gives: SSR calls this one.
+     */
+    protected willUpdate(changed: PropertyValues<this>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues): void;
     /**
      * Says on the footer whether any of its three slots holds anything.
      *
@@ -303,8 +342,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      *
      * `pointerover` on the strip rather than a listener per cell: the event
      * bubbles, so one handler covers however many cells there are, and unlike
-     * `mouseover` it is delivered for a pen and for the touch that follows a long
-     * press.
+     * `mouseover` it is delivered for a pen.
      */
     private readonly onPointerOver;
     private readonly onPointerLeave;

package/dist/heatmap/root/heatmap-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, hostAria, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -20,23 +20,43 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.tones = '';
         this.width = undefined;
         this.metrics = undefined;
-        this.hovered = -1;
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('strip'),
+        });
         this.observer = undefined;
         this.announced = undefined;
         this.onPointerOver = (event) => {
-            const cell = event.target?.closest?.('[part="cell"]');
+            if (!this.pointer.accepts(event)) {
+                return;
+            }
+            const cell = event.target?.closest?.('[part~="cell"]');
             const index = Number(cell?.getAttribute('data-index') ?? -1);
-            this.hovered = Number.isInteger(index) ? index : -1;
+            this.pointer.set(Number.isInteger(index) ? index : -1);
         };
         this.onPointerLeave = () => {
-            this.hovered = -1;
+            if (!this.pointer.keyed) {
+                this.pointer.set(-1);
+            }
         };
     }
     get visible() {
         return Math.min(this.points.length, this.room);
     }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label') {
+            this.requestUpdate();
+        }
+    }
     get points() {
-        return this.series[0]?.points ?? [];
+        const series = this.series[0];
+        if (!series) {
+            return [];
+        }
+        return byRow(series, this.sourceRows.length).map((point) => point ?? { value: undefined });
     }
     get sourceKnown() {
         if (this.for === '') {
@@ -79,6 +99,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const all = this.points;
         return all.slice(Math.max(0, all.length - this.room));
     }
+    get readings() {
+        return this.drawn.length;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.pointer.grid = this.rowCount;
+    }
     connectedCallback() {
         super.connectedCallback();
         if (typeof ResizeObserver !== 'undefined') {
@@ -96,10 +123,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.observer?.disconnect();
         this.observer = undefined;
     }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label || 'Heatmap', role: 'img' });
-    }
     markEmpty() {
         markRegion(this.renderRoot, 'footer', ['start', 'summary', 'end']);
     }
@@ -126,10 +149,14 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const bounds = writtenNumbers(this.thresholds);
         const palette = writtenList(this.tones);
         const cells = this.drawn;
+        const readable = cells.length > 0;
         return html `<div
+        aria-label=${this.getAttribute?.('aria-label') || this.named || 'Heatmap'}
         part="strip"
         id=${CHART_PLOT}
+        role=${readable ? 'application' : 'img'}
         style="--heatmap-rows: ${this.rowCount}"
+        tabindex=${readable ? '0' : nothing}
         @pointerover=${this.onPointerOver}
         @pointerleave=${this.onPointerLeave}
       >
@@ -137,10 +164,14 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             ? nothing
             : cells.map((reading, index) => {
                 const tone = toneOf(reading, bounds, palette);
+                const active = this.pointer.at === index;
                 return tone === undefined
-                    ? html `<span part="cell" data-index=${index}></span>`
+                    ? html `<span
+                      part="cell${active ? ' cell-active' : ''}"
+                      data-index=${index}
+                    ></span>`
                     : html `<span
-                part="cell"
+                part="cell${active ? ' cell-active' : ''}"
                 data-index=${index}
                 data-tone=${tone}
                 style="--heatmap-tone: var(--heatmap-tone-${tone})"
@@ -156,9 +187,9 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
       </div>`;
     }
     renderTooltip() {
-        const at = this.hovered;
+        const at = this.pointer.at;
         if (at < 0) {
-            return nothing;
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         const offset = this.points.length - this.drawn.length;
         const cell = this.cellPx;
@@ -169,7 +200,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             placement: 'top',
             x: `${column * (cell + gap) + cell / 2}px`,
             y: `${row * (cell + gap)}px`,
-        });
+        }, undefined, this.pointer);
     }
 };
 __decorate([
@@ -196,9 +227,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessHeatmap.prototype, "metrics", void 0);
-__decorate([
-    state()
-], HelixHeadlessHeatmap.prototype, "hovered", void 0);
 HelixHeadlessHeatmap = __decorate([
     customElement('helix-headless-heatmap')
 ], HelixHeadlessHeatmap);

package/dist/icon/index.d.ts

@@ -1 +1,3 @@
+import './set.js';
+export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon } from './registry.js';
 export * from './root/icon-root.js';

package/dist/icon/index.js

@@ -1 +1,3 @@
+import './set.js';
+export { registerIconLibrary, registerIcons, resolveIcon } from './registry.js';
 export * from './root/icon-root.js';