@fusion.dev/helix-headless 0.149.1 → 0.151.0

package/dist/line-chart/root/line-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 { byRow, CHART_PLOT, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, commaList, customElement, drawTooltip, drawValueAxis, extent, formatNumbers, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -14,9 +14,16 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         this.area = false;
         this.dashed = '';
         this.markers = false;
+        this.valueAxis = false;
         this.zero = false;
     }
     static { this.words = 'helix-line-chart'; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
+    }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
@@ -58,7 +65,10 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         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.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)}`;
+    }
+    renderAxis(y, domain) {
+        return drawValueAxis(domain, (value) => (y(value) / PLOT_HEIGHT) * 100, formatNumbers(wordsLocale(this)), (widest) => `--line-chart-axis: ${widest}ch`);
     }
     renderSummary(series) {
         const rows = this.sourceRows;
@@ -254,6 +264,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessLineChart.prototype, "terminus", void 0);
+__decorate([
+    property({ attribute: 'value-axis', reflect: true, type: Boolean })
+], HelixHeadlessLineChart.prototype, "valueAxis", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLineChart.prototype, "zero", void 0);

package/dist/number-input/root/number-input-root.d.ts

@@ -381,6 +381,8 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * saving on `change` kept 150 while the form submitted 100.
      */
     private readonly handleChange;
+    /** The value Enter settled and announced, until the field's `change` or the next keystroke. */
+    private enterCommit;
     /**
      * The four keys a spinner answers, which `Input` does not bind.
      *
@@ -423,6 +425,10 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      *
      * On `keypress`, where the platform runs its own implicit submission, so a
      * consumer who prevents the `keydown` for Enter stops this too.
+     *
+     * **Settled first**, as blur settles it. The typed text is read as a number,
+     * `change` announces it, and the form value is written before the form is
+     * submitted, so a field showing `$2,500.50` submits 2500.5.
      */
     private readonly handleKeypress;
     /** @internal A single line of text counts against implicit submission. */

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

@@ -96,6 +96,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         };
         this.handleInput = (event) => {
             event.stopPropagation();
+            this.enterCommit = undefined;
             const control = event.target;
             this.requestValue(control.value);
             restoreValue(control, this.shown);
@@ -109,7 +110,11 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.handleChange = (event) => {
             event.stopPropagation();
             this.settle();
-            this.announceChange();
+            const announced = this.enterCommit === this.value;
+            this.enterCommit = undefined;
+            if (!announced) {
+                this.announceChange();
+            }
         };
         this.handleKeydown = (event) => {
             if (event.key === 'ArrowUp') {
@@ -142,9 +147,15 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             event.preventDefault();
         };
         this.handleKeypress = (event) => {
-            if (event.key === 'Enter' && !event.defaultPrevented) {
-                submitImplicitly(this.form);
+            if (event.key !== 'Enter' || event.defaultPrevented) {
+                return;
+            }
+            if (this.settle()) {
+                this.sync();
+                this.enterCommit = this.value;
+                this.announceChange();
             }
+            submitImplicitly(this.form);
         };
     }
     static { this.words = 'helix-number-input'; }

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

@@ -44,7 +44,9 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @documentation https://fusion.dev/helix/components/option
  *
  * @slot - The option's label.
+ * @slot description - A second line under the label, for content richer than the `description` text.
  * @slot end - Content after the label, such as a shortcut or a count.
+ * @slot indicator - An icon shown while the option is chosen, in place of the check the styled option draws.
  * @slot start - Content before the label, such as an icon or an avatar.
  *
  * @event {HelixSelectEvent} helix-select - The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`.
@@ -57,6 +59,8 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @csspart text - The label and the description under it, as one column.
  *
  * @cssstate active - While the keyboard is on the option, which is the option `aria-activedescendant` names.
