@fusion.dev/helix-headless 0.147.0 → 0.148.0

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.
      *

package/dist/table/root/table-root.js

@@ -4,12 +4,13 @@ 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 { AriaForwardController, commaList, customElement, cycle, everyState, fillTemplate, format, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, assignSlots, commaList, customElement, cycle, everyState, fillTemplate, followLink, format, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../checkbox/index.js';
 import { edgeOf } from '../column/table-column.js';
+import { TableGridController } from '../grid-controller.js';
 const tracksOf = (list, wanted) => {
     const words = splitValues(list, ' ');
     const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
@@ -51,6 +52,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.defaultSelected = '';
         this.defaultSort = '';
         this.descendingLabel = 'descending';
+        this.grid = false;
         this.label = '';
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
@@ -65,6 +67,15 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             label: true,
             target: () => this.partNamed('table'),
         });
+        this.gridKeys = new TableGridController(this, {
+            activate: (place, event) => this.activate(place, event),
+            columns: () => this.tableColumns.filter((column) => column.shown),
+            on: () => this.grid,
+            part: (name) => this.partNamed(name),
+            rows: () => (this.childrenKnown ? this.arrangedRows : []),
+            selectAll: () => this.selectable && this.requestSelected(new Set(this.everyKey)),
+            selectable: () => this.selectable,
+        });
         this.heardSort = undefined;
         this.heardSortBefore = undefined;
         this.heardSelected = undefined;
@@ -74,10 +85,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 return;
             }
             const root = origin.getRootNode();
-            const keys = this.chosen;
             if (root === this.renderRoot) {
                 event.preventDefault();
-                this.requestSelected(new Set(toggleEvery(keys, this.keyed.map(({ key }) => key))));
+                this.chooseAll();
                 return;
             }
             const found = this.keyed.find(({ row }) => row.shadowRoot === root);
@@ -85,13 +95,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 return;
             }
             event.preventDefault();
-            if (event.detail.checked) {
-                keys.add(found.key);
-            }
-            else {
-                keys.delete(found.key);
-            }
-            this.requestSelected(keys);
+            this.chooseRow(found.key, event.detail.checked);
         };
         this.handleHeadClick = (event) => {
             const path = event.composedPath();
@@ -207,6 +211,52 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             next: inRowOrder(keys, this.keyed.map(({ key }) => key)).join(','),
         });
     }
+    get everyKey() {
+        return this.keyed.map(({ key }) => key);
+    }
+    chooseAll() {
+        this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
+    }
+    chooseRow(key, on) {
+        const keys = this.chosen;
+        if (on) {
+            keys.add(key);
+        }
+        else {
+            keys.delete(key);
+        }
+        this.requestSelected(keys);
+    }
+    activate(place, event) {
+        const lead = this.selectable && place.column === 0;
+        if (event.key === 'F2') {
+            return false;
+        }
+        if (place.row === -1) {
+            if (lead) {
+                this.chooseAll();
+                return true;
+            }
+            const shown = this.tableColumns.filter((one) => one.shown);
+            const column = shown[place.column - (this.selectable ? 1 : 0)];
+            if (column?.canSort) {
+                this.toggleSort(column.field);
+                return true;
+            }
+            return false;
+        }
+        const row = this.arrangedRows[place.row];
+        const found = this.keyed.find((one) => one.row === row);
+        if (this.selectable && found && (event.key === ' ' || lead)) {
+            this.chooseRow(found.key, !this.chosen.has(found.key));
+            return true;
+        }
+        if (event.key === 'Enter' && row?.href) {
+            followLink(this.ownerDocument, { href: row.href, rel: row.rel, target: row.target }, event);
+            return true;
+        }
+        return false;
+    }
     markSelected() {
         const keys = this.chosen;
         for (const { key, row } of this.keyed) {
@@ -325,16 +375,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             }
             return;
         }
