@fusion.dev/helix-headless 0.176.1 → 0.177.1

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

@@ -1,4 +1,4 @@
-import { type GraphSignalDetail, HelixElement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { type GraphSignalDetail, HelixElement, KeyboardNavigationController, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type GraphLink, type GraphNode } from './graph-model.js';
 declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
@@ -22,7 +22,9 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  *
  * Set `legend` to name the groups over the drawing, each a button that shows
  * or hides its notes. `hiddenGroups` holds the groups turned off, and the
- * list holds only what the drawing shows.
+ * list holds only what the drawing shows. The legend is a toolbar and one tab
+ * stop: the arrow keys, Home, End and a group's first letters move between
+ * its buttons, and Space or Enter presses one.
  *
  * `nodes` and `links` are properties, never markup: a graph of ten thousand
  * notes as ten thousand elements would cost what the renderer exists to save.
@@ -75,7 +77,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart gesture-hint - Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
  * @csspart gesture-status - The line shown while a graph with `gestures="activate"` has the gestures.
  * @csspart header - The strip above the graph.
- * @csspart legend - The groups over the drawing, with `legend`, each a button that shows or hides its notes.
+ * @csspart legend - The groups over the drawing, with `legend`: a toolbar of buttons, each showing or hiding its notes, which is one tab stop.
  * @csspart legend-item - One group in the legend, pressed while its notes are shown. Carries `data-tone` where every note in the group has the same tone, which colors the notes over the group's own color.
  * @csspart legend-item-hidden - A group in the legend whose notes are hidden.
  * @csspart legend-swatch - The mark in a group's color, before its name.
@@ -219,6 +221,12 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     searchLabel: string;
     /** How the selected note is described in the list. */
     selectedLabel: string;
+    /**
+     * What screen readers hear after a reader selects a note, in the list or in
+     * the drawing, with `{note}` for its name and `{count}` for how many notes
+     * the list then holds, written with `count-label`.
+     */
+    selectionLabel: string;
     /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
     twoFingerHintLabel: string;
     /** The line shown while the graph, with `gestures="activate"`, has the gestures. */
@@ -263,6 +271,21 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     private asked;
     /** Whether the next change of the list's rows is one a reader asked for by the legend, whose count is then said. */
     private countAsked;
+    /**
+     * The note a reader last asked to select, in the list or in the drawing,
+     * until it is selected: by the frame, or by a page that refused the request
+     * and wrote `active` itself.
+     */
+    private selectionAsked;
+    /** The legend's button that holds its one tab stop, by place: the one a reader was last on, or the first. */
+    private legendStop;
+    /**
+     * The arrow keys, Home, End and typed letters among the legend's buttons,
+     * so a legend of twelve groups is one tab stop, as the `Legend` family's
+     * toolbar is. Only a press that starts on a legend button moves: the frame's
+     * own arrows pan the drawing, and the list's walk the notes.
+     */
+    protected readonly legendKeys: KeyboardNavigationController;
     private readonly virtualize;
     /**
      * @internal The notes the drawing shows, which `connectGraph` reads: those
@@ -343,6 +366,8 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
      * names what every note is, and turning it off empties the graph.
      */
     private renderLegend;
+    /** Asks for a note to be selected, and remembers the ask, so the selection is said once it lands. */
+    requestActive(next: string, cause?: string): boolean;
     /** Selects the note a row names, through the request a page can refuse. */
     private choose;
     /**

package/dist/graph/root/graph-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 { auditName, customElement, formatWords, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, scrollItemIntoView, scrollRoom, Typeahead, VirtualizeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { auditName, customElement, focusItemOf, formatWords, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, KeyboardNavigationController, MixinControllerActive, MixinViewport, scrollItemIntoView, scrollRoom, Typeahead, typeaheadBy, 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';
@@ -39,6 +39,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.roleLabel = 'graph';
         this.searchLabel = 'Find a note';
         this.selectedLabel = 'Selected';
+        this.selectionLabel = '{note}, selected. {count}';
         this.twoFingerHintLabel = 'Use two fingers to move the graph';
         this.usingLabel = 'Using the graph. Press Escape to scroll the page again.';
         this.wheelHintLabel = 'Use {key} and scroll to zoom the graph';
@@ -54,6 +55,15 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.whole = false;
         this.said = '';
         this.countAsked = false;
+        this.legendStop = 0;
+        this.legendKeys = new KeyboardNavigationController(this, {
+            items: () => [
+                ...(this.renderRoot?.querySelectorAll?.('[part~="legend-item"]') ?? []),
+            ].map((button) => focusItemOf(button, { words: button.textContent?.trim() ?? '' })),
+            origin: 'focus',
+            selects: () => false,
+            typeahead: typeaheadBy((item) => item.words ?? ''),
+        });
         this.virtualize = new VirtualizeController(this, {
             container: () => this.partNamed('list'),
             count: () => this.entries.length,
@@ -208,6 +218,13 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 this.countAsked = false;
                 this.say(this.countText());
             }
+            if (changed.has('active') && this.active !== '' && this.active === this.selectionAsked) {
+                this.selectionAsked = undefined;
+                const chosen = this.nodes.find((node) => node.id === this.active);
+                if (chosen) {
+                    this.say(formatWords(this, 'selectionLabel', { count: this.countText(), note: nameOf(chosen) }));
+                }
+            }
         }
     }
     updated(changed) {
@@ -267,21 +284,32 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             return nothing;
         }
         const hidden = new Set(this.hiddenGroups);
-        return html `<div part="legend" role="group" aria-label=${this.legendLabel}>
-      ${this.groups.map(({ name, tone }) => {
+        const stop = Math.min(this.legendStop, this.groups.length - 1);
+        return html `<div part="legend" role="toolbar" aria-label=${this.legendLabel}>
+      ${this.groups.map(({ name, tone }, index) => {
             const shown = !hidden.has(name);
             return html `<button
           part="legend-item${shown ? '' : ' legend-item-hidden'}"
           type="button"
+          tabindex=${index === stop ? '0' : '-1'}
           aria-pressed=${shown ? 'true' : 'false'}
           data-tone=${tone ?? nothing}
           @click=${() => this.toggleGroup(name)}
+          @focus=${() => {
+                this.legendStop = index;
+            }}
         >
           <span part="legend-swatch" aria-hidden="true"></span>${name}
         </button>`;
         })}
     </div>`;
     }
+    requestActive(next, cause) {
+        if (next !== this.active) {
+            this.selectionAsked = next;
+        }
+        return super.requestActive(next, cause);
+    }
     choose(index) {
         const entry = this.entries[index];
         if (entry) {
@@ -583,6 +611,10 @@ __decorate([
     words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessGraph.prototype, "selectedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'selection-label' })
+], HelixHeadlessGraph.prototype, "selectionLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'two-finger-hint-label' })
@@ -615,6 +647,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessGraph.prototype, "said", void 0);
+__decorate([
+    state()
+], HelixHeadlessGraph.prototype, "legendStop", void 0);
 HelixHeadlessGraph = __decorate([
     customElement('helix-headless-graph')
 ], HelixHeadlessGraph);

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

@@ -44,11 +44,25 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * `multiple` any number. Space, Enter or a press selects the cell the keys or
  * the pointer rest on, or lets it go, and under `multiple` Shift with an arrow,
  * Home, End, PageUp or PageDown takes in every cell from the last one pressed
- * to where the key went. `value` holds the selected days, by the names their
- * rows have in the table, separated by commas. A change asks with
+ * to where the key went. `value` holds the selected days, separated by
+ * commas: each by its row's `<time datetime>`, such as `2026-06-11`, or by
+ * its row's name where the row carries no date. A change asks with
  * `helix-before-change` and tells with `change`, and the `selection` part says
  * how many are selected, in `selection-label`.
  *
+ * **Keyboard.** The strip is one tab stop once it has cells.
+ *
+ * | 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 | Selects the cell, 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.1.0
  * @status stable
  * @category charts
@@ -76,6 +90,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart start - The leading slot's box.
  * @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 table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -107,6 +122,9 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @cssproperty --heatmap-tone-primary - The color of the `primary` tone.
  * @cssproperty --heatmap-tone-success - The color of the `success` tone, named in `tones` or in `data-tone`.
  * @cssproperty --heatmap-tone-warning - The color of the `warning` tone.
+ *
+ * @cssstate active - While a cell is shown, under the pointer or the keys, with its tooltip open.
+ * @cssstate empty - While the `empty` part stands in place of the cells.
  */
 export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     /**
@@ -220,8 +238,9 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     totalLabel: string;
     /**
-     * The selected cells, by the names their rows have in the table, such as
-     * `2026-06-11`, separated by commas.
+     * The selected cells, separated by commas: each by the date its row's
+     * header carries in a `<time datetime>`, such as `2026-06-11`, or by the
+     * header's words where it carries none.
      *
      * Set it to start with cells selected. Written by a press or a key under
      * `selection-mode`.
@@ -279,7 +298,11 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     private anchor;
     /** The region a change of selection is said in, rendered from the first change. */
     private readonly status;
-    /** The name each drawn cell stands for in `value`: its row's name in the table. */
+    /**
+     * 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;
     /**
      * Moves `value` to `next`, asking first: `helix-before-change` carries it,

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

@@ -82,7 +82,10 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     keysOf(cells) {
         const offset = this.points.length - cells.length;
         const rows = this.sourceRows;
-        return cells.map((_, index) => rows[offset + index]?.label ?? '');
+        return cells.map((_, index) => {
+            const row = rows[offset + index];
+            return row?.when ?? row?.label ?? '';
+        });
     }
     choose(next) {
         if (next === this.value) {
@@ -181,6 +184,8 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         super.updated(changed);
         this.markEmpty();
         this.measure();
+        this.toggleState('active', this.pointer.at >= 0);
+        this.toggleState('empty', this.drawn.length === 0 && this.sourceKnown);
         const showing = this.visible;
         const written = showing > 0 ? String(showing) : null;
         if (this.getAttribute('visible') !== written) {
@@ -242,7 +247,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         <span part="end"><slot name="end"></slot></span>
       </div>${readable ? this.renderOverview(cells) : nothing}${this.status.spoken
             ? html `<span part="selection" role="status">${this.status.said}</span>`
-            : nothing}`;
+            : nothing}${this.renderTable()}`;
     }
     renderOverview(cells) {
         const rows = this.sourceRows;

package/dist/line-chart/root/line-chart-root.d.ts

@@ -55,6 +55,18 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * there until readings arrive. The `empty` and `loading` slots take markup in
  * their place, such as a link to add the first reading.
  *
+ * **Keyboard.** The plot is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the plot and shows the first reading. |
+ * | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |
+ * | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |
+ * | Home, End | Moves to the first or the last reading. |
+ * | Page Down, Page Up | Moves a tenth of the readings on or back. |
+ * | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
+ * | Escape | Puts the reading and its tooltip away. |
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -83,9 +95,10 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart marker - The mark on one reading, under `markers`, and on a reading with a blank on either side. Placed with `inset-inline-start` and `inset-block-start`, and carries its series color as `--chart-series`.
  * @csspart marker-lone - A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.
- * @csspart plot - The drawing, which takes focus to be read by key.
+ * @csspart plot - The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
  * @csspart summary - The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the lines and areas sit on.
+ * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
  * @csspart terminus - The mark on one series' last reading.
  * @csspart tick - One number on the axis, placed with `inset-block-start` at its level.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
@@ -108,6 +121,10 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @cssproperty --chart-terminus-x - Where a series' last reading sits horizontally, as a percentage. Written by the component.
  * @cssproperty --chart-terminus-y - Where a series' last reading sits vertically, as a percentage. Written by the component.
  * @cssproperty --line-chart-axis - The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis.
+ *
+ * @cssstate active - While a reading is shown, under the pointer or the keys, with its tooltip open.
+ * @cssstate empty - While the `empty` part stands in the plot.
+ * @cssstate loading - While the `loading` part stands in the plot.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
     /**

package/dist/line-chart/root/line-chart-root.js

@@ -59,13 +59,13 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartStat
         const series = this.series;
         const readings = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (readings.length === 0) {
-            return html `<div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>`;
+            return this.renderEmpty();
         }
         const domain = this.range(series);
         const y = linear(domain, [PLOT_HEIGHT, 0]);
         const slot = PLOT_WIDTH / readings.length;
         const x = linear([0, Math.max(readings.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
-        return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}`;
+        return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}${this.renderTable()}`;
     }
     renderAxis(y, domain) {
         return drawValueAxis(domain, (value) => (y(value) / PLOT_HEIGHT) * 100, formatNumbers(wordsLocale(this)), (widest) => `--line-chart-axis: ${widest}ch`);

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

@@ -34,6 +34,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * hidden, and silent, for that many milliseconds, and appears only if the work
  * is still going. While it waits it carries `:state(waiting)`.
  *
+ * **The loader can stand in for what it wraps.** Put the content in the
+ * `content` slot, such as a button or a card, and set `idle` while no work is
+ * in progress. While the work runs, the content keeps its size and is hidden
+ * and inert, and the ring draws over it. While `idle` is set, the loader draws
+ * nothing of its own, has no role, and marks no region busy, so only the
+ * content shows. Clearing `idle` starts `delay` again.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -41,7 +48,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/loader
  *
  * @slot - An icon or logo that stays still at the center. Empty by default.
+ * @slot content - What the loader stands in for while the work runs, such as a button. It keeps its size, hidden and inert, until `idle` is set.
  *
+ * @csspart content - The box that holds the `content` slot. Hidden while the work runs, and shown while `idle` is set.
  * @csspart indicator - The arc that turns.
  * @csspart mark - The region that holds the slotted content at the center.
  * @csspart svg - The rotating circle pair.
@@ -71,6 +80,12 @@ export declare class HelixHeadlessLoader extends HelixElement {
      * way `Tooltip.for` does.
      */
     for: string;
+    /**
+     * Whether no work is in progress. The loader draws nothing of its own, has
+     * no role, and marks no region busy, and what is in the `content` slot
+     * shows. Clearing it starts `delay` again.
+     */
+    idle: boolean;
     /**
      * The loader's name, announced by screen readers while the work is in
      * progress.

package/dist/loader/root/loader-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, DelayController, elementById, HelixElement, hostAria, reportRuntime, words, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { awaitRegion, claimBusy, releaseBusy } from '../busy.js';
 let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
@@ -13,6 +13,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
         super(...arguments);
         this.delay = 0;
         this.for = '';
+        this.idle = false;
         this.label = 'Loading';
         this.due = new DelayController(this);
         this.region = null;
@@ -20,7 +21,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
     }
     static { this.words = 'helix-loader'; }
     get waiting() {
-        return this.delay > 0 && !this.due.elapsed;
+        return !this.idle && this.delay > 0 && !this.due.elapsed;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -46,7 +47,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
     mark() {
         this.stopAwaiting?.();
         this.stopAwaiting = undefined;
-        const named = this.isConnected && this.for !== '';
+        const named = this.isConnected && this.for !== '' && !this.idle;
         const region = named ? elementById(this, this.for) : null;
         if (named && !region) {
             this.stopAwaiting = awaitRegion(this.getRootNode(), () => elementById(this, this.for), () => this.mark());
@@ -73,16 +74,34 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
             this.found = false;
             this.mark();
         }
+        if (changed.has('idle') && changed.get('idle') !== undefined) {
+            if (!this.idle && this.delay > 0) {
+                this.due.start(this.delay);
+            }
+            this.mark();
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'progressbar' });
-        this.internals.ariaBusy = 'true';
+        hostAria(this.internals, {
+            label: this.idle ? '' : this.label,
+            role: this.idle ? '' : 'progressbar',
+        });
+        this.internals.ariaBusy = this.idle ? null : 'true';
         this.internals.ariaHidden = this.waiting ? 'true' : null;
         this.toggleState('waiting', this.waiting);
     }
     render() {
-        return html `<svg part="svg" viewBox="0 0 24 24" aria-hidden="true" ?hidden=${this.waiting}>
+        const content = html `<span
+      part="content"
+      ?inert=${!this.idle}
+      style=${this.idle ? nothing : 'visibility: hidden'}
+      ><slot name="content"></slot
+    ></span>`;
+        if (this.idle) {
+            return content;
+        }
+        return html `${content}<svg part="svg" viewBox="0 0 24 24" aria-hidden="true" ?hidden=${this.waiting}>
         <circle part="track" cx="12" cy="12" r="10" fill="none" />
         <circle part="indicator" cx="12" cy="12" r="10" fill="none" />
       </svg>
@@ -95,6 +114,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLoader.prototype, "for", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessLoader.prototype, "idle", void 0);
 __decorate([
     words,
     property()

package/dist/pin-input/root/pin-input-root.js

@@ -133,6 +133,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         }
         this.placeCaret(true);
         if (applied && this.value === code && code.length === this.count) {
+            this.runPendingUpdate();
             this.dispatchEvent(new HelixCompleteEvent({ value: code }));
             this.commit();
             if (this.autosubmit) {

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

@@ -30,7 +30,8 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  *
  * Left and Right swap on a right-to-left page. The marks are a `radiogroup`
  * named by `label`, and each score is a `radio` named by `option-label`, such
- * as "3 out of 5". A read-only rating is one `img` named by its score.
+ * as "3 out of 5". A read-only rating is one `img` named by its label and
+ * then its score, such as "Quality 3 out of 5".
  *
  * @since 0.1.0
  * @status stable

package/dist/rating/root/rating-root.js

@@ -21,6 +21,11 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.valueMissingMessage = 'Choose a rating to continue.';
         this.valueText = '';
         this.aria = new AriaForwardController(this, {
+            labelledByAfter: () => {
+                const score = this.readOnly ? this.renderRoot?.querySelector('#score') : null;
+                return score ? [score] : [];
+            },
+            named: () => this.labeled,
             target: () => this.partNamed('marks'),
         });
         this.mark = new SlottedGlyph();
@@ -255,8 +260,8 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     <div
       part="marks"
       role=${this.readOnly ? 'img' : 'radiogroup'}
-      aria-label=${this.readOnly ? said : nothing}
-      aria-labelledby=${!this.readOnly && this.labeled ? this.labelId : nothing}
+      aria-label=${this.readOnly && !this.labeled ? said : nothing}
+      aria-labelledby=${this.labeled ? (this.readOnly ? `${this.labelId} score` : this.labelId) : nothing}
       aria-describedby=${this.describedBy ?? nothing}
       aria-invalid=${this.invalidity ?? nothing}
       aria-required=${this.required && !this.readOnly ? 'true' : nothing}
@@ -317,6 +322,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
           >${showing}</span
         >`
             : nothing}
+    ${this.readOnly ? html `<span id="score" hidden>${said}</span>` : nothing}
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -51,10 +51,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * readers.
  *
  * **The plot is read by key.** It takes focus, named by `label` or the caption.
- * The left and right arrows move from row to row in the table's order, Home
- * and End go to the first and the last, and the up and down arrows move among
- * the series of a row. The tooltip sits on that point, the `live` part says the
- * row in words, and Escape puts the tooltip away.
+ * The left and right arrows move from point to point, left to right across
+ * the plot, Home and End go to the first and the last, and the up and down
+ * arrows move among the series of a row. The tooltip sits on that point, the
+ * `live` part says the row in words, and Escape puts the tooltip away.
  *
  * Each point is a `<span>` placed by percentage over the drawing, as
  * `LineChart` places its end points, so points stay round when the drawing
@@ -81,6 +81,18 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * there until readings arrive. The `empty` and `loading` slots take markup in
  * their place, such as a link to add the first reading.
  *
+ * **Keyboard.** The plot is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the plot and shows the first reading. |
+ * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+ * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
+ * | Home, End | Moves to the first or the last point. |
+ * | Page Down, Page Up | Moves a tenth of the points on or back. |
+ * | Enter, Space | Presses the point shown, which sends `helix-reading-press`. |
+ * | Escape | Puts the point and its tooltip away. |
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -99,11 +111,12 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart loading - The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plane - The grid that holds the plot, both axes, and their names. It runs left to right on every page.
- * @csspart plot - The drawing, which takes focus to be read by key.
+ * @csspart plot - The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
  * @csspart point - One row, as a point.
  * @csspart point-active - A point in the row under the pointer. Set alongside `point`.
  * @csspart summary - The text that says how strongly the measures relate, for people who cannot see the points.
  * @csspart svg - The drawing surface the gridlines and the trend lines sit on.
+ * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -123,7 +136,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart trend - One series' line of best fit, under `trend`. Carries its series color as `--chart-series`.
  * @csspart x-axis - The values along the horizontal axis, under the plot.
  * @csspart x-name - The name of the horizontal measure.
- * @csspart x-tick - One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on.
+ * @csspart x-tick - One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on. The one at the far edge carries `data-edge="end"`.
  * @csspart y-axis - The values along the vertical axis, beside the plot.
  * @csspart y-name - The name of the vertical measure.
  * @csspart y-tick - One labeled value on the vertical axis.
@@ -132,6 +145,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @cssproperty --chart-point-x - A point's horizontal position, as a percentage. The component writes it.
  * @cssproperty --chart-point-y - A point's vertical position, as a percentage from the top. The component writes it.
  * @cssproperty --chart-tick - A tick's position along its axis, as a percentage. The component writes it.
+ *
+ * @cssstate active - While a reading is shown, under the pointer or the keys, with its tooltip open.
+ * @cssstate empty - While the `empty` part stands in the plot.
+ * @cssstate loading - While the `loading` part stands in the plot.
  */
 export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart_base {
     /**
@@ -228,6 +245,12 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * a point with one coordinate has nowhere to be.
      */
     protected get field(): ScatterField;
+    /**
+     * @internal The rows in the order the keys walk them: by the measure across,
+     * left to right, so a reader moves through the points as they are drawn. A
+     * row with nothing across comes last, in the table's order.
+     */
+    readingOrder(): number[];
     protected render(): TemplateResult;
     /** The rules and the points, behind a seam the styled tier can move. */
     protected renderPlot(field: ScatterField, along: (value: number) => number, up: (value: number) => number): TemplateResult;

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -135,12 +135,19 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             yNames: ups.map((column) => name(column)),
         };
     }
