@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -31,7 +31,9 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * its stages that are `complete`. The `progress` part carries it as a
  * `progressbar` and as `--steps-progress`, and is hidden until a stylesheet
  * gives it a `display`, so a bar of your own costs nothing until you draw it.
- * The sequence is `:state(complete)` once every stage is.
+ * A screen reader hears it as `progress-label` says, "33% complete" unless
+ * set, as Ark UI's steps write it. The sequence is `:state(complete)` once
+ * every stage is.
  *
  * The sequence is a list named by `label`, and each step a list item. The
  * current stage's button says `aria-current="step"`, and a finished stage's
@@ -82,6 +84,11 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * catches people out.
      */
     orientation?: 'vertical';
+    /**
+     * What the `progress` part says to a screen reader, with `{percent}` filled
+     * in with `progress`.
+     */
+    progressLabel: string;
     /**
      * A function that answers whether a stage is valid, asked about the stage a
      * reader is on before they move forward from it. Return `false` to keep them

package/dist/steps/root/steps-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 { customElement, HelixElement, hostAria, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixElement, hostAria, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { canReach, progressOf } from '../reach.js';
@@ -13,6 +13,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         super(...arguments);
         this.label = 'Steps';
         this.linear = false;
+        this.progressLabel = '{percent}% complete';
         this.handleSelection = (event) => {
             if (event.defaultPrevented || !this.steps.includes(event.target)) {
                 return;
@@ -140,6 +141,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow=${progress}
+        aria-valuetext=${fillTemplate(this.progressLabel, { percent: String(progress) })}
         style="--steps-progress: ${progress}%"
         hidden
       ></div>`;
@@ -154,6 +156,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSteps.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'progress-label' })
+], HelixHeadlessSteps.prototype, "progressLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessSteps.prototype, "validate", void 0);

package/dist/steps/step/step.d.ts

@@ -45,6 +45,7 @@ import '../../button/index.js';
  * @csspart label - The step's name, which is a control.
  * @csspart label-button - The button inside the label.
  * @csspart label-live - The live region inside that button, rendered only from the first time the button is pending.
+ * @csspart label-spinner - The ring that button turns while it is pending.
  * @csspart label-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart live - The live region that says a stage was completed, rendered from the first time one is.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.

package/dist/steps/step/step.js

@@ -53,7 +53,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     renderLabel() {
         return html `<${this.tag('button')}
       part="label"
-      exportparts="button: label-button, live: label-live, text: label-text"
+      exportparts="button: label-button, live: label-live, spinner: label-spinner, text: label-text"
       emphasis="ghost"
       aria-current=${this.current ? 'step' : nothing}
       aria-describedby=${this.complete ? 'state' : nothing}

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

@@ -14,7 +14,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *   table with no `TableColumn` heads its columns with.
  *
  * The role is on the host so the cell stays a child of its row in the flat
- * tree, which keeps the table structure intact.
+ * tree, which keeps the table structure intact. In a `grid` table a value is
+ * a `gridcell`, and the table gives the cell a `tabindex` so focus can rest on
+ * it.
  *
  * @since 0.1.0
  * @status stable
@@ -33,6 +35,11 @@ export declare class HelixHeadlessTableCell extends HelixElement {
      * column in a row of headers alone.
      */
     header: boolean;
