@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -5,8 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, fillTemplate, format, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, inRowOrder, isRtl, MixinCollection, markRegion, onAndroid, ordered, parse, rangeAdd, reportRuntime, requestChange, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, writtenList, } from '@fusion.dev/helix-core';
-import { caretDown, caretRight } from '@fusion.dev/helix-icons';
+import { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
+import { caretDown, caretRight, dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -31,6 +31,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     constructor() {
         super(...arguments);
         this.ascendingLabel = 'ascending';
+        this.canceledLabel = 'Canceled';
         this.defaultExpanded = '';
         this.defaultFilter = '';
         this.defaultOrder = '';
@@ -39,26 +40,32 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.defaultSelected = '';
         this.defaultSort = '';
         this.descendingLabel = 'descending';
+        this.droppedLabel = 'Dropped';
         this.estimate = 32;
         this.gapLabel = 'Skip to page {page}';
         this.label = '';
         this.loadMore = false;
         this.loadMoreLabel = 'Load more';
+        this.locale = '';
         this.mode = 'client';
+        this.movedLabel = '{name} moved to position {position} of {count}';
+        this.moveRowLabel = 'Move {row}';
         this.nextLabel = 'Next page';
         this.pageLabel = 'Page {page}';
         this.paginationLabel = 'Pagination';
+        this.pickedUpLabel = 'Picked up {name}';
         this.previousLabel = 'Previous page';
         this.reorderable = false;
-        this.resultLabel = '{count} result';
-        this.resultsLabel = '{count} results';
+        this.reorderableRows = false;
+        this.resultsLabel = '{count, plural, one {# result} other {# results}}';
+        this.rowGripsLabel = 'Move rows';
         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.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.total = 0;
         this.unsortedLabel = 'Not sorted';
         this.windowed = false;
@@ -83,7 +90,56 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             columns: undefined,
             rows: undefined,
         };
-        this.dragOrder = undefined;
+        this.columnMoves = new ReorderController(this, {
+            axis: 'inline',
+            box: (field) => this.tableColumns
+                .find((column) => column.field === field)
+                ?.shadowRoot?.querySelector('[part="column"]')
+                ?.getBoundingClientRect(),
+            drop: ({ key, to }) => {
+                const shown = this.shownFields;
+                const wanted = placeKey(this.fields, shown, key, to);
+                return wanted.join(' ') === this.fields.join(' ') || this.requestOrder(wanted, key);
+            },
+            enabled: () => this.reorderable,
+            grip: (event) => {
+                const column = this.partIn(event, 'grip') ? this.columnFrom(event) : undefined;
+                return column?.field ? { element: column, key: column.field } : undefined;
+            },
+            holds: false,
+            keys: () => this.shownFields,
+        });
+        this.rowMoves = new ReorderController(this, {
+            axis: 'block',
+            box: (key) => this.lineOf(key)?.firstElementChild?.getBoundingClientRect(),
+            drop: (move) => this.requestRowMove(move),
+            enabled: () => this.rowGrips && !parse(this.sort),
+            grip: (event) => {
+                const cell = event
+                    .composedPath()
+                    .find((node) => node instanceof HTMLElement && node.getAttribute('part') === 'row-grip');
+                const row = cell ? this.drawnPage[Number(cell.parentElement?.dataset.row)] : undefined;
+                return cell && row ? { element: cell, key: this.moveKeyOf(row) } : undefined;
+            },
+            item: (event) => {
+                const place = this.placeOf(event);
+                const row = place && place.row >= 0 ? this.drawnPage[place.row] : undefined;
+                return row ? this.moveKeyOf(row) : undefined;
+            },
+            keys: () => this.drawnPage.map((row) => this.moveKeyOf(row)),
+            name: (key) => {
+                const row = this.drawnPage[this.pagePlaces().get(key) ?? -1];
+                return row ? this.rowName(row, key) : key;
+            },
+            preview: (key) => this.lineOf(key),
+            say: (said) => this.say(said),
+            scroller: () => {
+                const table = this.partNamed('table');
+                return table && table.scrollHeight > table.clientHeight + 1
+                    ? table
+                    : scrollingAncestor(this, { axis: 'y', overflowing: true });
+            },
+        });
         this.warnedAboutKey = false;
         this.virtualize = new VirtualizeController(this, {
             container: () => (this.windowed ? this.partNamed('table') : null),
@@ -165,8 +221,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 return;
             }
             const last = this.drawnPage.length - 1 + (this.moreDrawn ? 1 : 0);
-            const edge = this.width - 1;
-            const control = event.ctrlKey || event.metaKey;
             if (!event.shiftKey && selectsAll(event) && this.selectable) {
                 event.preventDefault();
                 this.requestSelected(new Set([...this.chosen, ...this.everyKey]));
@@ -180,43 +234,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 }
                 return;
             }
-            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':
-                    if (this.treeKey(event, place)) {
-                        return;
-                    }
-                    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;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2') {
+                this.activate(event, place);
+                return;
             }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && this.treeKey(event, place)) {
+                return;
+            }
+            const to = gridMove(event.key, place, { last, top: -1, width: this.width }, {
+                control: event.ctrlKey || event.metaKey,
+                page: event.key.startsWith('Page') ? this.pageStep(place.cell) : 1,
+                step: inlineStep(this, event.key),
+            });
+            if (!to) {
+                return;
+            }
+            const { column, row } = to;
             event.preventDefault();
             if (event.shiftKey &&
                 this.selectable &&
@@ -241,54 +274,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 this.moveColumn(column.field, by);
             }
         };
