@fusion.dev/helix-headless 0.142.0 → 0.143.0

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, fillTemplate, formatNumbers, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, reportRuntime, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, reportRuntime, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -14,6 +14,16 @@ import { at, edgeOf } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
+const CONTROL = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]',
+].join(',');
+const isControl = (element) => element.matches(CONTROL) || element.shadowRoot?.delegatesFocus === true;
 let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -26,13 +36,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.estimate = 32;
+        this.gapLabel = 'Skip to page {page}';
         this.label = '';
         this.mode = 'client';
+        this.nextLabel = 'Next page';
+        this.pageLabel = 'Page {page}';
+        this.paginationLabel = 'Pagination';
+        this.previousLabel = 'Previous page';
         this.reorderable = false;
+        this.resultLabel = '{count} result';
+        this.resultsLabel = '{count} results';
         this.rowKey = '';
         this.rows = [];
         this.selectable = false;
+        this.selectAllLabel = 'Select every row';
         this.selectedLabel = '{count} selected';
+        this.selectRowLabel = 'Select {row}';
         this.sortedLabel = 'Sorted by {column}, {order}';
         this.total = 0;
         this.unsortedLabel = 'Not sorted';
@@ -44,6 +63,15 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.paginatedState = undefined;
         this.orderState = undefined;
         this.selectedState = undefined;
+        this.activeRow = undefined;
+        this.activeColumn = 0;
+        this.activeKey = undefined;
+        this.focusWanted = false;
+        this.drawnPage = [];
+        this.counts = {
+            columns: undefined,
+            rows: undefined,
+        };
         this.dragOrder = undefined;
         this.warnedAboutKey = false;
         this.virtualize = new VirtualizeController(this, {
@@ -56,33 +84,15 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.warnedAboutSize = false;
         this.toggleRow = (key, event) => {
             event.preventDefault();
-            const keys = this.chosen;
-            if (event.detail.checked) {
-                keys.add(key);
-            }
-            else {
-                keys.delete(key);
-            }
-            this.requestSelected(keys);
+            this.chooseRow(key, event.detail.checked);
         };
         this.toggleAll = (event) => {
             event.preventDefault();
-            const every = this.everyKey;
-            const keys = this.chosen;
-            if (every.length > 0 && every.every((key) => keys.has(key))) {
-                for (const key of every) {
-                    keys.delete(key);
-                }
-            }
-            else {
-                for (const key of every) {
-                    keys.add(key);
-                }
-            }
-            this.requestSelected(keys);
+            this.chooseAll();
         };
         this.heardSort = undefined;
         this.heardSelected = undefined;
+        this.heardFilter = undefined;
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -101,6 +111,81 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 this.toggleSort(column.field);
             }
         };