+ * @cssstate disabled - While the option cannot be chosen.
+ * @cssstate has-indicator - An icon is slotted into `indicator`.
  * @cssstate selected - While the option is chosen.
  */
 export declare class HelixHeadlessOption extends HelixElement {
@@ -136,14 +140,10 @@ export declare class HelixHeadlessOption extends HelixElement {
      * ends. Matching still reads the label, so what somebody types is matched
      * against the name rather than against prose about it.
      *
-     * **A property and not a slot, which is the departure worth explaining.** The
-     * area rules say a content property is its slot's fallback, and that holds for
-     * a region always drawn: `Avatar`'s initials, `Tooltip`'s text. This one is
-     * usually absent, and a wrapped slot generates a box whether or not it is
-     * filled, so every option without a caption would carry an empty line. The
-     * detection that would avoid it does not exist, `:host(:has())` being invalid
-     * and the server having no children to inspect. A property is known at render
-     * time, so the component can decline to draw the box at all.
+     * For a caption richer than a string, slot it into `description`. The
+     * property is that slot's fallback inside the `description` part. With no
+     * property the slot is drawn bare, which takes no box while it is empty, so
+     * an option without a caption carries no empty line.
      *
      * It does not reflect, per the rule that payload state stays off the host: a
      * string is not a fact a selector needs.
@@ -198,6 +198,15 @@ export declare class HelixHeadlessOption extends HelixElement {
      * Written by the listbox.
      */
     selected: boolean;
+    /**
+     * Whether the option says it is selected while the keyboard is on it.
+     *
+     * Written by a control whose list holds suggestions, such as `FilterInput`:
+     * nothing there stays chosen, so the row the keyboard is on is the
+     * selection, as the APG combobox's list with selection that follows focus
+     * says. No attribute: it is coordination between elements.
+     */
+    selectionFollowsActive: boolean;
     /**
      * Where the link opens, such as `_blank`, for an option with an `href`.
      */

package/dist/option/root/option-root.js

@@ -4,8 +4,8 @@ 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, followLink, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { customElement, followLink, HelixElement, HelixSelectEvent, slotFilled, } from '@fusion.dev/helix-core';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 export const optionsAmong = (elements) => {
     const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
@@ -23,6 +23,7 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.label = '';
         this.rel = '';
         this.selected = false;
+        this.selectionFollowsActive = false;
         this.target = '';
         this.textValue = '';
         this.value = '';
@@ -59,10 +60,14 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
         this.toggleState('active', this.active);
+        this.toggleState('disabled', this.disabled);
     }
     render() {
         this.internals.role = 'option';
-        this.internals.ariaSelected = this.href === '' ? String(this.selected) : null;
+        this.internals.ariaSelected =
+            this.href === ''
+                ? String(this.selected || (this.selectionFollowsActive && this.active))
+                : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.internals.ariaDescription =
             this.alternate !== '' && this.alternateLabel !== '' ? this.alternateLabel : null;
@@ -73,9 +78,15 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
       <slot name="start"></slot>
       <span part="text">
         <span part="label"><slot>${this.label}</slot></span>
-        ${this.description ? html `<span part="description">${this.description}</span>` : nothing}
+        ${this.description
+            ? html `<span part="description"><slot name="description">${this.description}</slot></span>`
+            : html `<slot name="description"></slot>`}
       </span>
       <slot name="end"></slot>
+      <slot
+        name="indicator"
+        @slotchange=${(event) => this.toggleState('has-indicator', slotFilled(event.target))}
+      ></slot>
     </div>`;
     }
 };
@@ -109,6 +120,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessOption.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessOption.prototype, "selectionFollowsActive", void 0);
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "target", void 0);

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

@@ -114,8 +114,15 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
     valueMissingMessage: string;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
-    /** The radios, in light-DOM order. Client only: the server has no tree. */
+    /**
+     * The radios, in light-DOM order. Client only: the server has no tree.
+     *
+     * Descendants, as `Checkbox.Group` reads its boxes, so a radio inside a
+     * layout wrapper of yours is one of the group's. A radio held by a group
+     * nested inside this one is that group's.
+     */
     get items(): HelixHeadlessRadio[];
+    private observer;
     /**
      * Announces before it applies, so a listener can refuse the change.
      *

package/dist/radio/group/radio-group.js

@@ -42,7 +42,10 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     }
     static { this.words = 'helix-radio-group'; }
     get items() {
-        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessRadio);
+        if (this.children === undefined) {
+            return [];
+        }
+        return [...this.querySelectorAll('*')].filter((element) => element instanceof HelixHeadlessRadio && nearestGroup(element) === this);
     }
     get answer() {
         return this.items.find((item) => item.value === this.value);
@@ -91,10 +94,14 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.observer = new MutationObserver(() => this.requestUpdate());
+        this.observer.observe(this, { childList: true, subtree: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.observer?.disconnect();
+        this.observer = undefined;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -134,3 +141,10 @@ HelixHeadlessRadioGroup = __decorate([
     customElement('helix-headless-radio-group')
 ], HelixHeadlessRadioGroup);
 export { HelixHeadlessRadioGroup };
+function nearestGroup(radio) {
+    let parent = radio.parentElement;
+    while (parent && !(parent instanceof HelixHeadlessRadioGroup)) {
+        parent = parent.parentElement;
+    }
+    return parent;
+}

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

@@ -66,12 +66,20 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * reads in its own direction. The summary and the tooltip bubble follow the
  * page's direction.
  *
+ * **A tap shows the reading under it**, and keeps it until a tap lands
+ * elsewhere. `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, for a page that opens what a reading stands for.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
  * @documentation https://fusion.dev/helix/components/scatter-chart
  *
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, 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 gridline - One line across the plot, drawn when `gridlines` is set.
  * @csspart live - The readout: a polite live region that says the row the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
@@ -238,6 +246,16 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * rest on a point with.
      */
     private readonly handleMove;
+    /**
+     * The point a tap lands nearest, within twice a pointer's reach, a finger
+     * being broader than a cursor. It stays shown until a tap lands elsewhere.
+     */
+    private readonly handleTap;
+    /**
+     * The drawn point nearest a pointer, within `reach` pixels, `undefined` for
+     * none in reach, and `null` with no plot to measure.
+     */
+    private pointNear;
     private readonly handleLeave;
 }
 declare global {

package/dist/scatter-chart/root/scatter-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, extent, formatNumbers, formatWords, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -47,28 +47,27 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             if (event.pointerType !== 'mouse' && event.pointerType !== 'pen') {
                 return;
             }
-            const box = this.partNamed('plot')?.getBoundingClientRect();
-            if (!box || box.width === 0 || box.height === 0) {
+            const found = this.pointNear(event, REACH);
+            if (found === null) {
                 return;
             }
-            const across = event.clientX - box.left;
-            const up = event.clientY - box.top;
-            let found;
-            let best = REACH ** 2;
-            for (const point of this.drawn) {
-                const distance = ((point.x / PLOT_WIDTH) * box.width - across) ** 2 +
-                    ((point.y / PLOT_HEIGHT) * box.height - up) ** 2;
-                if (distance <= best) {
-                    best = distance;
-                    found = point;
-                }
-            }
             if (found !== this.nearest) {
                 this.nearest = found;
                 this.pointer.set(found?.row ?? -1);
                 this.requestUpdate();
             }
         };
+        this.handleTap = (event) => {
+            if (event.pointerType !== 'touch') {
+                return;
+            }
+            const found = this.pointNear(event, REACH * 2);
+            if (found) {
+                this.nearest = found;
+                this.pointer.tapTo(found.row);
+                this.requestUpdate();
+            }
+        };
         this.handleLeave = () => {
             this.nearest = undefined;
         };
@@ -77,13 +76,18 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
         this.addEventListener('pointermove', this.handleMove);
         this.addEventListener('pointerleave', this.handleLeave);
+        this.addEventListener('pointerup', this.handleTap);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('pointermove', this.handleMove);
         this.removeEventListener('pointerleave', this.handleLeave);
+        this.removeEventListener('pointerup', this.handleTap);
     }
     seriesOf(cell) {
         const depth = this.measures.ups.indexOf(cell);
@@ -253,6 +257,25 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             y: `${point.y}%`,
         }, (cell) => this.seriesOf(cell), this.pointer);
     }
+    pointNear(event, reach) {
+        const box = this.partNamed('plot')?.getBoundingClientRect();
+        if (!box || box.width === 0 || box.height === 0) {
+            return null;
+        }
+        const across = event.clientX - box.left;
+        const up = event.clientY - box.top;
+        let found;
+        let best = reach ** 2;
+        for (const point of this.drawn) {
+            const distance = ((point.x / PLOT_WIDTH) * box.width - across) ** 2 +
+                ((point.y / PLOT_HEIGHT) * box.height - up) ** 2;
+            if (distance <= best) {
+                best = distance;
+                found = point;
+            }
+        }
+        return found;
+    }
 };
 __decorate([
     words,

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

@@ -290,6 +290,14 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * from the origin to the thumb as `--slider-from` and `--slider-to`.
      */
     private get fillStyle();
+    /**
+     * The range's axis, written on it, so a vertical slider is vertical to the
+     * accessibility tree with no stylesheet: Chromium reads a range's
+     * orientation off its writing mode and ignores `aria-orientation` there.
+     * `direction: rtl` puts the maximum at the top, which `vertical-lr` alone
+     * puts at the foot.
+     */
+    private get axis();
     /**
      * A value snapped to the step, counted from `min` the way a range counts it.
      *

package/dist/slider/root/slider-root.js

@@ -112,10 +112,13 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     get fillStyle() {
         const fraction = this.fraction;
         if (!this.origin) {
-            return `--slider-fraction: ${fraction}`;
+            return `--slider-fraction: ${fraction}${this.axis}`;
         }
         const at = { center: 0.5, end: 1, start: 0 }[this.origin] ?? 0;
-        return `--slider-fraction: ${fraction}; --slider-from: ${Math.min(at, fraction)}; --slider-to: ${Math.max(at, fraction)}`;
+        return `--slider-fraction: ${fraction}; --slider-from: ${Math.min(at, fraction)}; --slider-to: ${Math.max(at, fraction)}${this.axis}`;
+    }
+    get axis() {
+        return this.orientation === 'vertical' ? '; writing-mode: vertical-lr; direction: rtl' : '';
     }
     snapped(at) {
         if (!(this.step > 0)) {
@@ -208,7 +211,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         id=${which === 'start' ? 'control' : 'control-end'}
         data-thumb=${which}
         type="range"
-        style="--slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}"
+        style="--slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}${this.axis}"
         min=${this.min}
         max=${this.max}
         step=${this.step}

package/dist/table/column/table-column.js

@@ -174,6 +174,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         const named = { name, named: name ? 'yes' : 'no' };
         const grid = this.gridCell;
         const control = grid ? '-1' : nothing;
+        const width = Math.min(4096, Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn));
         return html `<span
       part="column"
       role=${grid ? 'columnheader' : nothing}
@@ -197,8 +198,8 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             aria-orientation="vertical"
             aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
             aria-valuemax="4096"
-            aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
-            aria-valuetext=${formatWords(this, 'widthLabel', { width: this.drawn })}
+            aria-valuenow=${width}
+            aria-valuetext=${formatWords(this, 'widthLabel', { width })}
             @keydown=${this.handleResizeKey}
             @pointerdown=${this.handleResizeStart}
             @pointermove=${this.handleResizeMove}

package/dist/table/grid-controller.d.ts

@@ -24,6 +24,16 @@ export interface TableGridOptions {
     part: (name: string) => HTMLElement | null;
     /** The rows in the order they are drawn. */
     rows: () => Element[];
+    /**
+     * The words each row is found by when a reader types, in the order the rows
+     * are drawn.
+     */
+    rowWords: () => string[];
+    /**
+     * Selects every row from the row last chosen, or from row `from` where none
+     * was, to row `to`, and says whether the table selects at all.
+     */
+    selectRange: (to: number, from: number) => boolean;
     /** Selects every row for Control or Command with A, and says whether it did. */
     selectAll: () => boolean;
     /** Whether the table is a grid now. */
@@ -31,8 +41,8 @@ export interface TableGridOptions {
 }
 /**
  * The keyboard of a `grid` table: one tab stop among its cells, the arrow
- * keys, Home, End and the Page keys between them, and Enter or F2 into a
- * cell's controls.
+ * keys, Home, End and the Page keys between them, Enter or F2 into a cell's
+ * controls, typeahead over the rows, and Shift ranges of rows.
  *
  * **Tab leaves the grid.** The controls in a cell are the consumer's, so their
  * tab order is left as written: Tab on a cell, or past the last control of a
@@ -59,6 +69,8 @@ export declare class TableGridController implements ReactiveController {
     private pointing;
     /** The cells given a `tabindex`, so a table that stops being a grid takes it back. */
     private readonly given;
+    /** The letters a reader has typed at the rows. */
+    private readonly typeahead;
     constructor(host: ReactiveControllerHost & HTMLElement, options: TableGridOptions);
     hostConnected(): void;
     hostDisconnected(): void;

package/dist/table/grid-controller.js

@@ -1,4 +1,4 @@
-import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, whenHydrated, } from '@fusion.dev/helix-core';
+import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 const HEADS = { grip: 'grip-head', select: 'select-all' };
 const shown = (element) => {
     const hidden = element.getAttribute('hidden');
@@ -13,6 +13,7 @@ export class TableGridController {
         this.focusWanted = false;
         this.pointing = false;
         this.given = new Set();
+        this.typeahead = new Typeahead();
         this.handleKeydown = (event) => {
             if (!this.options.on() || event.defaultPrevented || event.altKey) {
                 return;
@@ -35,6 +36,25 @@ export class TableGridController {
                 }
                 return;
             }
+            if (typesCharacter(event) && (event.key !== ' ' || this.typeahead.typing())) {
+                const found = this.typeahead.match(event.key, this.options.rowWords(), place.row);
+                if (found >= 0) {
+                    event.preventDefault();
+                    if (found !== place.row) {
+                        this.moveTo({
+                            column: Math.max(0, Math.min(place.column, this.widthOf(found) - 1)),
+                            row: found,
+                        });
+                    }
+                }
+                return;
+            }
+            if (event.key === ' ' && event.shiftKey && place.row >= 0) {
+                if (this.options.selectRange(place.row, place.row)) {
+                    event.preventDefault();
+                }
+                return;
+            }
             if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2') {
                 if (event.key !== 'F2' && this.options.activate(place, event)) {
                     event.preventDefault();
@@ -57,6 +77,12 @@ export class TableGridController {
             }
             event.preventDefault();
             to.column = Math.max(0, Math.min(to.column, this.widthOf(to.row) - 1));
+            if (event.shiftKey &&
+                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
+                place.row >= 0 &&
+                to.row >= 0) {
+                this.options.selectRange(to.row, place.row);
+            }
             if (to.row !== place.row || to.column !== place.column) {
                 this.moveTo(to);
             }

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

@@ -76,7 +76,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * through cell by cell, the headings included, as React Aria's table is. The
  * table is then a `grid` and each value a `gridcell`, and the table gives
  * every cell a `tabindex` so focus can rest on it: set `grid` only where the
- * cells may carry one. For typeahead and range selection, use `DataTable`.
+ * cells may carry one.
  *
  * | Key | What it does |
  * |---|---|
@@ -90,7 +90,10 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
  * | Enter or Space on a grip cell | Picks the row up, or drops it, in a `reorderable` table. Up, Down, Home, and End move a row picked up, and Escape puts it back. |
+ * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
+ * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
+ * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
  * The CSS custom properties listed for this component are written by it and
@@ -105,7 +108,9 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The table's rows.
+ * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it, such as a heading.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
@@ -144,6 +149,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * `registerWords('de', { 'helix-table': { selectAllLabel: 'Alle Zeilen auswählen' } })`.
      */
     static words: string;
+    /** The empty and loading lines are the `empty` and `loading` slots. */
+    protected statusSlots: boolean;
     /**
      * The word for an ascending sort, in a `sorted-label` that writes `{order}`.
      *
@@ -383,9 +390,25 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     private readonly handleToggle;
     /** Every row's key, in the order the rows are written. */
     private get everyKey();
-    /** The checkbox in the heading: every row, or none where every row is chosen. */
+    /** The keys of the rows that can be chosen: every row that is not `disabled`. */
+    private get enabledKeys();
+    /** Whether the row of that key is `disabled`. */
+    private isDisabled;
+    /**
+     * The checkbox in the heading: every row that can be chosen, or none of
+     * them where each already is. A `disabled` row keeps what it had.
+     */
     private chooseAll;
-    /** One row's checkbox, ticked or not. */
+    /** The key of the row a Shift range runs from: the one last chosen. */
+    private anchorKey;
+    /**
+     * Selects every row from the one last chosen to the drawn row `to`, keeping
+     * what was already selected. With no row to run from, the range is the row
+     * the reader is on, `from`, and it becomes the one to run from. Says whether
+     * the table selects at all.
+     */
+    private selectRange;
+    /** One row's checkbox, ticked or not. It becomes the row a range runs from. */
     private chooseRow;
     /**
      * Enter, Space or F2 on a cell of a `grid` table, and whether it did
@@ -498,7 +521,10 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * assignment has not happened.
      */
     static shadowRootOptions: ShadowRootInit;
-    /** The rows: every child that is not a column, which is what the body slot is assigned. */
+    /**
+     * The rows: every child that is not a column, a heading, or the content of
+     * the `empty` or `loading` slot, which is what the body slot is assigned.
+     */
     protected get slotted(): Element[];
     private assign;
     /**