-        this.handleGripDown = (event) => {
-            if (event.button !== 0 || !this.partIn(event, 'grip')) {
-                return;
-            }
-            const column = this.columnFrom(event);
-            if (!column?.field) {
-                return;
-            }
-            this.dragging = { field: column.field, pointer: event.pointerId };
-            this.dragOrder = this.fields;
-            window.addEventListener('pointermove', this.handleGripMove);
-            window.addEventListener('pointerup', this.handleGripUp);
-            window.addEventListener('pointercancel', this.handleGripCancel);
-        };
-        this.handleGripMove = (event) => {
-            const dragging = this.dragging;
-            if (!dragging || event.pointerId !== dragging.pointer || !this.dragOrder) {
-                return;
-            }
-            const rtl = isRtl(this);
-            const others = this.shownColumns.filter((column) => column.field !== '' && column.field !== dragging.field);
-            const place = others.filter((column) => {
-                const box = column.shadowRoot?.querySelector('[part="column"]')?.getBoundingClientRect();
-                if (!box) {
-                    return false;
-                }
-                const middle = box.left + box.width / 2;
-                return rtl ? event.clientX < middle : event.clientX > middle;
-            }).length;
-            const beside = others[place - 1] ?? others[0];
-            if (!beside) {
-                return;
-            }
-            const next = this.placed(dragging.field, beside.field, place > 0);
-            if (next.join(' ') !== this.dragOrder.join(' ')) {
-                this.dragOrder = next;
-            }
-        };
-        this.handleGripUp = () => {
-            const wanted = this.dragOrder;
-            this.stopDrag();
-            if (wanted && wanted.join(' ') !== this.fields.join(' ')) {
-                this.requestOrder(wanted);
-            }
-        };
-        this.handleGripCancel = () => {
-            this.stopDrag();
-        };
         this.handleResize = () => {
             queueMicrotask(() => this.requestUpdate());
         };
@@ -308,6 +293,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    static { this.words = 'helix-data-table'; }
     get expanded() {
         return this.expandedState ?? this.defaultExpanded;
     }
@@ -373,8 +359,15 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.sortState = next;
         this.requestUpdate('sort', previous);
     }
