@ixfx/components 0.13.2 → 0.13.4

package/dist/data-grid.js

@@ -1,1924 +1,2 @@
-import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
-import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-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 { 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";
-import "./interaction-ZTh4htzr.js";
-import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
-import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
-import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import "./menu-CwcXXeLM.js";
-import "./pan-text-CqtvjPyK.js";
-import { LitElement, css, html, nothing } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { createCommandRegistry } from "@clinth/ui-commands";
-import { repeat } from "lit/directives/repeat.js";
-//#region src/data-grid/data-grid.ts
-const EMPTY_CELL_LOOK = {
-	textColor: void 0,
-	icon: void 0,
-	iconColor: void 0,
-	badge: void 0
-};
-/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
-function sameKeys(a, b) {
-	if (a === void 0 || a.length !== b.length) return false;
-	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
-	return true;
-}
-let DataGridElement = class DataGridElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.columns = [];
-		this.rows = [];
-		this.selectionMode = `single`;
-		this.interactionMode = `standard`;
-		this.sortState = null;
-		this.rowHeight = 28;
-		this.getRowKey = (r, i) => r.key ?? r.id ?? String(i);
-		this.editable = false;
-		this.editability = `user`;
-		this.cellOverflow = `ellipsis`;
-		this.zebraStripes = false;
-		this.groupBy = null;
-		this.allowGrouping = false;
-		this.crossGroupSelection = false;
-		this.columnMenu = `auto`;
-		this.textColorColumn = ``;
-		this.iconColumn = ``;
-		this.badgeColumn = ``;
-		this.itemsDraggable = false;
-		this.columnButtonIcon = `ellipsis`;
-		this._columnFormatters = /* @__PURE__ */ new Map();
-		this._resizingColKey = void 0;
-		this._animatingColKeys = /* @__PURE__ */ new Set();
-		this._selectedKeys = /* @__PURE__ */ new Set();
-		this._scrollTop = 0;
-		this._scrollLeft = 0;
-		this._viewportH = 300;
-		this._viewportW = 600;
-		this._collapsedGroups = /* @__PURE__ */ new Set();
-		this._editing = null;
-		this._editingRow = null;
-		this._lastClick = null;
-		this._lastClickedCell = null;
-		this._editValue = ``;
-		this._tickled = new TickledController(this, {
-			getItems: () => this._flatKeys.map((k) => ({
-				id: k,
-				enabled: true
-			})),
-			onStateChange: () => this.requestUpdate(),
-			hoverDisabled: () => this.#nativeDrag.isDragging
-		});
-		this.#nativeDragging = false;
-		this.#postDragSuppressTimer = 0;
-		this.#pointerEventSuppressess = /* @__PURE__ */ new WeakMap();
-		this.#nativeDrag = new ListNativeDragController(this, {
-			source: `data-grid`,
-			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._flat.some((f) => f.type === `row`),
-			resolveEventToKey: (target) => {
-				if (!(target instanceof Element)) return void 0;
-				if (target.closest?.(`.header-cell`)) return void 0;
-				return (target.closest?.(`.row`))?.dataset.key;
-			},
-			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
-			getMetrics: () => ({ rowHeight: this.rowHeight }),
-			getRenderer: () => this.dragPreviewRenderer,
-			getDragPreviewSourceResolver: () => this.dragPreviewSource,
-			dispatch: (detail) => this.dispatchEvent(new CustomEvent(`list-native-drag-start`, {
-				detail,
-				bubbles: true,
-				composed: true,
-				cancelable: true
-			})),
-			onActiveChange: (active, originKey) => {
-				this.#nativeDragging = active;
-				this.#dragOriginKey = active ? originKey : void 0;
-				this.toggleAttribute(`data-native-dragging`, active);
-				if (active) {
-					const count = this._selectedKeys.size;
-					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
-				} else this.removeAttribute(`aria-label`);
-				this.requestUpdate();
-			},
-			onEnd: () => {
-				this.#nativeDragging = false;
-				this.#dragOriginKey = void 0;
-				this.toggleAttribute(`data-native-dragging`, false);
-				this.removeAttribute(`aria-label`);
-				this.#startPostDragSuppressTimer();
-			}
-		});
-		this._sortedRows = [];
-		this._flat = [];
-		this._flatKeys = [];
-		this.#searchKeyByRow = /* @__PURE__ */ new Map();
-		this.search = new ListSearchController(this, { adapter: this.#createSearchAdapter() });
-		this.#prevFlatKeys = [];
-		this.#enteringRowKeys = /* @__PURE__ */ new Set();
-		this.#rowReflowTimer = 0;
-		this.#dataGridRenderedOnce = false;
-		this._visibleColumns = [];
-		this._colOffsets = [];
-		this._colWidthSum = 0;
-		this._raf = 0;
-		this.#viewportChangeRaf = 0;
-		this.#appendInProgress = false;
-		this.#resortRaf = 0;
-		this._drag = null;
-		this._onFocusOut = (e) => {
-			if (this._suppressBlurCommit) return;
-			if (this.editability === `immediate`) return;
-			if (!this._editing && !this._editingRow) return;
-			const next = e.relatedTarget;
-			if (next && this.contains(next)) return;
-			this._editing = null;
-			this._editingRow = null;
-			this.requestUpdate();
-		};
-		this._onScroll = (e) => {
-			const el = e.target;
-			cancelAnimationFrame(this._raf);
-			this._raf = requestAnimationFrame(() => {
-				this._scrollTop = el.scrollTop;
-				this._scrollLeft = el.scrollLeft;
-				if (this._headerScrollEl) this._headerScrollEl.scrollLeft = el.scrollLeft;
-				this.requestUpdate();
-				cancelAnimationFrame(this.#viewportChangeRaf);
-				this.#viewportChangeRaf = 0;
-				this.#emitViewportChangeIfChanged();
-			});
-		};
-		this._onKeyDown = (e) => {
-			if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === `a`) {
-				if (this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode` || this.interactionMode === `standard`) {
-					e.preventDefault();
-					const prev = new Set(this._selectedKeys);
-					if (this.groupBy && !this.crossGroupSelection && this._anchorKey) {
-						const g = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
-						this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row` && this._getGroupKey(f.row) === g).map((f) => f.key));
-					} else this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
-					this.dispatchEvent(new CustomEvent(`datagrid-select`, {
-						detail: {
-							selectedKeys: new Set(this._selectedKeys),
-							previous: prev
-						},
-						bubbles: true,
-						composed: true
-					}));
-				}
-				return;
-			}
-			if (this._editing && (e.key === `ArrowDown` || e.key === `ArrowUp`)) {
-				if ((this.shadowRoot?.activeElement)?.tagName === `SELECT`) return;
-				e.preventDefault();
-				const cur = this._editing;
-				const dir = e.key === `ArrowDown` ? 1 : -1;
-				const colKey = cur.colKey;
-				this._suppressBlurCommit = true;
-				this._commitEdit();
-				const rowKeys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
-				const idx = rowKeys.indexOf(cur.rowKey);
-				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 col = this._visibleColumns.find((c) => c.key === colKey);
-					if (row && col && this._isEditable(row, col)) {
-						this._startEdit(nk, colKey);
-						this._tickled.handleKeyboardNavigation(nextIdx > idx ? `next` : `previous`);
-						this._scrollRowIntoView(nk);
-						break;
-					}
-					nextIdx += dir;
-				}
-				if (nextIdx < 0 || nextIdx >= rowKeys.length) {
-					this._tickled.handleKeyboardNavigation(dir > 0 ? `next` : `previous`);
-					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
-				}
-				requestAnimationFrame(() => {
-					this._suppressBlurCommit = false;
-				});
-				return;
-			}
-			if (e.key === `ArrowDown` || e.key === `ArrowUp` || e.key === `Home` || e.key === `End`) {
-				e.preventDefault();
-				this._tickled.setInputMode(`keyboard`);
-			}
-			switch (e.key) {
-				case `ArrowDown`:
-					this._tickled.handleKeyboardNavigation(`next`);
-					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
-					if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
-					if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
-					break;
-				case `ArrowUp`:
-					this._tickled.handleKeyboardNavigation(`previous`);
-					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
-					if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
-					if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
-					break;
-				case `Home`:
-					this._tickled.handleKeyboardNavigation(`first`);
-					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
-					break;
-				case `End`:
-					this._tickled.handleKeyboardNavigation(`last`);
-					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
-					break;
-				case `Enter`: {
-					const key = this._tickled.tickledId;
-					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];
-							if (this._lastClickedCell?.rowKey === key) {
-								const col = this._visibleColumns.find((c) => c.key === this._lastClickedCell.colKey);
-								if (col && this._isEditable(row, col)) {
-									this._startEdit(key, col.key);
-									break;
-								}
-							}
-							const firstEditable = this._visibleColumns.find((c) => this._isEditable(row, c));
-							if (firstEditable) {
-								this._startEdit(key, firstEditable.key);
-								break;
-							}
-						}
-					}
-					if (!this._editing) {
-						const idx = this._sortedRows.findIndex((r, i) => this.getRowKey(r, i) === key);
-						if (this._selectedKeys.has(key)) {
-							this._activateRow(key, idx >= 0 ? this._sortedRows[idx] : void 0, idx);
-							break;
-						}
-						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this._replaceSelection(key);
-						this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
-							detail: {
-								rowKey: key,
-								colKey: ``,
-								rowIndex: idx,
-								colIndex: -1
-							},
-							bubbles: true,
-							composed: true
-						}));
-					}
-					break;
-				}
-				case ` `: {
-					if (this._editing) {
-						if ((this.columns.find((c) => c.key === this._editing.colKey)?.dataType ?? `text`) === `boolean`) {
-							e.preventDefault();
-							const isImmediate = this.editability === `immediate`;
-							const rowKey = this._editing.rowKey;
-							const colKey = this._editing.colKey;
-							const active = this.shadowRoot?.activeElement;
-							let next;
-							if (active?.type === `checkbox`) {
-								next = !active.checked;
-								active.checked = next;
-							} else {
-								const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
-								next = !(this._editValue !== `` ? Boolean(this._editValue) : Boolean(row?.[colKey]));
-							}
-							if (isImmediate) this._commitImmediate(rowKey, colKey, next);
-							else {
-								this._editValue = next;
-								this._commitEdit();
-							}
-						}
-						break;
-					}
-					const key = this._tickled.tickledId;
-					if (!key) break;
-					e.preventDefault();
-					if (this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this._toggleSelection(key);
-					else this._replaceSelection(key);
-					break;
-				}
-				case `Escape`: if (this._editing || this._editingRow) {
-					e.preventDefault();
-					this._editing = null;
-					this._editingRow = null;
-					this.requestUpdate();
-				} else if (this._selectedKeys.size) {
-					e.preventDefault();
-					const prev = new Set(this._selectedKeys);
-					this._selectedKeys = /* @__PURE__ */ new Set();
-					this.dispatchEvent(new CustomEvent(`datagrid-select`, {
-						detail: {
-							selectedKeys: /* @__PURE__ */ new Set(),
-							previous: prev
-						},
-						bubbles: true,
-						composed: true
-					}));
-				}
-			}
-		};
-		this._suppressBlurCommit = false;
-	}
-	static {
-		this.styles = [
-			themeFallbacks,
-			handleStyles,
-			tickledStyles,
-			tickledItemStyles,
-			listItemFadeKeyframes,
-			listSearchStyles,
-			scrollFadeStyles(`x`),
-			scrollFadeStyles(`y`),
-			css`
-    :host {
-      --data-grid-row-height: 28px;
-      --data-grid-header-height: 32px;
-      --data-grid-bg: var(--surface-3);
-      --data-grid-header-bg: var(--surface-2);
-      --data-grid-border: var(--border);
-      --data-grid-header-text: var(--surface-3-text);
-      --data-grid-reorder-handle-width: 4px;
-      /* How strongly the alternate ("zebra") row stands out from the base row
-         background when [zebra-stripes] is set - a color-mix() percentage. */
-      --data-grid-zebra-intensity: 6%;
-      /* Duration of the width transition when a column is auto-sized via
-         autoSizeColumn(). Read back in JS (_columnResizeAnimationMs) to know
-         when the animation has finished, so keep it a plain time value. */
-      --data-grid-column-resize-duration: 180ms;
-      /* Dense 28px rows read badly under the global 30px full-strength fade,
-         so default to a shorter, shallower edge hint. Consumers can override
-         --scroll-fade-width / --scroll-fade-strength per instance. */
-      --scroll-fade-width: 20px;
-      --scroll-fade-strength: 0.8;
-      position: relative;
-      display: block;
-      overflow: hidden;
-      border: var(--data-grid-border);
-      border-radius: var(--radius-m);
-      background: var(--data-grid-bg);
-      color: var(--surface-3-text);
-      font-family: var(--font-family);
-      font-size: var(--text-m);
-    }
-    :host(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
-    .grid { display: flex; flex-direction: column; height: 100%; min-height: 200px; position: relative; }
-    .header-bar {
-      display: flex; align-items: stretch; height: var(--data-grid-header-height);
-      background: var(--data-grid-header-bg); border-bottom: var(--data-grid-border);
-      overflow: visible; flex-shrink: 0; position: relative;
-    }
-    .header-scroll {
-      display: flex; flex: 1; overflow: hidden;
-      /* Horizontal edge fade comes from the shared .scroll-fade-x class
-         (see ../styles/scroll-fade.ts). Its scrollLeft is synced from the
-         viewport in _onScroll, which drives its own scroll-timeline. */
-    }
-    .header-cell {
-      display: flex; align-items: center; gap: var(--space-xs);
-      padding: 0 var(--space-s); border-right: var(--border-subtle);
-      flex-shrink: 0; user-select: none; cursor: pointer; position: relative;
-      background: var(--data-grid-header-bg);
-      box-sizing: border-box;
-    }
-    .header-cell[data-tickled] { background: var(--surface-5); }
-    /* Applied to a header-cell / cell while its column is animating towards
-       an autoSizeColumn() target width. */
-    .header-cell.width-animating, .cell.width-animating {
-      transition: width var(--data-grid-column-resize-duration, 180ms) ease-out;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .header-cell.width-animating, .cell.width-animating { transition: none; }
-    }
-    .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .sort-icon { display: inline-flex; align-items: center; opacity: 0.7; }
-    .resize-handle {
-      position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1;
-      display: flex; align-items: stretch; justify-content: center;
-    }
-    .resize-handle::before {
-      content: ''; width: 2px; margin: 2px 0; border-radius: 1px; background: var(--split-gutter-color, transparent);
-      transition: background-color var(--transition, 0.15s ease-out);
-    }
-    .resize-handle:hover::before { background: var(--split-gutter-hover-color, var(--surface-6)); }
-    .resize-handle[data-active]::before { background: var(--split-gutter-active-color, var(--accent)); }
-    .reorder-handle { cursor: grab; opacity: 0; display: inline-flex; align-items: center; transition: opacity var(--transition, 0.15s ease-out); }
-    .header-cell:hover .reorder-handle, .header-cell:focus-within .reorder-handle, .header-cell[drag-source] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
-    .col-button { opacity: 0; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-s); cursor: pointer; flex-shrink: 0; margin-left: var(--space-xs); transition: opacity var(--transition, 0.15s ease-out), background var(--transition, 0.15s ease-out); }
-    .col-button ixfx-icon { width: 14px; height: 14px; }
-    .header-cell:hover .col-button, .header-cell:focus-within .col-button { opacity: 1; pointer-events: auto; }
-    .col-button:hover { background: var(--surface-4); }
-    .reorder-handle .ixfx-handle { --ixfx-handle-length: 14px; --ixfx-handle-thickness: var(--data-grid-reorder-handle-width, 10px); --ixfx-handle-dot-size: 3px; }
-    .flyout-trigger { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: var(--border-subtle); background: var(--data-grid-header-bg); }
-    .viewport { flex: 1; overflow: auto; position: relative; }
-    /* Vertical edge fade from the shared .scroll-fade-y class
-       (see ../styles/scroll-fade.ts). The mask lives on the viewport —
-       below the header bar — so the top fade never covers the column
-       headers. Reach/strength tune via --scroll-fade-width /
-       --scroll-fade-strength (defaults set on :host above). */
-    .spacer { position: relative; }
-    .row.item {
-      position: absolute; left: 0; right: 0; display: flex; align-items: stretch;
-      gap: 0;
-      height: var(--data-grid-row-height);
-      /* Border width is always 1px, even when not visually shown (transparent),
-         so hover/selection never changes the box size and shifts content. */
-      border: 1px solid transparent;
-      background: var(--item-bg);
-      border-radius: var(--item-border-radius);
-      padding: 0;
-      box-sizing: border-box;
-      /* Only background transitions - hover ("tickled") no longer changes
-         border, so there is nothing else to animate. */
-      transition: background var(--transition, 0.1s ease-out);
-    }
-    /* Zebra striping: alternate rows tint towards the text colour, which
-       lightens in dark themes and darkens in light themes - so it reads as
-       "more contrast" either way. The zebra-odd class is only applied when
-       zebraStripes is set (see render()). Declared before .tickled /
-       .selected so those states (same specificity) still win when a striped
-       row is also hovered or selected. */
-    .row.item.zebra-odd {
-      background: color-mix(in oklch, transparent calc(100% - var(--data-grid-zebra-intensity, 6%)), var(--surface-3-text) var(--data-grid-zebra-intensity, 6%));
-    }
-    /* Hover: background only, no border change (avoids layout shift + colour flash). */
-    .row.item.tickled { background: var(--item-bg-tickled); color: var(--item-text-tickled); }
-    .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
-    .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
-    .row.item.dragging-origin { opacity: 0.6; }
-
-    /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
-       the row set changes — do rows slide (their top transitions) to make or
-       close a gap; a freshly inserted row also fades in. Kept scoped so it
-       never fires while scrolling the virtualised list. */
-    :host([reflowing]) .row.item,
-    :host([reflowing]) .group-row {
-      transition: top var(--data-grid-row-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1);
-    }
-    .row.item.entering {
-      animation: ixfx-list-item-in var(--data-grid-row-move-duration, 200ms) ease both;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      :host([reflowing]) .row.item, :host([reflowing]) .group-row { transition: none; }
-      .row.item.entering { animation: none; }
-    }
-    .cell {
-      flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-s);
-      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: var(--border-subtle);
-      box-sizing: border-box;
-      font-variant-numeric: tabular-nums;
-    }
-    .cell.editable-text { cursor: text; }
-    .cell input, .cell select { width: 100%; font: inherit; }
-    /* Per-row icon / badge, enabled by nominating iconColumn / badgeColumn.
-       The badge self-justifies to the cell's trailing edge; the value text
-       keeps its own flex sizing so the cell still ellipsises. */
-    .cell-icon {
-      flex: none;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      margin-inline-end: var(--data-grid-cell-icon-gap, 6px);
-      width: var(--data-grid-cell-icon-size, 1em);
-      height: var(--data-grid-cell-icon-size, 1em);
-    }
-    .cell-badge {
-      flex: none;
-      display: inline-flex;
-      align-items: center;
-      margin-inline-start: auto;
-      padding-inline-start: var(--data-grid-badge-gap, 6px);
-    }
-    .checkbox-col { width: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-    ixfx-menu-trigger { flex-shrink: 0; border-left: var(--border-subtle); background: var(--data-grid-header-bg); display: flex; align-items: center; --ixfx-button-padding: var(--space-s) var(--space-m); min-width: 44px; min-height: var(--data-grid-header-height); justify-content: center; }
-    .header-cell[drag-source] { opacity: 0.4; }
-    .drop-caret {
-      position: absolute; top: 0; bottom: 0; width: 2px;
-      background: var(--accent); border-radius: 1px; pointer-events: none; z-index: 2;
-    }
-    .group-row {
-      position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--space-s);
-      height: var(--data-grid-row-height); background: transparent; color: var(--surface-3-text);
-      border-bottom: 1px solid var(--border); font-weight: 600; padding: 0 var(--space-s);
-      cursor: pointer; user-select: none;
-    }
-    .group-row .caret { transition: transform 0.15s; display: inline-flex; }
-    .group-row.collapsed .caret { transform: rotate(-90deg); }
-    .group-row .divider { flex: 1; height: 1px; background: var(--border); margin-left: var(--space-s); }
-    .group-row .count { opacity: 0.6; font-weight: 400; font-size: 0.9em; }
-
-  `
-		];
-	}
-	#viewportResizeObserver;
-	#nativeDragging;
-	#dragOriginKey;
-	#postDragSuppressTimer;
-	#pointerEventSuppressess;
-	#nativeDrag;
-	#prepareNativeDrag(originKey) {
-		const rows = this._flat.filter((f) => f.type === `row`);
-		if (!rows.some((f) => f.key === originKey)) return void 0;
-		if (!this._selectedKeys.has(originKey)) this._replaceSelection(originKey);
-		const selected = [];
-		let displayIndex = 0;
-		for (const entry of rows) {
-			if (!this._selectedKeys.has(entry.key)) {
-				displayIndex++;
-				continue;
-			}
-			const rowEl = this.renderRoot.querySelector(`.row[data-key="${CSS.escape(entry.key)}"]`) ?? void 0;
-			selected.push({
-				key: entry.key,
-				index: displayIndex,
-				item: entry.row,
-				...rowEl ? { element: rowEl } : {}
-			});
-			displayIndex++;
-		}
-		const origin = selected.find((entry) => entry.key === originKey);
-		if (!origin) return void 0;
-		return {
-			origin,
-			selected
-		};
-	}
-	#startPostDragSuppressTimer() {
-		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
-		this.#postDragSuppressTimer = window.setTimeout(() => {
-			this.#postDragSuppressTimer = 0;
-		}, 0);
-	}
-	#searchRegistry;
-	#unregisterSearchCommands;
-	#searchKeyByRow;
-	/** Command registry carrying this grid's `list.search.*` commands. */
-	get registry() {
-		return this.#searchRegistry;
-	}
-	#rowSearchText(row) {
-		if (this.rowSearchText) return this.rowSearchText(row);
-		const rec = row;
-		return this._visibleColumns.map((c) => String(rec[c.key] ?? ``)).join(` `);
-	}
-	#createSearchAdapter() {
-		return {
-			getItems: () => {
-				this.#searchKeyByRow.clear();
-				this._sortedRows.forEach((r, i) => this.#searchKeyByRow.set(r, this.getRowKey(r, i)));
-				return this._sortedRows;
-			},
-			getLabel: (row) => this.#rowSearchText(row),
-			getKey: (row) => this.#searchKeyByRow.get(row) ?? String(this._sortedRows.indexOf(row)),
-			focusItem: (row) => {
-				if (row === void 0) return;
-				const key = this.#searchKeyByRow.get(row);
-				if (key !== void 0) this.tickleRow(key);
-			},
-			selectItems: (rows) => {
-				this.selectKeys(rows.map((r) => this.#searchKeyByRow.get(r)).filter((k) => k !== void 0));
-			},
-			applyFilter: (matched) => {
-				this.filterPredicate = matched === void 0 ? void 0 : (row) => {
-					const k = this.#searchKeyByRow.get(row);
-					return k === void 0 || matched.has(k);
-				};
-			}
-		};
-	}
-	#effectiveSearchModes() {
-		const raw = this.searchModes?.trim();
-		if (raw === void 0) return [...LIST_SEARCH_MODES];
-		const requested = new Set(raw.split(/\s+/));
-		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
-	}
-	#syncSearchCommands() {
-		if (!this.#searchRegistry) return;
-		this.search.setModes(this.#effectiveSearchModes());
-		this.#unregisterSearchCommands?.();
-		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
-	}
-	/** Row-key snapshot from the previous update, for the insertion / removal animation. */
-	#prevFlatKeys;
-	#enteringRowKeys;
-	#rowReflowTimer;
-	#dataGridRenderedOnce;
-	#viewportChangeRaf;
-	/** Key sets as of the last `datagrid-viewport-change` dispatch, for dedupe. */
-	#lastViewportRenderedKeys;
-	#lastViewportVisibleKeys;
-	#appendInProgress;
-	#resortRaf;
-	connectedCallback() {
-		super.connectedCallback();
-		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
-		this.addEventListener(`keydown`, this._onKeyDown);
-		this.addEventListener(`focusout`, this._onFocusOut);
-		this.#searchRegistry ??= createCommandRegistry();
-		this.#syncSearchCommands();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener(`keydown`, this._onKeyDown);
-		this.removeEventListener(`focusout`, this._onFocusOut);
-		cancelAnimationFrame(this._raf);
-		cancelAnimationFrame(this.#viewportChangeRaf);
-		this.#viewportChangeRaf = 0;
-		this.#unregisterSearchCommands?.();
-		this.#unregisterSearchCommands = void 0;
-		this.#searchRegistry = void 0;
-		if (this.#rowReflowTimer) {
-			clearTimeout(this.#rowReflowTimer);
-			this.#rowReflowTimer = 0;
-		}
-		if (this.#postDragSuppressTimer) {
-			clearTimeout(this.#postDragSuppressTimer);
-			this.#postDragSuppressTimer = 0;
-		}
-		this.#viewportResizeObserver?.disconnect();
-		this.#viewportResizeObserver = void 0;
-	}
-	/**
-	* Dispatch a command to this grid — routes through the command registry so
-	* `list.search.*` (and any other registered commands) work.
-	*/
-	dispatch(commandId, args) {
-		this.#searchRegistry?.invoke(commandId, args);
-	}
-	firstUpdated() {
-		this.#viewportResizeObserver = new ResizeObserver(() => this.#measureViewport());
-		this.#viewportResizeObserver.observe(this._viewportEl);
-		this.#measureViewport();
-	}
-	/**
-	* Re-read the viewport's size and update `_viewportH`/`_viewportW` if it
-	* changed. A zero-sized read (e.g. while hosted in a hidden/inactive dock
-	* tab) is ignored so it never clobbers the last known-good geometry — the
-	* observer fires again with the real size once the host becomes visible.
-	*/
-	#measureViewport() {
-		if (!this._viewportEl) return;
-		const w = this._viewportEl.clientWidth;
-		const h = this._viewportEl.clientHeight;
-		if (w <= 0 || h <= 0) return;
-		if (w === this._viewportW && h === this._viewportH) return;
-		this._viewportW = w;
-		this._viewportH = h;
-		this.#scheduleViewportChangeEmit();
-	}
-	/**
-	* Force a fresh re-measure of the viewport and re-render. Normally
-	* unnecessary — a `ResizeObserver` tracks the viewport automatically — but
-	* gives a consumer an escape hatch to recover if an ancestor's
-	* layout/visibility changes without the observer noticing (matches
-	* `ixfx-grid-list`'s `refreshLayout()`).
-	*/
-	refreshLayout() {
-		this.#measureViewport();
-		this.requestUpdate();
-	}
-	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(() => {
-			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`;
-			if (!sel) return;
-			const el = this.renderRoot.querySelector(sel);
-			el?.focus();
-			if (el instanceof HTMLInputElement && el.type === `text`) el.select();
-		});
-	}
-	willUpdate(changed) {
-		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._visibleColumns = this.columns.filter((c) => c.visible !== false);
-		let off = 0;
-		this._colOffsets = this._visibleColumns.map((c) => {
-			const o = off;
-			off += c.width ?? 150;
-			return o;
-		});
-		this._colWidthSum = off;
-		if (this.interactionMode === `checked`) this._colWidthSum += 28;
-		this.#noteFlatMutation();
-	}
-	/**
-	* Diff the row-key list against the previous update. Rows that appeared get an
-	* enter fade; any add/remove opens a short `[reflowing]` window so the rows
-	* that shift slide (their `top` transitions) instead of snapping. Bounded in
-	* time so it never bleeds into scroll virtualisation.
-	*/
-	#noteFlatMutation() {
-		const now = this._flatKeys;
-		const prev = this.#prevFlatKeys;
-		this.#prevFlatKeys = now.slice();
-		if (!this.#dataGridRenderedOnce) {
-			this.#dataGridRenderedOnce = true;
-			return;
-		}
-		if (prev.length === 0 || now.length === 0) {
-			this.#enteringRowKeys.clear();
-			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;
-		this.#enteringRowKeys = new Set(added);
-		this.toggleAttribute(`reflowing`, true);
-		if (this.#rowReflowTimer) clearTimeout(this.#rowReflowTimer);
-		this.#rowReflowTimer = window.setTimeout(() => {
-			this.#rowReflowTimer = 0;
-			this.#enteringRowKeys.clear();
-			this.toggleAttribute(`reflowing`, false);
-			this.requestUpdate();
-		}, 320);
-	}
-	_getGroupKey(row) {
-		if (!this.groupBy) return null;
-		if (typeof this.groupBy === `string`) return String(row[this.groupBy] ?? ``);
-		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 flat = [];
-		const keys = [];
-		for (const [gKey, rows] of groups) {
-			const label = this.groupLabel ? this.groupLabel(gKey, rows) : gKey;
-			const gId = `__group__${gKey}`;
-			flat.push({
-				type: `group`,
-				key: gId,
-				label,
-				count: rows.length
-			});
-			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);
-				flat.push({
-					type: `row`,
-					key: rk,
-					row: r,
-					idx
-				});
-				keys.push(rk);
-			}
-		}
-		this._flat = flat;
-		this._flatKeys = keys;
-	}
-	_toggleGroup(gKey) {
-		const next = new Set(this._collapsedGroups);
-		if (next.has(gKey)) next.delete(gKey);
-		else next.add(gKey);
-		this._collapsedGroups = next;
-	}
-	_applySort(rows) {
-		if (!this.sortState) return rows;
-		const col = this.columns.find((c) => c.key === this.sortState.key);
-		if (!col) return rows;
-		const dir = this.sortState.direction === `asc` ? 1 : -1;
-		if (col.sortFn) return rows.sort((a, b) => dir * col.sortFn(a, b));
-		const dataType = col.dataType ?? `text`;
-		return rows.sort((a, b) => {
-			const av = a[col.key];
-			const bv = b[col.key];
-			if (av === bv) return 0;
-			if (dataType === `number`) return dir * (av - bv);
-			if (dataType === `boolean`) return dir * (Boolean(av) === Boolean(bv) ? 0 : av ? 1 : -1);
-			return dir * String(av).localeCompare(String(bv));
-		});
-	}
-	_onHeaderClick(col, e) {
-		if (col.sortable === false) return;
-		if (e) {
-			const pointerEvent = e.composedPath()[0];
-			if (pointerEvent && this.#pointerEventSuppressess.get(pointerEvent)) {
-				this.#pointerEventSuppressess.delete(pointerEvent);
-				return;
-			}
-		}
-		const prev = this.sortState;
-		let next = null;
-		if (!prev || prev.key !== col.key) next = {
-			key: col.key,
-			direction: `asc`
-		};
-		else if (prev.direction === `asc`) next = {
-			key: col.key,
-			direction: `desc`
-		};
-		else next = null;
-		this.sortState = next;
-		this.dispatchEvent(new CustomEvent(`datagrid-sort`, {
-			detail: {
-				sort: next,
-				previous: prev
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_onHeaderPointerUp(col, e) {
-		let stopped = false;
-		const customEvent = new CustomEvent(`datagrid-header-pointerup`, {
-			detail: {
-				key: col.key,
-				column: col
-			},
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		});
-		this.dispatchEvent(customEvent);
-		if (customEvent.defaultPrevented) stopped = true;
-		if (stopped) this.#pointerEventSuppressess.set(e, true);
-	}
-	_onColButtonClick(col, e) {
-		e.stopPropagation();
-		const icon = col.button === false ? this.columnButtonIcon : typeof col.button === `object` && col.button.icon ? col.button.icon : this.columnButtonIcon;
-		const target = e.currentTarget;
-		const customEvent = new CustomEvent(`datagrid-header-button-click`, {
-			detail: {
-				key: col.key,
-				column: col,
-				icon,
-				clientX: e.clientX,
-				clientY: e.clientY,
-				anchorElement: target
-			},
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		});
-		this.dispatchEvent(customEvent);
-		if (customEvent.defaultPrevented) this.#pointerEventSuppressess.set(e, true);
-	}
-	_onRowClick(rowKey, col, e) {
-		if (this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
-		if (col && col.selectable === false) return;
-		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
-		if (this.interactionMode === `manual`) return;
-		if (this.interactionMode === `implicit`) {
-			this._replaceSelection(rowKey);
-			return;
-		}
-		if (this.interactionMode === `checked`) return;
-		if (this.interactionMode === `sticky`) {
-			this._toggleSelection(rowKey);
-			return;
-		}
-		if (e.ctrlKey || e.metaKey) {
-			if (this.selectionMode === `multiple` || this.interactionMode === `vscode`) this._toggleSelection(rowKey);
-		} else if (e.shiftKey && (this.selectionMode === `multiple` || this.interactionMode === `vscode`)) this._rangeSelectTo(rowKey);
-		else this._replaceSelection(rowKey);
-	}
-	_onCheckboxClick(rowKey, e) {
-		e.stopPropagation();
-		this._onRowClick(rowKey, null, e);
-	}
-	_onVisibilityToggle(col, checked) {
-		col.visible = checked;
-		this.columns = [...this.columns];
-		this.dispatchEvent(new CustomEvent(`datagrid-column-visibility`, {
-			detail: {
-				key: col.key,
-				visible: checked
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_beginHeaderDrag(e, col, idx) {
-		e.stopPropagation();
-		const anchor = e.currentTarget.closest(`.header-cell`) ?? e.currentTarget;
-		this._drag = {
-			pointerId: e.pointerId,
-			from: idx,
-			startX: e.clientX,
-			startY: e.clientY,
-			active: false,
-			ghost: null,
-			gap: void 0,
-			sourceCol: col
-		};
-		const onMove = (ev) => {
-			if (!this._drag || ev.pointerId !== this._drag.pointerId) return;
-			const dx = ev.clientX - this._drag.startX;
-			const dy = ev.clientY - this._drag.startY;
-			if (!this._drag.active) {
-				if (Math.hypot(dx, dy) < 5) return;
-				this._drag.active = true;
-				const content = document.createElement(`span`);
-				content.textContent = col.label;
-				try {
-					this._drag.ghost = createDragGhost({
-						anchor,
-						content
-					});
-					this._drag.ghost.move(ev.clientX, ev.clientY);
-				} catch {}
-				try {
-					this._headerScrollEl?.setPointerCapture(ev.pointerId);
-				} catch {}
-			}
-			this._drag.ghost?.move(ev.clientX, ev.clientY);
-			const x = ev.clientX - (this._headerScrollEl?.getBoundingClientRect().left ?? 0) + (this._headerScrollEl?.scrollLeft ?? 0);
-			let gap = this._drag.from;
-			let bestDist = Infinity;
-			for (let i = 0; i < this._visibleColumns.length; i++) {
-				if (i === this._drag.from) continue;
-				const rectLeft = this._colOffsets[i];
-				const rectRight = rectLeft + (this._visibleColumns[i].width ?? 150);
-				const mid = (rectLeft + rectRight) / 2;
-				const gapPos = x < mid ? rectLeft : rectRight;
-				const gapIdx = x < mid ? i : i + 1;
-				const d = Math.abs(x - gapPos);
-				if (d < bestDist) {
-					bestDist = d;
-					gap = gapIdx > this._drag.from ? gapIdx - 1 : gapIdx;
-				}
-			}
-			if (this._visibleColumns.length > 0) {
-				const lastOff = this._colOffsets[this._colOffsets.length - 1] + (this._visibleColumns[this._visibleColumns.length - 1].width ?? 150);
-				const d = Math.abs(x - lastOff);
-				if (d < bestDist) {
-					bestDist = d;
-					gap = this._visibleColumns.length - 1;
-					if (this._drag.from === this._visibleColumns.length - 1) gap = this._drag.from;
-					else if (gap >= this._drag.from) gap = this._visibleColumns.length - 1;
-				}
-			}
-			const siblings = this._visibleColumns.length - 1;
-			let normalizedGap = gap;
-			if (normalizedGap < 0) normalizedGap = 0;
-			if (normalizedGap > siblings) normalizedGap = siblings;
-			this._drag.gap = normalizedGap;
-			this.requestUpdate();
-		};
-		const onUp = (ev) => {
-			if (!this._drag || ev.pointerId !== this._drag.pointerId) return;
-			const active = this._drag.active;
-			const from = this._drag.from;
-			const gap = this._drag.gap;
-			this._drag.ghost?.destroy();
-			try {
-				this._headerScrollEl?.releasePointerCapture(ev.pointerId);
-			} catch {}
-			window.removeEventListener(`pointermove`, onMove);
-			window.removeEventListener(`pointerup`, onUp);
-			window.removeEventListener(`pointercancel`, onUp);
-			this._drag = null;
-			this.requestUpdate();
-			if (active && gap !== void 0 && gap !== from) this._onReorderDrag(from, gap);
-		};
-		window.addEventListener(`pointermove`, onMove);
-		window.addEventListener(`pointerup`, onUp);
-		window.addEventListener(`pointercancel`, onUp);
-	}
-	_onReorderDrag(fromIdx, toIdx) {
-		if (fromIdx === toIdx) return;
-		const cols = [...this.columns];
-		const vis = cols.filter((c) => c.visible !== false);
-		const hidden = cols.filter((c) => c.visible === false);
-		const [moved] = vis.splice(fromIdx, 1);
-		vis.splice(toIdx, 0, moved);
-		this.columns = [...vis, ...hidden];
-		this.dispatchEvent(new CustomEvent(`datagrid-column-reorder`, {
-			detail: {
-				from: fromIdx,
-				to: toIdx,
-				columns: [...this.columns]
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_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 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;
-	}
-	_getRowForKey(key) {
-		return this._flat.find((f) => f.key === key)?.row;
-	}
-	/** The selected row keys (read-only). */
-	get selectedKeys() {
-		return this._selectedKeys;
-	}
-	/** Replace the selection with these row keys (clamped to known rows). */
-	set selectedKeys(keys) {
-		this.selectKeys(keys);
-	}
-	/**
-	* Replace the selection with the given row keys. Unknown keys are dropped;
-	* in a single-select mode only the last surviving key is kept;
-	* `selectionMode="none"` clears. Fires `datagrid-select` with the previous
-	* 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)));
-		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) {
-			const last = [...next].at(-1);
-			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
-		}
-		const prev = new Set(this._selectedKeys);
-		if (prev.size === next.size && [...next].every((k) => prev.has(k))) return;
-		this._selectedKeys = next;
-		this._anchorKey = [...next].at(-1);
-		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
-			detail: {
-				selectedKeys: new Set(next),
-				previous: prev
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	/** The row key under the cursor, or `undefined`. */
-	get tickledKey() {
-		return this._tickled.tickledId;
-	}
-	/** Move the cursor to this row key and scroll it into view. */
-	tickleRow(key) {
-		if (!this._flatKeys.includes(key)) return;
-		this._tickled.focus(key);
-		this._scrollRowIntoView(key);
-	}
-	/**
-	* Append rows without the full O(n log n) rebuild that reassigning `rows`
-	* incurs. `rows` still gets a new array reference (reactivity is preserved),
-	* but the derived arrays are extended over the appended slice only. When a
-	* sort is active the new rows show unsorted for one frame, then a single
-	* coalesced re-sort runs. Scroll position, selection and cursor are kept.
-	*/
-	appendRows(rows) {
-		if (rows.length === 0) return;
-		const startIdx = this.rows.length;
-		this.#appendInProgress = true;
-		this.rows = [...this.rows, ...rows];
-		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.#appendToFlat(appended, startIdx);
-		this.#appendInProgress = false;
-		this.requestUpdate();
-		if (this.sortState != null) {
-			cancelAnimationFrame(this.#resortRaf);
-			this.#resortRaf = requestAnimationFrame(() => {
-				this._sortedRows = this._applySort([...this.rows]);
-				this._rebuildFlat();
-				this.requestUpdate();
-			});
-		}
-	}
-	#appendToFlat(appended, startIdx) {
-		if (this.groupBy) {
-			this._rebuildFlat();
-			return;
-		}
-		for (let j = 0; j < appended.length; j++) {
-			const idx = startIdx + j;
-			const key = this.getRowKey(appended[j], idx);
-			this._flat.push({
-				type: `row`,
-				key,
-				row: appended[j],
-				idx
-			});
-			this._flatKeys.push(key);
-		}
-	}
-	_replaceSelection(key) {
-		if (this.selectionMode === `none`) return;
-		const prev = new Set(this._selectedKeys);
-		if (this.groupBy && !this.crossGroupSelection) {
-			const g = this._getGroupKey(this._getRowForKey(key) ?? { key });
-			[...prev].filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === g);
-			this._selectedKeys = /* @__PURE__ */ new Set([key]);
-		} else this._selectedKeys = /* @__PURE__ */ new Set([key]);
-		this._anchorKey = key;
-		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
-			detail: {
-				selectedKeys: new Set(this._selectedKeys),
-				previous: prev
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_toggleSelection(key) {
-		const prev = new Set(this._selectedKeys);
-		const next = new Set(this._selectedKeys);
-		if (next.has(key)) next.delete(key);
-		else {
-			if (this.groupBy && !this.crossGroupSelection) {
-				const g = this._getGroupKey(this._getRowForKey(key) ?? { key });
-				for (const k of [...next]) if (this._getGroupKey(this._getRowForKey(k) ?? { key: k }) !== g) next.delete(k);
-			}
-			if (this.selectionMode !== `multiple` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) next.clear();
-			next.add(key);
-		}
-		this._selectedKeys = next;
-		this._anchorKey = key;
-		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
-			detail: {
-				selectedKeys: new Set(this._selectedKeys),
-				previous: prev
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_rangeSelectTo(key) {
-		if (!this._anchorKey) {
-			this._replaceSelection(key);
-			return;
-		}
-		const keys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
-		const a = keys.indexOf(this._anchorKey);
-		const b = keys.indexOf(key);
-		if (a < 0 || b < 0) {
-			this._replaceSelection(key);
-			return;
-		}
-		if (this.groupBy && !this.crossGroupSelection) {
-			const anchorGroup = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
-			if (anchorGroup !== this._getGroupKey(this._getRowForKey(key) ?? { key })) {
-				this._replaceSelection(key);
-				return;
-			}
-			const groupKeys = keys.filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === anchorGroup);
-			const ga = groupKeys.indexOf(this._anchorKey);
-			const gb = groupKeys.indexOf(key);
-			if (ga < 0 || gb < 0) {
-				this._replaceSelection(key);
-				return;
-			}
-			const lo = Math.min(ga, gb);
-			const hi = Math.max(ga, gb);
-			const prev = new Set(this._selectedKeys);
-			this._selectedKeys = new Set(groupKeys.slice(lo, hi + 1));
-			this.dispatchEvent(new CustomEvent(`datagrid-select`, {
-				detail: {
-					selectedKeys: new Set(this._selectedKeys),
-					previous: prev
-				},
-				bubbles: true,
-				composed: true
-			}));
-			return;
-		}
-		const lo = Math.min(a, b);
-		const hi = Math.max(a, b);
-		const prev = new Set(this._selectedKeys);
-		this._selectedKeys = new Set(keys.slice(lo, hi + 1));
-		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
-			detail: {
-				selectedKeys: new Set(this._selectedKeys),
-				previous: prev
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_isEditable(row, col) {
-		if (this.editability === `disabled`) return false;
-		if (typeof this.editable === `function`) return this.editable(row, col);
-		if (this.editable === true) return col.editable !== false;
-		return !!col.editable;
-	}
-	_isTextEditor(col) {
-		const e = col.editor;
-		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));
-		return this._editing?.rowKey === rowKey && this._editing?.colKey === colKey;
-	}
-	_activateRow(rowKey, row, rowIndex) {
-		this.dispatchEvent(new CustomEvent(`datagrid-row-activate`, {
-			detail: {
-				rowKey,
-				row,
-				rowIndex
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_startEdit(rowKey, colKey) {
-		if (this.editability === `disabled`) return;
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
-		if (!row) return;
-		const col = this.columns.find((c) => c.key === colKey);
-		if (!col || !this._isEditable(row, col)) return;
-		this._editing = {
-			rowKey,
-			colKey
-		};
-		this._editingRow = null;
-		this._editValue = row[colKey];
-	}
-	/** Programmatic: put a single cell in edit mode. Works in manual/user/immediate (no-op if disabled or not editable). */
-	startEdit(rowKey, colKey) {
-		this._startEdit(rowKey, colKey);
-	}
-	/** 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;
-		this._editing = null;
-		this._editingRow = rowKey;
-		this.requestUpdate();
-	}
-	stopEdit() {
-		this._editing = null;
-		this._editingRow = null;
-	}
-	setColumnFormatter(columnKey, formatter, options) {
-		if (!formatter) {
-			this._columnFormatters.delete(columnKey);
-			this.requestUpdate();
-			return;
-		}
-		if (typeof formatter === `string`) {
-			const digits = options?.digits ?? (formatter === `integer` ? 0 : 2);
-			if (formatter === `fixed`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? v.toFixed(digits) : String(v ?? ``));
-			else if (formatter === `percentage`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? `${v.toFixed(digits)}%` : String(v ?? ``));
-			else if (formatter === `integer`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? Math.round(v).toString() : String(v ?? ``));
-		} else this._columnFormatters.set(columnKey, formatter);
-		this.requestUpdate();
-	}
-	_formatValue(value, col, row) {
-		const perCol = this._columnFormatters.get(col.key);
-		if (perCol) return perCol(value);
-		if (col.formatter) return col.formatter(value, row, col);
-		if (this.globalFormatter) return this.globalFormatter(value, col.key, row);
-		return value;
-	}
-	/**
-	* Resolve the per-row appearance for the cell at `colKey`, honouring the
-	* nominated columns. Additive — `col.renderer` / `col.formatter` still own
-	* the cell's value; this only decorates it. Returns all-`undefined` for
-	* every cell when nothing is nominated (the common case).
-	*/
-	_cellLook(row, colKey) {
-		if (this.textColorColumn === `` && this.iconColumn === `` && this.badgeColumn === ``) return EMPTY_CELL_LOOK;
-		const rec = typeof row === `object` && row !== null ? row : {};
-		const textColor = colKey === this.textColorColumn ? appearanceColor(rec.textColor) : void 0;
-		const icon = colKey === this.iconColumn && !appearanceAbsent(rec.icon) ? rec.icon : void 0;
-		const iconColor = icon === void 0 ? void 0 : appearanceColor(rec.iconColor);
-		const badge = colKey === this.badgeColumn && !appearanceAbsent(rec.badge) ? rec.badge : void 0;
-		if (textColor === void 0 && icon === void 0 && badge === void 0) return EMPTY_CELL_LOOK;
-		return {
-			textColor,
-			icon,
-			iconColor,
-			badge
-		};
-	}
-	_handleCellSecondClick(rowKey, col) {
-		if (this.editability !== `user`) return;
-		const now = Date.now();
-		if (this._lastClick && this._lastClick.key === rowKey && this._lastClick.col === col.key && now - this._lastClick.time < 700 && now - this._lastClick.time > 150) {
-			this._startEdit(rowKey, col.key);
-			this._lastClick = null;
-		} else this._lastClick = {
-			key: rowKey,
-			col: col.key,
-			time: now
-		};
-	}
-	_commitEdit(fromImmediate = false) {
-		if (!this._editing && !fromImmediate) return;
-		const target = this._editing;
-		if (!target) return;
-		const { rowKey, colKey } = target;
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
-		if (!row) {
-			this._editing = null;
-			return;
-		}
-		const oldValue = row[colKey];
-		const newValue = this._editValue;
-		const col = this.columns.find((c) => c.key === colKey);
-		if (col?.editor && typeof col.editor === `function`) {} else {
-			row[colKey] = newValue;
-			this.rows = [...this.rows];
-		}
-		this._editing = null;
-		this.dispatchEvent(new CustomEvent(`datagrid-cell-edit`, {
-			detail: {
-				rowKey,
-				colKey,
-				oldValue,
-				newValue
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_tabToNext(rowKey, curColKey, dir) {
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
-		if (!row) return;
-		const cols = this._visibleColumns;
-		let next = cols.findIndex((c) => c.key === curColKey) + dir;
-		while (next >= 0 && next < cols.length) {
-			if (this._isEditable(row, cols[next])) {
-				if (this._editing) this._commitEdit();
-				this._suppressBlurCommit = true;
-				this._startEdit(rowKey, cols[next].key);
-				requestAnimationFrame(() => {
-					this._suppressBlurCommit = false;
-				});
-				return;
-			}
-			next += dir;
-		}
-		if (this._editing) this._commitEdit();
-		this._editing = null;
-		this.requestUpdate();
-	}
-	_commitImmediate(rowKey, colKey, value) {
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
-		if (!row) return;
-		const oldValue = row[colKey];
-		if (oldValue === value) return;
-		row[colKey] = value;
-		this.rows = [...this.rows];
-		this.dispatchEvent(new CustomEvent(`datagrid-cell-edit`, {
-			detail: {
-				rowKey,
-				colKey,
-				oldValue,
-				newValue: value
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	/**
-	* Measure the width a column would need to show its header label and every
-	* row's (formatted) value without truncation, clamped to `minWidth`/`maxWidth`.
-	* Values are measured from their formatted string via canvas `measureText` -
-	* accurate for plain text, an estimate for anything else.
-	*/
-	_measureAutoWidth(col) {
-		const cs = getComputedStyle(this);
-		const font = `${cs.fontSize} ${cs.fontFamily}`;
-		const ctx = document.createElement(`canvas`).getContext(`2d`);
-		const cellPad = 24;
-		const headerExtra = 40;
-		const measure = (text) => {
-			if (!ctx) return text.length * 8;
-			ctx.font = font;
-			return Math.ceil(ctx.measureText(text).width);
-		};
-		let maxW = measure(col.label) + headerExtra;
-		for (const r of this.rows) {
-			const v = r[col.key];
-			if (v === null || v === void 0 || v === ``) continue;
-			const w = measure(String(this._formatValue(v, col, r))) + cellPad;
-			if (w > maxW) maxW = w;
-		}
-		const min = col.minWidth ?? 40;
-		const max = col.maxWidth ?? 600;
-		return Math.max(min, Math.min(max, maxW));
-	}
-	_autoSizeColumn(col) {
-		const w = this._measureAutoWidth(col);
-		col.width = w;
-		this.requestUpdate();
-		this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
-			detail: {
-				key: col.key,
-				width: w
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	/**
-	* Resize a single column, by key, to fit its contents (header label + every
-	* row's formatted value), animating the width change smoothly. Only works
-	* for plain columns - one with a custom `renderer` can't be measured
-	* reliably from its raw value, so it's left untouched. Returns `false` (and
-	* does nothing) if the column doesn't exist, isn't resizable, or has a
-	* `renderer`.
-	*/
-	autoSizeColumn(key) {
-		const col = this.columns.find((c) => c.key === key);
-		if (!col || col.resizable === false || col.renderer) return false;
-		const target = this._measureAutoWidth(col);
-		if ((col.width ?? 150) === target) return true;
-		this._animatingColKeys = new Set(this._animatingColKeys).add(key);
-		requestAnimationFrame(() => {
-			col.width = target;
-			this.requestUpdate();
-			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
-				detail: {
-					key,
-					width: target
-				},
-				bubbles: true,
-				composed: true
-			}));
-			window.setTimeout(() => {
-				const next = new Set(this._animatingColKeys);
-				next.delete(key);
-				this._animatingColKeys = next;
-			}, this._columnResizeAnimationMs());
-		});
-		return true;
-	}
-	_columnResizeAnimationMs() {
-		const raw = getComputedStyle(this).getPropertyValue(`--data-grid-column-resize-duration`).trim();
-		const ms = raw.endsWith(`ms`) ? Number.parseFloat(raw) : raw.endsWith(`s`) ? Number.parseFloat(raw) * 1e3 : Number.parseFloat(raw);
-		return (Number.isFinite(ms) && ms > 0 ? ms : 180) + 30;
-	}
-	_onResizePointerDown(e, col) {
-		e.preventDefault();
-		e.stopPropagation();
-		const startX = e.clientX;
-		const startW = col.width ?? 150;
-		this._resizingColKey = col.key;
-		const onMove = (ev) => {
-			col.width = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
-			this.requestUpdate();
-		};
-		const onUp = (ev) => {
-			window.removeEventListener(`pointermove`, onMove);
-			window.removeEventListener(`pointerup`, onUp);
-			this._resizingColKey = void 0;
-			const w = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
-			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
-				detail: {
-					key: col.key,
-					width: w
-				},
-				bubbles: true,
-				composed: true
-			}));
-		};
-		window.addEventListener(`pointermove`, onMove);
-		window.addEventListener(`pointerup`, onUp);
-	}
-	getVisibleRange() {
-		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),
-			startCol: this._findFirstVisibleCol(this._scrollLeft),
-			endCol: this._findLastVisibleCol(this._scrollLeft + this._viewportW)
-		};
-	}
-	/** Row keys currently within the windowed/visible range, in display order. */
-	renderedKeys() {
-		const { startRow, endRow } = this.getVisibleRange();
-		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
-	}
-	/**
-	* Row keys strictly intersecting the viewport (no overscan), mirroring
-	* `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);
-	}
-	/** Coalesce viewport-change dispatches to at most one per animation frame. */
-	#scheduleViewportChangeEmit() {
-		if (this.#viewportChangeRaf !== 0) return;
-		this.#viewportChangeRaf = requestAnimationFrame(() => {
-			this.#viewportChangeRaf = 0;
-			this.#emitViewportChangeIfChanged();
-		});
-	}
-	/**
-	* Dispatch `datagrid-viewport-change` with the current key sets — unless
-	* neither set changed since the last dispatch, so coalesced frames and
-	* no-op scrolls stay silent.
-	*/
-	#emitViewportChangeIfChanged() {
-		const renderedKeys = this.renderedKeys();
-		const visibleKeys = this.#visibleKeys();
-		if (sameKeys(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys(this.#lastViewportVisibleKeys, visibleKeys)) return;
-		this.#lastViewportRenderedKeys = renderedKeys;
-		this.#lastViewportVisibleKeys = visibleKeys;
-		this.dispatchEvent(new CustomEvent(`datagrid-viewport-change`, {
-			detail: {
-				renderedKeys,
-				visibleKeys
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_findFirstVisibleCol(scrollLeft) {
-		let lo = 0;
-		let hi = this._colOffsets.length - 1;
-		let ans = 0;
-		while (lo <= hi) {
-			const mid = lo + hi >> 1;
-			if (this._colOffsets[mid] <= scrollLeft) {
-				ans = mid;
-				lo = mid + 1;
-			} else hi = mid - 1;
-		}
-		return ans;
-	}
-	_findLastVisibleCol(right) {
-		for (let i = 0; i < this._colOffsets.length; i++) if (this._colOffsets[i] > right) return i;
-		return this._colOffsets.length;
-	}
-	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 showCheckbox = this.interactionMode === `checked`;
-		return html`
-      <div class="grid">
-        <div class="header-bar">
-          <div class="header-scroll scroll-fade-x">
-            ${showCheckbox ? html`<div class="header-cell checkbox-col"></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}
-                @click=${(e) => this._onHeaderClick(col, e)}
-                @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
-                ${col.reorderable !== false ? html`<span class="reorder-handle" draggable="false"
-                  @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
-                ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>` : nothing}
-                <span class="header-label" @pointerup=${(e) => this._onHeaderPointerUp(col, e)}>${col.label}</span>
-                ${this.sortState?.key === col.key ? html`<span class="sort-icon"><ixfx-icon name=${this.sortState.direction === `asc` ? `chevron-up` : `chevron-down`} size="12"></ixfx-icon></span>` : nothing}
-                ${col.button !== false ? html`<span class="col-button" @click=${(e) => this._onColButtonClick(col, e)}><ixfx-icon name=${col.button && typeof col.button === `object` && col.button.icon ? col.button.icon : this.columnButtonIcon} size="14"></ixfx-icon></span>` : nothing}
-                ${col.resizable !== false ? html`<span class="resize-handle" ?data-active=${this._resizingColKey === col.key} @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
-			e.preventDefault();
-			e.stopPropagation();
-			this._autoSizeColumn(col);
-		}}></span>` : nothing}
-              </div>
-            `)}
-            ${this._drag?.active && this._drag.gap !== void 0 ? html`<div class="drop-caret" style="left:${(() => {
-			const gap = this._drag.gap;
-			if (gap < this._colOffsets.length) return this._colOffsets[gap];
-			const last = this._colOffsets.length - 1;
-			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
-		})()}px"></div>` : nothing}
-          </div>
-          ${this.columnMenu === `none` ? nothing : html`
-          <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
-			const cmd = e.detail.command;
-			const checked = e.detail.checked;
-			const value = e.detail.value;
-			if (cmd?.startsWith(`col:`)) {
-				const key = cmd.slice(4);
-				const col = this.columns.find((c) => c.key === key);
-				if (col) this._onVisibilityToggle(col, !!checked);
-				e.stopPropagation();
-				return;
-			}
-			if (cmd === `groupBy`) {
-				const v = value ?? ``;
-				this.groupBy = v || null;
-				this._collapsedGroups = /* @__PURE__ */ new Set();
-				this.dispatchEvent(new CustomEvent(`datagrid-group-change`, {
-					detail: { groupBy: this.groupBy },
-					bubbles: true,
-					composed: true
-				}));
-				e.stopPropagation();
-			}
-		}}>
-            <ixfx-menu-container slot="menu">
-              <ixfx-menu-header label="Columns"></ixfx-menu-header>
-              ${repeat(this.columns, (c) => c.key, (col) => html`
-                <ixfx-menu-check-item command="col:${col.key}" label=${col.label} ?checked=${col.visible !== false}></ixfx-menu-check-item>
-              `)}
-              ${this.allowGrouping ? html`
-                <ixfx-menu-separator></ixfx-menu-separator>
-                <ixfx-menu-header label="Group by"></ixfx-menu-header>
-                <ixfx-menu-radio-group name="groupBy" value=${typeof this.groupBy === `string` ? this.groupBy : ``}>
-                  <ixfx-menu-radio-item value="" label="None"></ixfx-menu-radio-item>
-                  ${this.columns.filter((c) => c.groupable !== false && (!this.groupableColumns || this.groupableColumns.includes(c.key))).map((col) => html`
-                    <ixfx-menu-radio-item value=${col.key} label=${col.label}></ixfx-menu-radio-item>
-                  `)}
-                </ixfx-menu-radio-group>
-              ` : nothing}
-            </ixfx-menu-container>
-          </ixfx-menu-trigger>`}
-        </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;
-			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>`;
-			}
-			const row = entry.row;
-			const absIdx2 = entry.idx;
-			const rowKey = entry.key;
-			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"
-                  data-key=${rowKey}
-                  draggable=${this.#nativeDrag.draggableAttr}
-                  @click=${(e) => {
-				this._onRowClick(rowKey, null, e);
-				this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
-					detail: {
-						rowKey,
-						colKey: ``,
-						rowIndex: absIdx2,
-						colIndex: -1
-					},
-					bubbles: true,
-					composed: true
-				}));
-			}}
-                  @pointerenter=${() => this._tickled.handlePointerEnter(rowKey)}
-                  @pointerleave=${() => this._tickled.clearTickled()}
-                  @dblclick=${() => {
-				if (this._visibleColumns[0] && this._isEditable(row, this._visibleColumns[0])) this._startEdit(rowKey, this._visibleColumns[0].key);
-				else this._activateRow(rowKey, row, absIdx2);
-			}}>
-                  ${showCheckbox ? html`<div class="checkbox-col"><input type="checkbox" .checked=${selected} @click=${(e) => this._onCheckboxClick(rowKey, e)} /></div>` : nothing}
-                  ${repeat(this._visibleColumns, (c) => c.key, (col) => {
-				const val = row[col.key];
-				if (this._isCellEditing(rowKey, col.key)) {
-					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) => {
-						const v = e.target.checked;
-						if (immediate) this._commitImmediate(rowKey, col.key, v);
-						else {
-							this._editValue = v;
-							this._commitEdit();
-						}
-					}} /></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) => {
-							const v = e.target.value;
-							if (immediate) this._commitImmediate(rowKey, col.key, v);
-							else {
-								this._editValue = v;
-								this._commitEdit();
-							}
-						}} @keydown=${(e) => {
-							if (e.key === `Tab`) {
-								e.preventDefault();
-								e.stopPropagation();
-								this._tabToNext(rowKey, col.key, e.shiftKey ? -1 : 1);
-							}
-							if (e.key === `Escape`) {
-								this._editing = null;
-								this._editingRow = null;
-							}
-						}} @blur=${() => {
-							if (this._suppressBlurCommit) return;
-							if (!immediate) this._commitEdit();
-						}}><option value=""></option>${opts.map((o) => {
-							const v = typeof o === `string` ? o : o.value;
-							const l = typeof o === `string` ? o : o.label;
-							return html`<option value=${v} ?selected=${String(curVal) === v}>${l}</option>`;
-						})}</select></div>`;
-					}
-					if (typeof col.editor === `function`) {
-						const factory = col.editor;
-						const ctx = {
-							row,
-							column: col,
-							rowIndex: absIdx2,
-							colIndex: 0,
-							value: curVal,
-							commit: (v) => {
-								if (immediate) this._commitImmediate(rowKey, col.key, v);
-								else {
-									this._editValue = v;
-									this._commitEdit();
-								}
-							},
-							cancel: () => {
-								this._editing = null;
-								this._editingRow = null;
-							}
-						};
-						return html`<div class="cell" 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) => {
-						if (e.key === `Enter`) this._commitEdit();
-						if (e.key === `Escape`) {
-							this._editing = null;
-							this._editingRow = null;
-						}
-						if (e.key === `Tab`) {
-							e.preventDefault();
-							e.stopPropagation();
-							this._tabToNext(rowKey, col.key, e.shiftKey ? -1 : 1);
-						}
-					}} @blur=${() => {
-						if (this._suppressBlurCommit) return;
-						if (!immediate) this._commitEdit();
-					}} autofocus /></div>`;
-				}
-				const displayVal = this._formatValue(val, col, row);
-				const rendered = col.renderer ? col.renderer(row, col, absIdx2) : displayVal;
-				const cellContent = col.renderer ? rendered : displayVal;
-				const textEditable = this._isEditable(row, col) && this._isTextEditor(col);
-				const indent = col.align !== `right` && col.align !== `center` && col.reorderable !== false ? `padding-left:calc(var(--space-s) + var(--data-grid-reorder-handle-width, 10px) + var(--space-xs));` : ``;
-				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}"
-                      @click=${(e) => {
-					this._lastClickedCell = {
-						rowKey,
-						colKey: col.key
-					};
-					if (col.selectable !== false) {
-						e.stopPropagation();
-						this._onRowClick(rowKey, col, e);
-						this._handleCellSecondClick(rowKey, col);
-					}
-					this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
-						detail: {
-							rowKey,
-							colKey: col.key,
-							rowIndex: absIdx2,
-							colIndex: this.columns.indexOf(col)
-						},
-						bubbles: true,
-						composed: true
-					}));
-				}}
-                    >${look.icon === void 0 ? nothing : html`<span class="cell-icon" part="icon" style=${look.iconColor === void 0 ? nothing : `color:${look.iconColor}`}>${look.icon}</span>`}${canPan ? html`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}${look.badge === void 0 ? nothing : html`<span class="cell-badge" part="badge">${look.badge}</span>`}</div>`;
-			})}
-                </div>
-              `;
-		})}
-          </div>
-        </div>
-        ${this.search.renderField()}
-      </div>
-    `;
-	}
-};
-__decorate([property({ type: Array })], DataGridElement.prototype, "columns", void 0);
-__decorate([property({ type: Array })], DataGridElement.prototype, "rows", void 0);
-__decorate([property({
-	type: String,
-	attribute: `selection-mode`
-})], DataGridElement.prototype, "selectionMode", void 0);
-__decorate([property({
-	type: String,
-	attribute: `interaction-mode`
-})], DataGridElement.prototype, "interactionMode", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "sortState", void 0);
-__decorate([property({
-	type: Number,
-	attribute: `row-height`
-})], DataGridElement.prototype, "rowHeight", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "getRowKey", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "checkboxRenderer", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "editable", void 0);
-__decorate([property({
-	type: String,
-	reflect: true
-})], DataGridElement.prototype, "editability", void 0);
-__decorate([property({
-	type: String,
-	attribute: `cell-overflow`
-})], DataGridElement.prototype, "cellOverflow", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `zebra-stripes`,
-	reflect: true
-})], DataGridElement.prototype, "zebraStripes", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "groupBy", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `allow-grouping`
-})], DataGridElement.prototype, "allowGrouping", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "groupLabel", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "groupableColumns", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `cross-group-selection`,
-	reflect: true
-})], DataGridElement.prototype, "crossGroupSelection", void 0);
-__decorate([property({
-	type: String,
-	attribute: `column-menu`
-})], DataGridElement.prototype, "columnMenu", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
-__decorate([property({
-	type: String,
-	attribute: `text-color-column`
-})], DataGridElement.prototype, "textColorColumn", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-column`
-})], DataGridElement.prototype, "iconColumn", void 0);
-__decorate([property({
-	type: String,
-	attribute: `badge-column`
-})], DataGridElement.prototype, "badgeColumn", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
-__decorate([property({
-	type: String,
-	attribute: `search-modes`,
-	reflect: true
-})], DataGridElement.prototype, "searchModes", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `items-draggable`,
-	reflect: true
-})], DataGridElement.prototype, "itemsDraggable", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewRenderer", void 0);
-__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewSource", void 0);
-__decorate([property({
-	type: String,
-	attribute: `column-button-icon`
-})], DataGridElement.prototype, "columnButtonIcon", void 0);
-__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);
-__decorate([state()], DataGridElement.prototype, "_editing", void 0);
-__decorate([state()], DataGridElement.prototype, "_editingRow", void 0);
-__decorate([state()], DataGridElement.prototype, "_lastClick", void 0);
-__decorate([state()], DataGridElement.prototype, "_lastClickedCell", void 0);
-__decorate([state()], DataGridElement.prototype, "_editValue", void 0);
-__decorate([query(`.viewport`)], DataGridElement.prototype, "_viewportEl", void 0);
-__decorate([query(`.header-scroll`)], DataGridElement.prototype, "_headerScrollEl", void 0);
-DataGridElement = __decorate([safeCustomElement(`ixfx-data-grid`)], DataGridElement);
-//#endregion
+import { t as DataGridElement } from "./data-grid-FHr7wZ_k.js";
 export { DataGridElement };
-
-//# sourceMappingURL=data-grid.js.map