+    /**
+     * @internal Whether the cell is a cell of a `grid` table, which moves focus
+     * between its cells, written by that table. Not a consumer's to set.
+     */
+    gridCell: boolean;
     /**
      * @internal Read by the row and by the cells beside it, to tell a header
      * cell from a value. Not a consumer's to read or set.

package/dist/table/cell/table-cell.js

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
     constructor() {
         super(...arguments);
         this.header = false;
+        this.gridCell = false;
         this.isTableCell = true;
         this.handleSlotChange = () => {
             const text = [...this.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== '');
@@ -27,7 +28,7 @@ let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         const header = this.headsRow ? 'rowheader' : 'columnheader';
-        hostAria(this.internals, { role: this.header ? header : 'cell' });
+        hostAria(this.internals, { role: this.header ? header : this.gridCell ? 'gridcell' : 'cell' });
     }
     updated(changed) {
         super.updated(changed);
@@ -47,6 +48,9 @@ let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTableCell.prototype, "header", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableCell.prototype, "gridCell", void 0);
 HelixHeadlessTableCell = __decorate([
     customElement('helix-headless-table-cell')
 ], HelixHeadlessTableCell);

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

@@ -271,6 +271,12 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * table that sets `gridCell`. Not a consumer's to set.
      */
     tabStop: boolean;
+    /**
+     * @internal The sort said in words on the sort button, written by the table
+     * on Android, where TalkBack reads no `aria-sort`. Empty elsewhere. Not a
+     * consumer's to set: the table's `sorted-label` holds the words.
+     */
+    sortWords: string;
     /** How wide the heading drew, for the separator to report. */
     private drawn;
     /** Where a drag of the separator started, while one is running. */

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

@@ -30,6 +30,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.movable = false;
         this.gridCell = false;
         this.tabStop = false;
+        this.sortWords = '';
         this.drawn = 0;
         this.handleResizeStart = (event) => {
             if (event.button !== 0) {
@@ -184,7 +185,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             </svg>
           </button>`
             : nothing}${this.canSort
-            ? html `<button part="sort" type="button" tabindex=${control}><slot></slot></button>`
+            ? html `<button part="sort" type="button" tabindex=${control} aria-description=${this.sortWords || nothing}><slot></slot></button>`
             : html `<slot></slot>`}${this.resizable
             ? html `<span
             part="resizer"
@@ -250,6 +251,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "tabStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "sortWords", void 0);
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "drawn", void 0);

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

@@ -0,0 +1,117 @@
+import { type GridPlace } from '@fusion.dev/helix-core';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { HelixHeadlessTableColumn } from './column/table-column.js';
+/** A place in the grid with the element that holds focus there. */
+export interface GridCell extends GridPlace {
+    cell: HTMLElement;
+}
+export interface TableGridOptions {
+    /**
+     * Acts on a cell for Enter, Space or F2, and says whether it did. A key it
+     * leaves alone moves into the cell's controls, Enter and F2 only.
+     */
+    activate: (place: GridCell, event: KeyboardEvent) => boolean;
+    /** The headings that are drawn, in order. */
+    columns: () => HelixHeadlessTableColumn[];
+    /** The element in the table's own shadow root holding a part of that name. */
+    part: (name: string) => HTMLElement | null;
+    /** The rows in the order they are drawn. */
+    rows: () => Element[];
+    /** Selects every row for Control or Command with A, and says whether it did. */
+    selectAll: () => boolean;
+    /** Whether a checkbox column leads. */
+    selectable: () => boolean;
+    /** Whether the table is a grid now. */
+    on: () => boolean;
+}
+/**
+ * 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.
+ *
+ * **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
+ * cell, focuses an empty box at the grid's end (Shift: its start) and lets the
+ * key go on from there, as React Aria's collections do. A control in a cell
+ * that focus reaches from outside by the keyboard hands it to the stop, so the
+ * grid is one stop from either side. A press, or a script focusing a cell, is
+ * left where it lands, and the stop follows it.
+ */
+export declare class TableGridController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The row holding the stop, `head` for the headings, or nothing for the first row. */
+    private stopRow;
+    /** The column holding the stop. */
+    private stopColumn;
+    /** Where the stop's row was drawn when last marked, for the row that takes over when it goes. */
+    private stopIndex;
+    /** The row focus is in, while it is in the grid's rows. */
+    private focusRow;
+    /** Whether the next update focuses the stop, after a key moved it. */
+    private focusWanted;
+    /** Whether focus is arriving from a press, which keeps its place. */
+    private pointing;
+    /** The cells given a `tabindex`, so a table that stops being a grid takes it back. */
+    private readonly given;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: TableGridOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * A row taken away while it held the stop hands it to the row drawn in its
+     * place, or to the row before where it was the last, at the same column.
+     * Where focus was in that row and went with it, focus follows the stop, as
+     * React Aria's collections move it to a neighbor; focus that had already
+     * left the grid is left where it is. Before the render, so the cells the
+     * table draws itself are drawn with the stop where it now is.
+     */
+    hostUpdate(): void;
+    /** How many columns lead the consumer's cells: the checkbox column, where there is one. */
+    private get offset();
+    /** The first row: the headings where there are any, and the first row of cells otherwise. */
+    private get top();
+    /** A row's cells that are drawn, in order. */
+    private cellsOf;
+    /** How many columns a row has. */
+    private widthOf;
+    /** The element that takes focus at a place, or nothing where there is none. */
+    cellAt({ column, row }: GridPlace): HTMLElement | null;
+    /** The place holding the stop now, held to the grid as it is. */
+    current(): GridPlace;
+    /** Whether the stop is at a place, for a cell the table draws itself. */
+    isStop(place: GridPlace): boolean;
+    /** The place an event came from or through, with the element that holds focus there. */
+    private placeOf;
+    /** Moves the stop to a place, and focus with it on the next update. */
+    private moveTo;
+    /**
+     * Writes the stops: a `tabindex` on every cell, `0` on the one holding the
+     * stop, and the grid's state on the rows and headings. Takes it all back
+     * once the table stops being a grid. Called by the table after each update.
+     */
+    mark(): void;
+    /** Focuses the stop where a key asked for it. Called by the table after `mark`. */
+    place(): void;
+    /** The controls in a cell, in order: what Enter and F2 move into, and Tab moves between. */
+    private controlsIn;
+    /**
+     * Hands focus to the empty box at the grid's end, or its start, so the Tab
+     * under way goes on from there and out of the grid.
+     */
+    private leave;
+    /** How many rows a Page key moves from a cell. */
+    private pageFrom;
+    private readonly handleKeydown;
+    /** The keys the grid takes while focus is on a control inside a cell. */
+    private handleControlKey;
+    /**
+     * Focus arriving on a cell, or inside one. From outside the grid by the
+     * keyboard, anywhere but the stop is handed to the stop; otherwise the stop
+     * moves to where focus went.
+     */
+    private readonly handleFocusIn;
+    /** Focus leaving for somewhere outside the grid's host is no longer in a row. */
+    private readonly handleFocusOut;
+    /** A press is under way, so the focus it brings stays where it lands. */
+    private readonly handlePointerDown;
+}