+    lineOf(key) {
+        const index = this.pagePlaces().get(key);
+        const { first, last } = this.virtualize.window;
+        return index === undefined || (this.windowed && (index < first || index >= last))
+            ? undefined
+            : this.renderRoot?.querySelector?.(`[part~="row"][data-row="${index}"]`);
+    }
     drawn() {
-        return [...this.renderRoot.querySelectorAll('[part="row"][data-index]')].flatMap((row) => {
+        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) }]
@@ -489,7 +482,16 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return Math.min(asked, rows.length - 1 + (this.moreDrawn ? 1 : 0));
     }
     get width() {
-        return this.shownColumns.length + (this.selectable ? 1 : 0);
+        return this.shownColumns.length + this.lead;
+    }
+    get rowGrips() {
+        return this.reorderableRows && !this.childField;
+    }
+    get selectAt() {
+        return this.rowGrips ? 1 : 0;
+    }
+    get lead() {
+        return (this.rowGrips ? 1 : 0) + (this.selectable ? 1 : 0);
     }
     get currentColumn() {
         return Math.max(0, Math.min(this.activeColumn, this.width - 1));
@@ -498,8 +500,18 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
     get orderedColumns() {
+        const columns = this.arrangeColumns(writtenList(this.order));
+        const held = this.columnMoves.held;
+        if (held?.by !== 'pointer') {
+            return columns;
+        }
+        const fields = columns.filter((column) => column.field !== '');
+        const shown = fields.filter((column) => column.shown).map((column) => column.field);
+        const all = fields.map((column) => column.field);
+        return this.arrangeColumns(placeKey(all, shown, held.key, held.to));
+    }
+    arrangeColumns(wanted) {
         const columns = this.tableColumns;
-        const wanted = this.dragOrder ?? writtenList(this.order);
         if (wanted.length === 0) {
             return columns;
         }
@@ -517,6 +529,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     get fields() {
         return this.orderedColumns.filter((column) => column.field !== '').map((column) => column.field);
     }
+    get shownFields() {
+        return this.shownColumns.filter((column) => column.field !== '').map((column) => column.field);
+    }
     get axes() {
         return this.tableColumns
             .filter((column) => column.field !== '')
@@ -528,7 +543,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             return '';
         }
         const tracks = declared.map((column) => column.track).join(' ');
-        return this.selectable ? `max-content ${tracks}` : tracks;
+        return [...Array.from({ length: this.lead }, () => 'max-content'), tracks].join(' ');
     }
     static { this.COMFORTABLE = 2_000; }
     warnIfCrowded(drawn) {
@@ -624,15 +639,27 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             next,
         });
     }
-    requestOrder(fields) {
+    requestOrder(fields, field) {
+        const detail = (value) => {
+            const keys = writtenList(value);
+            return {
+                from: this.fields.indexOf(field),
+                key: field,
+                keys,
+                kind: 'column',
+                to: keys.indexOf(field),
+                value,
+            };
+        };
         return requestChange({
             apply: (value) => {
+                const moved = detail(value);
                 const previous = this.order;
                 this.orderState = value;
                 this.requestUpdate('order', previous);
-                this.dispatchEvent(new HelixReorderedEvent({ value }));
+                this.dispatchEvent(new HelixReorderedEvent(moved));
             },
-            event: (value) => new HelixReorderEvent({ value }),
+            event: (value) => new HelixReorderEvent(detail(value)),
             host: this,
             next: fields.join(' '),
         });
@@ -675,6 +702,49 @@ 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));
     }
+    moveKeyOf(row) {
+        const value = this.rowKey ? valueAt(row, this.rowKey) : undefined;
+        if (value !== undefined && value !== null) {
+            return String(value);
+        }
+        if (this.rowPlaces?.rows !== this.rows) {
+            this.rowPlaces = { places: new Map(this.rows.map((one, at) => [one, at])), rows: this.rows };
+        }
+        return String(this.rowPlaces.places.get(row) ?? -1);
+    }
+    pagePlaces() {
+        if (this.pageKeyed?.page !== this.drawnPage) {
+            this.pageKeyed = {
+                page: this.drawnPage,
+                places: new Map(this.drawnPage.map((row, at) => [this.moveKeyOf(row), at])),
+            };
+        }
+        return this.pageKeyed.places;
+    }
+    rowName(row, key) {
+        const value = this.headerColumn?.order(row);
+        return value === undefined || value === null ? key : String(value);
+    }
+    requestRowMove({ key, to }) {
+        const all = this.rows.map((row) => this.moveKeyOf(row));
+        const keys = placeKey(all, this.drawnPage.map((row) => this.moveKeyOf(row)), key, to);
+        return requestReorder(this, {
+            from: all.indexOf(key),
+            key,
+            keys,
+            kind: 'row',
+            to: keys.indexOf(key),
+            value: keys.join(','),
+        });
+    }
+    say(words) {
+        this.announced = '';
+        this.requestUpdate();
+        requestAnimationFrame(() => {
+            this.announced = words;
+            this.requestUpdate();
+        });
+    }
     get pageKeys() {
         return this.drawnPage.map((row, index) => this.keyOf(row, this.rowIndex(index) - 2));
     }
@@ -724,18 +794,15 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
     }
     moveColumn(field, by) {
-        const drawn = this.shownColumns.filter((column) => column.field !== '');
-        const from = drawn.findIndex((column) => column.field === field);
+        const drawn = this.shownFields;
+        const from = drawn.indexOf(field);
         const past = drawn[from + by];
-        if (from < 0 || !past) {
+        if (from < 0 || past === undefined) {
             return false;
         }
-        return this.requestOrder(this.placed(field, past.field, by > 0));
-    }
-    placed(field, beside, after) {
         const fields = this.fields.filter((one) => one !== field);
-        fields.splice(fields.indexOf(beside) + (after ? 1 : 0), 0, field);
-        return fields;
+        fields.splice(fields.indexOf(past) + (by > 0 ? 1 : 0), 0, field);
+        return this.requestOrder(fields, field);
     }
     csv() {
         const columns = this.shownColumns.filter((column) => column.field !== '');
@@ -818,6 +885,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
         }
     }
