@ixfx/components 0.13.2 → 0.13.3

package/dist/data-grid.js

@@ -3,7 +3,7 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./icon-1gpwtPx8.js";
-import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-D91M4Ozq.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-JIhwB49y.js";
 import { t as handleStyles } from "./handle-DAXs7kbJ.js";
 import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
 import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
@@ -30,6 +30,10 @@ function sameKeys(a, b) {
 	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
 	return true;
 }
+/** Element-wise reference equality, treating `undefined` (never computed) as different. */
+function sameRefs(a, b) {
+	return a !== void 0 && a.length === b.length && a.every((v, i) => v === b[i]);
+}
 let DataGridElement = class DataGridElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -47,7 +51,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
-		this.columnMenu = `auto`;
+		this.columnMenu = `none`;
 		this.textColorColumn = ``;
 		this.iconColumn = ``;
 		this.badgeColumn = ``;
@@ -68,9 +72,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._lastClickedCell = null;
 		this._editValue = ``;
 		this._tickled = new TickledController(this, {
-			getItems: () => this._flatKeys.map((k) => ({
-				id: k,
-				enabled: true
+			getItems: () => this.#tickledItems ??= this._flat.map((f) => ({
+				id: f.key,
+				enabled: f.type === `row`
 			})),
 			onStateChange: () => this.requestUpdate(),
 			hoverDisabled: () => this.#nativeDrag.isDragging
@@ -117,6 +121,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._sortedRows = [];
 		this._flat = [];
 		this._flatKeys = [];
+		this.#flatIndexByKey = /* @__PURE__ */ new Map();
+		this.#flatVersion = 0;
+		this.#notedFlatVersion = -1;
 		this.#searchKeyByRow = /* @__PURE__ */ new Map();
 		this.search = new ListSearchController(this, { adapter: this.#createSearchAdapter() });
 		this.#prevFlatKeys = [];
@@ -128,7 +135,6 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._colWidthSum = 0;
 		this._raf = 0;
 		this.#viewportChangeRaf = 0;
-		this.#appendInProgress = false;
 		this.#resortRaf = 0;
 		this._drag = null;
 		this._onFocusOut = (e) => {
@@ -145,10 +151,12 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const el = e.target;
 			cancelAnimationFrame(this._raf);
 			this._raf = requestAnimationFrame(() => {
+				const before = this.#windowRows(2);
 				this._scrollTop = el.scrollTop;
 				this._scrollLeft = el.scrollLeft;
 				if (this._headerScrollEl) this._headerScrollEl.scrollLeft = el.scrollLeft;
-				this.requestUpdate();
+				const after = this.#windowRows(2);
+				if (before.start !== after.start || before.end !== after.end) this.requestUpdate();
 				cancelAnimationFrame(this.#viewportChangeRaf);
 				this.#viewportChangeRaf = 0;
 				this.#emitViewportChangeIfChanged();
@@ -187,7 +195,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 				let nextIdx = idx + dir;
 				while (nextIdx >= 0 && nextIdx < rowKeys.length) {
 					const nk = rowKeys[nextIdx];
-					const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === nk);
+					const row = this.#rowEntry(nk)?.row;
 					const col = this._visibleColumns.find((c) => c.key === colKey);
 					if (row && col && this._isEditable(row, col)) {
 						this._startEdit(nk, colKey);
@@ -236,9 +244,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 					if (!key) break;
 					e.preventDefault();
 					if (!this._editing && this.editability === `user`) {
-						const idx = this._sortedRows.findIndex((r, i) => this.getRowKey(r, i) === key);
-						if (idx >= 0) {
-							const row = this._sortedRows[idx];
+						const entry = this.#rowEntry(key);
+						if (entry) {
+							const row = entry.row;
 							if (this._lastClickedCell?.rowKey === key) {
 								const col = this._visibleColumns.find((c) => c.key === this._lastClickedCell.colKey);
 								if (col && this._isEditable(row, col)) {
@@ -254,9 +262,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 						}
 					}
 					if (!this._editing) {
-						const idx = this._sortedRows.findIndex((r, i) => this.getRowKey(r, i) === key);
+						const entry = this.#rowEntry(key);
+						const idx = entry?.idx ?? -1;
 						if (this._selectedKeys.has(key)) {
-							this._activateRow(key, idx >= 0 ? this._sortedRows[idx] : void 0, idx);
+							this._activateRow(key, entry?.row, idx);
 							break;
 						}
 						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this._replaceSelection(key);
@@ -286,7 +295,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 								next = !active.checked;
 								active.checked = next;
 							} else {
-								const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+								const row = this.#rowEntry(rowKey)?.row;
 								next = !(this._editValue !== `` ? Boolean(this._editValue) : Boolean(row?.[colKey]));
 							}
 							if (isImmediate) this._commitImmediate(rowKey, colKey, next);
@@ -555,6 +564,15 @@ let DataGridElement = class DataGridElement extends LitElement {
 			this.#postDragSuppressTimer = 0;
 		}, 0);
 	}
+	#flatIndexByKey;
+	/** Bumped whenever `_flat` changes; drives `#noteFlatMutation`. */
+	#flatVersion;
+	#notedFlatVersion;
+	/** Inputs `_sortedRows` / `_flat` were last derived from — see `#syncDerivedRows`. */
+	#sortInputs;
+	#flatInputs;
+	/** `_flat` projected for the tickled controller, cached until `_flat` changes. */
+	#tickledItems;
 	#searchRegistry;
 	#unregisterSearchCommands;
 	#searchKeyByRow;
@@ -613,7 +631,6 @@ let DataGridElement = class DataGridElement extends LitElement {
 	/** Key sets as of the last `datagrid-viewport-change` dispatch, for dedupe. */
 	#lastViewportRenderedKeys;
 	#lastViewportVisibleKeys;
-	#appendInProgress;
 	#resortRaf;
 	connectedCallback() {
 		super.connectedCallback();
@@ -686,7 +703,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	updated(changed) {
 		super.updated(changed);
 		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`filterPredicate`) || changed.has(`rowHeight`)) this.#scheduleViewportChangeEmit();
-		if (changed.has(`_editing`) || changed.has(`_editingRow`)) requestAnimationFrame(() => {
+		if (changed.has(`_editing`) || changed.has(`_editingRow`)) this.updateComplete.then(() => {
 			let sel = null;
 			if (this._editing) sel = `.row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] input, .row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] select`;
 			else if (this._editingRow) sel = `.row[data-key="${this._editingRow}"] .cell input, .row[data-key="${this._editingRow}"] .cell select`;
@@ -700,10 +717,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
 		if (changed.has(`searchModes`)) this.#syncSearchCommands();
-		if (!this.#appendInProgress) {
-			if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
-			this._rebuildFlat();
-		}
+		this.#syncDerivedRows();
 		this._visibleColumns = this.columns.filter((c) => c.visible !== false);
 		let off = 0;
 		this._colOffsets = this._visibleColumns.map((c) => {
@@ -713,7 +727,53 @@ let DataGridElement = class DataGridElement extends LitElement {
 		});
 		this._colWidthSum = off;
 		if (this.interactionMode === `checked`) this._colWidthSum += 28;
-		this.#noteFlatMutation();
+		if (this.#flatVersion !== this.#notedFlatVersion) {
+			this.#notedFlatVersion = this.#flatVersion;
+			this.#noteFlatMutation();
+		}
+	}
+	/**
+	* Re-derive `_sortedRows` / `_flat` only when one of their inputs changed
+	* identity. Scroll, hover, selection and edit-state updates touch none of
+	* them, so those frames cost O(window) instead of O(rows).
+	*/
+	#syncDerivedRows() {
+		const sortInputs = [
+			this.rows,
+			this.sortState,
+			this.columns
+		];
+		const flatInputs = [
+			this.filterPredicate,
+			this.groupBy,
+			this.groupLabel,
+			this._collapsedGroups,
+			this.getRowKey
+		];
+		const resort = !sameRefs(this.#sortInputs, sortInputs);
+		if (resort) {
+			this.#sortInputs = sortInputs;
+			this._sortedRows = this._applySort([...this.rows]);
+		}
+		if (resort || !sameRefs(this.#flatInputs, flatInputs)) {
+			this.#flatInputs = flatInputs;
+			this._rebuildFlat();
+		}
+	}
+	/** Mark the derived rows as matching the current inputs (after an incremental update). */
+	#markDerivedRowsSynced() {
+		this.#sortInputs = [
+			this.rows,
+			this.sortState,
+			this.columns
+		];
+		this.#flatInputs = [
+			this.filterPredicate,
+			this.groupBy,
+			this.groupLabel,
+			this._collapsedGroups,
+			this.getRowKey
+		];
 	}
 	/**
 	* Diff the row-key list against the previous update. Rows that appeared get an
@@ -734,10 +794,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 			return;
 		}
 		const before = new Set(prev);
-		const after = new Set(now);
 		const added = now.filter((k) => !before.has(k));
-		const removed = prev.filter((k) => !after.has(k));
-		if (added.length === now.length || added.length === 0 && removed.length === 0) return;
+		const removedCount = prev.length - (now.length - added.length);
+		if (added.length === now.length || added.length === 0 && removedCount === 0) return;
 		this.#enteringRowKeys = new Set(added);
 		this.toggleAttribute(`reflowing`, true);
 		if (this.#rowReflowTimer) clearTimeout(this.#rowReflowTimer);
@@ -754,55 +813,64 @@ let DataGridElement = class DataGridElement extends LitElement {
 		return String(this.groupBy(row));
 	}
 	_rebuildFlat() {
-		const filtered = this.filterPredicate !== void 0;
-		const source = filtered ? this._sortedRows.filter((r) => this.filterPredicate(r)) : this._sortedRows;
-		if (!this.groupBy) {
-			this._flat = source.map((r, i) => {
-				const idx = filtered ? this._sortedRows.indexOf(r) : i;
-				return {
-					type: `row`,
-					key: this.getRowKey(r, idx),
-					row: r,
-					idx
-				};
-			});
-			this._flatKeys = this._flat.map((f) => f.key);
-			return;
-		}
-		const groups = /* @__PURE__ */ new Map();
-		for (const r of source) {
-			const k = this._getGroupKey(r) ?? ``;
-			const arr = groups.get(k);
-			if (arr) arr.push(r);
-			else groups.set(k, [r]);
-		}
+		const pred = this.filterPredicate;
+		const sourceIdx = [];
+		for (let i = 0; i < this._sortedRows.length; i++) if (!pred || pred(this._sortedRows[i])) sourceIdx.push(i);
 		const flat = [];
 		const keys = [];
-		for (const [gKey, rows] of groups) {
-			const label = this.groupLabel ? this.groupLabel(gKey, rows) : gKey;
-			const gId = `__group__${gKey}`;
+		const pushRow = (idx) => {
+			const row = this._sortedRows[idx];
+			const key = this.getRowKey(row, idx);
 			flat.push({
-				type: `group`,
-				key: gId,
-				label,
-				count: rows.length
+				type: `row`,
+				key,
+				row,
+				idx
 			});
-			keys.push(gId);
-			if (this._collapsedGroups.has(gKey)) continue;
-			for (const r of rows) {
-				const idx = this._sortedRows.indexOf(r);
-				const rk = this.getRowKey(r, idx);
+			keys.push(key);
+		};
+		if (!this.groupBy) sourceIdx.forEach(pushRow);
+		else {
+			const groups = /* @__PURE__ */ new Map();
+			for (const idx of sourceIdx) {
+				const k = this._getGroupKey(this._sortedRows[idx]) ?? ``;
+				const arr = groups.get(k);
+				if (arr) arr.push(idx);
+				else groups.set(k, [idx]);
+			}
+			for (const [gKey, idxs] of groups) {
+				const label = this.groupLabel ? this.groupLabel(gKey, idxs.map((i) => this._sortedRows[i])) : gKey;
+				const gId = `__group__${gKey}`;
 				flat.push({
-					type: `row`,
-					key: rk,
-					row: r,
-					idx
+					type: `group`,
+					key: gId,
+					label,
+					count: idxs.length
 				});
-				keys.push(rk);
+				keys.push(gId);
+				if (!this._collapsedGroups.has(gKey)) idxs.forEach(pushRow);
 			}
 		}
 		this._flat = flat;
 		this._flatKeys = keys;
+		this.#rebuildFlatIndex();
+	}
+	#rebuildFlatIndex() {
+		this.#flatIndexByKey.clear();
+		this._flat.forEach((f, i) => this.#flatIndexByKey.set(f.key, i));
+		this.#flatVersion++;
+		this.#tickledItems = void 0;
+	}
+	/** Flat entry for a row key, or `undefined` for unknown keys and group headers. */
+	#rowEntry(key) {
+		const i = this.#flatIndexByKey.get(key);
+		const entry = i === void 0 ? void 0 : this._flat[i];
+		if (entry?.type === `row`) return entry;
+		const idx = this._sortedRows.findIndex((r, j) => this.getRowKey(r, j) === key);
+		return idx < 0 ? void 0 : {
+			row: this._sortedRows[idx],
+			idx
+		};
 	}
 	_toggleGroup(gKey) {
 		const next = new Set(this._collapsedGroups);
@@ -1032,17 +1100,26 @@ let DataGridElement = class DataGridElement extends LitElement {
 		}));
 	}
 	_scrollRowIntoView(key) {
-		const idx = this._flat.findIndex((f) => f.key === key);
-		if (idx < 0 || !this._viewportEl) return;
-		const top = idx * this.rowHeight;
-		const bottom = top + this.rowHeight;
+		const idx = this.#flatIndexByKey.get(key);
+		if (idx === void 0 || !this._viewportEl) return;
+		const rh = this.rowHeight;
+		const top = (idx > 0 && this._flat[idx - 1].type === `group` ? idx - 1 : idx) * rh;
+		const bottom = (idx + 1) * rh;
 		const vt = this._viewportEl.scrollTop;
-		const vb = vt + this._viewportEl.clientHeight;
-		if (top < vt) this._viewportEl.scrollTop = top;
-		else if (bottom > vb) this._viewportEl.scrollTop = bottom - this._viewportEl.clientHeight;
+		const vh = this._viewportEl.clientHeight;
+		let next = vt;
+		if (top < vt) next = top;
+		else if (bottom > vt + vh) next = bottom - vh;
+		if (next !== vt) {
+			this._viewportEl.scrollTop = next;
+			this._scrollTop = next;
+			this.requestUpdate();
+		}
 	}
 	_getRowForKey(key) {
-		return this._flat.find((f) => f.key === key)?.row;
+		const i = this.#flatIndexByKey.get(key);
+		const entry = i === void 0 ? void 0 : this._flat[i];
+		return entry?.type === `row` ? entry.row : void 0;
 	}
 	/** The selected row keys (read-only). */
 	get selectedKeys() {
@@ -1059,8 +1136,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	* set when the selection actually changes.
 	*/
 	selectKeys(keys) {
-		const known = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
-		let next = new Set([...keys].filter((k) => known.has(k)));
+		let next = new Set([...keys].filter((k) => this._getRowForKey(k) !== void 0));
 		const multi = this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode`;
 		if (this.selectionMode === `none`) next = /* @__PURE__ */ new Set();
 		else if (!multi && next.size > 1) {
@@ -1086,7 +1162,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	/** Move the cursor to this row key and scroll it into view. */
 	tickleRow(key) {
-		if (!this._flatKeys.includes(key)) return;
+		if (!this.#flatIndexByKey.has(key) || key.startsWith(`__group__`)) return;
 		this._tickled.focus(key);
 		this._scrollRowIntoView(key);
 	}
@@ -1100,25 +1176,21 @@ let DataGridElement = class DataGridElement extends LitElement {
 	appendRows(rows) {
 		if (rows.length === 0) return;
 		const startIdx = this.rows.length;
-		this.#appendInProgress = true;
+		const inSync = this._sortedRows.length === startIdx && sameRefs(this.#sortInputs, [
+			this.rows,
+			this.sortState,
+			this.columns
+		]);
 		this.rows = [...this.rows, ...rows];
+		if (!inSync) return;
 		const appended = this.rows.slice(startIdx);
-		if (this._sortedRows.length === startIdx) this._sortedRows = [...this._sortedRows, ...appended];
-		else {
-			this._sortedRows = this._applySort([...this.rows]);
-			this._rebuildFlat();
-			this.#appendInProgress = false;
-			this.requestUpdate();
-			return;
-		}
+		this._sortedRows = [...this._sortedRows, ...appended];
 		this.#appendToFlat(appended, startIdx);
-		this.#appendInProgress = false;
-		this.requestUpdate();
+		this.#markDerivedRowsSynced();
 		if (this.sortState != null) {
 			cancelAnimationFrame(this.#resortRaf);
 			this.#resortRaf = requestAnimationFrame(() => {
-				this._sortedRows = this._applySort([...this.rows]);
-				this._rebuildFlat();
+				this.#sortInputs = void 0;
 				this.requestUpdate();
 			});
 		}
@@ -1130,6 +1202,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		}
 		for (let j = 0; j < appended.length; j++) {
 			const idx = startIdx + j;
+			if (this.filterPredicate && !this.filterPredicate(appended[j])) continue;
 			const key = this.getRowKey(appended[j], idx);
 			this._flat.push({
 				type: `row`,
@@ -1138,7 +1211,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 				idx
 			});
 			this._flatKeys.push(key);
+			this.#flatIndexByKey.set(key, this._flat.length - 1);
 		}
+		this.#flatVersion++;
+		this.#tickledItems = void 0;
 	}
 	_replaceSelection(key) {
 		if (this.selectionMode === `none`) return;
@@ -1244,8 +1320,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 		return !e || e === `auto`;
 	}
 	_isCellEditing(rowKey, colKey) {
-		if (this.editability === `immediate` && this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey))) return true;
-		if (this._editingRow === rowKey) return this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey));
+		if (this.editability === `immediate` && this._isEditable(this.#rowEntry(rowKey)?.row ?? {}, this.columns.find((c) => c.key === colKey))) return true;
+		if (this._editingRow === rowKey) return this._isEditable(this.#rowEntry(rowKey)?.row ?? {}, this.columns.find((c) => c.key === colKey));
 		return this._editing?.rowKey === rowKey && this._editing?.colKey === colKey;
 	}
 	_activateRow(rowKey, row, rowIndex) {
@@ -1261,7 +1337,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	_startEdit(rowKey, colKey) {
 		if (this.editability === `disabled`) return;
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) return;
 		const col = this.columns.find((c) => c.key === colKey);
 		if (!col || !this._isEditable(row, col)) return;
@@ -1279,7 +1355,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	/** Programmatic: put all editable cells of a row in edit mode. */
 	startRowEdit(rowKey) {
 		if (this.editability === `disabled`) return;
-		if (!this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey)) return;
+		if (!this.#rowEntry(rowKey)?.row) return;
 		this._editing = null;
 		this._editingRow = rowKey;
 		this.requestUpdate();
@@ -1347,7 +1423,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		const target = this._editing;
 		if (!target) return;
 		const { rowKey, colKey } = target;
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) {
 			this._editing = null;
 			return;
@@ -1372,7 +1448,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		}));
 	}
 	_tabToNext(rowKey, curColKey, dir) {
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) return;
 		const cols = this._visibleColumns;
 		let next = cols.findIndex((c) => c.key === curColKey) + dir;
@@ -1393,7 +1469,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.requestUpdate();
 	}
 	_commitImmediate(rowKey, colKey, value) {
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) return;
 		const oldValue = row[colKey];
 		if (oldValue === value) return;
@@ -1516,11 +1592,19 @@ let DataGridElement = class DataGridElement extends LitElement {
 		window.addEventListener(`pointermove`, onMove);
 		window.addEventListener(`pointerup`, onUp);
 	}
-	getVisibleRange() {
+	/** Flat-index window `[start, end)` intersecting the viewport, widened by `overscan` rows each side. */
+	#windowRows(overscan) {
 		const rh = this.rowHeight;
 		return {
-			startRow: Math.max(0, Math.floor(this._scrollTop / rh) - 2),
-			endRow: Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + 2),
+			start: Math.max(0, Math.floor(this._scrollTop / rh) - overscan),
+			end: Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + overscan)
+		};
+	}
+	getVisibleRange() {
+		const { start: startRow, end: endRow } = this.#windowRows(2);
+		return {
+			startRow,
+			endRow,
 			startCol: this._findFirstVisibleCol(this._scrollLeft),
 			endCol: this._findLastVisibleCol(this._scrollLeft + this._viewportW)
 		};
@@ -1535,10 +1619,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 	* `ixfx-grid-list.visibleKeys()` for the `datagrid-viewport-change` detail.
 	*/
 	#visibleKeys() {
-		const rh = this.rowHeight;
-		const startRow = Math.max(0, Math.floor(this._scrollTop / rh));
-		const endRow = Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh));
-		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
+		const { start, end } = this.#windowRows(0);
+		return this._flat.slice(start, end).filter((f) => f.type === `row`).map((f) => f.key);
 	}
 	/** Coalesce viewport-change dispatches to at most one per animation frame. */
 	#scheduleViewportChangeEmit() {
@@ -1587,17 +1669,28 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	render() {
 		const rh = this.rowHeight;
-		const startRow = Math.max(0, Math.floor(this._scrollTop / rh) - 2);
-		const endRow = Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + 2);
-		const visibleFlat = this._flat.slice(startRow, endRow);
+		const { start: startRow, end: endRow } = this.#windowRows(2);
+		const visibleFlat = this._flat.slice(startRow, endRow).map((entry, i) => ({
+			entry,
+			absIdx: startRow + i
+		}));
+		const pinnedKey = this._editing?.rowKey ?? this._editingRow;
+		const pinnedIdx = pinnedKey ? this.#flatIndexByKey.get(pinnedKey) : void 0;
+		if (pinnedIdx !== void 0) {
+			if (pinnedIdx >= startRow && pinnedIdx < endRow) visibleFlat.splice(pinnedIdx - startRow, 1);
+			visibleFlat.unshift({
+				entry: this._flat[pinnedIdx],
+				absIdx: pinnedIdx
+			});
+		}
 		const showCheckbox = this.interactionMode === `checked`;
 		return html`
-      <div class="grid">
+      <div class="grid" role="grid" aria-rowcount=${this._flat.length + 1} aria-colcount=${this._visibleColumns.length} aria-multiselectable=${this.selectionMode === `multiple` ? `true` : `false`}>
         <div class="header-bar">
-          <div class="header-scroll scroll-fade-x">
-            ${showCheckbox ? html`<div class="header-cell checkbox-col"></div>` : nothing}
+          <div class="header-scroll scroll-fade-x" role="row" aria-rowindex="1">
+            ${showCheckbox ? html`<div class="header-cell checkbox-col" role="columnheader"></div>` : nothing}
             ${repeat(this._visibleColumns, (c) => c.key, (col, idx) => html`
-              <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
+              <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" role="columnheader" aria-sort=${this.sortState?.key === col.key ? this.sortState.direction === `asc` ? `ascending` : `descending` : `none`} style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
                 @click=${(e) => this._onHeaderClick(col, e)}
                 @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
                 ${col.reorderable !== false ? html`<span class="reorder-handle" draggable="false"
@@ -1620,7 +1713,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
 		})()}px"></div>` : nothing}
           </div>
-          ${this.columnMenu === `none` ? nothing : html`
+          ${this.columnMenu !== `auto` ? nothing : html`
           <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
 			const cmd = e.detail.command;
 			const checked = e.detail.checked;
@@ -1664,12 +1757,11 @@ let DataGridElement = class DataGridElement extends LitElement {
         </div>
         <div class="viewport scroll-fade-y" @scroll=${this._onScroll}>
           <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
-            ${repeat(visibleFlat, (f) => f.key, (entry, i) => {
-			const absIdx = startRow + i;
+            ${repeat(visibleFlat, (f) => f.entry.key, ({ entry, absIdx }) => {
 			if (entry.type === `group`) {
 				const gKey = entry.key.replace(/^__group__/, ``);
 				const collapsed = this._collapsedGroups.has(gKey);
-				return html`<div class="group-row ${collapsed ? `collapsed` : ``}" style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret"><ixfx-icon name="chevron-down" size="12"></ixfx-icon></span><span>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
+				return html`<div class="group-row ${collapsed ? `collapsed` : ``}" role="row" aria-rowindex=${absIdx + 2} style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret"><ixfx-icon name="chevron-down" size="12"></ixfx-icon></span><span role="rowheader" aria-expanded=${collapsed ? `false` : `true`}>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
 			}
 			const row = entry.row;
 			const absIdx2 = entry.idx;
@@ -1677,7 +1769,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return html`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" role="row" aria-rowindex=${absIdx + 2} aria-selected=${selected ? `true` : `false`} style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
                   draggable=${this.#nativeDrag.draggableAttr}
                   @click=${(e) => {
@@ -1706,7 +1798,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 					const immediate = this.editability === `immediate` || this._editingRow === rowKey;
 					const curVal = immediate ? val : this._editValue ?? val;
 					const effectiveDataType = col.dataType ?? `text`;
-					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
+					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
 						const v = e.target.checked;
 						if (immediate) this._commitImmediate(rowKey, col.key, v);
 						else {
@@ -1716,7 +1808,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 					}} /></div>`;
 					if (col.editor === `select`) {
 						const opts = col.editorOptions ?? [];
-						return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><select @change=${(e) => {
+						return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px"><select @change=${(e) => {
 							const v = e.target.value;
 							if (immediate) this._commitImmediate(rowKey, col.key, v);
 							else {
@@ -1762,11 +1854,11 @@ let DataGridElement = class DataGridElement extends LitElement {
 								this._editingRow = null;
 							}
 						};
-						return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
+						return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
 					}
 					const inputType = effectiveDataType === `number` ? `number` : `text`;
 					const inputValue = effectiveDataType === `number` ? String(curVal ?? ``) : String(curVal ?? ``);
-					return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
+					return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
 						if (e.key === `Enter`) this._commitEdit();
 						if (e.key === `Escape`) {
 							this._editing = null;
@@ -1790,7 +1882,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 				const canPan = this.cellOverflow === `pan-text` && !col.renderer && (selected || tickled);
 				const look = this._cellLook(row, col.key);
 				const cellStyle = look.textColor === void 0 ? `` : `color:${look.textColor};`;
-				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent} ${cellStyle}"
+				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent} ${cellStyle}"
                       @click=${(e) => {
 					this._lastClickedCell = {
 						rowKey,
@@ -1905,8 +1997,6 @@ __decorate([property({
 __decorate([state()], DataGridElement.prototype, "_resizingColKey", void 0);
 __decorate([state()], DataGridElement.prototype, "_animatingColKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
-__decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
-__decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);
 __decorate([state()], DataGridElement.prototype, "_viewportH", void 0);
 __decorate([state()], DataGridElement.prototype, "_viewportW", void 0);
 __decorate([state()], DataGridElement.prototype, "_collapsedGroups", void 0);