+    readingOrder() {
+        const across = this.plottedColumns[0];
+        const rows = this.sourceRows;
+        const x = (at) => (across === undefined ? undefined : rows[at]?.cells[across]?.value) ??
+            Number.POSITIVE_INFINITY;
+        return rows.map((_, at) => at).sort((one, two) => x(one) - x(two) || one - two);
+    }
     render() {
         const field = this.field;
         this.drawn = field.points;
         if (field.points.length === 0) {
             return html `<div dir="ltr" part="plane">
-        <div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>
+        ${this.renderEmpty()}
       </div>`;
         }
         const format = formatNumbers(wordsLocale(this));
@@ -149,7 +156,15 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         return html `<div dir="ltr" part="plane">
         ${this.renderPlot(field, along, up)}
         <div aria-hidden="true" part="x-axis">
-          ${ticks(field.x).map((level) => html `<span part="x-tick" style="--chart-tick: ${along(level)}%">${format(level)}</span>`)}
+          ${ticks(field.x).map((level) => {
+            const place = along(level);
+            return html `<span
+              data-edge=${place >= PLOT_WIDTH ? 'end' : nothing}
+              part="x-tick"
+              style="--chart-tick: ${place}%"
+              >${format(level)}</span
+            >`;
+        })}
         </div>
         <div aria-hidden="true" part="y-axis">
           ${ticks(field.y).map((level) => html `<span part="y-tick" style="--chart-tick: ${up(level)}%">${format(level)}</span>`)}
@@ -157,7 +172,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         <span aria-hidden="true" dir="auto" part="x-name">${field.xName}</span>
         <span aria-hidden="true" dir="auto" part="y-name">${field.yNames.join(', ')}</span>
       </div>
-      ${this.renderSummary(field)}`;
+      ${this.renderSummary(field)}${this.renderTable()}`;
     }
     renderPlot(field, along, up) {
         const at = this.pointer.at;