+    sortSaid(column, direction) {
+        return formatWords(this, 'sortedLabel', {
+            column,
+            direction,
+            order: direction === 'ascending' ? this.ascendingLabel : this.descendingLabel,
+        });
+    }
     news() {
         const sort = this.sort;
         const selected = this.selectable ? this.selected : '';
@@ -828,20 +902,17 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 ? 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;
         }
         else if (this.hasUpdated && selected !== this.heardSelected) {
-            said = fillTemplate(this.selectedLabel, {
-                count: formatNumbers(this.lang)(this.chosen.size),
-            });
+            said = formatWords(this, 'selectedLabel', { count: 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;
-            said = countLabel(count, this.resultLabel, this.resultsLabel, this.lang);
+            said = this.resultLabel
+                ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
+                : formatWords(this, 'resultsLabel', { count });
         }
         this.heardSort = sort;
         this.heardSelected = selected;
@@ -885,7 +956,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     announceSort() {
         const current = parse(this.sort);
         const stop = this.currentRow(this.drawnPage) === -1 ? this.currentColumn : -1;
-        const offset = this.selectable ? 1 : 0;
+        const offset = this.lead;
         const shown = this.shownColumns;
         const android = onAndroid();
         for (const column of this.tableColumns) {
@@ -900,10 +971,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     : 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)
                     : '';
         }
     }
@@ -963,14 +1031,20 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const named = this.headerColumn;
         const stopRow = this.currentRow(page);
         const stopColumn = this.currentColumn;
-        const offset = this.selectable ? 1 : 0;
+        const offset = this.lead;
+        const grips = this.rowGrips;
+        const held = grips ? this.rowMoves.held : undefined;
+        const mark = held ? this.rowMoves.mark : undefined;
+        const still = grips && Boolean(parse(this.sort));
         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 placed = this.childField ? this.tree().placed.get(row) : undefined;
             const stop = (place) => index === stopRow && place === stopColumn;
+            const moveKey = grips ? this.moveKeyOf(row) : '';
+            const marked = mark?.key === moveKey ? mark.edge : undefined;
             return html `<div
-          part="row"
+          part="row${held?.key === moveKey ? ' row-dragging' : ''}${marked === 'before' ? ' row-drop-before' : ''}${marked === 'after' ? ' row-drop-after' : ''}"
           role="row"
           aria-rowindex=${this.rowIndex(index)}
           aria-selected=${chosen ? String(picked) : nothing}
@@ -981,15 +1055,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
           data-index=${this.windowed ? index : nothing}
           data-row=${index}
         >
-          ${chosen
+          ${grips ? this.renderGrip(this.rowName(row, moveKey), stop(0), still) : nothing}${chosen
                 ? 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
+                  tabindex=${stop(this.selectAt) ? '0' : '-1'}
+                  data-column=${this.selectAt}
+                  >${this.renderCheckbox(formatWords(this, 'selectRowLabel', { row: this.rowName(row, key) }), picked, false, (event) => this.toggleRow(key, event))}</span
                 >`
                 : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset), column === named))}
         </div>`;
@@ -1020,13 +1092,33 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>`
             : html `<div part="after" role="presentation" style="block-size: ${after}px"></div>`;
     }