package/dist/table/grid-controller.js

@@ -0,0 +1,293 @@
+import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, whenHydrated, } from '@fusion.dev/helix-core';
+const shown = (element) => {
+    const hidden = element.getAttribute('hidden');
+    return hidden === null || hidden === 'until-found';
+};
+export class TableGridController {
+    constructor(host, options) {
+        this.stopRow = undefined;
+        this.stopColumn = 0;
+        this.stopIndex = 0;
+        this.focusRow = undefined;
+        this.focusWanted = false;
+        this.pointing = false;
+        this.given = new Set();
+        this.handleKeydown = (event) => {
+            if (!this.options.on() || event.defaultPrevented || event.altKey) {
+                return;
+            }
+            const place = this.placeOf(event);
+            if (!place) {
+                return;
+            }
+            if (event.composedPath()[0] !== place.cell) {
+                this.handleControlKey(event, place);
+                return;
+            }
+            if (event.key === 'Tab') {
+                this.leave(event.shiftKey);
+                return;
+            }
+            if (selectsAll(event) && !event.shiftKey) {
+                if (this.options.selectAll()) {
+                    event.preventDefault();
+                }
+                return;
+            }
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2') {
+                if (event.key !== 'F2' && this.options.activate(place, event)) {
+                    event.preventDefault();
+                    return;
+                }
+                const first = event.key === ' ' ? undefined : this.controlsIn(place)[0];
+                if (first) {
+                    event.preventDefault();
+                    first.focus();
+                }
+                return;
+            }
+            const to = gridMove(event.key, place, { last: this.options.rows().length - 1, top: this.top, width: this.widthOf(place.row) }, {
+                control: event.ctrlKey || event.metaKey,
+                page: event.key.startsWith('Page') ? this.pageFrom(place.cell) : 1,
+                step: inlineStep(this.host, event.key),
+            });
+            if (!to) {
+                return;
+            }
+            event.preventDefault();
+            to.column = Math.max(0, Math.min(to.column, this.widthOf(to.row) - 1));
+            if (to.row !== place.row || to.column !== place.column) {
+                this.moveTo(to);
+            }
+        };
+        this.handleFocusIn = (event) => {
+            if (!this.options.on()) {
+                return;
+            }
+            const place = this.placeOf(event);
+            if (!place) {
+                return;
+            }
+            const from = event.relatedTarget;
+            const entering = !(from instanceof Node && deepContains(this.host, from));
+            if (entering && !this.pointing && event.composedPath()[0] !== place.cell) {
+                const stop = this.cellAt(this.current());
+                if (stop) {
+                    stop.focus();
+                    return;
+                }
+            }
+            this.focusRow = place.row === -1 ? undefined : this.options.rows()[place.row];
+            const at = this.current();
+            if (at.row !== place.row || at.column !== place.column) {
+                this.moveTo(place, false);
+            }
+        };
+        this.handleFocusOut = (event) => {
+            const to = event.relatedTarget;
+            if (to instanceof Node && !deepContains(this.host, to)) {
+                this.focusRow = undefined;
+            }
+        };
+        this.handlePointerDown = () => {
+            this.pointing = true;
+            setTimeout(() => {
+                this.pointing = false;
+            });
+        };
+        this.host = host;
+        this.options = options;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', this.handleKeydown);
+        this.host.addEventListener('focusin', this.handleFocusIn);
+        this.host.addEventListener('focusout', this.handleFocusOut);
+        this.host.addEventListener('pointerdown', this.handlePointerDown);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.handleKeydown);
+        this.host.removeEventListener('focusin', this.handleFocusIn);
+        this.host.removeEventListener('focusout', this.handleFocusOut);
+        this.host.removeEventListener('pointerdown', this.handlePointerDown);
+    }
+    hostUpdate() {
+        const gone = this.stopRow;
+        const rows = this.options.rows();
+        if (!(gone instanceof Element) || rows.includes(gone)) {
+            return;
+        }
+        this.stopRow = rows[Math.min(this.stopIndex, rows.length - 1)];
+        const active = deepActiveElement();
+        if (this.focusRow === gone && (!active || active === document.body)) {
+            this.focusWanted = true;
+        }
+        this.focusRow = undefined;
+    }
+    get offset() {
+        return this.options.selectable() ? 1 : 0;
+    }
+    get top() {
+        return this.options.columns().length > 0 || this.options.selectable() ? -1 : 0;
+    }
+    cellsOf(row) {
+        return [...(row?.children ?? [])].filter(shown);
+    }
+    widthOf(row) {
+        const own = row === -1 ? this.options.columns().length : this.cellsOf(this.options.rows()[row]).length;
+        return this.offset + own;
+    }
+    cellAt({ column, row }) {
+        const lead = column < this.offset;
+        if (row === -1) {
+            return lead
+                ? this.options.part('select-all')
+                : (this.options.columns()[column - this.offset]?.cellBox ?? null);
+        }
+        const line = this.options.rows()[row];
+        if (lead) {
+            return line?.shadowRoot?.querySelector('[part~="select"]') ?? null;
+        }
+        return this.cellsOf(line)[column - this.offset] ?? null;
+    }
+    current() {
+        const found = this.stopRow === undefined || this.stopRow === 'head'
+            ? -1
+            : this.options.rows().indexOf(this.stopRow);
+        const row = this.stopRow === 'head' || found < 0 ? this.top : found;
+        const width = this.widthOf(row);
+        return { column: Math.max(0, Math.min(this.stopColumn, width - 1)), row };
+    }
+    isStop(place) {
+        const at = this.current();
+        return this.options.on() && at.row === place.row && at.column === place.column;
+    }
+    placeOf(event) {
+        const columns = this.options.columns();
+        const rows = this.options.rows();
+        for (const node of event.composedPath()) {
+            if (node === this.host) {
+                return undefined;
+            }
+            if (!(node instanceof HTMLElement)) {
+                continue;
+            }
+            const heading = columns.indexOf(node);
+            if (heading >= 0) {
+                const cell = node.cellBox;
+                return cell ? { cell, column: heading + this.offset, row: -1 } : undefined;
+            }
+            const part = node.getAttribute('part') ?? '';
+            if (part === 'select-all' && node.getRootNode() === this.host.shadowRoot) {
+                return { cell: node, column: 0, row: -1 };
+            }
+            const root = node.getRootNode();
+            if (part.split(' ').includes('select') && rows.includes(root.host)) {
+                return { cell: node, column: 0, row: rows.indexOf(root.host) };
+            }
+            const parent = node.parentElement;
+            if (parent && rows.includes(parent) && shown(node)) {
+                const column = this.cellsOf(parent).indexOf(node);
+                return { cell: node, column: column + this.offset, row: rows.indexOf(parent) };
+            }
+        }
+        return undefined;
+    }
+    moveTo(place, focus = true) {
+        this.stopRow = place.row === -1 ? 'head' : this.options.rows()[place.row];
+        this.stopColumn = place.column;
+        this.focusWanted = focus;
+        this.host.requestUpdate();
+    }
+    mark() {
+        const on = this.options.on();
+        const at = this.current();
+        this.stopIndex = Math.max(0, at.row);
+        const columns = this.options.columns();
+        for (const [index, column] of columns.entries()) {
+            column.gridCell = on;
+            column.tabStop = on && at.row === -1 && at.column === index + this.offset;
+        }
+        for (const [index, line] of this.options.rows().entries()) {
+            const row = line;
+            if (row.isTableRow) {
+                whenHydrated(row, () => {
+                    row.gridCell = on;
+                    row.selectStop = on && at.row === index && at.column === 0 && this.offset === 1;
+                });
+            }
+            for (const [place, cell] of this.cellsOf(line).entries()) {
+                if ('isTableCell' in cell) {
+                    ;
+                    cell.gridCell = on;
+                }
+                if (!on) {
+                    continue;
+                }
+                const stop = at.row === index && at.column === place + this.offset ? 0 : -1;
+                if (cell.tabIndex !== stop || !cell.hasAttribute('tabindex')) {
+                    cell.tabIndex = stop;
+                }
+                this.given.add(cell);
+            }
+        }
+        for (const cell of this.given) {
+            if (!on || !cell.isConnected) {
+                if (!on) {
+                    cell.removeAttribute('tabindex');
+                }
+                this.given.delete(cell);
+            }
+        }
+    }
+    place() {
+        if (!this.focusWanted || !this.options.on()) {
+            return;
+        }
+        this.focusWanted = false;
+        this.cellAt(this.current())?.focus();
+    }
+    controlsIn(place) {
+        if (place.row === -1) {
+            return place.column < this.offset
+                ? []
+                : (this.options.columns()[place.column - this.offset]?.controls ?? []);
+        }
+        return place.column < this.offset ? [] : focusableElements(place.cell);
+    }
+    leave(back) {
+        const edge = this.options.part(back ? 'grid-start' : 'grid-end');
+        if (!edge) {
+            return;
+        }
+        edge.tabIndex = 0;
+        edge.addEventListener('focusout', () => {
+            edge.tabIndex = -1;
+        }, { once: true });
+        edge.focus({ preventScroll: true });
+    }
+    pageFrom(cell) {
+        const room = scrollRoom(scrollingAncestor(cell, { axis: 'y', overflowing: true }));
+        return pageRows(room, cell.getBoundingClientRect().height);
+    }
+    handleControlKey(event, place) {
+        if (event.key === 'Escape' || event.key === 'F2') {
+            event.preventDefault();
+            place.cell.focus();
+            return;
+        }
+        if (event.key !== 'Tab') {
+            return;
+        }
+        const origin = event.composedPath()[0];
+        const controls = this.controlsIn(place);
+        const at = controls.findIndex((one) => deepContains(one, origin));
+        const next = at >= 0 ? controls[at + (event.shiftKey ? -1 : 1)] : undefined;
+        if (next) {
+            event.preventDefault();
+            next.focus();
+            return;
+        }
+        this.leave(event.shiftKey);
+    }
+}

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

