@fusion.dev/helix-headless 0.147.0 → 0.149.0

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, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } 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);
@@ -47,16 +48,25 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     constructor() {
         super(...arguments);
         this.ascendingLabel = 'ascending';
+        this.canceledLabel = 'Canceled';
         this.columns = '';
         this.defaultSelected = '';
         this.defaultSort = '';
         this.descendingLabel = 'descending';
+        this.droppedLabel = 'Dropped';
+        this.fallbackLabel = 'Table';
+        this.grid = false;
         this.label = '';
+        this.movedLabel = '{name} moved to position {position} of {count}';
+        this.moveRowLabel = 'Move {row}';
+        this.pickedUpLabel = 'Picked up {name}';
+        this.reorderable = false;
+        this.rowGripsLabel = 'Move rows';
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
         this.selectedLabel = '{count} selected';
         this.selectRowLabel = 'Select {row}';
-        this.sortedLabel = 'Sorted by {column}, {order}';
+        this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.unsortedLabel = 'Not sorted';
         this.sortState = undefined;
         this.selectedState = undefined;
@@ -65,6 +75,35 @@ 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),
+            lead: () => this.lead,
+            on: () => this.grid,
+            part: (name) => this.partNamed(name),
+            rows: () => (this.childrenKnown ? this.arrangedRows : []),
+            selectAll: () => this.selectable && this.requestSelected(new Set(this.everyKey)),
+        });
+        this.reorder = new ReorderController(this, {
+            axis: 'block',
+            box: (key) => this.gripOf(this.rowFor(key))?.getBoundingClientRect(),
+            enabled: () => this.reorderable && !parse(this.sort),
+            grip: (event) => {
+                const path = event.composedPath();
+                const found = this.keyed.find(({ row }) => path.includes(this.gripOf(row)));
+                const element = this.gripOf(found?.row);
+                return found && element ? { element, key: found.key } : undefined;
+            },
+            item: (event) => {
+                const path = event.composedPath();
+                return this.keyed.find(({ row }) => path.includes(row))?.key;
+            },
+            keys: () => this.everyKey,
+            kind: 'row',
+            name: (key) => textOf(this.rowFor(key)?.children[0]) || key,
+            preview: (key) => this.rowFor(key),
+            refocus: (key) => this.gripOf(this.rowFor(key))?.focus(),
+        });
         this.heardSort = undefined;
         this.heardSortBefore = undefined;
         this.heardSelected = undefined;
@@ -74,10 +113,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 +123,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();
@@ -111,6 +143,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.alignment = undefined;
         this.aligned = '';
     }
+    static { this.words = 'helix-table'; }
     get selected() {
         return this.selectedState ?? this.defaultSelected;
     }
@@ -127,6 +160,19 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.sortState = next;
         this.requestUpdate('sort', previous);
     }