+    renderGrip(name, stop, still) {
+        return html `<span part="row-grip" role="gridcell" tabindex=${stop ? '0' : '-1'} data-column="0"
+      ><button
+        part="row-grip-button"
+        type="button"
+        tabindex="-1"
+        aria-label=${formatWords(this, 'moveRowLabel', { row: name })}
+        aria-disabled=${still ? 'true' : nothing}
+      ><svg aria-hidden="true" fill="currentColor" part="row-grip-mark" viewBox=${dotsSixVertical.viewBox}>${unsafeSVG(dotsSixVertical.content)}</svg></button
+    ></span>`;
+    }
+    renderGripHead(stop) {
+        return html `<span
+      part="grip-head"
+      role="columnheader"
+      tabindex=${stop ? '0' : '-1'}
+      aria-label=${this.rowGripsLabel}
+      data-column="0"
+    ></span>`;
+    }
     renderSelectAll(stop) {
         const { checked, indeterminate } = everyState(this.chosen, this.everyKey);
         return html `<span
       part="select-all"
       role="columnheader"
       tabindex=${stop ? '0' : '-1'}
-      data-column="0"
+      data-column=${this.selectAt}
     >${this.renderCheckbox(this.selectAllLabel, checked, indeterminate, this.toggleAll)}</span>`;
     }
     renderMore(page) {
@@ -1059,7 +1151,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         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,
+            columns: columns.length ? columns.length + this.lead : undefined,
             rows: countKnown ? counted + 1 + (this.moreDrawn ? 1 : 0) : undefined,
         };
         return html `<div part="toolbar"><slot name="toolbar"></slot></div>
@@ -1071,7 +1163,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         @scroll=${this.handleScroll}
       >
         <div part="head" role="row" aria-rowindex="1">
-          ${this.selectable ? this.renderSelectAll(headStop && this.currentColumn === 0) : nothing}${this.assignsByName && !this.hydrating
+          ${this.rowGrips ? this.renderGripHead(headStop && this.currentColumn === 0) : nothing}${this.selectable
+            ? this.renderSelectAll(headStop && this.currentColumn === this.selectAt)
+            : 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>
@@ -1093,6 +1187,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
               page-size=${this.pageSize || 1}
               total=${countKnown ? matched : nothing}
               label=${this.paginationLabel}
+              locale=${handedLocale(this) || nothing}
               gap-label=${this.gapLabel}
               next-label=${this.nextLabel}
               page-label=${this.pageLabel}
@@ -1101,7 +1196,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
               @helix-activate=${this.stopPageNotification}
             ></${pagination}>`
             : nothing}