+        this.hadFocus = false;
+        this.handleFocusIn = (event) => {
+            const place = this.placeOf(event);
+            if (!place) {
+                return;
+            }
+            if (place.row >= 0 && this.keptRow(this.drawnPage) === place.row) {
+                this.virtualize.reveal(place.row, this.headHeight());
+            }
+            if (this.activeRow === undefined ||
+                place.row !== this.currentRow(this.drawnPage) ||
+                place.column !== this.currentColumn) {
+                const page = this.drawnPage;
+                this.activeRow = place.row;
+                this.activeColumn = place.column;
+                this.activeKey =
+                    place.row >= 0 && this.rowKey && page[place.row]
+                        ? this.rowKeyOf(page[place.row], place.row)
+                        : undefined;
+            }
+        };
+        this.handleGridKey = (event) => {
+            if (event.defaultPrevented || event.altKey) {
+                return;
+            }
+            const place = this.placeOf(event);
+            if (!place) {
+                return;
+            }
+            if (event.composedPath()[0] !== place.cell) {
+                this.handleControlKey(event, place);
+                return;
+            }
+            const last = this.drawnPage.length - 1;
+            const edge = this.width - 1;
+            const control = event.ctrlKey || event.metaKey;
+            let { column, row } = place;
+            switch (event.key) {
+                case 'ArrowUp':
+                    row = Math.max(-1, row - 1);
+                    break;
+                case 'ArrowDown':
+                    row = Math.min(last, row + 1);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    column = Math.max(0, Math.min(edge, column + inlineStep(this, event.key)));
+                    break;
+                case 'Home':
+                    row = control ? -1 : row;
+                    column = 0;
+                    break;
+                case 'End':
+                    row = control ? Math.max(row, last) : row;
+                    column = edge;
+                    break;
+                case 'PageUp':
+                    row = Math.max(-1, row - this.pageStep(place.cell));
+                    break;
+                case 'PageDown':
+                    row = Math.min(last, row + this.pageStep(place.cell));
+                    break;
+                case 'Enter':
+                case ' ':
+                case 'F2':
+                    this.activate(event, place);
+                    return;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            if (row !== place.row || column !== place.column) {
+                this.moveTo(row, column);
+            }
+        };
         this.handleGripKey = (event) => {
             if (!this.partIn(event, 'grip')) {
                 return;
@@ -163,6 +248,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.handleResize = () => {
             queueMicrotask(() => this.requestUpdate());
         };
+        this.stopPageNotification = (event) => {
+            event.stopPropagation();
+        };
         this.handleNavigate = (event) => {
             event.stopPropagation();
             const wanted = Number(event.detail.value);
@@ -234,7 +322,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.requestUpdate('sort', previous);
     }
     drawn() {
-        return [...this.renderRoot.querySelectorAll('[part="row"][data-index]')].map((element) => ({ element, index: Number(element.dataset.index) }));
+        return [...this.renderRoot.querySelectorAll('[part="row"][data-index]')].flatMap((row) => {
+            const cell = row.firstElementChild;
+            return cell instanceof HTMLElement
+                ? [{ element: cell, index: Number(row.dataset.index) }]
+                : [];
+        });
     }
     get available() {
         if (this.mode === 'server') {
@@ -258,11 +351,53 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return value;
     }
     windowOf(rows) {
+        const all = rows.map((row, index) => ({ index, row }));
+        if (!this.windowed) {
+            return all;
+        }
+        const { first, last } = this.virtualize.window;
+        const drawn = all.slice(first, last);
+        const kept = this.keptRow(rows);
+        if (kept === undefined) {
+            return drawn;
+        }
+        const row = rows[kept];
+        return kept < first ? [{ index: kept, row }, ...drawn] : [...drawn, { index: kept, row }];
+    }
+    keptRow(rows) {
         if (!this.windowed) {
-            return rows;
+            return undefined;
         }
+        const row = this.currentRow(rows);
         const { first, last } = this.virtualize.window;
-        return rows.slice(first, last);
+        return row >= 0 && (row < first || row >= last) ? row : undefined;
+    }
+    rowKeyOf(row, index) {
+        if (!this.rowKey) {
+            return String(index);
+        }
+        const value = at(row, this.rowKey);
+        return value === undefined || value === null ? String(index) : String(value);
+    }
+    currentRow(rows) {
+        const asked = this.activeRow;
+        if (asked === undefined) {
+            const first = this.windowed ? this.virtualize.window.first : 0;
+            return rows.length > 0 ? Math.min(first, rows.length - 1) : -1;
+        }
+        if (asked >= 0 && this.activeKey !== undefined && this.rowKey) {
+            const found = rows.findIndex((row, index) => this.rowKeyOf(row, index) === this.activeKey);
+            if (found >= 0) {
+                return found;
+            }
+        }
+        return Math.min(asked, rows.length - 1);
+    }
+    get width() {
+        return this.shownColumns.length + (this.selectable ? 1 : 0);
+    }
+    get currentColumn() {
+        return Math.max(0, Math.min(this.activeColumn, this.width - 1));
     }
     get tableColumns() {
         return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
@@ -320,12 +455,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     get view() {
         if (this.mode === 'server') {
             const total = Math.max(this.total, this.rows.length);
-            return {
-                available: this.rows.length,
-                matched: total,
-                rows: this.windowOf([...this.rows]),
-                total,
-            };
+            return { available: this.rows.length, matched: total, page: this.rows, total };
         }
         if (!this.windowed) {
             const view = ordered(this.rows, this.axes, {
@@ -335,11 +465,16 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 spec: this.sort,
             });
             this.warnIfCrowded(view.rows.length);
-            return { ...view, available: view.rows.length };
+            return {
+                available: view.rows.length,
+                matched: view.matched,
+                page: view.rows,
+                total: view.total,
+            };
         }
         const { rows: inOrder, total } = this.arrange();
         const page = window_(inOrder, this.page, this.pageSize);
-        return { available: page.length, matched: inOrder.length, rows: this.windowOf(page), total };
+        return { available: page.length, matched: inOrder.length, page, total };
     }
     get pages() {
         const size = this.pageSize;
@@ -375,6 +510,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 const previous = this.sort;
                 this.sortState = value;
                 this.requestUpdate('sort', previous);
+                this.dispatchEvent(new HelixSortedEvent({ value }));
             },
             event: (value) => new HelixSortEvent({ value }),
             host: this,
@@ -387,6 +523,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 const previous = this.order;
                 this.orderState = value;
                 this.requestUpdate('order', previous);
+                this.dispatchEvent(new HelixReorderedEvent({ value }));
             },
             event: (value) => new HelixReorderEvent({ value }),
             host: this,
@@ -399,6 +536,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 const previous = this.selected;
                 this.selectedState = value;
                 this.requestUpdate('selected', previous);
+                this.dispatchEvent(new HelixSelectedEvent({ value }));
             },
             event: (value) => new HelixSelectEvent({ value }),
             host: this,
@@ -430,6 +568,31 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const rows = this.mode === 'server' ? this.rows : this.arrange().rows;
         return rows.map((row, place) => this.keyOf(row, place));
     }
+    chooseRow(key, checked) {
+        const keys = this.chosen;
+        if (checked) {
+            keys.add(key);
+        }
+        else {
+            keys.delete(key);
+        }
+        this.requestSelected(keys);
+    }
+    chooseAll() {
+        const every = this.everyKey;
+        const keys = this.chosen;
+        if (every.length > 0 && every.every((key) => keys.has(key))) {
+            for (const key of every) {
+                keys.delete(key);
+            }
+        }
+        else {
+            for (const key of every) {
+                keys.add(key);
+            }
+        }
+        this.requestSelected(keys);
+    }
     moveColumn(field, by) {
         const drawn = this.shownColumns.filter((column) => column.field !== '');
         const from = drawn.findIndex((column) => column.field === field);
@@ -467,6 +630,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 const previous = this.filter;
                 this.filterState = value;
                 this.requestUpdate('filter', previous);
+                this.dispatchEvent(new HelixFilteredEvent({ value }));
             },
             event: (value) => new HelixFilterEvent({ value }),
             host: this,
@@ -482,6 +646,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 const previous = this.page;
                 this.pageState = value;
                 this.requestUpdate('page', previous);
+                this.dispatchEvent(new HelixActivateEvent({ value: String(value) }));
             },
             event: (value) => new HelixNavigateEvent({ value: String(value) }),
             host: this,
@@ -544,12 +709,21 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 count: formatNumbers(this.lang)(this.chosen.size),
             });
         }