@@ -50,9 +50,28 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * 4. A chosen row takes `:state(selected)`, and a screen reader hears
  *    `selected-label` ("2 selected") from a polite region.
  *
- * Tab reaches each checkbox, and Space ticks it. For a grid a reader moves
- * through with the arrow keys, with typeahead and range selection, use
- * `DataTable`. To act on one row, put a link or a button in a cell.
+ * Tab reaches each checkbox, and Space ticks it. To act on one row, put a
+ * link or a button in a cell, or give the row an `href`.
+ *
+ * **A grid.** `grid` makes the table one tab stop that the arrow keys move
+ * 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`.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |
+ * | Down, Up | Moves one row, the headings included. |
+ * | Home, End | Moves to the first or the last cell of the row. |
+ * | Control with Home or End | Moves to the first or the last cell of the table. |
+ * | Page Down, Page Up | Moves by the rows that fit in view. |
+ * | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. |
+ * | Enter on a cell of a row with `href` | Follows the row's link. |
+ * | 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. |
+ * | Control or Command with A | Selects every row, in a `selectable` table. |
+ * | Tab | Leaves the table. |
  *
  * The CSS custom properties listed for this component are written by it and
  * read by the stylesheet that draws it. Do not set them. Each holds a number
@@ -85,6 +104,8 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart checkbox-mark-dash - Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
  * @csspart empty - The text shown when there are no rows.
+ * @csspart grid-end - An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
+ * @csspart grid-start - An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
  * @csspart head - The row that holds the column headings. It has `display: contents`, so it takes no space of its own.
  * @csspart live - A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the rows are loading.
@@ -138,6 +159,16 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     defaultSort: string;
     /** The word for a descending sort, in `sorted-label`. */
     descendingLabel: string;
+    /**
+     * Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
+     * Page keys move focus between its cells, the headings included. Enter moves
+     * into a cell's controls, and Tab leaves the table.
+     *
+     * Off by default, where the table is a static `table` and Tab reaches each
+     * link and control in it. On, the table writes a `tabindex` onto each of its
+     * cells, which is the one way a cell of your markup can take focus.
+     */
+    grid: boolean;
     /**
      * Accessible name for the table.
      *
@@ -202,6 +233,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * itself kept its default name.
      */
     protected readonly aria: AriaForwardController;
+    /** The keyboard of a `grid` table, in `grid-controller.ts`. */
+    private readonly gridKeys;
     /**
      * Asks for a different order, and reports whether the request stood.
      */
@@ -248,6 +281,17 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * left alone.
      */
     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. */
+    private chooseAll;
+    /** One row's checkbox, ticked or not. */
+    private chooseRow;
+    /**
+     * Enter, Space or F2 on a cell of a `grid` table, and whether it did
+     * anything. Left alone, Enter and F2 move into the cell's controls.
+     */
+    private activate;
     /**
      * Tells each row whether it is selected and what its checkbox is called.
      *