-      </div>`;
+      </div>${this.rowMoves.drawDragPreview()}`;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -1112,7 +1207,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.renderRoot.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);
     }
     disconnectedCallback() {
@@ -1124,26 +1218,25 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.renderRoot.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;
+        const offset = this.lead;
         if (row === -1) {
-            return column < offset
-                ? this.partNamed('select-all')
-                : (this.shownColumns[column - offset]?.cellBox ?? null);
+            if (column >= offset) {
+                return this.shownColumns[column - offset]?.cellBox ?? null;
+            }
+            return this.partNamed(this.rowGrips && column === 0 ? 'grip-head' : 'select-all');
         }
         if (this.moreDrawn && row === this.drawnPage.length) {
             return this.partNamed('more-cell');
         }
-        const line = this.renderRoot.querySelector(`[part="row"][data-row="${row}"]`);
+        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;
+        const offset = this.lead;
         for (const node of event.composedPath()) {
             if (node === this) {
                 break;
@@ -1171,14 +1264,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return undefined;
     }
     controlsIn(place) {
-        const offset = this.selectable ? 1 : 0;
+        const offset = this.lead;
         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 offset = this.lead;
         const drawn = this.shownColumns;
         const read = new Set(drawn.flatMap((column, place) => (column.cell ? [place + offset] : [])));
         if (read.size === 0) {
@@ -1204,11 +1297,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         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);
+        return pageRows(scrollRoom(this.partNamed('table'), { covered: this.headHeight() }), cell.getBoundingClientRect().height || this.estimate);
     }
     headHeight() {
         return this.cellAt(-1, 0)?.getBoundingClientRect().height ?? 0;
@@ -1270,7 +1359,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         if (!this.childField || !row || !header) {
             return false;
         }
-        if (place.column !== this.shownColumns.indexOf(header) + (this.selectable ? 1 : 0)) {
+        if (place.column !== this.shownColumns.indexOf(header) + this.lead) {
             return false;
         }
         const placed = this.tree().placed.get(row);
@@ -1289,7 +1378,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return false;
     }
     activate(event, place) {
-        const offset = this.selectable ? 1 : 0;
+        const offset = this.lead;
         const heading = place.row === -1 ? this.shownColumns[place.column - offset] : undefined;
         if (this.moreDrawn && place.row === this.drawnPage.length && event.key !== 'F2') {
             event.preventDefault();
@@ -1302,7 +1391,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 this.toggleSort(heading.field);
                 return;
             }
-            if (this.selectable && place.column === 0 && place.row === -1) {
+            if (this.selectable && place.column === this.selectAt && place.row === -1) {
                 event.preventDefault();
                 this.chooseAll();
                 return;
@@ -1350,13 +1439,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             .composedPath()
             .some((node) => node instanceof Element && node.getAttribute('part') === name);
     }
-    stopDrag() {
-        this.dragging = undefined;
-        this.dragOrder = undefined;
-        window.removeEventListener('pointermove', this.handleGripMove);
-        window.removeEventListener('pointerup', this.handleGripUp);
-        window.removeEventListener('pointercancel', this.handleGripCancel);
-    }
     columnFrom(event) {
         const columns = this.tableColumns;
         for (const node of event.composedPath()) {
@@ -1368,8 +1450,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
 };
 __decorate([
+    words,
     property({ attribute: 'ascending-label' })
 ], HelixHeadlessDataTable.prototype, "ascendingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'canceled-label' })
+], HelixHeadlessDataTable.prototype, "canceledLabel", void 0);
 __decorate([
     property({ attribute: 'child-field', reflect: true })
 ], HelixHeadlessDataTable.prototype, "childField", void 0);
@@ -1395,8 +1482,13 @@ __decorate([
     property({ attribute: 'default-sort' })
 ], HelixHeadlessDataTable.prototype, "defaultSort", void 0);
 __decorate([
+    words,
     property({ attribute: 'descending-label' })
 ], HelixHeadlessDataTable.prototype, "descendingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dropped-label' })
+], HelixHeadlessDataTable.prototype, "droppedLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "estimate", void 0);
@@ -1407,6 +1499,7 @@ __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "filter", null);
 __decorate([
+    words,
     property({ attribute: 'gap-label' })
 ], HelixHeadlessDataTable.prototype, "gapLabel", void 0);
 __decorate([
@@ -1416,12 +1509,25 @@ __decorate([
     property({ attribute: 'load-more', type: Boolean })
 ], HelixHeadlessDataTable.prototype, "loadMore", void 0);
 __decorate([
+    words,
     property({ attribute: 'load-more-label' })
 ], HelixHeadlessDataTable.prototype, "loadMoreLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessDataTable.prototype, "locale", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "mode", void 0);
 __decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessDataTable.prototype, "movedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'move-row-label' })
+], HelixHeadlessDataTable.prototype, "moveRowLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessDataTable.prototype, "nextLabel", void 0);
 __decorate([
@@ -1431,6 +1537,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "page", null);
 __decorate([
+    words,
     property({ attribute: 'page-label' })
 ], HelixHeadlessDataTable.prototype, "pageLabel", void 0);
 __decorate([
@@ -1440,20 +1547,34 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "paginated", null);
 __decorate([
+    words,
     property({ attribute: 'pagination-label' })
 ], HelixHeadlessDataTable.prototype, "paginationLabel", void 0);
 __decorate([
+    words,
+    property({ attribute: 'picked-up-label' })
+], HelixHeadlessDataTable.prototype, "pickedUpLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessDataTable.prototype, "previousLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "reorderable", void 0);
+__decorate([
+    property({ attribute: 'reorderable-rows', type: Boolean })
+], HelixHeadlessDataTable.prototype, "reorderableRows", void 0);
 __decorate([
     property({ attribute: 'result-label' })
 ], HelixHeadlessDataTable.prototype, "resultLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'results-label' })
 ], HelixHeadlessDataTable.prototype, "resultsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'row-grips-label' })
+], HelixHeadlessDataTable.prototype, "rowGripsLabel", void 0);
 __decorate([
     property({ attribute: 'row-key' })
 ], HelixHeadlessDataTable.prototype, "rowKey", void 0);
@@ -1464,27 +1585,32 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "selectable", void 0);
 __decorate([
+    words,
     property({ attribute: 'select-all-label' })
 ], HelixHeadlessDataTable.prototype, "selectAllLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "selected", null);
 __decorate([
+    words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessDataTable.prototype, "selectedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'select-row-label' })
 ], HelixHeadlessDataTable.prototype, "selectRowLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "sort", null);
 __decorate([
+    words,
     property({ attribute: 'sorted-label' })
 ], HelixHeadlessDataTable.prototype, "sortedLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "total", void 0);
 __decorate([
+    words,
     property({ attribute: 'unsorted-label' })
 ], HelixHeadlessDataTable.prototype, "unsortedLabel", void 0);
 __decorate([
@@ -1520,9 +1646,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDataTable.prototype, "activeColumn", void 0);
-__decorate([
-    state()
-], HelixHeadlessDataTable.prototype, "dragOrder", void 0);
 HelixHeadlessDataTable = HelixHeadlessDataTable_1 = __decorate([
     customElement('helix-headless-data-table')
 ], HelixHeadlessDataTable);