+        else if (this.hasUpdated && this.filter !== this.heardFilter) {
+            const count = this.mode === 'server' ? Math.max(this.total, this.rows.length) : this.matched;
+            const one = new Intl.PluralRules(this.lang || undefined).select(count) === 'one';
+            said = fillTemplate(one ? this.resultLabel : this.resultsLabel, {
+                count: formatNumbers(this.lang)(count),
+            });
+        }
         this.heardSort = sort;
         this.heardSelected = selected;
+        this.heardFilter = this.filter;
         return said;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.hadFocus = this.hasUpdated && this.gridHasFocus();
         this.announced = this.news();
         hostAria(this.internals, { label: this.label || 'Table', role: 'grid' });
         this.internals.ariaMultiSelectable = this.selectable ? 'true' : null;
@@ -565,17 +739,27 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     updated(changed) {
         super.updated(changed);
+        this.internals.ariaRowCount = this.counts.rows === undefined ? null : String(this.counts.rows);
+        this.internals.ariaColCount =
+            this.counts.columns === undefined ? null : String(this.counts.columns);
         this.markEmpty();
         this.assign();
         this.announceSort();
+        this.quietControls();
+        this.placeFocus();
         if (this.windowed) {
             this.virtualize.measure();
         }
     }
     announceSort() {
         const current = parse(this.sort);
+        const stop = this.currentRow(this.drawnPage) === -1 ? this.currentColumn : -1;
+        const offset = this.selectable ? 1 : 0;
+        const shown = this.shownColumns;
         for (const column of this.tableColumns) {
             column.movable = this.reorderable && column.field !== '';
+            column.gridCell = true;
+            column.tabStop = shown.indexOf(column) + offset === stop;
             column.sorted =
                 current && column.canSort && column.field === current.field
                     ? current.direction === 'asc'
@@ -584,11 +768,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     : undefined;
         }
     }
