@fusion.dev/helix-headless 0.176.0 → 0.177.0

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/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;

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

@@ -2,6 +2,7 @@ import { AriaForwardController, type DataOptionItem, HelixFormElement, PopoverCo
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { type HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
+import '../../option/index.js';
 declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A control that opens a list of options to choose from.
@@ -13,7 +14,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * place for focus to return to when the list closes.
  *
  * Your options stay in your light DOM and are slotted through into the listbox,
- * so the listbox looks through slots to find them. For a list too long to draw
+ * so the listbox looks through slots to find them. Write them as `Option`,
+ * group them in `Option.Group`, and divide them with `Option.Separator`.
+ * Importing Select registers all three in the same tier. For a list too long to draw
  * whole, set `items` instead: the list draws only the options in sight, as
  * Listbox's `items` does, and the trigger, its keys and the form read the
  * whole set.

package/dist/select/root/select-root.js

@@ -12,6 +12,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import { optionsAmong } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
+import '../../option/index.js';
 import { over } from '../align.js';
 let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {

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

@@ -24,6 +24,10 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * the lowest, in `overview-label`: "From 12 to 20, highest 30, lowest 8". An
  * `aria-label` on the element names it as `label` does.
  *
+ * `helix-reading-change` says each move of the reading, by pointer, tap or
+ * key, and `helix-reading-press` says a reading was clicked, tapped, or pressed
+ * with Enter or Space, as on every chart.
+ *
  * A pointer resting on the drawing shows the reading under it: the `cursor`
  * part marks it and the `readout` part writes it. `marks` adds a mark on the
  * highest and the lowest reading, and `range` draws a band between two values,
@@ -38,12 +42,26 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * the component computes and CSS cannot, so a stylesheet can draw the sparkline
  * without measuring anything.
  *
+ * **Keyboard.** A sparkline with a `label` is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the drawing and shows the first reading, where there is a `label`. |
+ * | Any arrow | Right and Down move to the next reading, 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 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
  * @aliases Micro Chart, Trend Line, Inline Chart
  * @documentation https://fusion.dev/helix/components/sparkline
  *
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
  * @csspart area - The region between the line and the bottom of its range.
  * @csspart bar - One column, drawn when `plot="bar"`.
  * @csspart cursor - The mark on the reading a pointer or a key rests on, rendered only while there is one. Placed with `inset-inline-start` and `inset-block-start`.
@@ -201,17 +219,24 @@ export declare class HelixHeadlessSparkline extends HelixElement {
     values: string | readonly number[];
     protected readonly source: SourceController;
     /**
-     * Finds the reading a pointer or a key rests on, as it does for every
-     * chart, so a sparkline is read the way they are.
+     * @internal Finds the reading a pointer or a key rests on, as it does for
+     * every chart, so a sparkline is read the way they are.
      */
     readonly pointer: ChartPointerController;
     /**
-     * Hears an `aria-label` written on the sparkline, which no property mirrors,
+     * @internal Hears an `aria-label` written on the sparkline, which no property mirrors,
      * because it names the drawing as `label` does, as on every chart.
      */
     static get observedAttributes(): string[];
-    /** Called by the browser when an observed attribute changes; a new `aria-label` renames the drawing. */
+    /** @internal Called by the browser when an observed attribute changes; a new `aria-label` renames the drawing. */
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /**
+     * Sends the reading's moves and presses as `helix-reading-change` and
+     * `helix-reading-press`, named by the table's row where there is one. Here
+     * and not in a constructor, where the manifest's analyzer reads the
+     * assignment as a member of this class.
+     */
+    connectedCallback(): void;
     /** The drawing's name: an `aria-label` written on the sparkline, then `label`. */
     get named(): string;
     /** The two values of `range`, lower first, or none. */

package/dist/sparkline/root/sparkline-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, ChartPointerController, customElement, extent, extremesOf, formatNumbers, formatWords, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, words, wordsLocale, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, ChartPointerController, customElement, extent, extremesOf, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, PLOT_WIDTH, SourceController, unbroken, words, wordsLocale, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { areaPath, overviewWords, readingWords, slotsOf } from '../readings.js';
@@ -33,6 +33,13 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
             this.requestUpdate();
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.onReading = (heard, detail) => {
+            const told = { ...detail, label: this.source.rows[detail.index]?.label ?? '' };
+            this.dispatchEvent(heard === 'press' ? new HelixReadingPressEvent(told) : new HelixReadingChangeEvent(told));
+        };
+    }
     get named() {
         return this.getAttribute?.('aria-label') || this.label;
     }

package/dist/tag/group/tag-group.d.ts

@@ -99,8 +99,9 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      */
     selectionMode?: TagSelectionMode;
     /**
-     * The selected tags' values, separated by commas, since a value may hold a
-     * space.
+     * The selected tags' values, separated by commas with no space, as Toggle
+     * Group and Table write theirs, since a value may hold a space. A value
+     * written with a space after each comma is read the same way.
      *
      * Set it to start with tags selected. A tag's value is its `value`, or its
      * words where it has none.
@@ -159,7 +160,7 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
     /** Whether a press or a move selects the tag alone. */
     private get replaces();
     /**
-     * Asks for `value` to become `next`, where it changes and where it leaves a
+     * Asks for `value` to become `asked`, where it changes and where it leaves a
      * tag selected under `disallow-empty-selection`.
      */
     private ask;

package/dist/tag/group/tag-group.js

@@ -108,7 +108,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 const left = this.tags.map((one) => this.valueFor(one));
                 const pruned = prunedValue(this.written, this.valueFor(tag), left);
                 if (pruned !== this.written) {
-                    this.value = pruned;
+                    this.value = commaList(pruned).join(',');
                     this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
                 }
                 const active = document.activeElement;
@@ -150,7 +150,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             : this.value
                 .map((one) => String(one).trim())
                 .filter((one) => one !== '')
-                .join(', ');
+                .join(',');
     }
     get tags() {
         return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessTag);
@@ -212,8 +212,9 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     get replaces() {
         return this.selectionMode !== undefined && this.selectionBehavior === 'replace';
     }
-    ask(next) {
-        if (next === this.written) {
+    ask(asked) {
+        const next = commaList(asked).join(',');
+        if (next === commaList(this.written).join(',')) {
             return;
         }
         if (this.disallowEmptySelection && commaList(next).length === 0) {
@@ -239,7 +240,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         this.choose(this.tags.filter((tag) => chosen.includes(tag)));
     }
     choose(tags) {
-        this.ask([...new Set(tags.map((tag) => this.valueFor(tag)))].join(', '));
+        this.ask([...new Set(tags.map((tag) => this.valueFor(tag)))].join(','));
     }
     connectedCallback() {
         super.connectedCallback();

package/dist/tag/root/tag-root.js

@@ -70,12 +70,13 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
     }
     render() {
         const content = html `<slot name="start" part="start"></slot>${this.renderLabel()}${this.dismissible ? this.renderDismiss() : nothing}`;
+        const stop = this.focusable ? '0' : this.disabled ? nothing : '-1';
         return this.grouped
             ? html `<span
           aria-label=${this.words || nothing}
           part="cell"
           role="gridcell"
-          tabindex=${this.focusable ? '0' : '-1'}
+          tabindex=${stop}
           @focus=${this.handleCellFocus}
           @blur=${this.handleCellFocus}
           >${content}</span

package/dist/tree/item/tree-item.d.ts

@@ -14,9 +14,9 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * Each item is an element because it holds state: whether it is open, selected,
  * and focused.
  *
- * An item is a branch when something is slotted into `children`. This is
- * detected on the client, so server-rendered markup shows a leaf and the twisty
- * appears on hydration.
+ * An item is a branch when an item is slotted into `children`, with
+ * `slot="children"` on each nested item. This is detected on the client, so
+ * server-rendered markup shows a leaf and the twisty appears on hydration.
  *
  * **`href` makes the whole row a link**, rendered as an `<a>`. Enter, middle
  * click, and the status bar then work anywhere on the row.
@@ -43,7 +43,7 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @aliases TreeNode, Branch, Leaf
  * @documentation https://fusion.dev/helix/components/tree
  *
- * @slot - The item's label.
+ * @slot - The item's label. A nested item does not go here: give it `slot="children"`. In a development build, an item nested here is reported.
  * @slot chevron - Replaces the expand and collapse mark of a branch, such as with your own icon.
  * @slot children - Nested items, which make this a branch.
  * @slot end - Content after the label, at the far side of the row, such as a count or a state.

package/dist/tree/item/tree-item.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 { customElement, HelixElement, HelixLoadEvent, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
+import { auditNesting, customElement, HelixElement, HelixLoadEvent, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
 import { caretDown, check, dotsSixVertical, minus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -68,6 +68,10 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         slot?.addEventListener('slotchange', () => {
             this.branch = slot.assignedElements().length > 0;
         });
+        auditNesting(this, 'children');
+        this.renderRoot
+            .querySelector('[part="label"] > slot')
+            ?.addEventListener('slotchange', () => auditNesting(this, 'children'));
     }
     get choosable() {
         return this.value !== '' && !this.heads && !this.checkable && !this.disabled;