@fusion.dev/helix-headless 0.176.0 → 0.177.0

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

@@ -83,6 +83,18 @@ declare const HelixHeadlessAreaChart_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
@@ -107,9 +119,10 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
  * @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 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 total and each part's share at the latest reading, written as a sentence for screen readers.
  * @csspart svg - The drawing surface the bands 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 tick - One number on the axis, placed with `inset-block-start` at its level.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
@@ -129,6 +142,10 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-value - A column's value inside the tooltip.
  *
  * @cssproperty --area-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 HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base {
     /**

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

@@ -96,7 +96,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartStat
         const rows = this.sourceRows;
         const stack = this.stack;
         if (rows.length === 0 || stack.columns.length === 0) {
-            return html `<div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>`;
+            return this.renderEmpty();
         }
         const top = this.overlap
             ? Math.max(0, ...stack.layers.flat())
@@ -108,7 +108,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartStat
         const slot = PLOT_WIDTH / rows.length;
         const x = linear([0, Math.max(rows.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
         return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(stack, rows.length, x, y, domain)}
-      ${this.renderLabels(rows.map((row) => row.label))} ${this.renderSummary(stack, rows)}`;
+      ${this.renderLabels(rows.map((row) => row.label))} ${this.renderSummary(stack, rows)}${this.renderTable()}`;
     }
     renderAxis(y, domain) {
         const locale = wordsLocale(this);

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

@@ -32,7 +32,7 @@ export declare const initialsOf: (name: string) => string;
  * @aliases Profile picture, Gravatar
  * @documentation https://fusion.dev/helix/components/avatar
  *
- * @slot - Shown when there is no usable image, in place of the initials.
+ * @slot - Shown when there is no usable image, in place of the initials. Hidden from assistive technology when the avatar has a `name`, which the host announces.
  *
  * @event {Event} error - Relayed from the image when it fails.
  * @event {Event} load - Relayed from the image once it has loaded.

package/dist/avatar/root/avatar-root.js

@@ -103,7 +103,7 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         return this.renderInitials();
     }
     renderInitials() {
-        return html `<slot>
+        return html `<slot aria-hidden=${this.name === '' ? nothing : 'true'}>
       <span part="initials" aria-hidden="true">${this.initials ?? initialsOf(this.name)}</span>
     </slot>`;
     }

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

@@ -45,6 +45,19 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * 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. |
+ * | Down, Up under `orientation="horizontal"` | Moves to the next or the previous reading, and Right and Left move among the series. |
+ * | 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
@@ -73,9 +86,10 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
  * @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 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' highest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the bars and 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 tick - One number on an axis.
  * @csspart tooltip - The tooltip bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
@@ -99,6 +113,10 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @cssproperty --chart-bar-wash - The gradient for a bar, named per bar so the styled
  *   tier can use it as the `fill`. It is always drawn, and used only when
  *   `wash="gradient"` is set.
+ *
+ * @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 HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
     /**

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

@@ -44,7 +44,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
         const series = this.series;
         const categories = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (categories.length === 0) {
-            return html `<div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>`;
+            return this.renderEmpty();
         }
         const scaled = this.scaled;
         const own = (one) => scaled.has(seriesKey(one.name));
@@ -78,7 +78,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
             : undefined;
         return html `${z === undefined && !this.valueAxis
             ? nothing
-            : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}`;
+            : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}${this.renderTable()}`;
     }
     renderSummary(series) {
         const rows = this.sourceRows;

package/dist/canvas/node/canvas-node.js

@@ -77,7 +77,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
       aria-describedby=${this.status || this.meaning || this.links ? 'about' : nothing}
       aria-label=${this.label || nothing}
       aria-labelledby=${this.label || this.group ? nothing : 'content'}
-      aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Control+ArrowDown Control+ArrowUp Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
+      aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Control+ArrowDown Control+ArrowUp Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete Plus Minus' : nothing}
       role=${this.group ? 'group' : 'article'}
       tabindex=${this.current ? '0' : '-1'}
     >

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

@@ -45,7 +45,11 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * double click zooms out.
  *
  * Keyboard behavior:
- * - One card holds the board's tab stop.
+ * - One card holds the board's tab stop, and the board itself leaves the tab
+ *   order while a card can hold it. Escape on a card goes back out to the
+ *   board, where the arrow keys pan it.
+ * - Plus and minus zoom the board, on the board and on a card or a
+ *   connection.
  * - The arrow keys move through the cards in reading order. The card you land
  *   on scrolls into view, and its connections are announced with it.
  * - The card you land on is selected. Control or Command with an arrow key,

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

@@ -566,6 +566,11 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 }
                 return;
             }
+            if (plain && ['+', '=', '-', '_'].includes(event.key)) {
+                event.preventDefault();
+                this.zoom(event.key === '+' || event.key === '=' ? 1 : -1);
+                return;
+            }
             if (event.key === ' ' && !this.linking) {
                 event.preventDefault();
                 this.toggle(key);
@@ -2143,6 +2148,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         const stop = this.stop !== undefined && this.keyNamed(this.stop) === this.stop
             ? this.stop
             : reading(all, this.edges, this.order ?? 'spatial')[0]?.id;
+        const holds = stop !== undefined &&
+            (stop.startsWith('edge:') || this.cards.some((card) => card.name === stop));
+        this.partNamed('region')?.setAttribute('tabindex', holds ? '-1' : '0');
         for (const card of this.cards) {
             const x = finite(card.x) - origin.x;
             const y = finite(card.y) - origin.y;
@@ -2255,7 +2263,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         d=${drawn.d}
         data-edge=${key}
         fill="none"
-        aria-keyshortcuts="Enter F2 Space Control+ArrowDown Control+ArrowUp C Delete"
+        aria-keyshortcuts="Enter F2 Space Control+ArrowDown Control+ArrowUp C Delete Plus Minus"
         role="button"
         tabindex=${key === stop ? '0' : '-1'}
       />

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

@@ -10,7 +10,7 @@ export interface DonutShare {
     /** Where the slice starts, as a share of the whole. */
     start: number;
 }
-declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
 /**
  * @summary A chart that shows parts of a whole as a ring, read from a table.
  *
@@ -34,6 +34,27 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * follows, the `live` part says the slice in words, and Escape puts the
  * tooltip away.
  *
+ * **A tap shows the slice under it**, and keeps it until a tap lands
+ * elsewhere. `helix-reading-change` says each move of the slice shown, by
+ * pointer, tap or key, and `helix-reading-press` says a slice was clicked,
+ * tapped, or pressed with Enter or Space, for a page that opens what a slice
+ * stands for. `index` is the slice's row in the table.
+ *
+ * **A chart with nothing to draw says so.** A table with no readings shows
+ * `empty-text`, "No readings", in the plot, and `loading` shows `loading-text`
+ * there until readings arrive. The `empty` and `loading` slots take markup in
+ * their place.
+ *
+ * **Keyboard.** The plot is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the plot and shows the first slice. |
+ * | Any arrow | Right and Down move to the next slice, Left and Up to the previous. On a right-to-left page, Left moves to the next. |
+ * | Home, End | Moves to the first or the last slice. |
+ * | Enter, Space | Presses the slice shown, which sends `helix-reading-press`. |
+ * | Escape | Puts the slice and its tooltip away. |
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -41,16 +62,24 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @documentation https://fusion.dev/helix/components/donut-chart
  *
  * @slot - Content in the middle of the ring, usually a total. It is read by screen readers, while the ring itself is hidden from them.
+ * @slot empty - Content shown in place of the ring when the table has no readings. Falls back to `empty-text`.
+ * @slot loading - Content shown in place of the ring while `loading` is set and there are no readings yet. Falls back to `loading-text`.
+ *
+ * @event {HelixReadingChangeEvent} helix-reading-change - The slice shown moved, or was put away: `index` is the slice's row, or `-1` for none, with its `label` and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A slice was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
  *
  * @csspart center - The middle of the ring, holding whatever is slotted.
+ * @csspart empty - The words in place of the ring when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration.
  * @csspart live - The readout: a polite live region that says the slice the keys moved to. Hide it visually.
+ * @csspart loading - The words in place of the ring 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 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 segment - One slice.
  * @csspart segment-active - The slice under the pointer. Set alongside `segment`.
  * @csspart segment-edge - One slice as a closed shape, used to draw its outline.
  * @csspart slice-label - One slice's share, written on the slice under `slice-labels`. Placed with `left` and `top`, or `inset-inline-start` and `top` on a half ring, and carries its series color as `--chart-series`.
  * @csspart summary - The chart's name and each slice's share, written as a sentence for screen readers. Hide it visually.
+ * @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`.
@@ -70,6 +99,10 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @csspart track - The ring the slices are drawn on.
  *
  * @cssproperty --donut-chart-stroke - How thick the ring is drawn, derived from `hole`.
+ *
+ * @cssstate active - While a slice is shown, under the pointer or the keys, with its tooltip open.
+ * @cssstate empty - While the `empty` part stands in place of the ring.
+ * @cssstate loading - While the `loading` part stands in place of the ring.
  */
 export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_base {
     /**
@@ -204,6 +237,8 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * The shares, because they are what the ring shows and the table does not:
      * the table holds the amounts, and the percentages are this chart's
      * arithmetic. In the ring's order, which is the table's and the legend's.
+     * A row the ring leaves out, a negative amount or a slice a legend hid, is
+     * left out here too.
      */
     protected renderSummary(shares: DonutShare[]): TemplateResult;
     /**

package/dist/donut-chart/root/donut-chart-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, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, wordsLocale, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, MixinChartSource, MixinChartStatus, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -30,7 +30,7 @@ const THICKNESS = {
     none: EDGE,
     small: 26,
 };
-let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSource(HelixElement) {
+let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
         this.sliceLabels = false;
@@ -39,6 +39,11 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
+        this.pointer.onReading = (heard, detail) => {
+            const row = this.shares[detail.index]?.row ?? -1;
+            const told = { ...detail, index: row, label: this.sourceRows[row]?.label ?? '' };
+            this.dispatchEvent(heard === 'press' ? new HelixReadingPressEvent(told) : new HelixReadingChangeEvent(told));
+        };
     }
     get span() {
         return this.sweep === 'half' ? 0.5 : 1;
@@ -81,28 +86,32 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     render() {
         const shares = this.shares;
-        return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}`;
+        if (shares.length === 0 && (this.readingsKnown || this.loading)) {
+            return this.renderEmpty();
+        }
+        return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}${this.renderTable()}`;
     }
     renderSummary(shares) {
         const rows = this.sourceRows;
         const locale = wordsLocale(this);
         const parts = shares
-            .filter((share) => this.showsSeries(rows[share.row]?.label ?? ''))
+            .filter((share) => share.fraction > 0)
             .map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(locale).format(share.fraction)}`);
         const named = this.named ? `${this.named}: ` : '';
         const listed = new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format(parts);
         return html `<p id="helix-chart-summary" part="summary">${named}${listed}.</p>`;
     }
     renderPlot(shares) {
+        const drawn = shares.length > 0;
         return html `<div
-      aria-describedby=${this.named ? `helix-chart-summary${this.hole === 'none' ? '' : ' helix-chart-center'}` : nothing}
+      aria-describedby=${drawn && this.named ? `helix-chart-summary${this.hole === 'none' ? '' : ' helix-chart-center'}` : nothing}
       aria-label=${this.named || nothing}
-      aria-labelledby=${this.named ? nothing : 'helix-chart-summary'}
+      aria-labelledby=${drawn && !this.named ? 'helix-chart-summary' : nothing}
       id=${CHART_PLOT}
       part="plot"
-      role="application"
+      role=${drawn ? 'application' : this.named ? 'group' : nothing}
       style="--donut-chart-stroke: ${this.thickness}"
-      tabindex="0"
+      tabindex=${drawn ? '0' : nothing}
     >
       <svg
         aria-hidden="true"
@@ -175,6 +184,11 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
                 this.pointer.set(index);
             }
         }}
+      @pointerup=${(event) => {
+            if (event.pointerType === 'touch') {
+                this.pointer.tapTo(index);
+            }
+        }}
       part="segment${active ? ' segment-active' : ''}"
       r=${this.radius}
       stroke-dasharray="${length} ${GAP}"

package/dist/element-events.generated.js

@@ -108,6 +108,7 @@ registerElementEvents({
     ],
     'helix-headless-date-picker': ['change', 'helix-before-change', 'helix-navigate', 'input'],
     'helix-headless-dialog': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-headless-donut-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-drilldown': ['helix-navigate', 'helix-select'],
     'helix-headless-drilldown-item': ['helix-select'],
@@ -249,6 +250,7 @@ registerElementEvents({
         'toggle',
     ],
     'helix-headless-slider': ['change', 'helix-before-change', 'input'],
+    'helix-headless-sparkline': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-speed-dial': [
         'helix-before-close',
         'helix-before-open',

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,