@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.0

package/dist/elements/data-grid.js

@@ -0,0 +1,1567 @@
+import { base } from "./shared.js";
+import { VariableSizeIndex } from "./virtual-list.js";
+import { clampDataGridColumnWidth, clampDataGridRowHeight, dataGridColumnVar, filterDataGridItems, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridCellValue, getDataGridColumnSizing, getDataGridColumnWindow, groupDataGridItems, parseDataGridClipboard, parseDataGridClipboardValue, parseDataGridInputValue, sortDataGridItems, toDataGridInputValue, writeDataGridClipboardText, getDataGridDataSourceRow } from "./data-grid-model.js";
+let nextGridId = 0;
+/** Accessible, virtualized grid engine for non-React and React consumers. */
+export function defineDataGrid() {
+    if (customElements.get("spui-data-grid"))
+        return;
+    class SpuiDataGrid extends HTMLElement {
+        static observedAttributes = ["aria-label", "label", "focus-mode", "selection-mode", "selection-appearance", "subtle-selection", "auto-fit-columns", "container-width-offset", "row-height", "overscan", "virtualize-columns", "select-label", "select-all-label", "empty-label", "no-results-label", "filterable", "filter-label", "sort-priority-label", "resizable-columns", "resize-label", "reorderable-columns", "reorder-label", "group-by", "empty-group-label", "expand-group-label", "collapse-group-label", "row-label", "edit-hint"];
+        data = [];
+        source;
+        sourceUnsubscribe;
+        sourceRequest;
+        clipboardController;
+        completedSourceRange = "";
+        sortedData = [];
+        definitions = [];
+        renderer;
+        keyOf;
+        rowHeightGetter;
+        heightRows;
+        heightEstimate = 0;
+        heightGetterAtIndex;
+        rowSizes = new VariableSizeIndex();
+        selected = new Set();
+        sourceAllSelected = false;
+        sourceAllSelectedScope;
+        sourceExcludedKeys = new Set();
+        currentSort;
+        currentSorts = [];
+        currentFilterValue = "";
+        currentColumnWidths = {};
+        fittedColumnWidths = {};
+        sizingOptions = {};
+        currentColumnOrder = [];
+        draggedColumnId;
+        resizing;
+        rows = new Map();
+        pool = [];
+        viewport;
+        filterBar;
+        filterInput;
+        header;
+        body;
+        reorderStatus;
+        frame = 0;
+        resizeObserver;
+        columnWindowChanged = false;
+        activeCell = { row: 0, column: 0 };
+        pendingBoundaryFocus;
+        get focusMode() { const value = this.getAttribute("focus-mode"); return value === "none" || value === "row_unstable" || value === "composite" ? value : "cell"; }
+        set focusMode(value) { if (value === "cell")
+            this.removeAttribute("focus-mode");
+        else
+            this.setAttribute("focus-mode", value); }
+        get selectionAppearance() { const value = this.getAttribute("selection-appearance"); return value === "neutral" || value === "none" ? value : "brand"; }
+        set selectionAppearance(value) { if (value === "brand")
+            this.removeAttribute("selection-appearance");
+        else
+            this.setAttribute("selection-appearance", value); }
+        get subtleSelection() { return this.hasAttribute("subtle-selection"); }
+        set subtleSelection(value) { this.toggleAttribute("subtle-selection", value); }
+        get columnSizingOptions() { return this.sizingOptions; }
+        set columnSizingOptions(value) { this.sizingOptions = value && typeof value === "object" ? value : {}; this.initializeColumnWidths(); this.applyColumnWidthVariables(); this.renderHeader(); this.paint(true); }
+        get autoFitColumns() { return this.getAttribute("auto-fit-columns") !== "false"; }
+        set autoFitColumns(value) { if (value)
+            this.removeAttribute("auto-fit-columns");
+        else
+            this.setAttribute("auto-fit-columns", "false"); }
+        get containerWidthOffset() { const value = Number(this.getAttribute("container-width-offset")); return Number.isFinite(value) ? value : 0; }
+        set containerWidthOffset(value) { if (Number.isFinite(value) && value !== 0)
+            this.setAttribute("container-width-offset", String(value));
+        else
+            this.removeAttribute("container-width-offset"); }
+        columnWindow = { start: 0, end: 16 };
+        collapsedGroups = new Set();
+        cachedDisplayRows;
+        cachedSortedData;
+        failedSourceRange = "";
+        cachedGroupBy = "";
+        cachedColumnIds = "";
+        cachedCollapsedGroups;
+        selectionName = `spui-grid-selection-${++nextGridId}`;
+        editedValues = new Map();
+        editingCell;
+        editCallback;
+        cellsEditCallback;
+        dataSourceGroupToggleCallback;
+        dataSourceSelectionCallback;
+        editValidator;
+        suppressEditorBlurCommit = false;
+        get sourceSelectableCount() {
+            const count = this.source?.selectableCount ?? this.source?.length ?? 0;
+            return Number.isFinite(count) ? Math.max(0, Math.floor(count)) : 0;
+        }
+        get items() { return this.data; }
+        set items(value) { this.clipboardController?.abort(); this.clipboardController = undefined; this.data = Array.isArray(value) ? value : []; this.source = undefined; this.sourceAllSelected = false; this.sourceAllSelectedScope = undefined; this.sourceExcludedKeys.clear(); this.sourceUnsubscribe?.(); this.sourceUnsubscribe = undefined; this.sourceRequest?.controller.abort(); this.sourceRequest = undefined; this.completedSourceRange = ""; this.failedSourceRange = ""; this.editedValues.clear(); this.editingCell = undefined; this.recomputeSort(); this.cachedDisplayRows = undefined; this.paint(true); }
+        get dataSource() { return this.source; }
+        set dataSource(value) {
+            if (value === this.source) {
+                this.refreshDataSource();
+                return;
+            }
+            this.clipboardController?.abort();
+            this.clipboardController = undefined;
+            this.sourceRequest?.controller.abort();
+            this.sourceRequest = undefined;
+            this.sourceUnsubscribe?.();
+            this.sourceUnsubscribe = undefined;
+            this.source = value;
+            this.completedSourceRange = "";
+            this.failedSourceRange = "";
+            this.cachedDisplayRows = undefined;
+            this.recomputeSort();
+            this.observeDataSource();
+            if (this.reorderStatus)
+                this.reorderStatus.textContent = "";
+            this.paint(true);
+        }
+        get columns() { return this.definitions; }
+        set columns(value) { this.definitions = Array.isArray(value) ? value.filter(column => column?.id && column.label) : []; this.currentColumnOrder = this.normalizeColumnOrder(this.currentColumnOrder); this.recomputeSort(); this.renderHeader(); this.initializeColumnWidths(); this.paint(true); }
+        get renderCell() { return this.renderer; }
+        set renderCell(value) { this.renderer = value; this.paint(true); }
+        get itemKey() { return this.keyOf; }
+        set itemKey(value) { this.keyOf = value; this.paint(true); }
+        get getRowHeight() { return this.rowHeightGetter; }
+        set getRowHeight(value) { this.rowHeightGetter = value; this.heightRows = undefined; this.paint(true); }
+        get selectedKeys() { return this.sourceAllSelected ? [] : [...this.selected]; }
+        set selectedKeys(value) { this.sourceAllSelected = false; this.sourceAllSelectedScope = undefined; this.sourceExcludedKeys.clear(); this.selected = new Set((value ?? []).map(String)); this.paint(true); }
+        get selectionModel() { return this.sourceAllSelected ? { mode: "all", excludedKeys: [...this.sourceExcludedKeys], ...(this.sourceAllSelectedScope === undefined ? {} : { scopeKey: this.sourceAllSelectedScope }) } : { mode: "explicit", keys: [...this.selected] }; }
+        set selectionModel(value) {
+            if (value?.mode === "all") {
+                this.sourceAllSelected = true;
+                this.sourceAllSelectedScope = value.scopeKey;
+                this.sourceExcludedKeys = new Set(value.excludedKeys.map(String));
+                this.selected.clear();
+            }
+            else {
+                this.sourceAllSelected = false;
+                this.sourceAllSelectedScope = undefined;
+                this.sourceExcludedKeys.clear();
+                this.selected = new Set((value?.mode === "explicit" ? value.keys : []).map(String));
+            }
+            this.paint(true);
+        }
+        get sort() { return this.currentSort; }
+        set sort(value) { this.currentSort = value; this.currentSorts = value ? [value] : []; this.recomputeSort(); this.renderHeader(); this.paint(true); }
+        get sorts() { return this.currentSorts.map(entry => ({ ...entry })); }
+        set sorts(value) { this.currentSorts = this.normalizeSorts(value); this.currentSort = this.currentSorts[0]; this.recomputeSort(); this.renderHeader(); this.paint(true); }
+        get filterValue() { return this.currentFilterValue; }
+        set filterValue(value) {
+            const next = String(value ?? "");
+            if (next === this.currentFilterValue)
+                return;
+            this.currentFilterValue = next;
+            if (this.filterInput && this.filterInput.value !== next)
+                this.filterInput.value = next;
+            this.recomputeSort();
+            this.paint(true);
+            this.dispatchEvent(new CustomEvent("spui-filter-change", { detail: { filterValue: next }, bubbles: true, composed: true }));
+        }
+        get filterable() { return this.hasAttribute("filterable"); }
+        set filterable(value) { this.toggleAttribute("filterable", Boolean(value)); }
+        get columnOrder() { return [...this.orderedDefinitions.map(column => column.id)]; }
+        set columnOrder(value) { this.currentColumnOrder = this.normalizeColumnOrder(value); this.renderHeader(); this.paint(true); }
+        get resizableColumns() { return this.hasAttribute("resizable-columns"); }
+        set resizableColumns(value) { this.toggleAttribute("resizable-columns", Boolean(value)); }
+        get reorderableColumns() { return this.hasAttribute("reorderable-columns"); }
+        set reorderableColumns(value) { this.toggleAttribute("reorderable-columns", Boolean(value)); }
+        get virtualizeColumns() { const value = this.getAttribute("virtualize-columns"); return value === null ? this.orderedDefinitions.length > 16 : value !== "false"; }
+        set virtualizeColumns(value) { this.setAttribute("virtualize-columns", String(Boolean(value))); }
+        get columnWidths() { return this.currentColumnWidths; }
+        set columnWidths(value) {
+            this.currentColumnWidths = Object.fromEntries(Object.entries(value ?? {}).filter(([, width]) => Number.isFinite(width) && width > 0).map(([id, width]) => { const column = this.definitions.find(candidate => candidate.id === id); return [id, column ? clampDataGridColumnWidth(column, width, this.sizingOptions[id]) : Math.round(width)]; }));
+            this.initializeColumnWidths();
+            this.applyColumnWidthVariables();
+            this.renderHeader();
+            this.paint(true);
+        }
+        get groupBy() { return this.getAttribute("group-by") || ""; }
+        set groupBy(value) { if (value)
+            this.setAttribute("group-by", value);
+        else
+            this.removeAttribute("group-by"); }
+        get collapsedGroupKeys() { return [...this.collapsedGroups]; }
+        set collapsedGroupKeys(value) { this.collapsedGroups = new Set(value ?? []); this.paint(true); }
+        get onCellEdit() { return this.editCallback; }
+        set onCellEdit(value) { this.editCallback = value; }
+        get validateCellEdit() { return this.editValidator; }
+        set validateCellEdit(value) { this.editValidator = value; }
+        get onCellsEdit() { return this.cellsEditCallback; }
+        set onCellsEdit(value) { this.cellsEditCallback = value; }
+        get onDataSourceGroupToggle() { return this.dataSourceGroupToggleCallback; }
+        set onDataSourceGroupToggle(value) { this.dataSourceGroupToggleCallback = value; }
+        get onDataSourceSelectionChange() { return this.dataSourceSelectionCallback; }
+        set onDataSourceSelectionChange(value) { this.dataSourceSelectionCallback = value; }
+        refreshDataSource() { this.completedSourceRange = ""; this.failedSourceRange = ""; this.sourceRequest?.controller.abort(); this.sourceRequest = undefined; this.cachedDisplayRows = undefined; this.paint(true); }
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.recomputeSort();
+            this.resizeObserver ??= new ResizeObserver(() => { this.initializeColumnWidths(); this.paint(this.updateColumnWindow()); });
+            if (this.viewport)
+                this.resizeObserver.observe(this.viewport);
+            this.observeDataSource();
+            this.renderHeader();
+            this.initializeColumnWidths();
+            this.paint(true);
+        }
+        disconnectedCallback() { cancelAnimationFrame(this.frame); this.frame = 0; this.resizeObserver?.disconnect(); this.sourceRequest?.controller.abort(); this.sourceRequest = undefined; this.clipboardController?.abort(); this.clipboardController = undefined; this.sourceUnsubscribe?.(); this.sourceUnsubscribe = undefined; }
+        attributeChangedCallback() { this.renderFilter(); this.renderHeader(); this.initializeColumnWidths(); this.paint(true); }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0}.viewport{box-sizing:border-box;position:relative;overflow:auto;height:var(--spui-data-grid-height,400px);overscroll-behavior:contain;border:1px solid var(--spui-data-grid-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)));border-radius:var(--spui-data-grid-radius,var(--spui-control-radius,6px));background:var(--spui-data-grid-background,var(--spui-base-surface,var(--spui-ui-surface,#fff)));outline:none}.viewport:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}.header{position:sticky;top:0;z-index:2;background:var(--spui-data-grid-header-background,var(--spui-base-canvas,var(--spui-ui-canvas,#f5f5f5)));color:var(--spui-ui-text,var(--spui-semantic-body-text,#323130));box-shadow:0 1px 0 var(--spui-ui-stroke,#d1d1d1)}.row{box-sizing:border-box;display:grid;align-items:center;min-width:100%;border-block-end:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#edebe9));background:var(--spui-data-grid-row-background,var(--spui-base-surface,var(--spui-ui-surface,#fff)));color:var(--spui-ui-text,var(--spui-semantic-body-text,#323130))}.data-row{position:absolute;inset-inline:0;top:0}.row:hover{background:var(--spui-data-grid-row-hover,var(--spui-ui-surface-hover,#f5f5f5))}.cell{box-sizing:border-box;display:flex;align-items:center;min-width:0;height:100%;padding-inline:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-cell{position:relative;font-weight:600}.resize-handle{position:absolute;z-index:1;inset-block:0;inset-inline-end:0;width:10px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:col-resize;outline:none}.resize-handle::after{content:"";width:1px;height:60%;background:transparent}.resize-handle:hover::after,.resize-handle:focus-visible::after{background:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))}.resize-handle:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}.header-cell button{display:flex;align-items:center;gap:6px;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.header-cell button:focus-visible,.cell:focus-visible,input:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}.selection-cell{justify-content:center;padding-inline:8px}.sort-indicator{color:var(--spui-ui-accent,var(--colorBrandForeground1,#0078d4))}.empty{padding:24px;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));text-align:center}@media(forced-colors:active){.viewport{border-color:CanvasText}.header{background:Canvas;color:CanvasText}.row{background:Canvas;color:CanvasText;border-color:CanvasText}.sort-indicator{color:LinkText}.resize-handle:focus-visible{outline-color:Highlight}.resize-handle::after{background:CanvasText}}`;
+            style.textContent += ".body{position:relative;display:block}.reorder-handle{flex:none;width:24px;height:28px;margin-inline-end:4px;padding:0;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font:inherit;cursor:grab}.header-cell .reorder-handle{width:24px;height:28px}.header-cell .reorder-handle+button{flex:1;min-width:0;width:auto}.reorder-handle:hover{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5));color:var(--spui-ui-text,inherit)}.reorder-handle:active{cursor:grabbing}.reorder-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}";
+            style.textContent += ".group-row{background:var(--spui-data-grid-header-background,var(--spui-base-canvas,var(--spui-ui-canvas,#f5f5f5)));font-weight:600}.group-cell{grid-column:1/-1!important;padding-inline:8px}.group-cell button{display:flex;align-items:center;gap:8px;width:100%;height:100%;padding-inline:4px;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.group-cell button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}.group-cell button span{margin-inline-start:auto;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font-variant-numeric:tabular-nums}";
+            style.textContent += ".filter-bar{margin-block-end:8px}.filter-bar[hidden]{display:none}.filter-bar input{box-sizing:border-box;width:min(100%,360px);min-height:36px;padding:6px 10px;border:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));border-radius:var(--spui-control-radius,4px);background:var(--spui-base-surface,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:inherit}.filter-bar input:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}.cell-editor{box-sizing:border-box;width:100%;min-width:0;min-height:30px;padding:3px 6px;border:1px solid var(--spui-ui-accent,#78716c);border-radius:var(--spui-control-radius,4px);background:var(--spui-base-surface,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:inherit}.cell-editor:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}.cell-editor[aria-invalid=true]{border-color:var(--spui-semantic-danger,#d13438)}.edit-error{position:absolute;z-index:3;margin-block-start:32px;padding:4px 8px;border:1px solid var(--spui-semantic-danger,#d13438);border-radius:4px;background:var(--spui-base-surface,#fff);color:var(--spui-semantic-danger,#d13438);font-size:12px}";
+            style.textContent += ".viewport[data-selection-appearance=brand] .data-row[aria-selected=true]{background:color-mix(in srgb,var(--spui-ui-accent,#0078d4) 14%,var(--spui-base-surface,var(--spui-ui-surface,#fff)))}.viewport[data-selection-appearance=neutral] .data-row[aria-selected=true]{background:color-mix(in srgb,var(--spui-ui-text,#323130) 6%,var(--spui-base-surface,var(--spui-ui-surface,#fff)))}.viewport[data-subtle-selection=true] .data-row .selection-cell input{opacity:0;transition:opacity var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}.viewport[data-subtle-selection=true] .data-row:hover .selection-cell input,.viewport[data-subtle-selection=true] .data-row:focus-within .selection-cell input{opacity:1}@media(prefers-reduced-motion:reduce){.selection-cell input{transition:none}}@media(forced-colors:active){.viewport .data-row[aria-selected=true]{outline:1px solid Highlight}.viewport[data-selection-appearance=brand] .data-row[aria-selected=true],.viewport[data-selection-appearance=neutral] .data-row[aria-selected=true]{background:Canvas;color:CanvasText}}";
+            style.textContent += ".data-row[aria-selected]{cursor:pointer}";
+            this.filterBar = document.createElement("div");
+            this.filterBar.className = "filter-bar";
+            this.filterBar.setAttribute("role", "search");
+            this.filterBar.part.add("filter");
+            this.filterInput = document.createElement("input");
+            this.filterInput.type = "search";
+            this.filterInput.dataset.testid = "spui-data-grid-filter";
+            this.filterInput.addEventListener("input", () => { this.filterValue = this.filterInput.value; });
+            this.filterBar.append(this.filterInput);
+            this.viewport = document.createElement("div");
+            this.viewport.className = "viewport";
+            this.viewport.part.add("viewport");
+            this.viewport.setAttribute("role", "grid");
+            this.viewport.tabIndex = 0;
+            this.viewport.addEventListener("scroll", () => {
+                this.columnWindowChanged ||= this.updateColumnWindow();
+                if (!this.frame)
+                    this.frame = requestAnimationFrame(() => { this.frame = 0; const force = this.columnWindowChanged; this.columnWindowChanged = false; this.paint(force); });
+            }, { passive: true });
+            this.viewport.addEventListener("click", event => this.onGridClick(event));
+            this.viewport.addEventListener("dblclick", event => this.onResizeDoubleClick(event));
+            this.viewport.addEventListener("pointerdown", event => this.onResizeStart(event));
+            this.viewport.addEventListener("pointermove", event => this.onResizeMove(event));
+            this.viewport.addEventListener("pointerup", event => this.onResizeEnd(event));
+            this.viewport.addEventListener("pointercancel", event => this.onResizeEnd(event, true));
+            this.viewport.addEventListener("dragstart", event => this.onColumnDragStart(event));
+            this.viewport.addEventListener("dragover", event => this.onColumnDragOver(event));
+            this.viewport.addEventListener("drop", event => this.onColumnDrop(event));
+            this.viewport.addEventListener("dragend", () => { this.draggedColumnId = undefined; });
+            this.viewport.addEventListener("keydown", event => this.onGridKeyDown(event));
+            this.viewport.addEventListener("copy", event => this.onGridCopy(event));
+            this.viewport.addEventListener("paste", event => { void this.onGridPaste(event); });
+            this.header = document.createElement("div");
+            this.header.className = "header";
+            this.header.setAttribute("role", "rowgroup");
+            this.header.part.add("header");
+            this.body = document.createElement("div");
+            this.body.className = "body";
+            this.body.setAttribute("role", "rowgroup");
+            this.body.part.add("body");
+            this.reorderStatus = document.createElement("div");
+            this.reorderStatus.className = "reorder-status";
+            this.reorderStatus.setAttribute("role", "status");
+            this.reorderStatus.setAttribute("aria-live", "polite");
+            this.reorderStatus.part.add("reorder-status");
+            this.viewport.append(this.header, this.body, this.reorderStatus);
+            shadow.append(style, this.filterBar, this.viewport);
+            this.renderFilter();
+        }
+        renderFilter() {
+            if (!this.filterBar || !this.filterInput)
+                return;
+            this.filterBar.hidden = !this.filterable;
+            this.filterInput.setAttribute("aria-label", this.getAttribute("filter-label") || "Search rows");
+            if (this.filterInput.value !== this.currentFilterValue)
+                this.filterInput.value = this.currentFilterValue;
+        }
+        recomputeSort() {
+            if (this.source) {
+                this.sortedData = [];
+                this.cachedDisplayRows = undefined;
+                this.cachedSortedData = this.sortedData;
+                return;
+            }
+            const locale = this.lang || document.documentElement.lang;
+            const filtered = filterDataGridItems(this.data, this.definitions, this.currentFilterValue, locale);
+            this.sortedData = sortDataGridItems(filtered, this.definitions, this.currentSorts, locale);
+        }
+        normalizeSorts(value) {
+            const seen = new Set();
+            return (value ?? []).filter(entry => {
+                if (!entry?.columnId || seen.has(entry.columnId) || !this.definitions.some(column => column.id === entry.columnId && column.sortable !== false))
+                    return false;
+                seen.add(entry.columnId);
+                return entry.direction === "ascending" || entry.direction === "descending";
+            }).map(entry => ({ ...entry }));
+        }
+        visibleItems() { return this.sortedData; }
+        sourceSelectionActive() { return this.sourceAllSelected && (this.sourceAllSelectedScope === undefined || this.sourceAllSelectedScope === this.source?.selectionScopeKey); }
+        isRowSelected(key) { return this.source && this.sourceSelectionActive() ? !this.sourceExcludedKeys.has(key) : this.selected.has(key); }
+        selectedLoadedItems() {
+            if (this.source)
+                return [...this.rows.values()].flatMap(row => row.spuiItem !== undefined && this.isRowSelected(row.spuiKey || "") ? [row.spuiItem] : []);
+            return this.sortedData.filter((item, index) => this.selected.has(this.rowKey(item, index)));
+        }
+        emitSelectionChange() {
+            const detail = { selectedKeys: this.selectedKeys, selectionModel: this.selectionModel, selectedItems: this.selectedLoadedItems() };
+            this.dataSourceSelectionCallback?.(detail.selectionModel, detail.selectedItems);
+            this.dispatchEvent(new CustomEvent("spui-selection-change", { detail, bubbles: true, composed: true }));
+        }
+        displayRows() {
+            if (this.source) {
+                const length = Number.isFinite(this.source.length) ? Math.max(0, Math.floor(this.source.length)) : 0;
+                if (!this.cachedDisplayRows || this.cachedDisplayRows.length !== length)
+                    this.cachedDisplayRows = new Array(length);
+                return this.cachedDisplayRows;
+            }
+            const columnIds = this.orderedDefinitions.map(column => column.id).join("\u001f");
+            const locale = this.lang || document.documentElement.lang;
+            const groupSignature = `${this.groupBy}\u001f${this.getAttribute("empty-group-label") || "No value"}\u001f${locale}`;
+            if (this.cachedDisplayRows && this.cachedSortedData === this.sortedData && this.cachedGroupBy === groupSignature && this.cachedColumnIds === columnIds && this.cachedCollapsedGroups === this.collapsedGroups)
+                return this.cachedDisplayRows;
+            const groups = groupDataGridItems(this.sortedData, this.orderedDefinitions, this.groupBy, locale, this.getAttribute("empty-group-label") || "No value");
+            this.cachedDisplayRows = groups ? groups.flatMap(group => [{ kind: "group", group }, ...(this.collapsedGroups.has(group.key) ? [] : group.items.map((item, offset) => ({ kind: "item", item, itemIndex: group.indices[offset] })))]) : this.sortedData.map((item, itemIndex) => ({ kind: "item", item, itemIndex }));
+            this.cachedSortedData = this.sortedData;
+            this.cachedGroupBy = groupSignature;
+            this.cachedColumnIds = columnIds;
+            this.cachedCollapsedGroups = this.collapsedGroups;
+            return this.cachedDisplayRows;
+        }
+        observeDataSource() {
+            if (!this.source || this.sourceUnsubscribe)
+                return;
+            this.sourceUnsubscribe = this.source.subscribe?.(() => {
+                this.completedSourceRange = "";
+                this.failedSourceRange = "";
+                this.cachedDisplayRows = undefined;
+                this.paint(true);
+            });
+        }
+        requestDataRange(start, end) {
+            const source = this.source;
+            if (!source || start >= end)
+                return;
+            let missingRange = false;
+            for (let index = start; index < end; index++)
+                if (getDataGridDataSourceRow(source, index) === undefined) {
+                    missingRange = true;
+                    break;
+                }
+            if (!missingRange)
+                return;
+            const key = `${start}:${end}`;
+            if (this.failedSourceRange === key || this.completedSourceRange === key || this.sourceRequest?.key === key)
+                return;
+            this.sourceRequest?.controller.abort();
+            const request = { key, controller: new AbortController() };
+            this.sourceRequest = request;
+            this.viewport?.setAttribute("aria-busy", "true");
+            Promise.resolve().then(() => source.loadRange(start, end, request.controller.signal)).then(() => {
+                if (this.sourceRequest !== request || request.controller.signal.aborted)
+                    return;
+                let missing = false;
+                for (let index = start; index < end; index++)
+                    if (getDataGridDataSourceRow(source, index) === undefined) {
+                        missing = true;
+                        break;
+                    }
+                this.sourceRequest = undefined;
+                if (missing) {
+                    this.failedSourceRange = key;
+                    const error = new Error("loadRange resolved before every requested row was available");
+                    if (this.reorderStatus)
+                        this.reorderStatus.textContent = error.message;
+                    this.viewport?.setAttribute("aria-busy", "false");
+                    this.dispatchEvent(new CustomEvent("spui-data-load-error", { detail: { error, start, end }, bubbles: true, composed: true }));
+                    return;
+                }
+                this.completedSourceRange = key;
+                this.failedSourceRange = "";
+                if (this.reorderStatus)
+                    this.reorderStatus.textContent = "";
+                this.cachedDisplayRows = undefined;
+                this.paint(true);
+            }, error => {
+                if (this.sourceRequest !== request || request.controller.signal.aborted)
+                    return;
+                this.sourceRequest = undefined;
+                this.failedSourceRange = key;
+                if (this.reorderStatus)
+                    this.reorderStatus.textContent = `Data could not be loaded: ${error instanceof Error ? error.message : String(error)}`;
+                this.viewport?.setAttribute("aria-busy", "false");
+                this.dispatchEvent(new CustomEvent("spui-data-load-error", { detail: { error, start, end }, bubbles: true, composed: true }));
+            });
+        }
+        indexRowSizes(rows, estimate) {
+            if (this.heightRows !== rows || this.heightEstimate !== estimate || this.heightGetterAtIndex !== this.rowHeightGetter) {
+                if (this.source)
+                    this.rowSizes.reset(rows.length, estimate);
+                else {
+                    const sizes = rows.map(row => row?.kind === "item" ? clampDataGridRowHeight(this.rowHeightGetter?.(row.item, row.itemIndex), estimate) : estimate);
+                    this.rowSizes.reset(rows.length, estimate, sizes);
+                }
+                this.heightRows = rows;
+                this.heightEstimate = estimate;
+                this.heightGetterAtIndex = this.rowHeightGetter;
+            }
+            return this.rowSizes;
+        }
+        rowKey(item, index) { return String(this.keyOf?.(item, index) ?? item?.id ?? item?.Id ?? index); }
+        selectionMode() { const value = this.getAttribute("selection-mode"); return value === "single" ? "single" : value === "multiple" || value === "multiselect" ? "multiple" : "none"; }
+        get orderedDefinitions() {
+            if (!this.currentColumnOrder.length)
+                return this.definitions;
+            const byId = new Map(this.definitions.map(column => [column.id, column]));
+            const orderedIds = new Set(this.currentColumnOrder);
+            return [...this.currentColumnOrder.flatMap(id => { const column = byId.get(id); return column ? [column] : []; }), ...this.definitions.filter(column => !orderedIds.has(column.id))];
+        }
+        updateColumnWindow() {
+            const next = this.virtualizeColumns && this.viewport && this.header
+                ? getDataGridColumnWindow([...this.header.querySelectorAll("[data-column-index]")], this.viewport)
+                : { start: 0, end: this.orderedDefinitions.length };
+            if (next.start === this.columnWindow.start && next.end === this.columnWindow.end)
+                return false;
+            this.columnWindow = next;
+            return true;
+        }
+        normalizeColumnOrder(value) {
+            const known = new Set(this.definitions.map(column => column.id));
+            return [...new Set(value ?? [])].filter(id => known.has(id)).concat(this.definitions.filter(column => !value?.includes(column.id)).map(column => column.id));
+        }
+        templateColumns() {
+            return [...(this.selectionMode() === "none" ? [] : ["44px"]), ...this.orderedDefinitions.map((column, index) => {
+                    const sizing = getDataGridColumnSizing(column, this.sizingOptions);
+                    const configured = this.sizingOptions[column.id];
+                    const hasInitialWidth = configured?.defaultWidth !== undefined || configured?.idealWidth !== undefined;
+                    const isAutoFitLast = this.resizableColumns && this.autoFitColumns && index === this.orderedDefinitions.length - 1 && this.currentColumnWidths[column.id] === undefined;
+                    const fallback = isAutoFitLast ? `minmax(${sizing.minWidth}px, 1fr)` : hasInitialWidth ? `${sizing.defaultWidth}px` : column.width || "minmax(120px, 1fr)";
+                    return `var(${dataGridColumnVar(column.id)}, ${fallback})`;
+                })].join(" ") || "minmax(0, 1fr)";
+        }
+        renderHeader() {
+            if (!this.header || !this.viewport)
+                return;
+            this.header.replaceChildren();
+            const row = document.createElement("div");
+            row.className = "row header-row";
+            row.setAttribute("role", "row");
+            row.setAttribute("aria-rowindex", "1");
+            row.style.gridTemplateColumns = this.templateColumns();
+            if (this.selectionMode() !== "none") {
+                const cell = document.createElement("div");
+                cell.className = "cell header-cell selection-cell";
+                cell.setAttribute("role", "columnheader");
+                if (this.selectionMode() === "multiple") {
+                    const checkbox = document.createElement("input");
+                    checkbox.type = "checkbox";
+                    checkbox.dataset.selectAll = "";
+                    checkbox.setAttribute("aria-label", this.getAttribute("select-all-label") || "Select all rows");
+                    cell.append(checkbox);
+                }
+                row.append(cell);
+            }
+            this.orderedDefinitions.forEach((column, index) => {
+                const cell = document.createElement("div");
+                cell.className = "cell header-cell";
+                cell.setAttribute("role", "columnheader");
+                cell.dataset.columnId = column.id;
+                cell.dataset.columnIndex = String(index);
+                cell.setAttribute("aria-colindex", String(index + (this.selectionMode() === "none" ? 1 : 2)));
+                if (this.reorderableColumns) {
+                    const grip = document.createElement("button");
+                    grip.type = "button";
+                    grip.className = "reorder-handle";
+                    grip.dataset.reorderColumn = column.id;
+                    grip.draggable = true;
+                    grip.setAttribute("aria-label", `${this.getAttribute("reorder-label") || "Reorder column"} ${column.label}`);
+                    grip.title = `${this.getAttribute("reorder-label") || "Reorder column"} ${column.label}; use Alt+Shift+Arrow keys`;
+                    grip.textContent = "⠿";
+                    cell.append(grip);
+                }
+                if (column.sortable !== false) {
+                    const button = document.createElement("button");
+                    button.type = "button";
+                    button.dataset.sortColumn = column.id;
+                    button.append(document.createTextNode(column.label));
+                    const sortIndex = this.currentSorts.findIndex(entry => entry.columnId === column.id);
+                    if (sortIndex === 0) {
+                        cell.setAttribute("aria-sort", this.currentSorts[0].direction);
+                        const indicator = document.createElement("span");
+                        indicator.className = "sort-indicator";
+                        indicator.setAttribute("aria-hidden", "true");
+                        indicator.textContent = `${sortIndex + 1}${this.currentSorts[0].direction === "ascending" ? "▲" : "▼"}`;
+                        button.append(indicator);
+                    }
+                    else {
+                        cell.setAttribute("aria-sort", "none");
+                        if (sortIndex > 0) {
+                            const indicator = document.createElement("span");
+                            indicator.className = "sort-indicator";
+                            indicator.setAttribute("aria-hidden", "true");
+                            indicator.textContent = `${sortIndex + 1}${this.currentSorts[sortIndex].direction === "ascending" ? "▲" : "▼"}`;
+                            button.append(indicator);
+                        }
+                    }
+                    if (sortIndex >= 0)
+                        button.setAttribute("aria-label", `${column.label}, ${(this.getAttribute("sort-priority-label") || "Sort priority {priority}").replace("{priority}", String(sortIndex + 1))}`);
+                    cell.append(button);
+                }
+                else {
+                    const label = document.createElement("span");
+                    label.textContent = column.label;
+                    cell.append(label);
+                }
+                if (this.resizableColumns && column.resizable !== false) {
+                    cell.style.position = "relative";
+                    const separator = document.createElement("div");
+                    separator.className = "resize-handle";
+                    separator.dataset.resizeColumn = column.id;
+                    separator.setAttribute("role", "separator");
+                    separator.setAttribute("aria-orientation", "vertical");
+                    separator.tabIndex = 0;
+                    separator.setAttribute("aria-label", `${this.getAttribute("resize-label") || "Resize column"} ${column.label}`);
+                    separator.setAttribute("aria-valuemin", String(getDataGridColumnSizing(column, this.sizingOptions).minWidth));
+                    separator.setAttribute("aria-valuemax", String(column.maxWidth ?? 1600));
+                    separator.setAttribute("aria-valuenow", String(this.currentColumnWidths[column.id] ?? Math.round(cell.getBoundingClientRect().width)));
+                    cell.append(separator);
+                }
+                row.append(cell);
+            });
+            this.header.append(row);
+            this.updateColumnWindow();
+            this.header.querySelectorAll("[data-resize-column]").forEach(handle => {
+                const id = handle.dataset.resizeColumn;
+                if (this.currentColumnWidths[id] === undefined)
+                    handle.setAttribute("aria-valuenow", String(Math.round(handle.parentElement.getBoundingClientRect().width)));
+            });
+            this.viewport.setAttribute("aria-label", this.getAttribute("label") || this.getAttribute("aria-label") || "Data grid");
+            this.viewport.setAttribute("aria-colcount", String(this.orderedDefinitions.length + (this.selectionMode() === "none" ? 0 : 1)));
+        }
+        paint(force = false) {
+            if (!this.isConnected || !this.viewport || !this.body)
+                return;
+            const activeEditor = this.shadowRoot?.activeElement instanceof HTMLInputElement && this.shadowRoot.activeElement.classList.contains("cell-editor") ? this.shadowRoot.activeElement : undefined;
+            const selection = activeEditor ? [activeEditor.selectionStart, activeEditor.selectionEnd] : undefined;
+            this.suppressEditorBlurCommit = Boolean(activeEditor);
+            const items = this.visibleItems();
+            const displayRows = this.displayRows();
+            const rowHeight = this.positiveNumber(this.getAttribute("row-height"), 40);
+            const rowSizes = this.indexRowSizes(displayRows, rowHeight);
+            const overscanValue = Number(this.getAttribute("overscan"));
+            const overscan = Number.isFinite(overscanValue) ? Math.max(0, Math.min(50, Math.floor(overscanValue))) : 4;
+            const headerHeight = this.header?.offsetHeight || rowHeight;
+            const scrollTop = Math.max(0, this.viewport.scrollTop - headerHeight);
+            const viewportEnd = scrollTop + Math.max(0, this.viewport.clientHeight - headerHeight);
+            const first = Math.max(0, rowSizes.indexAt(scrollTop) - overscan);
+            const last = Math.min(displayRows.length, rowSizes.indexAt(viewportEnd) + overscan + 1);
+            const itemCount = this.source ? Math.max(0, Math.floor(this.source.length)) : items.length;
+            if (this.source)
+                this.requestDataRange(first, last);
+            this.viewport.setAttribute("aria-rowcount", String(displayRows.length + 1));
+            this.viewport.setAttribute("data-item-count", String(itemCount));
+            this.viewport.setAttribute("aria-busy", String(Boolean(this.sourceRequest)));
+            this.viewport.tabIndex = itemCount ? -1 : 0;
+            this.viewport.dataset.selectionAppearance = this.selectionAppearance;
+            this.viewport.dataset.subtleSelection = String(this.subtleSelection);
+            const orderedColumns = this.orderedDefinitions;
+            const visibleColumns = this.virtualizeColumns ? orderedColumns.slice(this.columnWindow.start, this.columnWindow.end) : orderedColumns;
+            const columnTemplate = this.templateColumns();
+            for (const [index, row] of this.rows)
+                if (index < first || index >= last) {
+                    row.remove();
+                    this.rows.delete(index);
+                    this.pool.push(row);
+                }
+            const fragment = document.createDocumentFragment();
+            if (!itemCount) {
+                const empty = document.createElement("div");
+                empty.className = "empty";
+                empty.setAttribute("role", "row");
+                empty.textContent = this.currentFilterValue.trim() ? this.getAttribute("no-results-label") || "No results" : this.getAttribute("empty-label") || "No items";
+                fragment.append(empty);
+            }
+            else {
+                const spacer = document.createElement("div");
+                spacer.setAttribute("role", "presentation");
+                spacer.setAttribute("aria-hidden", "true");
+                spacer.style.height = "0px";
+                fragment.append(spacer);
+                for (let index = first; index < last; index++) {
+                    let display = displayRows[index];
+                    if (this.source) {
+                        const sourceRow = getDataGridDataSourceRow(this.source, index);
+                        display = sourceRow?.kind === "group"
+                            ? { kind: "group", group: { key: sourceRow.key, label: sourceRow.label, value: undefined, items: [], indices: [] }, sourceGroup: { count: sourceRow.count, expanded: sourceRow.expanded } }
+                            : sourceRow?.kind === "item" ? { kind: "item", item: sourceRow.item, itemIndex: sourceRow.itemIndex ?? index, rowKey: sourceRow.rowId === undefined ? undefined : String(sourceRow.rowId) } : undefined;
+                        displayRows[index] = display;
+                    }
+                    const item = display?.kind === "item" ? display.item : undefined;
+                    const itemIndex = display?.kind === "item" ? display.itemIndex : -1;
+                    const key = display?.kind === "item" ? display.rowKey ?? this.rowKey(item, itemIndex) : display?.kind === "group" ? display.group.key : `loading-${index}`;
+                    let row = this.rows.get(index);
+                    if (!row) {
+                        row = (this.pool.pop() ?? Object.assign(document.createElement("div"), { className: "row data-row" }));
+                        row.setAttribute("role", "row");
+                        this.rows.set(index, row);
+                    }
+                    const typeChanged = row.spuiType !== (display?.kind ?? "loading");
+                    row.dataset.rowIndex = String(index);
+                    row.dataset.rowKey = key;
+                    row.spuiType = display?.kind ?? "loading";
+                    row.setAttribute("aria-rowindex", String(index + 2));
+                    row.tabIndex = display?.kind === "item" && (this.focusMode === "row_unstable" || this.focusMode === "composite") && index === this.activeCell.row ? 0 : -1;
+                    const selected = display?.kind === "item" && this.isRowSelected(key);
+                    if (this.selectionMode() !== "none")
+                        row.setAttribute("aria-selected", String(selected));
+                    else
+                        row.removeAttribute("aria-selected");
+                    row.style.height = `${rowSizes.size(index)}px`;
+                    row.style.gridTemplateColumns = columnTemplate;
+                    row.style.transform = `translateY(${rowSizes.offset(index)}px)`;
+                    if (display?.kind === "group") {
+                        row.dataset.groupKey = key;
+                        const collapsed = display.sourceGroup ? !display.sourceGroup.expanded : this.collapsedGroups.has(key);
+                        if (force || typeChanged || row.spuiKey !== key) {
+                            row.replaceChildren();
+                            row.removeAttribute("aria-selected");
+                            row.classList.add("group-row");
+                            const cell = document.createElement("div");
+                            cell.className = "cell group-cell";
+                            cell.setAttribute("role", "rowheader");
+                            cell.setAttribute("aria-colspan", String(orderedColumns.length + (this.selectionMode() === "none" ? 0 : 1)));
+                            cell.style.gridColumn = "1 / -1";
+                            const groupCount = display.sourceGroup?.count ?? display.group.items.length;
+                            const button = document.createElement("button");
+                            button.type = "button";
+                            button.dataset.groupToggle = key;
+                            button.setAttribute("aria-expanded", String(!collapsed));
+                            button.setAttribute("aria-label", `${collapsed ? this.getAttribute("expand-group-label") || "Expand group" : this.getAttribute("collapse-group-label") || "Collapse group"} ${display.group.label}, ${groupCount}`);
+                            button.append(document.createTextNode(`${collapsed ? "›" : "⌄"} ${display.group.label} `));
+                            const count = document.createElement("span");
+                            count.textContent = String(groupCount);
+                            button.append(count);
+                            cell.append(button);
+                            row.append(cell);
+                            row.spuiItem = undefined;
+                            row.spuiKey = key;
+                        }
+                        fragment.append(row);
+                        continue;
+                    }
+                    if (!display) {
+                        row.removeAttribute("aria-selected");
+                        row.setAttribute("aria-busy", "true");
+                        row.setAttribute("aria-label", `${this.getAttribute("loading-label") || "Loading row"} ${index + 1}`);
+                        row.classList.add("loading-row");
+                        if (force || typeChanged || row.spuiKey !== key) {
+                            row.replaceChildren();
+                            const loadingCell = document.createElement("div");
+                            loadingCell.className = "cell";
+                            loadingCell.setAttribute("role", "gridcell");
+                            loadingCell.setAttribute("aria-colspan", String(orderedColumns.length + (this.selectionMode() === "none" ? 0 : 1)));
+                            loadingCell.style.gridColumn = "1 / -1";
+                            const loadingText = document.createElement("span");
+                            loadingText.textContent = this.getAttribute("loading-label") || "Loading…";
+                            loadingCell.append(loadingText);
+                            row.append(loadingCell);
+                            row.spuiItem = undefined;
+                            row.spuiKey = key;
+                        }
+                        fragment.append(row);
+                        continue;
+                    }
+                    row.removeAttribute("aria-busy");
+                    row.removeAttribute("aria-label");
+                    row.classList.remove("loading-row");
+                    delete row.dataset.groupKey;
+                    row.classList.remove("group-row");
+                    if (force || typeChanged || row.spuiItem !== item || row.spuiKey !== key) {
+                        row.replaceChildren();
+                        if (this.selectionMode() !== "none") {
+                            const cell = document.createElement("div");
+                            cell.className = "cell selection-cell";
+                            cell.setAttribute("role", "gridcell");
+                            cell.setAttribute("aria-colindex", "1");
+                            cell.dataset.colIndex = "-1";
+                            const checkbox = document.createElement("input");
+                            checkbox.type = this.selectionMode() === "single" ? "radio" : "checkbox";
+                            if (checkbox.type === "radio")
+                                checkbox.name = this.selectionName;
+                            checkbox.checked = selected;
+                            checkbox.dataset.rowSelect = key;
+                            checkbox.setAttribute("aria-label", `${this.getAttribute("select-label") || "Select row"} ${itemIndex + 1}`);
+                            cell.append(checkbox);
+                            row.append(cell);
+                        }
+                        visibleColumns.forEach((column, visibleIndex) => {
+                            const columnIndex = this.virtualizeColumns ? this.columnWindow.start + visibleIndex : visibleIndex;
+                            const cell = document.createElement("div");
+                            cell.className = "cell";
+                            cell.setAttribute("role", "gridcell");
+                            cell.setAttribute("aria-colindex", String(columnIndex + (this.selectionMode() === "none" ? 1 : 2)));
+                            cell.dataset.colIndex = String(columnIndex);
+                            cell.dataset.colId = column.id;
+                            cell.tabIndex = (this.focusMode === "cell" || this.focusMode === "composite") && this.activeCell.row === index && this.activeCell.column === columnIndex ? 0 : -1;
+                            cell.style.gridColumn = String(columnIndex + (this.selectionMode() === "none" ? 1 : 2));
+                            cell.dataset.rowId = key;
+                            const isEditing = this.editingCell?.rowId === key && this.editingCell.columnId === column.id && column.editable === true;
+                            if (isEditing) {
+                                const input = document.createElement("input");
+                                input.type = column.editType || "text";
+                                input.className = "cell-editor";
+                                input.dataset.testid = "spui-data-grid-editor";
+                                input.value = this.editingCell.draft;
+                                input.disabled = Boolean(this.editingCell.saving);
+                                input.setAttribute("aria-label", `${column.label}, ${this.getAttribute("row-label") || "row"} ${itemIndex + 1}`);
+                                input.setAttribute("aria-invalid", String(Boolean(this.editingCell.error)));
+                                if (this.editingCell.error) {
+                                    const errorId = `spui-grid-edit-error-${CSS.escape(key)}-${CSS.escape(column.id)}`;
+                                    input.setAttribute("aria-describedby", errorId);
+                                    const error = document.createElement("span");
+                                    error.id = errorId;
+                                    error.className = "edit-error";
+                                    error.setAttribute("role", "alert");
+                                    error.textContent = this.editingCell.error;
+                                    cell.append(error);
+                                }
+                                input.addEventListener("input", () => { if (this.editingCell)
+                                    this.editingCell.draft = input.value; });
+                                input.addEventListener("keydown", event => { event.stopPropagation(); if (event.key === "Escape") {
+                                    event.preventDefault();
+                                    this.cancelCellEdit(key, column.id);
+                                }
+                                else if (event.key === "Enter") {
+                                    event.preventDefault();
+                                    void this.commitCellEdit(key, column, item, input.value);
+                                } });
+                                input.addEventListener("blur", () => { if (!this.suppressEditorBlurCommit && this.editingCell?.rowId === key && this.editingCell.columnId === column.id && !this.editingCell.saving)
+                                    void this.commitCellEdit(key, column, item, input.value); });
+                                cell.append(input);
+                            }
+                            else {
+                                const editKey = this.editKey(key, column.id);
+                                const result = this.editedValues.has(editKey) ? this.editedValues.get(editKey) : this.renderer?.(item, column, itemIndex) ?? getDataGridCellValue(item, column) ?? "";
+                                if (result instanceof Node)
+                                    cell.append(result);
+                                else
+                                    cell.textContent = String(result ?? "");
+                                if (column.editable) {
+                                    cell.title = this.getAttribute("edit-hint") || "Press Enter or F2 to edit";
+                                    cell.setAttribute("aria-keyshortcuts", "Enter F2");
+                                }
+                            }
+                            row.append(cell);
+                        });
+                        row.spuiItem = item;
+                        row.spuiKey = key;
+                        row.spuiType = "item";
+                    }
+                    else if (this.selectionMode() !== "none") {
+                        const checkbox = row.querySelector("[data-row-select]");
+                        if (checkbox)
+                            checkbox.checked = selected;
+                    }
+                    row.querySelectorAll("[data-col-index]").forEach(cell => { cell.tabIndex = (this.focusMode === "cell" || this.focusMode === "composite") && this.activeCell.row === index && this.activeCell.column === Number(cell.dataset.colIndex) ? 0 : -1; });
+                    fragment.append(row);
+                }
+            }
+            const bottom = document.createElement("div");
+            bottom.setAttribute("role", "presentation");
+            bottom.setAttribute("aria-hidden", "true");
+            bottom.style.height = `${rowSizes.totalSize}px`;
+            fragment.append(bottom);
+            this.body.replaceChildren(fragment);
+            this.suppressEditorBlurCommit = false;
+            const pendingBoundary = this.pendingBoundaryFocus;
+            if (pendingBoundary) {
+                const row = this.rows.get(pendingBoundary.row);
+                if (row && row.getAttribute("aria-busy") !== "true") {
+                    const cell = row.querySelector(`[role="gridcell"][data-col-index="${pendingBoundary.column}"]`);
+                    if (cell && !pendingBoundary.scheduled) {
+                        pendingBoundary.scheduled = true;
+                        requestAnimationFrame(() => requestAnimationFrame(() => {
+                            if (this.pendingBoundaryFocus !== pendingBoundary)
+                                return;
+                            const currentRow = this.rows.get(pendingBoundary.row);
+                            const currentCell = currentRow?.querySelector(`[role="gridcell"][data-col-index="${pendingBoundary.column}"]`);
+                            if (!currentRow || !currentCell || currentRow.getAttribute("aria-busy") === "true") {
+                                pendingBoundary.scheduled = false;
+                                return;
+                            }
+                            const target = this.focusMode === "row_unstable" ? currentRow : currentCell.querySelector("button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),a[href]") ?? currentCell;
+                            target.focus();
+                            pendingBoundary.attempts++;
+                            const active = this.shadowRoot?.activeElement;
+                            if (active && currentRow.contains(active))
+                                this.pendingBoundaryFocus = undefined;
+                            else if (pendingBoundary.attempts >= 3)
+                                this.pendingBoundaryFocus = undefined;
+                            else {
+                                pendingBoundary.scheduled = false;
+                                this.paint();
+                            }
+                        }));
+                    }
+                }
+            }
+            if (activeEditor) {
+                const currentEditor = activeEditor.isConnected ? activeEditor : this.rows.get(this.activeCell.row)?.querySelector(".cell-editor");
+                if (currentEditor) {
+                    currentEditor.focus();
+                    if (selection && selection[0] !== null && selection[1] !== null)
+                        currentEditor.setSelectionRange(selection[0] ?? currentEditor.value.length, selection[1] ?? currentEditor.value.length);
+                }
+            }
+            const selectAll = this.header?.querySelector("[data-select-all]");
+            if (selectAll && force) {
+                if (this.source) {
+                    const hasRows = this.sourceSelectableCount > 0;
+                    selectAll.disabled = !hasRows;
+                    const activeAll = this.sourceSelectionActive();
+                    const partial = activeAll ? this.sourceExcludedKeys.size > 0 : !this.sourceAllSelected && this.selected.size > 0;
+                    selectAll.checked = hasRows && activeAll && !partial;
+                    selectAll.indeterminate = hasRows && partial;
+                }
+                else {
+                    selectAll.disabled = items.length === 0;
+                    const selectedCount = items.reduce((count, item, index) => count + Number(this.selected.has(this.rowKey(item, index))), 0);
+                    selectAll.checked = items.length > 0 && selectedCount === items.length;
+                    selectAll.indeterminate = selectedCount > 0 && selectedCount < items.length;
+                }
+            }
+        }
+        onGridClick(event) {
+            const target = event.target;
+            const groupToggle = target.closest("button[data-group-toggle]");
+            if (groupToggle) {
+                const key = groupToggle.dataset.groupToggle;
+                const rowIndex = Number(groupToggle.closest("[data-row-index]")?.dataset.rowIndex);
+                const display = this.displayRows()[rowIndex];
+                if (this.source && display?.kind === "group" && display.sourceGroup) {
+                    const expanded = !display.sourceGroup.expanded;
+                    this.dataSourceGroupToggleCallback?.(key, expanded);
+                    this.dispatchEvent(new CustomEvent("spui-data-source-group-toggle", { detail: { groupKey: key, expanded }, bubbles: true, composed: true }));
+                    requestAnimationFrame(() => this.viewport?.querySelector(`[data-group-toggle="${CSS.escape(key)}"]`)?.focus());
+                    return;
+                }
+                const next = new Set(this.collapsedGroups);
+                if (next.has(key))
+                    next.delete(key);
+                else
+                    next.add(key);
+                this.collapsedGroups = next;
+                this.paint(true);
+                this.dispatchEvent(new CustomEvent("spui-group-state-change", { detail: { collapsedGroupKeys: this.collapsedGroupKeys }, bubbles: true, composed: true }));
+                requestAnimationFrame(() => this.viewport?.querySelector(`[data-group-toggle="${CSS.escape(key)}"]`)?.focus());
+                return;
+            }
+            const sortButton = target.closest("button[data-sort-column]");
+            if (sortButton) {
+                const columnId = sortButton.dataset.sortColumn;
+                const next = [...this.currentSorts];
+                const index = next.findIndex(entry => entry.columnId === columnId);
+                const additive = event.shiftKey;
+                if (!additive) {
+                    const direction = index === 0 && next[0].direction === "ascending" ? "descending" : "ascending";
+                    this.currentSorts = index === 0 && next[0].direction === "descending" ? [] : [{ columnId, direction }];
+                }
+                else if (index < 0)
+                    next.push({ columnId, direction: "ascending" });
+                else if (next[index].direction === "ascending")
+                    next[index] = { columnId, direction: "descending" };
+                else
+                    next.splice(index, 1);
+                if (additive)
+                    this.currentSorts = next;
+                this.currentSort = this.currentSorts[0];
+                this.recomputeSort();
+                this.renderHeader();
+                this.paint(true);
+                this.header?.querySelector(`[data-sort-column="${CSS.escape(columnId)}"]`)?.focus();
+                this.dispatchEvent(new CustomEvent("spui-sort-change", { detail: { sort: this.currentSort, sorts: this.sorts }, bubbles: true, composed: true }));
+                return;
+            }
+            const row = target.closest(".data-row[data-row-index]");
+            if (row && this.selectionMode() !== "none") {
+                this.toggleRowSelection(row.dataset.rowKey || "");
+                return;
+            }
+            const checkbox = target.closest("input[data-select-all],input[data-row-select]");
+            if (!checkbox)
+                return;
+            const items = this.visibleItems();
+            if (checkbox.hasAttribute("data-select-all")) {
+                if (this.source) {
+                    this.sourceAllSelected = checkbox.checked && this.sourceSelectableCount > 0;
+                    this.sourceAllSelectedScope = this.sourceAllSelected ? this.source?.selectionScopeKey : undefined;
+                    this.sourceExcludedKeys.clear();
+                    this.selected.clear();
+                }
+                else {
+                    const allKeys = items.map((item, index) => this.rowKey(item, index));
+                    this.selected = checkbox.checked ? new Set(allKeys) : new Set();
+                }
+            }
+            else {
+                const key = checkbox.dataset.rowSelect;
+                if (!key)
+                    return;
+                if (this.source && this.sourceSelectionActive()) {
+                    if (checkbox.checked)
+                        this.sourceExcludedKeys.delete(key);
+                    else
+                        this.sourceExcludedKeys.add(key);
+                }
+                else {
+                    if (this.source && this.sourceAllSelected) {
+                        this.sourceAllSelected = false;
+                        this.sourceAllSelectedScope = undefined;
+                        this.sourceExcludedKeys.clear();
+                    }
+                    if (this.selectionMode() === "single")
+                        this.selected.clear();
+                    if (checkbox.checked)
+                        this.selected.add(key);
+                    else
+                        this.selected.delete(key);
+                }
+            }
+            this.paint(true);
+            this.emitSelectionChange();
+        }
+        toggleRowSelection(key) {
+            if (!key || this.selectionMode() === "none")
+                return;
+            const selected = this.isRowSelected(key);
+            if (this.source && this.sourceSelectionActive()) {
+                if (selected)
+                    this.sourceExcludedKeys.add(key);
+                else
+                    this.sourceExcludedKeys.delete(key);
+            }
+            else if (this.source && this.sourceAllSelected) {
+                this.sourceAllSelected = false;
+                this.sourceAllSelectedScope = undefined;
+                this.sourceExcludedKeys.clear();
+                this.selected.add(key);
+            }
+            else if (this.selectionMode() === "single") {
+                if (selected)
+                    this.selected.delete(key);
+                else {
+                    this.selected.clear();
+                    this.selected.add(key);
+                }
+            }
+            else if (selected)
+                this.selected.delete(key);
+            else
+                this.selected.add(key);
+            this.paint(true);
+            this.emitSelectionChange();
+        }
+        editKey(rowId, columnId) { return JSON.stringify([rowId, columnId]); }
+        beginCellEdit(cell) {
+            if (!cell || !this.viewport)
+                return;
+            const rowIndex = Number(cell.closest("[data-row-index]")?.dataset.rowIndex);
+            const columnIndex = Number(cell.dataset.colIndex);
+            const display = this.displayRows()[rowIndex];
+            const column = this.orderedDefinitions[columnIndex];
+            if (!display || display.kind !== "item" || !column?.editable)
+                return;
+            const rowId = display.rowKey ?? this.rowKey(display.item, display.itemIndex);
+            const key = this.editKey(rowId, column.id);
+            const current = this.editedValues.has(key) ? this.editedValues.get(key) : getDataGridCellValue(display.item, column);
+            this.activeCell = { row: rowIndex, column: columnIndex };
+            this.editingCell = { rowId, columnId: column.id, draft: toDataGridInputValue(current, column.editType) };
+            this.paint(true);
+            requestAnimationFrame(() => this.rows.get(rowIndex)?.querySelector(".cell-editor")?.focus());
+        }
+        cancelCellEdit(rowId, columnId) {
+            const editing = this.editingCell;
+            if (!editing || editing.rowId !== rowId || editing.columnId !== columnId || editing.saving)
+                return;
+            this.editingCell = undefined;
+            this.paint(true);
+            requestAnimationFrame(() => this.viewport?.querySelector(`[data-row-id="${CSS.escape(rowId)}"][data-col-index="${this.orderedDefinitions.findIndex(column => column.id === columnId)}"]`)?.focus());
+        }
+        async commitCellEdit(rowId, column, item, draft) {
+            const editing = this.editingCell;
+            if (!editing || editing.rowId !== rowId || editing.columnId !== column.id || editing.saving)
+                return;
+            const value = parseDataGridInputValue(draft, column.editType);
+            const edit = { item, rowId, columnId: column.id, previousValue: getDataGridCellValue(item, column), value };
+            let error;
+            try {
+                error = this.editValidator?.(edit);
+            }
+            catch (reason) {
+                error = reason instanceof Error ? reason.message : String(reason);
+            }
+            if (error) {
+                editing.draft = draft;
+                editing.error = error;
+                this.showEditError(editing);
+                return;
+            }
+            editing.saving = true;
+            const input = this.rows.get(this.activeCell.row)?.querySelector(".cell-editor");
+            if (input) {
+                input.disabled = true;
+                input.setAttribute("aria-busy", "true");
+            }
+            try {
+                await this.editCallback?.(edit);
+                this.editedValues.set(this.editKey(rowId, column.id), value);
+                this.editingCell = undefined;
+                this.dispatchEvent(new CustomEvent("spui-cell-edit", { detail: edit, bubbles: true, composed: true }));
+                const columnIndex = this.orderedDefinitions.findIndex(candidate => candidate.id === column.id);
+                this.paint(true);
+                requestAnimationFrame(() => this.viewport?.querySelector(`[data-row-id="${CSS.escape(rowId)}"][data-col-index="${columnIndex}"]`)?.focus());
+            }
+            catch (reason) {
+                editing.saving = false;
+                editing.error = reason instanceof Error ? reason.message : String(reason || "The value could not be saved.");
+                if (input) {
+                    input.disabled = false;
+                    input.removeAttribute("aria-busy");
+                }
+                this.showEditError(editing);
+            }
+        }
+        showEditError(editing) {
+            const cell = this.viewport?.querySelector(`[data-row-id="${CSS.escape(editing.rowId)}"][data-col-index="${this.orderedDefinitions.findIndex(column => column.id === editing.columnId)}"]`);
+            const input = cell?.querySelector(".cell-editor");
+            if (!cell || !input)
+                return;
+            cell.style.position = "relative";
+            const errorId = `spui-grid-edit-error-${CSS.escape(editing.rowId)}-${CSS.escape(editing.columnId)}`;
+            input.setAttribute("aria-invalid", "true");
+            input.setAttribute("aria-describedby", errorId);
+            let error = cell.querySelector(".edit-error");
+            if (!error) {
+                error = document.createElement("span");
+                error.id = errorId;
+                error.className = "edit-error";
+                error.setAttribute("role", "alert");
+                cell.append(error);
+            }
+            error.textContent = editing.error || "The value could not be saved.";
+            requestAnimationFrame(() => input.focus());
+        }
+        currentEditValue(item, rowId, column) {
+            const key = this.editKey(rowId, column.id);
+            return this.editedValues.has(key) ? this.editedValues.get(key) : getDataGridCellValue(item, column);
+        }
+        onGridCopy(event) {
+            if (!event.clipboardData || event.target.closest(".cell-editor"))
+                return;
+            const selectedItems = (this.source ? [...this.rows.entries()].flatMap(([index, row]) => row.spuiItem === undefined ? [] : [{ item: row.spuiItem, index, key: row.spuiKey || this.rowKey(row.spuiItem, index) }]) : this.sortedData.map((item, index) => ({ item, index, key: this.rowKey(item, index) }))).filter(({ key }) => this.isRowSelected(key));
+            const cell = event.target.closest("[role=gridcell][data-col-index]");
+            let values;
+            if (selectedItems.length) {
+                values = selectedItems.map(({ item, key }) => {
+                    const rowId = key;
+                    return this.orderedDefinitions.map(column => this.currentEditValue(item, rowId, column));
+                });
+            }
+            else if (cell) {
+                const rowIndex = Number(cell.closest("[data-row-index]")?.dataset.rowIndex);
+                const sourceRow = this.source ? getDataGridDataSourceRow(this.source, rowIndex) : undefined;
+                const display = this.source ? sourceRow?.kind === "item" ? { kind: "item", item: sourceRow.item, itemIndex: sourceRow.itemIndex ?? rowIndex, rowKey: sourceRow.rowId === undefined ? undefined : String(sourceRow.rowId) } : undefined : this.displayRows()[rowIndex];
+                const column = this.orderedDefinitions[Number(cell.dataset.colIndex)];
+                if (!display || display.kind !== "item" || !column)
+                    return;
+                values = [[this.currentEditValue(display.item, display.rowKey ?? this.rowKey(display.item, display.itemIndex), column)]];
+            }
+            else
+                return;
+            event.preventDefault();
+            event.clipboardData.setData("text/plain", formatDataGridClipboard(values));
+        }
+        copySourceSelection() {
+            const source = this.source;
+            if (!source?.copySelection)
+                return;
+            const selectionScopeKey = source.selectionScopeKey;
+            const controller = new AbortController();
+            this.clipboardController?.abort();
+            this.clipboardController = controller;
+            const text = Promise.resolve().then(() => source.copySelection(this.selectionModel, this.orderedDefinitions.map(({ id, label }) => ({ id, label })), controller.signal)).then(value => {
+                if (controller.signal.aborted || this.source !== source)
+                    throw new DOMException("Clipboard operation cancelled", "AbortError");
+                if (source.selectionScopeKey !== selectionScopeKey)
+                    throw new Error("The data query changed before copying completed.");
+                if (value.length > 1_000_000)
+                    throw new Error("Copy is limited to 1,000,000 characters.");
+                return value;
+            });
+            void writeDataGridClipboardText(text).then(() => {
+                if (this.clipboardController === controller && this.reorderStatus)
+                    this.reorderStatus.textContent = "Selection copied.";
+            }, reason => {
+                if (controller.signal.aborted)
+                    return;
+                const message = reason instanceof Error ? reason.message : String(reason);
+                if (this.reorderStatus)
+                    this.reorderStatus.textContent = `Copy failed. ${message}`;
+                this.dispatchEvent(new CustomEvent("spui-clipboard-error", { detail: { operation: "copy", message }, bubbles: true, composed: true }));
+            });
+        }
+        async onGridPaste(event) {
+            if (event.target.closest(".cell-editor"))
+                return;
+            const cell = event.target.closest("[role=gridcell][data-col-index]");
+            const text = event.clipboardData?.getData("text/plain");
+            if (!cell || text === undefined || !this.viewport)
+                return;
+            event.preventDefault();
+            const edits = [];
+            try {
+                const matrix = parseDataGridClipboard(text);
+                const cellCount = matrix.reduce((total, row) => total + row.length, 0);
+                if (cellCount > 1000)
+                    throw new Error("Paste is limited to 1,000 cells at a time.");
+                const startRow = Number(cell.closest("[data-row-index]")?.dataset.rowIndex);
+                const startColumn = Number(cell.dataset.colIndex);
+                if (startColumn < 0)
+                    throw new Error("Paste into a data cell, not the row selection control.");
+                const source = this.source;
+                const selectionScopeKey = source?.selectionScopeKey;
+                const controller = new AbortController();
+                this.clipboardController?.abort();
+                this.clipboardController = controller;
+                if (source) {
+                    const endRow = startRow + matrix.length;
+                    if (startRow < 0 || endRow > source.length)
+                        throw new Error("The pasted data extends past the last row.");
+                    let missing = false;
+                    for (let index = startRow; index < endRow; index++)
+                        if (getDataGridDataSourceRow(source, index) === undefined) {
+                            missing = true;
+                            break;
+                        }
+                    if (missing)
+                        await source.loadRange(startRow, endRow, controller.signal);
+                    if (controller.signal.aborted)
+                        return;
+                    if (this.source !== source || source.selectionScopeKey !== selectionScopeKey)
+                        throw new Error("The data query changed before paste completed.");
+                    for (let index = startRow; index < endRow; index++)
+                        if (getDataGridDataSourceRow(source, index) === undefined)
+                            throw new Error("The data source did not provide every destination row.");
+                    this.completedSourceRange = "";
+                    this.cachedDisplayRows = undefined;
+                    this.paint(true);
+                }
+                const rows = this.source
+                    ? Array.from({ length: matrix.length }, (_, offset) => { const sourceRow = getDataGridDataSourceRow(this.source, startRow + offset); return sourceRow?.kind === "item" ? { kind: "item", item: sourceRow.item, itemIndex: sourceRow.itemIndex ?? startRow + offset, rowKey: sourceRow.rowId === undefined ? undefined : String(sourceRow.rowId) } : undefined; })
+                    : this.displayRows().slice(startRow).filter((row) => row?.kind === "item");
+                for (let rowOffset = 0; rowOffset < matrix.length; rowOffset++) {
+                    const target = rows[rowOffset];
+                    if (!target || target.kind !== "item")
+                        throw new Error(this.source ? "Load the destination rows before pasting." : "The pasted data extends past the last row.");
+                    const rowId = target.rowKey ?? this.rowKey(target.item, target.itemIndex);
+                    for (let columnOffset = 0; columnOffset < matrix[rowOffset].length; columnOffset++) {
+                        const column = this.orderedDefinitions[startColumn + columnOffset];
+                        if (!column)
+                            throw new Error("The pasted data extends past the last column.");
+                        if (!column.editable)
+                            throw new Error(`${column.label} cannot be edited.`);
+                        const value = parseDataGridClipboardValue(matrix[rowOffset][columnOffset], column.editType);
+                        const edit = { item: target.item, rowId, columnId: column.id, previousValue: this.currentEditValue(target.item, rowId, column), value };
+                        const validation = this.editValidator?.(edit);
+                        if (validation)
+                            throw new Error(validation);
+                        edits.push(edit);
+                    }
+                }
+                if (edits.length > 1) {
+                    if (!this.cellsEditCallback)
+                        throw new Error("Provide onCellsEdit to persist a multi-cell paste atomically.");
+                    await this.cellsEditCallback(edits);
+                    for (const edit of edits)
+                        this.editedValues.set(this.editKey(edit.rowId, edit.columnId), edit.value);
+                    this.dispatchEvent(new CustomEvent("spui-cells-edit", { detail: { edits }, bubbles: true, composed: true }));
+                }
+                else if (edits.length === 1) {
+                    const edit = edits[0];
+                    await this.editCallback?.(edit);
+                    this.editedValues.set(this.editKey(edit.rowId, edit.columnId), edit.value);
+                    this.dispatchEvent(new CustomEvent("spui-cell-edit", { detail: edit, bubbles: true, composed: true }));
+                }
+                if (this.reorderStatus)
+                    this.reorderStatus.textContent = `Pasted ${edits.length} cell${edits.length === 1 ? "" : "s"}.`;
+                this.paint(true);
+            }
+            catch (reason) {
+                if (this.clipboardController?.signal.aborted)
+                    return;
+                const message = reason instanceof Error ? reason.message : String(reason);
+                if (this.reorderStatus)
+                    this.reorderStatus.textContent = `Paste failed. ${message}`;
+                this.dispatchEvent(new CustomEvent("spui-cells-edit-error", { detail: { message, edits }, bubbles: true, composed: true }));
+            }
+        }
+        onGridKeyDown(event) {
+            if (event.ctrlKey && (event.key === "Home" || event.key === "End")) {
+                event.preventDefault();
+                if (event.key === "Home") {
+                    const first = this.header?.querySelector(".header-row input:not([disabled]),.header-row button:not([disabled]),.header-row [tabindex='0']");
+                    first?.focus();
+                    return;
+                }
+                const rows = this.displayRows();
+                if (!rows.length || !this.orderedDefinitions.length || !this.viewport)
+                    return;
+                let rowIndex = rows.length - 1;
+                if (!this.source)
+                    while (rowIndex >= 0 && rows[rowIndex]?.kind !== "item")
+                        rowIndex--;
+                if (rowIndex < 0)
+                    return;
+                const columnIndex = this.orderedDefinitions.length - 1;
+                this.activeCell = { row: rowIndex, column: columnIndex };
+                this.pendingBoundaryFocus = { row: rowIndex, column: columnIndex, attempts: 0, scheduled: false };
+                if (this.virtualizeColumns && columnIndex >= this.columnWindow.end) {
+                    this.columnWindow = { start: Math.max(0, columnIndex - 8), end: columnIndex + 1 };
+                    this.viewport.scrollLeft = this.viewport.scrollWidth;
+                    this.columnWindowChanged = true;
+                }
+                const sizes = this.indexRowSizes(rows, this.positiveNumber(this.getAttribute("row-height"), 40));
+                this.viewport.scrollTop = (this.header?.offsetHeight || 40) + sizes.offset(rowIndex);
+                this.paint(true);
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "c" && !(event.target.closest(".cell-editor"))) {
+                const selection = this.selectionModel;
+                if (this.source?.copySelection && (this.sourceSelectionActive() || selection.mode === "explicit" && selection.keys.length > 0)) {
+                    event.preventDefault();
+                    this.copySourceSelection();
+                    return;
+                }
+            }
+            const reorderHandle = event.target.closest("[data-reorder-column]");
+            if (reorderHandle && this.reorderableColumns && event.altKey && event.shiftKey && ["ArrowLeft", "ArrowRight"].includes(event.key)) {
+                const columns = this.orderedDefinitions;
+                const currentIndex = columns.findIndex(column => column.id === reorderHandle.dataset.reorderColumn);
+                const rtl = getComputedStyle(this).direction === "rtl";
+                const nextIndex = currentIndex + (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1);
+                if (currentIndex >= 0 && nextIndex >= 0 && nextIndex < columns.length) {
+                    event.preventDefault();
+                    this.moveColumn(columns[currentIndex].id, columns[nextIndex].id, nextIndex > currentIndex);
+                    requestAnimationFrame(() => this.header?.querySelector(`[data-reorder-column="${CSS.escape(columns[currentIndex].id)}"]`)?.focus());
+                }
+                return;
+            }
+            const handle = event.target.closest("[data-resize-column]");
+            if (handle) {
+                this.onResizeKeyDown(event, handle);
+                return;
+            }
+            const selectionRow = event.target.closest(".data-row[data-row-index]");
+            if (event.key === " " && selectionRow && this.selectionMode() !== "none" && !event.target.closest("button,input,select,textarea,a,[contenteditable=true]")) {
+                event.preventDefault();
+                this.toggleRowSelection(selectionRow.dataset.rowKey || "");
+                return;
+            }
+            const focusMode = this.focusMode;
+            if (focusMode === "none")
+                return;
+            const rowElement = event.target.closest("[role=row][data-row-index]");
+            if (rowElement && (focusMode === "row_unstable" || focusMode === "composite") && event.target === rowElement) {
+                if (focusMode === "composite" && event.key === "ArrowRight") {
+                    const firstFocusable = rowElement.querySelector('button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),a[href],[tabindex="0"][role="gridcell"]');
+                    if (firstFocusable) {
+                        event.preventDefault();
+                        firstFocusable.focus();
+                    }
+                    return;
+                }
+                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                    const rows = this.displayRows();
+                    let next = Number(rowElement.dataset.rowIndex) + (event.key === "ArrowDown" ? 1 : -1);
+                    while (!this.source && next >= 0 && next < rows.length && rows[next]?.kind !== "item")
+                        next += event.key === "ArrowDown" ? 1 : -1;
+                    if (next >= 0 && next < rows.length) {
+                        event.preventDefault();
+                        this.activeCell = { ...this.activeCell, row: next };
+                        this.viewport?.scrollTo({ top: this.indexRowSizes(rows, this.positiveNumber(this.getAttribute("row-height"), 40)).offset(next), behavior: "auto" });
+                        this.paint();
+                        requestAnimationFrame(() => this.rows.get(next)?.focus());
+                    }
+                    return;
+                }
+            }
+            const cell = event.target.closest("[role=gridcell][data-col-index]");
+            if (!cell || !this.viewport)
+                return;
+            if (focusMode === "composite") {
+                if (event.key === "ArrowLeft") {
+                    const row = cell.closest("[role=row][data-row-index]");
+                    if (row) {
+                        event.preventDefault();
+                        row.focus();
+                    }
+                }
+                else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                    const row = Number(cell.closest("[data-row-index]")?.dataset.rowIndex);
+                    const rows = this.displayRows();
+                    let next = row + (event.key === "ArrowDown" ? 1 : -1);
+                    while (!this.source && next >= 0 && next < rows.length && rows[next]?.kind !== "item")
+                        next += event.key === "ArrowDown" ? 1 : -1;
+                    if (next >= 0 && next < rows.length) {
+                        event.preventDefault();
+                        this.activeCell = { ...this.activeCell, row: next };
+                        this.viewport.scrollTo({ top: this.indexRowSizes(rows, this.positiveNumber(this.getAttribute("row-height"), 40)).offset(next), behavior: "auto" });
+                        this.paint();
+                        requestAnimationFrame(() => this.rows.get(next)?.focus());
+                    }
+                }
+                return;
+            }
+            if ((event.key === "Enter" || event.key === "F2") && cell.dataset.colIndex !== "-1") {
+                event.preventDefault();
+                this.beginCellEdit(cell);
+                return;
+            }
+            const row = Number(cell.closest("[data-row-index]")?.dataset.rowIndex);
+            const column = Number(cell.dataset.colIndex);
+            let nextRow = row, nextColumn = column;
+            const displayRows = this.displayRows();
+            if (event.key === "ArrowDown") {
+                let next = nextRow + 1;
+                while (!this.source && next < displayRows.length && displayRows[next]?.kind !== "item")
+                    next++;
+                if (next < displayRows.length)
+                    nextRow = next;
+            }
+            else if (event.key === "ArrowUp") {
+                let next = nextRow - 1;
+                while (!this.source && next >= 0 && displayRows[next]?.kind !== "item")
+                    next--;
+                if (next >= 0)
+                    nextRow = next;
+            }
+            else if (event.key === "ArrowRight")
+                nextColumn++;
+            else if (event.key === "ArrowLeft")
+                nextColumn--;
+            else if (event.key === "Home")
+                nextColumn = 0;
+            else if (event.key === "End")
+                nextColumn = this.definitions.length - 1;
+            else
+                return;
+            event.preventDefault();
+            nextRow = Math.max(0, Math.min(displayRows.length - 1, nextRow));
+            nextColumn = Math.max(0, Math.min(this.definitions.length - 1, nextColumn));
+            this.activeCell = { row: nextRow, column: nextColumn };
+            const rowHeight = this.positiveNumber(this.getAttribute("row-height"), 40);
+            const rowSizes = this.indexRowSizes(displayRows, rowHeight);
+            const headerHeight = this.header?.offsetHeight || rowHeight;
+            const rowTop = headerHeight + rowSizes.offset(nextRow);
+            const rowBottom = rowTop + rowSizes.size(nextRow);
+            if (rowTop < this.viewport.scrollTop + headerHeight)
+                this.viewport.scrollTop = rowSizes.offset(nextRow);
+            else if (rowBottom > this.viewport.scrollTop + this.viewport.clientHeight)
+                this.viewport.scrollTop = rowSizes.offset(nextRow) + rowSizes.size(nextRow) - Math.max(0, this.viewport.clientHeight - headerHeight);
+            this.header?.querySelector(`[data-column-index="${nextColumn}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+            this.paint(this.updateColumnWindow());
+            requestAnimationFrame(() => requestAnimationFrame(() => this.viewport?.querySelector(`.data-row[data-row-index="${nextRow}"] [data-col-index="${nextColumn}"]`)?.focus()));
+        }
+        onColumnDragStart(event) {
+            const handle = event.target.closest("[data-reorder-column]");
+            if (!this.reorderableColumns || !handle)
+                return;
+            this.draggedColumnId = handle.dataset.reorderColumn;
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", this.draggedColumnId ?? "");
+            }
+        }
+        onColumnDragOver(event) {
+            if (this.reorderableColumns && this.draggedColumnId && event.target.closest("[data-column-id]"))
+                event.preventDefault();
+        }
+        onColumnDrop(event) {
+            if (!this.reorderableColumns || !this.draggedColumnId)
+                return;
+            const target = event.target.closest("[data-column-id]");
+            if (!target)
+                return;
+            event.preventDefault();
+            const bounds = target.getBoundingClientRect();
+            const after = getComputedStyle(this).direction === "rtl" ? event.clientX < bounds.left + bounds.width / 2 : event.clientX > bounds.left + bounds.width / 2;
+            this.moveColumn(this.draggedColumnId, target.dataset.columnId ?? "", after);
+            this.draggedColumnId = undefined;
+        }
+        moveColumn(fromId, toId, after = false) {
+            const next = this.orderedDefinitions.map(column => column.id);
+            if (fromId === toId || !next.includes(fromId) || !next.includes(toId))
+                return;
+            next.splice(next.indexOf(fromId), 1);
+            const targetIndex = next.indexOf(toId);
+            next.splice(targetIndex + Number(after), 0, fromId);
+            if (next.every((id, index) => id === this.orderedDefinitions[index].id))
+                return;
+            this.currentColumnOrder = next;
+            this.renderHeader();
+            this.paint(true);
+            const moved = this.definitions.find(column => column.id === fromId);
+            if (this.reorderStatus)
+                this.reorderStatus.textContent = `${moved.label}, ${next.indexOf(fromId) + 1} of ${next.length}`;
+            this.dispatchEvent(new CustomEvent("spui-column-order-change", { detail: { columnIds: next }, bubbles: true, composed: true }));
+        }
+        onResizeStart(event) {
+            const handle = event.target.closest("[data-resize-column]");
+            const column = this.definitions.find(candidate => candidate.id === handle?.dataset.resizeColumn);
+            if (!handle || !column || event.button !== 0)
+                return;
+            event.preventDefault();
+            const width = this.currentColumnWidths[column.id] ?? handle.parentElement.getBoundingClientRect().width;
+            this.resizing = { column, handle, startX: event.clientX, startWidth: width, direction: getComputedStyle(this).direction === "rtl" ? -1 : 1, pointerId: event.pointerId };
+            this.setAttribute("data-resizing", "");
+            handle.setPointerCapture(event.pointerId);
+        }
+        onResizeDoubleClick(event) {
+            const handle = event.target.closest("[data-resize-column]");
+            const column = this.definitions.find(candidate => candidate.id === handle?.dataset.resizeColumn);
+            if (!handle) {
+                this.beginCellEdit(event.target.closest("[role=gridcell][data-col-index]"));
+                return;
+            }
+            if (!column || column.resizable === false)
+                return;
+            event.preventDefault();
+            const header = this.header?.querySelector(`[data-column-id="${CSS.escape(column.id)}"] button`);
+            const cells = [...(this.body?.querySelectorAll(`[data-col-index="${this.orderedDefinitions.indexOf(column)}"]`) ?? [])];
+            const padding = getDataGridColumnSizing(column, this.sizingOptions).padding;
+            const measure = (element, extra) => { const range = document.createRange(); range.selectNodeContents(element); return range.getBoundingClientRect().width + padding + extra; };
+            const headerWidth = header ? measure(header, 18) : 0;
+            const contentWidth = Math.max(headerWidth, ...cells.map(cell => measure(cell, 10)));
+            const width = clampDataGridColumnWidth(column, contentWidth, this.sizingOptions[column.id]);
+            this.currentColumnWidths = { ...this.currentColumnWidths, [column.id]: width };
+            this.initializeColumnWidths();
+            this.applyColumnWidthVariables();
+            this.renderHeader();
+            this.paint(true);
+            this.header?.querySelector(`[data-resize-column="${CSS.escape(column.id)}"]`)?.focus();
+            this.dispatchEvent(new CustomEvent("spui-column-resize", { detail: { columnId: column.id, width, autoFit: true }, bubbles: true, composed: true }));
+        }
+        onResizeMove(event) {
+            const resize = this.resizing;
+            if (!resize || event.pointerId !== resize.pointerId)
+                return;
+            const width = clampDataGridColumnWidth(resize.column, resize.startWidth + (event.clientX - resize.startX) * resize.direction, this.sizingOptions[resize.column.id]);
+            this.style.setProperty(dataGridColumnVar(resize.column.id), `${width}px`);
+            resize.handle.setAttribute("aria-valuenow", String(width));
+        }
+        onResizeEnd(event, cancelled = false) {
+            const resize = this.resizing;
+            if (!resize || event.pointerId !== resize.pointerId)
+                return;
+            const width = cancelled ? resize.startWidth : Number(resize.handle.getAttribute("aria-valuenow")) || resize.startWidth;
+            if (cancelled)
+                this.style.setProperty(dataGridColumnVar(resize.column.id), `${resize.startWidth}px`);
+            this.resizing = undefined;
+            this.removeAttribute("data-resizing");
+            this.currentColumnWidths = { ...this.currentColumnWidths, [resize.column.id]: width };
+            this.initializeColumnWidths();
+            this.applyColumnWidthVariables();
+            resize.handle.setAttribute("aria-valuenow", String(width));
+            if (!cancelled)
+                this.dispatchEvent(new CustomEvent("spui-column-resize", { detail: { columnId: resize.column.id, width }, bubbles: true, composed: true }));
+        }
+        onResizeKeyDown(event, handle) {
+            const column = this.definitions.find(candidate => candidate.id === handle.dataset.resizeColumn);
+            if (!column)
+                return;
+            const current = this.currentColumnWidths[column.id] ?? Math.round(handle.parentElement.getBoundingClientRect().width);
+            const direction = getComputedStyle(this).direction === "rtl" ? -1 : 1;
+            const step = event.shiftKey ? 32 : 10;
+            let width;
+            if (event.key === "ArrowRight")
+                width = current + step * direction;
+            else if (event.key === "ArrowLeft")
+                width = current - step * direction;
+            else if (event.key === "Home")
+                width = column.minWidth ?? 48;
+            else if (event.key === "End")
+                width = column.maxWidth ?? 1600;
+            else
+                return;
+            event.preventDefault();
+            const nextWidth = clampDataGridColumnWidth(column, width, this.sizingOptions[column.id]);
+            this.currentColumnWidths = { ...this.currentColumnWidths, [column.id]: nextWidth };
+            this.initializeColumnWidths();
+            this.applyColumnWidthVariables();
+            handle.setAttribute("aria-valuenow", String(nextWidth));
+            handle.focus();
+            this.dispatchEvent(new CustomEvent("spui-column-resize", { detail: { columnId: column.id, width: this.currentColumnWidths[column.id] }, bubbles: true, composed: true }));
+        }
+        applyColumnWidthVariables() {
+            const widths = { ...this.fittedColumnWidths, ...this.currentColumnWidths };
+            for (const column of this.definitions) {
+                const width = widths[column.id];
+                if (Number.isFinite(width))
+                    this.style.setProperty(dataGridColumnVar(column.id), `${width}px`);
+                else
+                    this.style.removeProperty(dataGridColumnVar(column.id));
+            }
+            this.header?.querySelectorAll("[data-resize-column]").forEach(handle => {
+                const id = handle.dataset.resizeColumn;
+                if (this.currentColumnWidths[id] === undefined && widths[id] !== undefined)
+                    handle.setAttribute("aria-valuenow", String(widths[id]));
+            });
+        }
+        initializeColumnWidths() {
+            if (!this.header)
+                return;
+            if (this.resizableColumns && this.autoFitColumns && this.viewport) {
+                this.fittedColumnWidths = fitDataGridColumnWidths(this.orderedDefinitions, this.viewport.clientWidth - this.containerWidthOffset, this.sizingOptions, this.currentColumnWidths, this.selectionMode() === "none" ? 0 : 44);
+                this.applyColumnWidthVariables();
+                return;
+            }
+            this.fittedColumnWidths = {};
+            if (!this.resizableColumns) {
+                this.applyColumnWidthVariables();
+                return;
+            }
+            let changed = false;
+            for (const column of this.definitions) {
+                if (this.currentColumnWidths[column.id] !== undefined)
+                    continue;
+                const configured = this.sizingOptions[column.id];
+                const hasInitialWidth = configured?.defaultWidth !== undefined || configured?.idealWidth !== undefined;
+                const isAutoFitLast = this.resizableColumns && this.autoFitColumns && this.orderedDefinitions.at(-1)?.id === column.id;
+                if (isAutoFitLast)
+                    continue;
+                if (!hasInitialWidth && column.minWidth === undefined && column.maxWidth === undefined && configured?.minWidth === undefined)
+                    continue;
+                if (hasInitialWidth) {
+                    this.currentColumnWidths = { ...this.currentColumnWidths, [column.id]: getDataGridColumnSizing(column, this.sizingOptions).defaultWidth };
+                    changed = true;
+                    continue;
+                }
+                const cell = this.header.querySelector(`[data-column-id="${CSS.escape(column.id)}"]`);
+                if (!cell || cell.getBoundingClientRect().width <= 0)
+                    continue;
+                const width = clampDataGridColumnWidth(column, cell.getBoundingClientRect().width, configured);
+                if (Math.abs(width - cell.getBoundingClientRect().width) >= 1) {
+                    this.currentColumnWidths = { ...this.currentColumnWidths, [column.id]: width };
+                    changed = true;
+                }
+            }
+            if (changed) {
+                this.applyColumnWidthVariables();
+                this.renderHeader();
+            }
+        }
+        positiveNumber(value, fallback) { const number = Number(value); return Number.isFinite(number) && number > 0 ? number : fallback; }
+    }
+    customElements.define("spui-data-grid", SpuiDataGrid);
+}