-        const head = this.renderRoot?.querySelector('slot[name="columns"]');
-        const body = this.renderRoot?.querySelector('slot:not([name])');
-        if (!head || !body) {
-            return;
-        }
-        head.assign(...this.tableColumns);
-        body.assign(...this.arrangedRows);
-        this.renderRoot
-            ?.querySelector('slot[name="heading"]')
-            ?.assign(...this.headings);
+        const columns = new Set(this.tableColumns);
+        const headings = new Set(this.headings);
+        assignSlots(this.renderRoot, [...columns, ...headings, ...this.arrangedRows], (child) => (columns.has(child) ? 'columns' : headings.has(child) ? 'heading' : ''));
     }
     alignCells() {
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
@@ -368,6 +411,10 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.markSorted();
         this.markSelected();
         this.nameByHeading();
+        if (this.childrenKnown) {
+            this.gridKeys.mark();
+            this.gridKeys.place();
+        }
     }
     renderSelectAll() {
         if (!this.selectable) {
@@ -376,9 +423,12 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const every = this.childrenKnown ? this.keyed.map(({ key }) => key) : [];
         const { checked, indeterminate } = everyState(this.chosen, every);
         const checkbox = this.tag('checkbox');
+        const grid = this.grid;
         return html `<span part="select-all" role="columnheader"
+      tabindex=${grid ? (this.gridKeys.isStop({ column: 0, row: -1 }) ? '0' : '-1') : nothing}
       ><${checkbox}
         part="checkbox"
+        tabindex=${grid ? '-1' : nothing}
         exportparts="box: checkbox-box, control: checkbox-control, feedback: checkbox-feedback,
           field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark,
           mark-checked: checkbox-mark-checked, mark-dash: checkbox-mark-dash,
@@ -391,9 +441,13 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     render() {
         const template = this.template;
-        return html `<slot name="heading"></slot><div
+        const grid = this.grid;
+        const start = grid ? html `<span part="grid-start" tabindex="-1"></span>` : nothing;
+        const end = grid ? html `<span part="grid-end" tabindex="-1"></span>` : nothing;
+        return html `<slot name="heading"></slot>${start}<div
       part="table"
-      role="table"
+      role=${grid ? 'grid' : 'table'}
+      aria-multiselectable=${grid && this.selectable ? 'true' : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label || 'Table'}
       style=${template ? `--table-template: ${template}` : ''}
@@ -405,8 +459,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.handleSlotChange();
         }}
       ></slot>
-      ${this.renderStatus(this.hasRows, 'cell')}
-    </div>${this.renderLive(this.hasRows)}`;
+      ${this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')}
+    </div>${end}${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([
@@ -424,6 +478,9 @@ __decorate([
 __decorate([
     property({ attribute: 'descending-label' })
 ], HelixHeadlessTable.prototype, "descendingLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTable.prototype, "grid", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "label", void 0);

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

@@ -18,7 +18,8 @@ import '../../checkbox/index.js';
  * of the row's own, and Control, Command or Shift open it the way they open a
  * link. A drag that selects text follows nothing. A row in a table is not a
  * stop of its own, so put the same link in a cell, usually the row header,
- * which is what the keyboard and a screen reader reach.
+ * which is what the keyboard and a screen reader reach. In a `grid` table,
+ * Enter on any cell of the row follows it as well.
  *
  * @since 0.1.0
  * @status stable
@@ -76,6 +77,17 @@ export declare class HelixHeadlessTableRow extends HelixElement {
     selected: boolean;
     /** @internal The name of the row's checkbox, written by the table. Not a consumer's to set. */
     selectLabel: string;
+    /**
+     * @internal Whether the row is a row of a `grid` table, written by that
+     * table. Not a consumer's to set. The checkbox cell is then a `gridcell`
+     * that takes focus, and the row says whether it is selected.
+     */
+    gridCell: boolean;
+    /**
+     * @internal Whether the checkbox cell holds the grid's one tab stop, written
+     * by the table that sets `gridCell`. Not a consumer's to set.
+     */
+    selectStop: boolean;
     /** The table's rules this row holds, so the next ones replace them rather than pile up. */
     private columnRules;
     /**

package/dist/table/row/table-row.js

@@ -4,12 +4,11 @@ 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, hostAria } from '@fusion.dev/helix-core';
+import { customElement, followLink, HelixElement, hostAria, pressedOwnControl, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../checkbox/index.js';
-const PRESSABLE = 'a[href], button, input, label, select, summary, textarea, [tabindex]';
 let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     constructor() {
         super(...arguments);
@@ -21,14 +20,17 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.selectable = false;
         this.selected = false;
         this.selectLabel = '';
+        this.gridCell = false;
+        this.selectStop = false;
         this.columnRules = undefined;
         this.handleClick = (event) => {
             if (this.href === '' || event.button !== 0 || event.defaultPrevented) {
                 return;
             }
-            const path = event.composedPath();
-            const inner = path.slice(0, Math.max(0, path.indexOf(this)));
-            if (inner.some((node) => node instanceof Element && node.matches(PRESSABLE))) {
+            const cell = event
+                .composedPath()
+                .find((node) => node instanceof Element && node.parentElement === this && 'isTableCell' in node);
+            if (pressedOwnControl(event, cell ?? this)) {
                 return;
             }
             if (globalThis.getSelection?.()?.toString()) {
@@ -59,6 +61,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
+        this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
         this.toggleState('selected', this.selectable && this.selected);
         this.toggleState('link', this.href !== '');
     }
@@ -75,8 +78,13 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
             return nothing;
         }
         const checkbox = this.tag('checkbox');
-        return html `<span part="select${this.selected ? ' select-selected' : ''}" role="cell"
+        const grid = this.gridCell;
+        return html `<span
+      part="select${this.selected ? ' select-selected' : ''}"
+      role=${grid ? 'gridcell' : 'cell'}
+      tabindex=${grid ? (this.selectStop ? '0' : '-1') : nothing}
       ><${checkbox}
+        tabindex=${grid ? '-1' : nothing}
         part="checkbox"
         exportparts="box: checkbox-box, control: checkbox-control, feedback: checkbox-feedback,
           field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark,
@@ -112,6 +120,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "selectLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gridCell", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "selectStop", void 0);
 HelixHeadlessTableRow = __decorate([
     customElement('helix-headless-table-row')
 ], HelixHeadlessTableRow);