+    get lead() {
+        return [
+            ...(this.reorderable ? ['grip'] : []),
+            ...(this.selectable ? ['select'] : []),
+        ];
+    }
+    rowFor(key) {
+        return this.keyed.find((one) => one.key === key)?.row;
+    }
+    gripOf(row) {
+        const cell = row?.shadowRoot?.querySelector('[part~="grip"]');
+        return this.grid ? cell : cell?.querySelector('button');
+    }
     requestSort(next) {
         return requestChange({
             apply: (value) => {
@@ -170,21 +216,25 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 ? this.tableColumns.find((one) => one.field === parsed.field)
                 : undefined;
             said = parsed
-                ? fillTemplate(this.sortedLabel, {
-                    column: column?.textContent?.trim() || parsed.field,
-                    order: parsed.direction === 'asc' ? this.ascendingLabel : this.descendingLabel,
-                })
+                ? this.sortSaid(column?.textContent?.trim() || parsed.field, parsed.direction === 'asc' ? 'ascending' : 'descending')
                 : this.unsortedLabel;
         }
         this.heardSort = current;
         const selected = this.selectable ? this.selected : '';
         if (this.hasUpdated && current === this.heardSortBefore && selected !== this.heardSelected) {
-            said = fillTemplate(this.selectedLabel, { count: this.chosen.size });
+            said = formatWords(this, 'selectedLabel', { count: this.chosen.size });
         }
         this.heardSortBefore = current;
         this.heardSelected = selected;
         return said;
     }
+    sortSaid(column, direction) {
+        return formatWords(this, 'sortedLabel', {
+            column,
+            direction,
+            order: direction === 'ascending' ? this.ascendingLabel : this.descendingLabel,
+        });
+    }
     get keyed() {
         return this.slotted.map((row, index) => ({
             key: row.value || String(index),
@@ -207,17 +257,71 @@ 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 leads = this.lead;
+        const lead = leads[place.column] === 'select';
+        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 - leads.length];
+            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;
+        const still = Boolean(parse(this.sort));
         for (const { key, row } of this.keyed) {
             if (!row.isTableRow) {
                 continue;
             }
-            const label = fillTemplate(this.selectRowLabel, { row: textOf(row.children[0]) || key });
+            const name = textOf(row.children[0]) || key;
+            const label = formatWords(this, 'selectRowLabel', { row: name });
+            const grip = this.reorderable ? formatWords(this, 'moveRowLabel', { row: name }) : '';
+            const move = this.reorder.moveOf(key);
             whenHydrated(row, () => {
                 row.selectable = this.selectable;
                 row.selected = keys.has(key);
                 row.selectLabel = label;
+                row.gripLabel = grip;
+                row.gripStill = still;
+                row.move = move;
             });
         }
     }
@@ -240,10 +344,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                     : undefined;
             column.sortWords =
                 android && column.sorted
-                    ? fillTemplate(this.sortedLabel, {
-                        column: column.textContent?.trim() || column.field,
-                        order: column.sorted === 'ascending' ? this.ascendingLabel : this.descendingLabel,
-                    })
+                    ? this.sortSaid(column.textContent?.trim() || column.field, column.sorted)
                     : '';
         }
     }
@@ -252,7 +353,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     get template() {
         const tracks = this.tracks;
-        return this.selectable && tracks ? `max-content ${tracks}` : tracks;
+        const lead = this.lead.map(() => 'max-content ').join('');
+        return tracks ? lead + tracks : tracks;
     }
     get tracks() {
         const declared = this.tableColumns;
@@ -325,16 +427,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 +463,21 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.markSorted();
         this.markSelected();
         this.nameByHeading();
+        if (this.childrenKnown) {
+            this.gridKeys.mark();
+            this.gridKeys.place();
+        }
+    }
+    renderGripHead() {
+        if (!this.reorderable) {
+            return nothing;
+        }
+        return html `<span
+      part="grip-head"
+      role="columnheader"
+      aria-label=${this.rowGripsLabel}
+      tabindex=${this.grid ? (this.gridKeys.isStop({ column: 0, row: -1 }) ? '0' : '-1') : nothing}
+    ></span>`;
     }
     renderSelectAll() {
         if (!this.selectable) {
@@ -376,9 +486,13 @@ 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;
+        const column = this.lead.indexOf('select');
         return html `<span part="select-all" role="columnheader"
+      tabindex=${grid ? (this.gridKeys.isStop({ column, 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,27 +505,36 @@ 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'}
+      aria-label=${this.label || this.fallbackLabel}
       style=${template ? `--table-template: ${template}` : ''}
     >
-      <div part="head" role="row">${this.renderSelectAll()}<slot name="columns"></slot></div>
+      <div part="head" role="row">${this.renderGripHead()}${this.renderSelectAll()}<slot name="columns"></slot></div>
       <slot
         @slotchange=${(event) => {
             this.countRows(event);
             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)}${this.reorder.drawDragPreview()}`;
     }
 };
 __decorate([
+    words,
     property({ attribute: 'ascending-label' })
 ], HelixHeadlessTable.prototype, "ascendingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'canceled-label' })
+], HelixHeadlessTable.prototype, "canceledLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "columns", void 0);
@@ -422,33 +545,69 @@ __decorate([
     property({ attribute: 'default-sort' })
 ], HelixHeadlessTable.prototype, "defaultSort", void 0);
 __decorate([
+    words,
     property({ attribute: 'descending-label' })
 ], HelixHeadlessTable.prototype, "descendingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dropped-label' })
+], HelixHeadlessTable.prototype, "droppedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessTable.prototype, "fallbackLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTable.prototype, "grid", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessTable.prototype, "movedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'move-row-label' })
+], HelixHeadlessTable.prototype, "moveRowLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'picked-up-label' })
+], HelixHeadlessTable.prototype, "pickedUpLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTable.prototype, "reorderable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'row-grips-label' })
+], HelixHeadlessTable.prototype, "rowGripsLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTable.prototype, "selectable", void 0);
 __decorate([
+    words,
     property({ attribute: 'select-all-label' })
 ], HelixHeadlessTable.prototype, "selectAllLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "selected", null);
 __decorate([
+    words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessTable.prototype, "selectedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'select-row-label' })
 ], HelixHeadlessTable.prototype, "selectRowLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "sort", null);
 __decorate([
+    words,
     property({ attribute: 'sorted-label' })
 ], HelixHeadlessTable.prototype, "sortedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'unsorted-label' })
 ], HelixHeadlessTable.prototype, "unsortedLabel", void 0);
 __decorate([

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

@@ -1,6 +1,8 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../checkbox/index.js';
+/** Where a row stands in a move: the row being moved, or the one the drop indicator is beside. */
+export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
 /**
  * @summary One row of a table.
  *
@@ -13,12 +15,19 @@ import '../../checkbox/index.js';
  * In a `selectable` table the row draws a checkbox cell before its own cells,
  * and `value` is the key the table's `selected` lists it by.
  *
+ * In a `reorderable` table the row draws a grip cell before those, holding a
+ * button named by the table's `move-row-label`, and `value` is the key
+ * `helix-reorder` lists it by. The table says which row is moving and where
+ * the drop indicator is, with the `dragging`, `drop-before`, and `drop-after`
+ * states.
+ *
  * **`href` makes the whole row a link**, as a row action does in React Aria's
  * table: a press anywhere on the row follows it, except on a link or a control
  * 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
@@ -38,9 +47,15 @@ import '../../checkbox/index.js';
  * @csspart checkbox-mark-checked - Added to `checkbox-mark` while its box is checked.
  * @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 grip - The cell that holds the row's grip, in a `reorderable` table.
+ * @csspart grip-button - The button that moves the row.
+ * @csspart grip-mark - The icon on the grip.
  * @csspart select - The cell that holds the row's checkbox, in a `selectable` table.
  * @csspart select-selected - Added to `select` while the row is selected.
  *
+ * @cssstate dragging - The row is being moved, in a `reorderable` table.
+ * @cssstate drop-after - The row being moved goes after this one when it is dropped.
+ * @cssstate drop-before - The row being moved goes before this one when it is dropped.
  * @cssstate link - While the row has `href`, so a press on it follows the link.
  * @cssstate selected - While the row is selected, in a `selectable` table.
  */
@@ -76,6 +91,38 @@ 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 The name of the row's grip, written by a `reorderable` table, and
+     * empty in a table that does not reorder, which draws no grip. Not a
+     * consumer's to set.
+     */
+    gripLabel: string;
+    /**
+     * @internal Whether the grip does nothing for now, as while the table is
+     * sorted, written by the table. Not a consumer's to set.
+     */
+    gripStill: boolean;
+    /**
+     * @internal Whether the grip cell holds the grid's one tab stop, written by
+     * the table that sets `gridCell`. Not a consumer's to set.
+     */
+    gripStop: boolean;
+    /**
+     * @internal Where the row stands in a move, written by a `reorderable` table.
+     * Not a consumer's to set.
+     */
+    move: TableRowMove | undefined;
+    /**
+     * @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;
     /**
@@ -109,6 +156,13 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * table's `selected` says.
      */
     protected renderSelect(): TemplateResult | typeof nothing;
+    /**
+     * The grip cell, in a `reorderable` table: a cell of the row's own before the
+     * checkbox cell, holding the button that moves the row. In a grid the cell
+     * takes focus and Space or Enter on it picks the row up, and the button
+     * leaves the tab order. `aria-disabled` while a sort decides the order.
+     */
+    protected renderGrip(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/table/row/table-row.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 { customElement, followLink, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, followLink, HelixElement, hostAria, pressedOwnControl, } from '@fusion.dev/helix-core';
+import { dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.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 +22,21 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.selectable = false;
         this.selected = false;
         this.selectLabel = '';
+        this.gripLabel = '';
+        this.gripStill = false;
+        this.gripStop = false;
+        this.move = undefined;
+        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,8 +67,12 @@ 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 !== '');
+        this.toggleState('dragging', this.move === 'dragging');
+        this.toggleState('drop-after', this.move === 'drop-after');
+        this.toggleState('drop-before', this.move === 'drop-before');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -75,8 +87,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,
@@ -87,8 +104,26 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
       ></${checkbox}
     ></span>`;
     }
+    renderGrip() {
+        if (!this.gripLabel) {
+            return nothing;
+        }
+        const grid = this.gridCell;
+        return html `<span
+      part="grip"
+      role=${grid ? 'gridcell' : 'cell'}
+      tabindex=${grid ? (this.gripStop ? '0' : '-1') : nothing}
+      ><button
+        part="grip-button"
+        type="button"
+        tabindex=${grid ? '-1' : nothing}
+        aria-label=${this.gripLabel}
+        aria-disabled=${this.gripStill ? 'true' : nothing}
+      ><svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsSixVertical.viewBox}>${unsafeSVG(dotsSixVertical.content)}</svg></button
+    ></span>`;
+    }
     render() {
-        return html `${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
+        return html `${this.renderGrip()}${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
 __decorate([
@@ -112,6 +147,24 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "selectLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gripLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gripStill", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gripStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "move", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gridCell", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "selectStop", void 0);
 HelixHeadlessTableRow = __decorate([
     customElement('helix-headless-table-row')
 ], HelixHeadlessTableRow);

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

@@ -63,6 +63,11 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @csspart tabs - The tab list.
  */
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tabs': { label: 'Reiter' } })`.
+     */
+    static words: string;
     protected readonly keys: KeyboardNavigationController;
     private readonly indicator;
     /** Carries a host `aria-label` and `aria-labelledby` to the tab list. */