@fusion.dev/helix-headless 0.176.1 → 0.177.1

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/button/root/button-root.js

@@ -173,6 +173,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.watchForm(null);
     }
     formAssociatedCallback(form) {
+        super.formAssociatedCallback(form);
         this.watchForm(form);
     }
     render() {

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/chat/composer/chat-composer.d.ts

@@ -49,7 +49,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixSendEvent} helix-send - Fired when the user sends their turn, and cancelable.
  * @event {HelixTypingEvent} helix-typing - The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
- * @event {Event} input - The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Sent on the composer and does not bubble.
+ * @event {Event} input - The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is.
  *
  * @csspart composer - The whole composer.
  * @csspart end - The box around the `end` slot.

package/dist/chat/composer/chat-composer.js

@@ -41,7 +41,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
             event.stopPropagation();
             this.value = event.target.value;
             this.edited = true;
-            this.dispatchEvent(new Event('input'));
+            this.announceInput();
             this.markTyping(this.value !== '');
         };
         this.handleSend = () => {

package/dist/color-picker/root/color-picker-root.d.ts

@@ -633,6 +633,16 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * is redrawn though the value it settles on is the one drawn before.
      */
     protected renderFields(color: Color): TemplateResult;
+    /**
+     * A channel's name, after the picker's own where the picker has one.
+     *
+     * **Every channel the same way**, as React Aria's color area names its own:
+     * "Brand, Saturation" says which picker on a page with two. The square's
+     * axes and the wheel took the picker's name, and the hue and opacity ramps
+     * and the number fields did not, so two pickers on a page gave two sliders
+     * named "Hue", measured in Chromium's tree.
+     */
+    protected channelName(channel: string): string;
     /**
      * One of the ramps under the square.
      *

package/dist/color-picker/root/color-picker-root.js

@@ -407,11 +407,15 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     }
     renderFields(color) {
         return html `<div part="fields">
-      ${channelFields(this.value, color, this.format ?? 'hex', this.alpha).map((field) => html `<label part="field">
-          <span part="field-label">${this.channelWord(field.channel)}</span>
+      ${channelFields(this.value, color, this.format ?? 'hex', this.alpha).map((field) => {
+            const word = this.channelWord(field.channel);
+            const name = this.channelName(word);
+            return html `<label part="field">
+          <span part="field-label">${word}</span>
           <input
             part="field-input"
             type="number"
+            aria-label=${name === word ? nothing : name}
             inputmode=${field.step < 1 ? 'decimal' : 'numeric'}
             min=${field.min}
             max=${field.max}
@@ -421,14 +425,19 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             ?readonly=${this.readOnly}
             @input=${(event) => this.handleField(field.channel, event)}
             @change=${(event) => {
-            event.stopPropagation();
-            this.settle();
-            this.requestUpdate();
-        }}
+                event.stopPropagation();
+                this.settle();
+                this.requestUpdate();
+            }}
           />
-        </label>`)}
+        </label>`;
+        })}
     </div>`;
     }
+    channelName(channel) {
+        const owner = this.getAttribute('aria-label')?.trim() || this.named;
+        return owner ? `${owner}, ${channel}` : channel;
+    }
     renderChannel(channel, label, max, value, spoken = '') {
         return html `<${this.tag('slider')}
       part="channel"
@@ -439,7 +448,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         tooltips: channel-tooltips"
       data-channel=${channel}
       aria-invalid=${this.marked ? 'true' : nothing}
-      label=${label}
+      label=${this.channelName(label)}
       max=${max}
       min="0"
       value-text=${spoken || nothing}
@@ -568,8 +577,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         const reversed = square('brightness');
         const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, locale);
         const hueSaid = (value) => new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format([String(value), hue]);
-        const owner = this.getAttribute('aria-label')?.trim() || this.named;
-        const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
         const area = html `<div
         part="grid"
         style="--color-picker-hue: ${color.hue}; --color-picker-saturation: ${color.saturation}%; --color-picker-brightness: ${color.brightness}%"
@@ -584,7 +591,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           type="range"
           min="0"
           max="100"
-          aria-label=${axisName(this.saturationLabel)}
+          aria-label=${this.channelName(this.saturationLabel)}
           aria-describedby=${this.describedBy}
           aria-valuetext=${both}
           aria-invalid=${this.marked ? 'true' : nothing}
@@ -601,7 +608,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           max="100"
           tabindex="-1"
           style="writing-mode: vertical-lr; direction: rtl"
-          aria-label=${axisName(this.brightnessLabel)}
+          aria-label=${this.channelName(this.brightnessLabel)}
           aria-describedby=${this.describedBy}
           aria-valuetext=${reversed}
           aria-invalid=${this.marked ? 'true' : nothing}
@@ -630,7 +637,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
               min="0"
               max="360"
               dir="ltr"
-              aria-label=${axisName(this.hueLabel)}
+              aria-label=${this.channelName(this.hueLabel)}
               aria-describedby=${this.describedBy}
               aria-valuetext=${hueSaid(color.hue)}
               aria-invalid=${this.marked ? 'true' : nothing}

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

@@ -395,6 +395,8 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * "France", and the form received two entries.
      */
     private get values();
+    /** The values a value holds, read as `values` reads this element's own. */
+    private valuesIn;
     /** The answers created here, which no option holds, kept so their commas read as theirs. */
     private readonly created;
     /**
@@ -577,6 +579,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * `result-label` for one where a page still sets it.
      */
     private countSaid;
+    /**
+     * Says the option a choice changed, for VoiceOver, which says nothing when
+     * `aria-selected` changes: `Beta, selected` for one taken, and its words
+     * alone for one let go, as the highlight says an option not chosen.
+     *
+     * **The option the choice changed, read from the values before and after.**
+     * With `multiple` the value is the whole list, and the option was looked up
+     * by it, so no option matched and no choice was ever said: measured with
+     * Beta chosen, Enter let it go and the live region kept `Beta, selected`.
+     */
+    private sayChoice;
     /**
      * Takes what the list announced and stops it there.
      *

package/dist/combobox/root/combobox-root.js

@@ -188,12 +188,12 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.handleChange = (event) => {
             event.stopPropagation();
             const { value } = event.detail;
+            const before = this.values;
             if (!this.requestValue(value)) {
                 return;
             }
-            const chosen = this.listbox?.options.find((option) => option.value === value);
-            if (chosen && onApple()) {
-                this.status.say(formatWords(this, 'selectedLabel', { name: chosen.text }));
+            if (onApple()) {
+                this.sayChoice(before, this.valuesIn(value));
             }
             this.emptied = false;
             this.typed = '';
@@ -253,11 +253,14 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.partNamed('listbox');
     }
     get values() {
+        return this.valuesIn(this.value);
+    }
+    valuesIn(value) {
         const known = new Set(this.created);
         for (const option of optionsAmong(this.knownChildren)) {
             known.add(option.value);
         }
-        return chosenValues(this.value, known, this.multiple);
+        return chosenValues(value, known, this.multiple);
     }
     get chosen() {
         const options = optionsAmong(this.knownChildren);
@@ -460,6 +463,15 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
             : formatWords(this, 'resultsLabel', { count });
     }
+    sayChoice(before, after) {
+        const taken = this.multiple ? after.find((one) => !before.includes(one)) : after[0];
+        const changed = taken ?? before.find((one) => !after.includes(one));
+        const option = this.listbox?.options.find((one) => one.value === changed);
+        if (!option) {
+            return;
+        }
+        this.status.say(taken === undefined ? option.text : formatWords(this, 'selectedLabel', { name: option.text }));
+    }
     removeLastToken() {
         const last = this.values.at(-1);
         if (last !== undefined) {

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/file-input/root/file-input-root.d.ts

@@ -360,8 +360,9 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      *
      * Not through `commit`, and that is the point of the split: a reset is the
      * form's decision and there is nothing here for a listener to refuse. What it
-     * owes is the report and the platform's own announcement, which is what
-     * `settle` is.
+     * owes is the report to the form, and no `input` or `change`: a native file
+     * input sends neither on `form.reset()`, measured in Chromium, where this
+     * sent both.
      */
     formResetCallback(): void;
     /**

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

@@ -224,10 +224,13 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         }
         control.files = holding.files;
     }
-    settle() {
+    settle(announce = true) {
         this.committed = this.files;
         this.sync();
         this.requestUpdate();
+        if (!announce) {
+            return;
+        }
         this.announceInput();
         this.announceChange();
     }
@@ -265,7 +268,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         if (this.control) {
             restoreValue(this.control, '');
         }
-        this.settle();
+        this.settle(false);
     }
     renderMeta(file) {
         return html `<${this.tag('tag')} part="size"