-    renderCell(column, row, picked) {
+    renderCell(column, row, picked, place, stop) {
         const edge = edgeOf(column.textAlign);
         return html `<span
       part="cell${picked ? ' cell-selected' : ''}"
       role="gridcell"
+      tabindex=${stop ? '0' : '-1'}
+      data-column=${place}
       style=${edge ? `--data-table-cell-align: ${edge}` : nothing}
       >${column.read(row)}</span
     >`;
@@ -602,86 +788,107 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         mark-checked: checkbox-mark-checked, mark-dash: checkbox-mark-dash,
         mark-indeterminate: checkbox-mark-indeterminate"
       aria-label=${name}
+      tabindex="-1"
       .checked=${checked}
       .indeterminate=${indeterminate}
       @helix-before-toggle=${toggle}
     ></${checkbox}>`;
     }
-    renderRows(rows) {
+    renderRows(rows, page) {
         const columns = this.shownColumns;
-        const field = this.rowKey;
-        const start = this.windowStart;
         const chosen = this.selectable ? this.chosen : undefined;
         const named = columns.find((column) => column.field !== '');
-        return html `${repeat(rows, (row, index) => (field ? String(row[field] ?? start + index) : start + index), (row, index) => {
+        const stopRow = this.currentRow(page);
+        const stopColumn = this.currentColumn;
+        const offset = this.selectable ? 1 : 0;
+        return html `${repeat(rows, ({ index, row }) => this.rowKeyOf(row, index), ({ index, row }) => {
             const key = chosen ? this.keyOf(row, this.rowIndex(index) - 2) : '';
             const picked = chosen?.has(key) ?? false;
+            const stop = (place) => index === stopRow && place === stopColumn;
             return html `<div
           part="row"
           role="row"
           aria-rowindex=${this.rowIndex(index)}
           aria-selected=${chosen ? String(picked) : nothing}
-          data-index=${this.windowed ? start + index : nothing}
+          data-index=${this.windowed ? index : nothing}
+          data-row=${index}
         >
           ${chosen
-                ? html `<span part="select${picked ? ' select-selected' : ''}" role="gridcell"
-                  >${this.renderCheckbox(`Select ${named ? String(named.order(row) ?? key) : key}`, picked, false, (event) => this.toggleRow(key, event))}</span
+                ? html `<span
+                  part="select${picked ? ' select-selected' : ''}"
+                  role="gridcell"
+                  tabindex=${stop(0) ? '0' : '-1'}
+                  data-column="0"
+                  >${this.renderCheckbox(fillTemplate(this.selectRowLabel, {
+                    row: named ? String(named.order(row) ?? key) : key,
+                }), picked, false, (event) => this.toggleRow(key, event))}</span
                 >`
-                : nothing}${columns.map((column) => this.renderCell(column, row, picked))}
+                : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset)))}
         </div>`;
         })}`;
     }
     rowIndex(within) {
         const size = this.pageSize;
         const page = size > 0 ? (this.page - 1) * size : 0;
-        return page + this.windowStart + within + 2;
+        return page + within + 2;
     }
     get placement() {
         return [this.mode, this.filter, this.sort, this.page, this.pageSize].join('\u0000');
     }
-    get windowStart() {
-        return this.windowed ? this.virtualize.window.first : 0;
-    }
-    renderSpacer(end) {
+    renderSpacer(end, kept) {
         if (!this.windowed) {
             return nothing;
         }
-        const { after, before } = this.virtualize.window;
+        const window = this.virtualize.window;
+        const room = kept === undefined ? 0 : this.virtualize.sizeOf(kept);
+        const before = Math.max(0, window.before - (kept !== undefined && kept < window.first ? room : 0));
+        const after = Math.max(0, window.after - (kept !== undefined && kept >= window.last ? room : 0));
         return end === 'before'
             ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>`
             : html `<div part="after" role="presentation" style="block-size: ${after}px"></div>`;
     }
-    renderSelectAll() {
+    renderSelectAll(stop) {
         const every = this.everyKey;
         const keys = this.chosen;
         const count = every.filter((key) => keys.has(key)).length;
-        return html `<span part="select-all" role="columnheader">${this.renderCheckbox('Select every row', every.length > 0 && count === every.length, count > 0 && count < every.length, this.toggleAll)}</span>`;
+        return html `<span
+      part="select-all"
+      role="columnheader"
+      tabindex=${stop ? '0' : '-1'}
+      data-column="0"
+    >${this.renderCheckbox(this.selectAllLabel, every.length > 0 && count === every.length, count > 0 && count < every.length, this.toggleAll)}</span>`;
     }
     render() {
-        const { available, matched, rows } = this.view;
+        const { available, matched, page } = this.view;
+        this.drawnPage = page;
+        const rows = this.windowOf(page);
+        const kept = this.keptRow(page);
+        const headStop = this.currentRow(page) === -1;
         const filled = this.hasRows;
         const template = this.template;
         const columns = this.shownColumns;
         const pagination = this.tag('pagination');
         const counted = this.mode === 'server' ? Math.max(this.total, available) : matched;
         const countKnown = counted > 0 || this.sourceKnown;
+        this.counts = {
+            columns: columns.length ? columns.length + (this.selectable ? 1 : 0) : undefined,
+            rows: countKnown ? counted + 1 : undefined,
+        };
         return html `<div part="toolbar"><slot name="toolbar"></slot></div>
       <div
         part="table"
         role="rowgroup"
         aria-busy=${this.loading ? 'true' : nothing}
-        aria-rowcount=${countKnown ? counted + 1 : nothing}
-        aria-colcount=${columns.length ? columns.length + (this.selectable ? 1 : 0) : nothing}
         style=${template ? `--data-table-template: ${template}` : nothing}
         @scroll=${this.handleScroll}
       >
-        <div part="head" role="row">
-          ${this.selectable ? this.renderSelectAll() : nothing}${this.assignsByName && !this.hydrating
+        <div part="head" role="row" aria-rowindex="1">
+          ${this.selectable ? this.renderSelectAll(headStop && this.currentColumn === 0) : nothing}${this.assignsByName && !this.hydrating
             ? this.orderedColumns.map((_, index) => html `<slot name=${`column-${index + 1}`} @slotchange=${this.handleSlotChange}></slot>`)
             : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
         </div>
-        ${this.renderSpacer('before')}${this.renderRows(rows)}${this.renderSpacer('after')}
-        ${this.renderStatus(filled)}
+        ${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}
+        ${this.renderStatus(filled, 'gridcell')}
       </div>
       ${this.renderLive(filled)}
       <div part="footer">
@@ -697,7 +904,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
               page=${this.page}
               page-size=${this.pageSize || 1}
               total=${countKnown ? matched : nothing}
+              label=${this.paginationLabel}
+              gap-label=${this.gapLabel}
+              next-label=${this.nextLabel}
+              page-label=${this.pageLabel}
+              previous-label=${this.previousLabel}
               @helix-navigate=${this.handleNavigate}
+              @helix-activate=${this.stopPageNotification}
             ></${pagination}>`
             : nothing}
       </div>`;
@@ -705,6 +918,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleHeadClick);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('keydown', this.handleGridKey);
         this.addEventListener('keydown', this.handleGripKey);
         this.addEventListener('pointerdown', this.handleGripDown);
         this.addEventListener('helix-before-resize', this.handleResize);
@@ -712,11 +927,194 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.handleHeadClick);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('keydown', this.handleGridKey);
         this.removeEventListener('keydown', this.handleGripKey);
         this.removeEventListener('pointerdown', this.handleGripDown);
         this.removeEventListener('helix-before-resize', this.handleResize);
         this.stopDrag();
     }
+    cellAt(row, column) {
+        const offset = this.selectable ? 1 : 0;
+        if (row === -1) {
+            return column < offset
+                ? this.partNamed('select-all')
+                : (this.shownColumns[column - offset]?.cellBox ?? null);
+        }
+        const line = this.renderRoot.querySelector(`[part="row"][data-row="${row}"]`);
+        return line?.querySelector(`:scope > [data-column="${column}"]`) ?? null;
+    }
+    placeOf(event) {
+        const columns = this.shownColumns;
+        const offset = this.selectable ? 1 : 0;
+        for (const node of event.composedPath()) {
+            if (node === this) {
+                break;
+            }
+            if (!(node instanceof HTMLElement)) {
+                continue;
+            }
+            const index = columns.indexOf(node);
+            if (index >= 0) {
+                const cell = node.cellBox;
+                return cell ? { cell, column: index + offset, row: -1 } : undefined;
+            }
+            const role = node.getAttribute('role');
+            if (node.dataset.column !== undefined &&
+                (role === 'gridcell' || role === 'columnheader') &&
+                node.getRootNode() === this.renderRoot) {
+                const line = node.parentElement?.dataset.row;
+                return {
+                    cell: node,
+                    column: Number(node.dataset.column),
+                    row: line === undefined ? -1 : Number(line),
+                };
+            }
+        }
+        return undefined;
+    }
+    controlsIn(place) {
+        const offset = this.selectable ? 1 : 0;
+        if (place.row === -1 && place.column >= offset) {
+            return this.shownColumns[place.column - offset]?.controls ?? [];
+        }
+        return [...place.cell.querySelectorAll('*')].filter(isControl);
+    }
+    quietControls() {
+        const offset = this.selectable ? 1 : 0;
+        const drawn = this.shownColumns;
+        const read = new Set(drawn.flatMap((column, place) => (column.cell ? [place + offset] : [])));
+        if (read.size === 0) {
+            return;
+        }
+        for (const cell of this.renderRoot.querySelectorAll('[part~="cell"]')) {
+            if (!read.has(Number(cell.dataset.column))) {
+                continue;
+            }
+            for (const control of cell.querySelectorAll('*')) {
+                if (isControl(control) && control.getAttribute('tabindex') !== '-1') {
+                    control.setAttribute('tabindex', '-1');
+                }
+            }
+        }
+    }
+    moveTo(row, column) {
+        const page = this.drawnPage;
+        this.activeRow = row;
+        this.activeColumn = column;
+        this.activeKey =
+            row >= 0 && this.rowKey && page[row] ? this.rowKeyOf(page[row], row) : undefined;
+        this.focusWanted = true;
+    }
+    pageStep(cell) {
+        const box = this.partNamed('table');
+        const tall = cell.getBoundingClientRect().height || this.estimate;
+        const scrolls = box !== null && box.scrollHeight > box.clientHeight + 1;
+        const room = scrolls ? box.clientHeight - this.headHeight() : window.innerHeight;
+        return Math.max(1, Math.floor(room / tall) - 1);
+    }
+    headHeight() {
+        return this.cellAt(-1, 0)?.getBoundingClientRect().height ?? 0;
+    }
+    gridHasFocus() {
+        const active = deepActiveElement();
+        const grid = this.partNamed('table');
+        if (!active || !grid) {
+            return false;
+        }
+        return (deepContains(grid, active) || this.shownColumns.some((column) => deepContains(column, active)));
+    }
+    placeFocus() {
+        const lost = this.hadFocus &&
+            !this.gridHasFocus() &&
+            (document.activeElement === null || document.activeElement === document.body);
+        if (!this.focusWanted && !lost) {
+            return;
+        }
+        const row = this.currentRow(this.drawnPage);
+        const target = this.cellAt(row, this.currentColumn);
+        if (!target) {
+            return;
+        }
+        this.focusWanted = false;
+        if (!this.windowed) {
+            target.focus();
+            return;
+        }
+        target.focus({ preventScroll: true });
+        const kept = this.keptRow(this.drawnPage);
+        if (row >= 0 && kept === row) {
+            this.virtualize.reveal(row, this.headHeight());
+            return;
+        }
+        const box = this.partNamed('table');
+        if (!box) {
+            return;
+        }
+        const frame = box.getBoundingClientRect();
+        const rect = target.getBoundingClientRect();
+        const top = row === -1 ? frame.top : frame.top + this.headHeight();
+        if (rect.top < top) {
+            box.scrollTop -= top - rect.top;
+        }
+        else if (rect.bottom > frame.bottom) {
+            box.scrollTop += rect.bottom - frame.bottom;
+        }
+        if (rect.left < frame.left) {
+            box.scrollLeft -= frame.left - rect.left;
+        }
+        else if (rect.right > frame.right) {
+            box.scrollLeft += rect.right - frame.right;
+        }
+    }
+    activate(event, place) {
+        const offset = this.selectable ? 1 : 0;
+        const heading = place.row === -1 ? this.shownColumns[place.column - offset] : undefined;
+        if (event.key !== 'F2') {
+            if (heading?.canSort) {
+                event.preventDefault();
+                this.toggleSort(heading.field);
+                return;
+            }
+            if (this.selectable && place.column === 0 && place.row === -1) {
+                event.preventDefault();
+                this.chooseAll();
+                return;
+            }
+            if (event.key === ' ') {
+                const row = this.drawnPage[place.row];
+                if (this.selectable && row) {
+                    event.preventDefault();
+                    const key = this.keyOf(row, this.rowIndex(place.row) - 2);
+                    this.chooseRow(key, !this.chosen.has(key));
+                }
+                return;
+            }
+        }
+        const first = this.controlsIn(place)[0];
+        if (first) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    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 = controls[at + (event.shiftKey ? -1 : 1)];
+        if (at >= 0 && next) {
+            event.preventDefault();
+            next.focus();
+        }
+    }
     partIn(event, name) {
         return event
             .composedPath()
@@ -769,27 +1167,48 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "filter", null);
+__decorate([
+    property({ attribute: 'gap-label' })
+], HelixHeadlessDataTable.prototype, "gapLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "mode", void 0);
+__decorate([
+    property({ attribute: 'next-label' })
+], HelixHeadlessDataTable.prototype, "nextLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "order", null);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "page", null);
+__decorate([
+    property({ attribute: 'page-label' })
+], HelixHeadlessDataTable.prototype, "pageLabel", void 0);
 __decorate([
     property({ attribute: 'page-size', type: Number })
 ], HelixHeadlessDataTable.prototype, "pageSize", null);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "paginated", null);
+__decorate([
+    property({ attribute: 'pagination-label' })
+], HelixHeadlessDataTable.prototype, "paginationLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-label' })
+], HelixHeadlessDataTable.prototype, "previousLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "reorderable", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessDataTable.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessDataTable.prototype, "resultsLabel", void 0);
 __decorate([
     property({ attribute: 'row-key' })
 ], HelixHeadlessDataTable.prototype, "rowKey", void 0);
@@ -799,12 +1218,18 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "selectable", void 0);
+__decorate([
+    property({ attribute: 'select-all-label' })
+], HelixHeadlessDataTable.prototype, "selectAllLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "selected", null);
 __decorate([
     property({ attribute: 'selected-label' })
 ], HelixHeadlessDataTable.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: 'select-row-label' })
+], HelixHeadlessDataTable.prototype, "selectRowLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "sort", null);
@@ -841,6 +1266,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDataTable.prototype, "selectedState", void 0);
+__decorate([
+    state()
+], HelixHeadlessDataTable.prototype, "activeRow", void 0);
+__decorate([
+    state()
+], HelixHeadlessDataTable.prototype, "activeColumn", void 0);
 __decorate([
     state()
 ], HelixHeadlessDataTable.prototype, "dragOrder", void 0);