@ixfx/components 0.7.2 → 0.7.4

package/bundle/index.js

@@ -8,8 +8,9 @@ import { createCommandRegistry } from "@clinth/ui-commands";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
-import { Easings } from "@ixfx/modulation";
+import { createRef, ref } from "lit/directives/ref.js";
 import { classMap } from "lit/directives/class-map.js";
+import { Easings } from "@ixfx/modulation";
 import "@clinth/vcanvas";
 import { keyed } from "lit/directives/keyed.js";
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
@@ -752,6 +753,21 @@ var TickledController = class TickledController {
 		return this._tickledId;
 	}
 	/**
+	* The item currently under the cursor, or `undefined`. Alias of `tickledId`
+	* for parity with other controllers.
+	*/
+	get current() {
+		return this._tickledId;
+	}
+	/**
+	* Move the cursor programmatically (e.g. to reveal a match or re-seat it
+	* after the item set changed). Does not change the input mode. Alias of
+	* `setTickled`.
+	*/
+	focus(id) {
+		this.setTickled(id);
+	}
+	/**
 	* Check if a specific item is tickled
 	*/
 	isTickled(id) {
@@ -3861,6 +3877,188 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/keyed-list.ts
+/**
+* Helpers for key-based selection on the Element-flavoured list components
+* (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-grid-list`).
+*
+* A "key" is a stable string the host puts on each item element — `data-key`
+* (preferred) or `data-value`. It survives the host rebuilding the item set
+* (re-fetch, re-sort, filter) where raw `Element` references do not.
+*/
+/**
+* The stable key for an item element: `data-key`, then `data-value`, else
+* `undefined`.
+*/
+function keyForElement(el) {
+	return el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? void 0;
+}
+/**
+* A lazily-built key → element index over a container. Rebuilt on first use
+* and after any child-list mutation under `root`; `invalidate()` forces a
+* rebuild on the next `get()`.
+*
+* ```ts
+* #keyIndex = new KeyedElementIndex(this);
+* // ...
+* const el = this.#keyIndex.get(`row-42`);
+* // on disconnect:
+* this.#keyIndex.dispose();
+* ```
+*/
+var KeyedElementIndex = class {
+	#root;
+	#selector;
+	#map = /* @__PURE__ */ new Map();
+	#dirty = true;
+	#observer;
+	/**
+	* @param root Container whose descendants are indexed.
+	* @param itemSelector Which descendants count as items (default: any `[data-key]`).
+	*/
+	constructor(root, itemSelector = `[data-key]`) {
+		this.#root = root;
+		this.#selector = itemSelector;
+		this.#observer = new MutationObserver(() => {
+			this.#dirty = true;
+		});
+		this.#observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+	}
+	/** The element with this key, or `undefined`. First match wins on duplicates. */
+	get(key) {
+		if (this.#dirty) this.#rebuild();
+		return this.#map.get(key);
+	}
+	/** Force a rebuild on the next `get()` — e.g. after a `data-key` attribute change. */
+	invalidate() {
+		this.#dirty = true;
+	}
+	/** Stop observing and drop the cache. */
+	dispose() {
+		this.#observer.disconnect();
+		this.#map.clear();
+	}
+	#rebuild() {
+		this.#map.clear();
+		for (const el of this.#root.querySelectorAll(this.#selector)) {
+			const key = keyForElement(el);
+			if (key !== void 0 && !this.#map.has(key)) this.#map.set(key, el);
+		}
+		this.#dirty = false;
+	}
+};
+//#endregion
+//#region src/interaction/list-item-animation.ts
+/**
+* Shared insertion / removal animation for the list & tree components.
+*
+* Two flavours, because the components split into two layout families:
+*
+* - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —
+*   rows sit in normal flow, so a new row can collapse in from zero height and a
+*   leaving row can collapse back to zero, and the rows around it slide to make
+*   or close the gap for free. Use {@link animateListItemIn} /
+*   {@link animateListItemOut} (Web Animations API, exact measured sizes).
+*
+* - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are
+*   absolutely positioned (`transform` / `top`), so collapsing a row's box moves
+*   nothing. Those components instead fade the entering / leaving row with the
+*   {@link listItemFadeKeyframes} keyframes and slide the survivors by
+*   transitioning their position for a short window after the change.
+*
+* Everything here is a no-op under `prefers-reduced-motion: reduce`.
+*/
+/** Default duration (ms) for both flavours; overridable per call / per component. */
+const LIST_ITEM_MOTION_MS = 200;
+function prefersReducedMotion() {
+	return typeof window !== `undefined` && typeof window.matchMedia === `function` && window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+}
+/**
+* Opacity keyframes for the virtualised components. Each one adds its own
+* one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to
+* these, plus a `prefers-reduced-motion` guard on its own selectors.
+*/
+const listItemFadeKeyframes = i$3`
+  @keyframes ixfx-list-item-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes ixfx-list-item-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+`;
+function measure(el, axis) {
+	const rect = el.getBoundingClientRect();
+	return axis === `inline` ? rect.width : rect.height;
+}
+function resolveDuration(el, explicit) {
+	if (explicit !== void 0) return explicit;
+	const raw = getComputedStyle(el).getPropertyValue(`--ixfx-list-item-move-duration`).trim();
+	if (raw) {
+		const n = Number.parseFloat(raw);
+		if (!Number.isNaN(n)) return raw.endsWith(`ms`) ? n : raw.endsWith(`s`) ? n * 1e3 : n;
+	}
+	return 200;
+}
+function collapsedFrame(axis) {
+	const prop = axis === `inline` ? `width` : `height`;
+	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
+	return {
+		[prop]: `0px`,
+		[minProp]: `0px`,
+		opacity: 0,
+		overflow: `hidden`
+	};
+}
+function fullFrame(size, axis) {
+	const prop = axis === `inline` ? `width` : `height`;
+	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
+	return {
+		[prop]: `${size}px`,
+		[minProp]: `0px`,
+		opacity: 1,
+		overflow: `hidden`
+	};
+}
+/**
+* Collapse + fade `el` in from nothing to its natural size. Call it just after
+* the element has been inserted (it must already be laid out at full size so it
+* can be measured). No-op under reduced motion.
+*/
+function animateListItemIn(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
+	const { axis = `block`, easing = `ease` } = options;
+	const duration = resolveDuration(el, options.duration);
+	const size = measure(el, axis);
+	if (size <= 0) return void 0;
+	return el.animate([collapsedFrame(axis), fullFrame(size, axis)], {
+		duration,
+		easing
+	});
+}
+/**
+* Collapse + fade `el` out. Resolves once the animation finishes (or straight
+* away under reduced motion); the caller detaches the element after. The final
+* collapsed state is held (`fill: forwards`) so there's no flash back to full
+* size in the gap before removal.
+*/
+function animateListItemOut(el, options = {}) {
+	if (prefersReducedMotion()) return Promise.resolve();
+	const { axis = `block`, easing = `ease` } = options;
+	const duration = resolveDuration(el, options.duration);
+	const size = measure(el, axis);
+	if (size <= 0) return Promise.resolve();
+	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
+		duration,
+		easing,
+		fill: `forwards`
+	}).finished.then(() => void 0, () => void 0);
+}
+//#endregion
 //#region src/interaction/list-selection-controller.ts
 /** Whether the interaction mode allows building a multi-item selection. */
 function isMultiMode(mode) {
@@ -3901,6 +4099,20 @@ var ListSelectionController = class {
 	get selected() {
 		return this.#selected;
 	}
+	/**
+	* The current selection as stable string keys (read-only). Empty unless a
+	* `getKey` was supplied in config. Items whose `getKey` returns `undefined`
+	* are omitted.
+	*/
+	get selectedKeys() {
+		const getKey = this.#config.getKey;
+		const out = /* @__PURE__ */ new Set();
+		if (getKey) for (const item of this.#selected) {
+			const key = getKey(item);
+			if (key !== void 0) out.add(key);
+		}
+		return out;
+	}
 	/** Anchor for range (shift) selection — the last plainly-selected item. */
 	get anchor() {
 		return this.#anchor;
@@ -3984,6 +4196,66 @@ var ListSelectionController = class {
 		next.delete(item);
 		this.#apply(next);
 	}
+	/**
+	* Whether the current modes permit a selection of more than one item.
+	* Stricter than `canSelectMultiple()`: `standard` / `implicit` only count
+	* as multi when `selectionMode="multiple"`.
+	*/
+	#effectiveMulti() {
+		const { selectionMode, interactionMode } = this.#config.getModes();
+		return selectionMode === `multiple` || interactionMode === `checked` || interactionMode === `sticky` || interactionMode === `vscode`;
+	}
+	/**
+	* Replace the selection with the items resolved from `keys`. Keys that
+	* `resolve` cannot map, or that resolve to a non-selectable item, are
+	* ignored. `selectionMode="none"` is a no-op. When multi-select is not
+	* available, only the last resolvable key is kept. `onChange` fires once.
+	*/
+	selectKeys(keys, resolve) {
+		if (this.#config.getModes().selectionMode === `none`) return;
+		let next = /* @__PURE__ */ new Set();
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && this.#config.isSelectable(item)) next.add(item);
+		}
+		if (!this.#effectiveMulti() && next.size > 1) {
+			const last = [...next].at(-1);
+			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
+		}
+		this.#anchor = [...next].at(-1);
+		this.#apply(next);
+	}
+	/**
+	* Add the items resolved from `keys` to the selection (multi-select only;
+	* a no-op otherwise). `onChange` fires once if anything changed.
+	*/
+	addKeys(keys, resolve) {
+		if (!this.#effectiveMulti()) return;
+		const next = new Set(this.#selected);
+		let changed = false;
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && !next.has(item) && this.#config.isSelectable(item)) {
+				next.add(item);
+				changed = true;
+			}
+		}
+		if (changed) this.#apply(next);
+	}
+	/**
+	* Remove the items resolved from `keys` from the selection. `onChange`
+	* fires once if anything changed.
+	*/
+	removeKeys(keys, resolve) {
+		if (this.#selected.size === 0) return;
+		const next = new Set(this.#selected);
+		let changed = false;
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && next.delete(item)) changed = true;
+		}
+		if (changed) this.#apply(next);
+	}
 	/** Route a click on `item` according to the current interaction mode. */
 	handleClick(item, gesture) {
 		const { selectionMode, interactionMode: mode } = this.#config.getModes();
@@ -4048,6 +4320,99 @@ var ListSelectionController = class {
 	}
 };
 //#endregion
+//#region src/interaction/tree-keyboard-controller.ts
+var TreeKeyboardNavController = class {
+	constructor(host, tickled, config) {
+		this.handleKeyDown = (event) => {
+			if (this.disableKeyboardNavigation()) return;
+			const { key } = event;
+			if ([
+				`ArrowDown`,
+				`ArrowUp`,
+				`ArrowLeft`,
+				`ArrowRight`,
+				`Enter`,
+				`Escape`
+			].includes(key)) this.tickled.setInputMode(`keyboard`);
+			switch (key) {
+				case `ArrowDown`:
+					event.preventDefault();
+					this.#handleArrowDown();
+					break;
+				case `ArrowUp`:
+					event.preventDefault();
+					this.#handleArrowUp();
+					break;
+				case `ArrowRight`:
+					event.preventDefault();
+					this.#handleArrowRight();
+					break;
+				case `ArrowLeft`:
+					event.preventDefault();
+					this.#handleArrowLeft();
+					break;
+				case `Enter`:
+					event.preventDefault();
+					this.#handleEnter();
+					break;
+				case `Escape`:
+					event.preventDefault();
+					this.callbacks.onEscape?.();
+			}
+		};
+		this.host = host;
+		this.tickled = tickled;
+		this.callbacks = config.callbacks;
+		this.disableKeyboardNavigation = config.disableKeyboardNavigation ?? (() => false);
+		host.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {}
+	#handleArrowDown() {
+		this.tickled.handleKeyboardNavigation(`next`);
+	}
+	#handleArrowUp() {
+		this.tickled.handleKeyboardNavigation(`previous`);
+	}
+	#handleArrowRight() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) return;
+		if (!this.callbacks.isExpanded(currentId)) {
+			this.callbacks.onExpand(currentId);
+			this.tickled.setTickled(currentId);
+		} else {
+			const items = this.callbacks.getItems();
+			const currentIdx = items.findIndex((item) => item.id === currentId);
+			if (currentIdx !== -1 && currentIdx + 1 < items.length) {
+				const nextItem = items[currentIdx + 1];
+				if (nextItem.enabled !== false) this.tickled.setTickled(nextItem.id);
+			}
+		}
+	}
+	#handleArrowLeft() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) {
+				this.tickled.setTickled(parentId);
+				if (this.callbacks.isExpanded(parentId)) this.callbacks.onCollapse(parentId);
+			}
+		} else if (this.callbacks.isExpanded(currentId)) this.callbacks.onCollapse(currentId);
+		else {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) this.tickled.setTickled(parentId);
+		}
+	}
+	#handleEnter() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		this.callbacks.onActivate(currentId);
+		this.callbacks.onSelect?.(currentId);
+	}
+};
+//#endregion
 //#region src/menu/menu-container.ts
 let MenuContainer = class MenuContainer extends i {
 	constructor(..._args) {
@@ -10018,8 +10383,8 @@ let MenuCheckItem = class MenuCheckItem extends i {
     }
 
     .check {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -10539,8 +10904,8 @@ let MenuRadioItem = class MenuRadioItem extends i {
     }
 
     .radio {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -10679,6 +11044,7 @@ let DataGridElement = class DataGridElement extends i {
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
+		this.columnMenu = `auto`;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
@@ -10701,10 +11067,16 @@ let DataGridElement = class DataGridElement extends i {
 		this._sortedRows = [];
 		this._flat = [];
 		this._flatKeys = [];
+		this.#prevFlatKeys = [];
+		this.#enteringRowKeys = /* @__PURE__ */ new Set();
+		this.#rowReflowTimer = 0;
+		this.#dataGridRenderedOnce = false;
 		this._visibleColumns = [];
 		this._colOffsets = [];
 		this._colWidthSum = 0;
 		this._raf = 0;
+		this.#appendInProgress = false;
+		this.#resortRaf = 0;
 		this._drag = null;
 		this._onFocusOut = (e) => {
 			if (this._suppressBlurCommit) return;
@@ -10899,6 +11271,7 @@ let DataGridElement = class DataGridElement extends i {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listItemFadeKeyframes,
 			i$3`
     :host {
       --data-grid-row-height: 28px;
@@ -10955,6 +11328,22 @@ let DataGridElement = class DataGridElement extends i {
     .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-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); }
+
+    /* 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);
@@ -10984,6 +11373,13 @@ let DataGridElement = class DataGridElement extends i {
   `
 		];
 	}
+	/** Row-key snapshot from the previous update, for the insertion / removal animation. */
+	#prevFlatKeys;
+	#enteringRowKeys;
+	#rowReflowTimer;
+	#dataGridRenderedOnce;
+	#appendInProgress;
+	#resortRaf;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -10995,6 +11391,10 @@ let DataGridElement = class DataGridElement extends i {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`focusout`, this._onFocusOut);
 		cancelAnimationFrame(this._raf);
+		if (this.#rowReflowTimer) {
+			clearTimeout(this.#rowReflowTimer);
+			this.#rowReflowTimer = 0;
+		}
 	}
 	firstUpdated() {
 		new ResizeObserver(() => {
@@ -11021,8 +11421,10 @@ let DataGridElement = class DataGridElement extends i {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
-		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
-		this._rebuildFlat();
+		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) => {
@@ -11032,6 +11434,40 @@ let DataGridElement = class DataGridElement extends i {
 		});
 		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;
@@ -11279,6 +11715,102 @@ let DataGridElement = class DataGridElement extends i {
 	_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);
@@ -11634,6 +12166,7 @@ let DataGridElement = class DataGridElement extends i {
 			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
 		})()}px"></div>` : A}
           </div>
+          ${this.columnMenu === `none` ? A : b`
           <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
 			const cmd = e.detail.command;
 			const checked = e.detail.checked;
@@ -11673,7 +12206,7 @@ let DataGridElement = class DataGridElement extends i {
                 </ixfx-menu-radio-group>
               ` : A}
             </ixfx-menu-container>
-          </ixfx-menu-trigger>
+          </ixfx-menu-trigger>`}
         </div>
         <div class="viewport" @scroll=${this._onScroll}>
           <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
@@ -11690,7 +12223,7 @@ let DataGridElement = class DataGridElement extends i {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return b`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
@@ -11861,6 +12394,10 @@ __decorate([property({
 	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([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
@@ -11877,8 +12414,273 @@ __decorate([query(`.viewport`)], DataGridElement.prototype, "_viewportEl", void
 __decorate([query(`.header-scroll`)], DataGridElement.prototype, "_headerScrollEl", void 0);
 DataGridElement = __decorate([safeCustomElement(`ixfx-data-grid`)], DataGridElement);
 //#endregion
+//#region src/data-table/data-table.ts
+let DataTableElement = class DataTableElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.rows = [];
+		this.tickleDelay = 400;
+		this.layout = `auto`;
+		this.narrowBreakpoint = 420;
+		this._tickled = new TickledController(this, { getItems: () => this.rows.map((_, i) => ({
+			id: i,
+			enabled: true
+		})) });
+		this._stacked = false;
+		this.#lastWidth = 0;
+	}
+	static {
+		this.styles = [
+			tickledStyles,
+			tickledItemStyles,
+			i$3`
+      :host {
+        display: block;
+        container-type: inline-size;
+      }
+
+      .properties {
+        display: grid;
+        grid-template-columns: var(--data-table-name-width, max-content)
+          var(--data-table-value-width, minmax(0, 1fr));
+        /* No column gap: the tickled highlight reads as one solid block.
+           Separation comes from cell padding, which the highlight covers. */
+        gap: 2px 0;
+      }
+
+      /* Widening: 2 then 3 property-pairs per row on roomy containers.
+         Suppressed when stacked, or when locked to 'columns'. */
+      @container (min-width: 650px) {
+        :host(:not([layout='columns'])) .properties:not(.stacked) {
+          grid-template-columns:
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr));
+        }
+      }
+
+      @container (min-width: 1000px) {
+        :host(:not([layout='columns'])) .properties:not(.stacked) {
+          grid-template-columns:
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr));
+        }
+      }
+
+      /* Stacked (key above value). Threshold is JS-driven via 'narrowBreakpoint'.
+         minmax(0, 1fr) — not 1fr — so a long value's min-content size can't
+         blow the column out past the container; the value then ellipsises. */
+      .properties.stacked {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      /* A pair is its own subgrid so the whole row is one element:
+         the tickled highlight can't split, and key/value share a baseline. */
+      .pair {
+        display: grid;
+        grid-column: span 2;
+        grid-template-columns: subgrid;
+        align-items: var(--data-table-cell-align, baseline);
+        cursor: pointer;
+      }
+
+      .pair[data-full] {
+        grid-column: 1 / -1;
+      }
+
+      .pair[data-full] > .value {
+        grid-column: 2 / -1;
+      }
+
+      .properties.stacked .pair {
+        display: block;
+        grid-column: 1 / -1;
+        /* Let the block shrink below its content so .value-text can clip. */
+        min-width: 0;
+      }
+
+      .properties.stacked .pair:not(:last-child) {
+        margin-bottom: var(--space-s);
+      }
+
+      /* Stacked keys get their own line, so a long label must wrap rather than
+         run off the edge (nowrap is only wanted for the max-content column). */
+      .properties.stacked .key {
+        white-space: normal;
+        overflow-wrap: break-word;
+      }
+
+      .key,
+      .value {
+        min-width: 0;
+        /* Row rhythm comes from this padding (tunable), not line-height. */
+        padding: var(--data-table-row-padding, 0.35em) 0;
+      }
+
+      .key {
+        padding-right: var(--space-m);
+        opacity: 0.6;
+        white-space: nowrap;
+        text-align: var(--data-table-name-align, left);
+        font-size: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        /* Uppercase keys have no descenders, so both edges can be trimmed to
+           the glyphs for tight baseline / centre alignment. */
+        text-box: trim-both cap alphabetic;
+      }
+
+      .value {
+        position: relative;
+        padding-right: var(--space-l);
+        font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+
+      /* The value text is clipped here — never on .value itself — so a long
+         value stays within its cell even while tickled, and the detail
+         popover (a child of .value) can still escape the cell. */
+      .value-text {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        /* No text-box trim here: the natural line box gives descenders the room
+           overflow:hidden would otherwise clip. Baseline alignment of key and
+           value comes from align-items on .pair, which needs no trimming. */
+      }
+
+      .pair.tickled {
+        background: var(--item-bg-tickled, color-mix(in oklch, var(--surface-2), var(--accent) 10%));
+      }
+
+      /* Lift the row whose detail is open above the rows it slides over. */
+      .pair.show-detail {
+        position: relative;
+        z-index: 1;
+      }
+
+      .detail {
+        position: absolute;
+        z-index: 2;
+        /* Flush with the bottom of the value (no gap) so the pointer can travel
+           from value to panel without crossing a dead zone that would dismiss it.
+           Left-aligned with the value; only as wide as its content, capped at
+           the table width. */
+        top: 100%;
+        left: 0;
+        right: auto;
+        width: max-content;
+        max-width: 100cqi;
+        padding: var(--space-xs);
+        background: var(--surface-2);
+        visibility: hidden;
+        transform: translateY(-4px);
+        pointer-events: none;
+        transition: transform var(--transition);
+      }
+
+      .pair.show-detail .detail {
+        visibility: visible;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+    `
+		];
+	}
+	#detailTimer;
+	#resizeObserver;
+	#lastWidth;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			this.#lastWidth = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+			this.#updateStacked();
+		});
+		this.#resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearTimeout(this.#detailTimer);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+	}
+	willUpdate(changed) {
+		if (changed.has(`layout`) || changed.has(`narrowBreakpoint`)) this.#updateStacked();
+	}
+	#updateStacked() {
+		const stacked = this.layout === `rows` ? true : this.layout === `columns` ? false : this.#lastWidth > 0 && this.#lastWidth <= this.narrowBreakpoint;
+		if (stacked !== this._stacked) this._stacked = stacked;
+	}
+	#handlePointerEnter(i) {
+		this._tickled.handlePointerEnter(i);
+		clearTimeout(this.#detailTimer);
+		if (this._detailIndex !== void 0) this._detailIndex = void 0;
+		this.#detailTimer = setTimeout(() => {
+			if (this._tickled.isTickled(i)) this._detailIndex = i;
+		}, this.tickleDelay);
+	}
+	#handlePointerLeave(e) {
+		clearTimeout(this.#detailTimer);
+		this._detailIndex = void 0;
+		this._tickled.handlePointerLeave(e);
+	}
+	#select(i) {
+		clearTimeout(this.#detailTimer);
+		this.selectedIndex = this.selectedIndex === i ? void 0 : i;
+		this._tickled.setTickled(i);
+		this._detailIndex = i;
+		this.dispatchEvent(new CustomEvent(`data-table-row-click`, {
+			bubbles: true,
+			composed: true,
+			detail: {
+				row: this.rows[i],
+				index: i,
+				selected: this.selectedIndex === i
+			}
+		}));
+	}
+	render() {
+		return b`<div
+      class="properties ${this._stacked ? `stacked` : ``}"
+      @pointerleave=${(e) => this.#handlePointerLeave(e)}
+    >
+      ${this.rows.map((r, i) => b`<div
+          class="pair ${this._tickled.isTickled(i) ? `tickled` : ``} ${this._detailIndex === i ? `show-detail` : ``}"
+          ?data-full=${r.fullWidth}
+          @pointerenter=${() => this.#handlePointerEnter(i)}
+          @click=${() => this.#select(i)}
+        ><div class="key">${r.label}</div><div class="value"><span class="value-text">${typeof r.value === `boolean` ? r.value ? `Yes` : `No` : r.value}</span>${r.detail === void 0 ? A : b`<div class="detail" part="detail">${r.detail}</div>`}</div></div>`)}</div>`;
+	}
+};
+__decorate([property({
+	type: Array,
+	attribute: false
+})], DataTableElement.prototype, "rows", void 0);
+__decorate([property({
+	type: Number,
+	attribute: false
+})], DataTableElement.prototype, "selectedIndex", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `tickle-delay`
+})], DataTableElement.prototype, "tickleDelay", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DataTableElement.prototype, "layout", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `narrow-breakpoint`
+})], DataTableElement.prototype, "narrowBreakpoint", void 0);
+__decorate([state()], DataTableElement.prototype, "_tickled", void 0);
+__decorate([state()], DataTableElement.prototype, "_detailIndex", void 0);
+__decorate([state()], DataTableElement.prototype, "_stacked", void 0);
+DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableElement);
+//#endregion
 //#region src/detail-list/detail-list.ts
-const ITEM_SELECTOR$1 = `:scope > li`;
+const ITEM_SELECTOR$2 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
 let DetailListElement = class DetailListElement extends i {
@@ -11899,6 +12701,7 @@ let DetailListElement = class DetailListElement extends i {
 		this.#grid = [];
 		this.#positions = /* @__PURE__ */ new Map();
 		this.#geometryScheduled = false;
+		this.#animatedItems = /* @__PURE__ */ new WeakSet();
 		this.#builtFromProvider = [];
 		this.#providerBuilt = 0;
 		this.#data = new DataController(this);
@@ -11909,11 +12712,13 @@ let DetailListElement = class DetailListElement extends i {
 				selectionMode: this.selectionMode,
 				interactionMode: this.interactionMode
 			}),
+			getKey: keyForElement,
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this._dispatch(`list-select`, {
 					selected,
-					previous
+					previous,
+					selectedKeys: this.selection.selectedKeys
 				});
 			}
 		});
@@ -12065,6 +12870,8 @@ let DetailListElement = class DetailListElement extends i {
 	#geometryScheduled;
 	#resizeObserver;
 	#mutationObserver;
+	/** Items that have already played (or been skipped for) their enter animation. */
+	#animatedItems;
 	#builtFromProvider;
 	#providerBuilt;
 	#data;
@@ -12079,8 +12886,9 @@ let DetailListElement = class DetailListElement extends i {
 		this.addEventListener(`wheel`, this._onWheel);
 		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
 		this.#resizeObserver.observe(this);
-		this.#mutationObserver = new MutationObserver(() => {
+		this.#mutationObserver = new MutationObserver((records) => {
 			this.#processChildren();
+			this.#animateChildMutations(records);
 			this.#scheduleGeometry();
 		});
 		this.#mutationObserver.observe(this, {
@@ -12088,6 +12896,27 @@ let DetailListElement = class DetailListElement extends i {
 			subtree: false,
 			attributeFilter: [`hidden`]
 		});
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#animatedItems.add(el);
+	}
+	/**
+	* Collapse-in items appended to the light DOM (however they got there). A bulk
+	* populate is left alone. Geometry is re-read once the animations settle so
+	* keyboard navigation lines back up with the final layout.
+	*/
+	#animateChildMutations(records) {
+		if (!this.isConnected) return;
+		const fresh = [];
+		for (const record of records) for (const node of record.addedNodes) {
+			if (!(node instanceof HTMLElement) || node.parentElement !== this || node.localName !== `li`) continue;
+			if (this.#animatedItems.has(node)) continue;
+			this.#animatedItems.add(node);
+			fresh.push(node);
+		}
+		if (fresh.length === 0) return;
+		const total = this.querySelectorAll(ITEM_SELECTOR$2).length;
+		if (fresh.length >= total) return;
+		for (const el of fresh) animateListItemIn(el);
+		window.setTimeout(() => this.#scheduleGeometry(), 230);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -12109,7 +12938,7 @@ let DetailListElement = class DetailListElement extends i {
 		if (this.filterPredicate) this.#applyFilterPredicate();
 		this.#search = createElementIncrSearch({
 			container: this,
-			itemSelector: ITEM_SELECTOR$1,
+			itemSelector: ITEM_SELECTOR$2,
 			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
 			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
 			highlightKey: SEARCH_HIGHLIGHT_KEY
@@ -12168,8 +12997,21 @@ let DetailListElement = class DetailListElement extends i {
 		if (this.sort !== `none`) this.#applySort();
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 	}
+	/**
+	* Collapse + fade `item` out, then detach it; the rows after it slide up to
+	* close the gap. Resolves once removed. Immediate under reduced motion.
+	*/
 	removeItem(item) {
-		item.remove();
+		this.selection.deselect(item);
+		return animateListItemOut(item).then(() => {
+			item.remove();
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+			this.#recomputeGeometry();
+		});
+	}
+	/** {@link removeItem} for several items at once. */
+	removeItems(items) {
+		return Promise.all([...items].map((item) => this.removeItem(item))).then(() => void 0);
 	}
 	clearItems() {
 		this.replaceChildren();
@@ -12215,6 +13057,40 @@ let DetailListElement = class DetailListElement extends i {
 	selectAll() {
 		if (this.selection.canSelectAll()) this.selection.selectAll();
 	}
+	/** The selection as stable `data-key` / `data-value` strings. */
+	get selectedKeys() {
+		return this.selection.selectedKeys;
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		const id = this.tickled.tickledId;
+		return id ? keyForElement(id) : void 0;
+	}
+	/** Replace the selection with the items carrying these keys (unknown keys ignored). */
+	selectKeys(keys) {
+		this.selection.selectKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		const el = this.#itemForKey(key);
+		if (!el) return;
+		this.tickled.focus(el);
+		el.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+	}
+	#itemForKey(key) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (keyForElement(el) === key) return el;
+	}
 	*selectedFilter(kind) {
 		const wanted = (el) => {
 			switch (kind) {
@@ -12223,7 +13099,7 @@ let DetailListElement = class DetailListElement extends i {
 				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
 			}
 		};
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
 			if (el.hidden) continue;
 			if (wanted(el)) yield el;
 		}
@@ -12236,7 +13112,7 @@ let DetailListElement = class DetailListElement extends i {
 		if (previousKeys.size > 0 || anchorKey !== null) {
 			const next = [];
 			let anchor;
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) {
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
 				const key = keyOf(el);
 				if (key !== null && previousKeys.has(key)) next.push(el);
 				if (key !== null && key === anchorKey) anchor = el;
@@ -12291,15 +13167,15 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	#applyFilterPredicate() {
 		if (!this.filterPredicate) {
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) el.removeAttribute(`hidden`);
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) el.removeAttribute(`hidden`);
 			return;
 		}
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
 		else el.setAttribute(`hidden`, ``);
 	}
 	#applySort() {
 		if (this.sort === `none`) return;
-		const rows = [...this.querySelectorAll(ITEM_SELECTOR$1)];
+		const rows = [...this.querySelectorAll(ITEM_SELECTOR$2)];
 		if (rows.length < 2) return;
 		const dir = this.sort === `descending` ? -1 : 1;
 		const meta = (el) => ({
@@ -12491,12 +13367,34 @@ let DetailListElement = class DetailListElement extends i {
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
 	}
 	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR$2)).filter((el) => {
 			if (el.hidden) return false;
 			if (this.filterPredicate && !this.filterPredicate(el)) return false;
 			return true;
 		});
 	}
+	/**
+	* Set the column width to fit the widest visible item.
+	*
+	* This is opt-in; detail lists continue to use `--detail-list-column-width`
+	* (or its 220px fallback) until this method is called. The measured value is
+	* set directly on this element, so it takes precedence over an inherited
+	* value. Returns the applied width in pixels, or 0 when there are no items.
+	*/
+	async fitColumnWidth() {
+		await this.updateComplete;
+		const items = this._getVisibleItems();
+		if (items.length === 0) return 0;
+		const previousWidth = this.style.getPropertyValue(`--detail-list-column-width`);
+		const previousPriority = this.style.getPropertyPriority(`--detail-list-column-width`);
+		this.style.setProperty(`--detail-list-column-width`, `max-content`);
+		const width = Math.ceil(Math.max(...items.map((item) => item.getBoundingClientRect().width)));
+		if (previousWidth) this.style.setProperty(`--detail-list-column-width`, previousWidth, previousPriority);
+		else this.style.removeProperty(`--detail-list-column-width`);
+		this.style.setProperty(`--detail-list-column-width`, `${width}px`);
+		this.#scheduleGeometry();
+		return width;
+	}
 	_isCheckable(item) {
 		if (this.interactionMode !== `checked`) return true;
 		return !item.hasAttribute(`not-checked`);
@@ -12524,10 +13422,10 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	/** Scan light-DOM children for unprocessed `data-icon` items. */
 	#processChildren() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) this.#ensureIcon(el);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#ensureIcon(el);
 	}
 	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
 			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
 			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
 			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !el.hasAttribute(`not-checked`) && this.selection.selected.has(el));
@@ -12658,8 +13556,8 @@ let DetailListElement = class DetailListElement extends i {
       overflow: hidden;
       box-sizing: border-box;
       outline: none;
-      --ixfx-detail-list-item-padding:
-        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-m, 8px)));
+      --_detail-list-item-padding:
+        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-xs, 3px)));
     }
 
     :host(:focus-visible) {
@@ -12706,7 +13604,7 @@ let DetailListElement = class DetailListElement extends i {
       flex: none;
       width: var(--detail-list-column-width, 220px);
       height: var(--detail-list-item-height, 28px);
-      padding: var(--ixfx-detail-list-item-padding);
+      padding: var(--_detail-list-item-padding);
       cursor: pointer;
       user-select: none;
       transition: background var(--transition, 0.1s ease-out),
@@ -18586,6 +19484,924 @@ let FormElement = class FormElement extends i {
 };
 FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
 //#endregion
+//#region src/grid-list/grid-list.ts
+const ITEM_SELECTOR$1 = `:scope > *`;
+const MIN_ITEM_SIZE = 16;
+/**
+* How long the host keeps the `[reflowing]` attribute after items are inserted
+* mid-list — long enough for the cell move-transition and the enter animation
+* to finish. Kept a touch above the default `--grid-list-item-move-duration`.
+*/
+const REFLOW_WINDOW_MS = 320;
+function computeGridWindow(count, itemWidth, rowHeight, gap, viewportWidth, viewportHeight, scrollOffset, orientation, overscan = 2) {
+	const w = Math.max(1, itemWidth);
+	const h = Math.max(1, rowHeight);
+	const g = Math.max(0, gap);
+	const colStride = w + g;
+	const rowStride = h + g;
+	const offset = Math.max(0, scrollOffset);
+	if (orientation === `row`) {
+		const rows = count === 0 ? 0 : 1;
+		const totalWidth = count === 0 ? 0 : (count - 1) * colStride + w;
+		if (count === 0 || viewportWidth <= 0) return {
+			cols: count,
+			rows,
+			totalHeight: 0,
+			totalWidth,
+			startIndex: 0,
+			endIndex: 0,
+			colStride,
+			rowStride,
+			horizontal: true
+		};
+		const firstVisible = Math.max(0, Math.floor(offset / colStride));
+		const lastVisible = Math.ceil((offset + viewportWidth) / colStride);
+		return {
+			cols: count,
+			rows,
+			totalHeight: 0,
+			totalWidth,
+			startIndex: Math.max(0, firstVisible - overscan),
+			endIndex: Math.min(count, lastVisible + overscan),
+			colStride,
+			rowStride,
+			horizontal: true
+		};
+	}
+	const cols = orientation === `column` ? 1 : Math.max(1, Math.floor((Math.max(0, viewportWidth) + g) / colStride));
+	const rows = count === 0 ? 0 : Math.ceil(count / cols);
+	const totalHeight = rows === 0 ? 0 : (rows - 1) * rowStride + h;
+	if (count === 0 || viewportHeight <= 0) return {
+		cols,
+		rows,
+		totalHeight,
+		totalWidth: 0,
+		startIndex: 0,
+		endIndex: 0,
+		colStride,
+		rowStride,
+		horizontal: false
+	};
+	const firstVisibleRow = Math.max(0, Math.floor(offset / rowStride));
+	const lastVisibleRow = Math.ceil((offset + viewportHeight) / rowStride);
+	const rowStart = Math.max(0, firstVisibleRow - overscan);
+	const rowEnd = Math.min(rows, lastVisibleRow + overscan);
+	return {
+		cols,
+		rows,
+		totalHeight,
+		totalWidth: 0,
+		startIndex: rowStart * cols,
+		endIndex: Math.min(count, rowEnd * cols),
+		colStride,
+		rowStride,
+		horizontal: false
+	};
+}
+function columnOf(index, cols) {
+	return cols <= 1 ? 0 : index % cols;
+}
+function rowOf(index, cols) {
+	return cols <= 1 ? index : Math.floor(index / cols);
+}
+let GridListElement = class GridListElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.itemSize = 160;
+		this.gap = 8;
+		this.orientation = `grid`;
+		this.captionStyle = `under`;
+		this.captionAlign = `middle`;
+		this.captionPosition = `bottom`;
+		this.captionBackdrop = `scrim`;
+		this.captionHeight = 24;
+		this.itemWrap = `stop`;
+		this._scrollTop = 0;
+		this._scrollLeft = 0;
+		this._viewportHeight = 0;
+		this._viewportWidth = 0;
+		this.#viewportRef = createRef();
+		this.#scrollRaf = 0;
+		this.#items = [];
+		this.#itemWrap = `stop`;
+		this.#entering = /* @__PURE__ */ new Set();
+		this.#reflowTimer = 0;
+		this.#slotNames = /* @__PURE__ */ new WeakMap();
+		this.#slotSeq = 0;
+		this.selection = new ListSelectionController({
+			getOrderedItems: () => this._getVisibleItems(),
+			isSelectable: () => true,
+			getModes: () => ({
+				selectionMode: this.selectionMode,
+				interactionMode: this.interactionMode
+			}),
+			getKey: keyForElement,
+			onChange: (selected, previous) => {
+				this._syncItemStates();
+				this.requestUpdate();
+				this._dispatch(`list-select`, {
+					selected,
+					previous,
+					selectedKeys: this.selection.selectedKeys
+				});
+			}
+		});
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#items.map((el) => ({
+				id: el,
+				enabled: !el.hasAttribute(`not-checked`)
+			})),
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates(),
+			itemWrap: this.#itemWrap
+		});
+		this.#onScroll = (e) => {
+			const el = e.target;
+			this.#cancelScrollRaf();
+			this.#scrollRaf = requestAnimationFrame(() => {
+				this.#scrollRaf = 0;
+				this._scrollTop = el.scrollTop;
+				this._scrollLeft = el.scrollLeft;
+				this.#emitViewportChange();
+			});
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if (this.selection.canSelectAll()) {
+					e.preventDefault();
+					this.selection.selectAll();
+				}
+				return;
+			}
+			const count = this.#items.length;
+			if (count === 0) return;
+			const win = this.#currentWindow();
+			const move = (delta) => {
+				const from = this.tickled.tickledId ? this.#items.indexOf(this.tickled.tickledId) : -1;
+				const nextIndex = Math.max(0, Math.min(count - 1, from + delta));
+				const next = this.#items[nextIndex];
+				if (next) this.tickled.handleKeyboardNavigation(next);
+			};
+			const perLine = this.orientation === `grid` ? win.cols : 1;
+			switch (e.key) {
+				case `ArrowLeft`:
+					move(-1);
+					break;
+				case `ArrowRight`:
+					move(1);
+					break;
+				case `ArrowUp`:
+					move(-perLine);
+					break;
+				case `ArrowDown`:
+					move(perLine);
+					break;
+				case `Home`:
+					this.tickled.handleKeyboardNavigation(`first`);
+					break;
+				case `End`:
+					this.tickled.handleKeyboardNavigation(`last`);
+					break;
+				case `PageUp`:
+				case `PageDown`: {
+					const mainExtent = win.horizontal ? this._viewportWidth : this._viewportHeight;
+					const mainStride = win.horizontal ? win.colStride : win.rowStride;
+					const visibleLines = Math.max(1, Math.floor(mainExtent / mainStride));
+					move((e.key === `PageDown` ? 1 : -1) * visibleLines * perLine);
+					break;
+				}
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._dispatch(`list-item-click`, { item: id });
+						this.#onCellActivate(id);
+					}
+					break;
+				}
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this.selection.handleSpace(id);
+					}
+					break;
+				}
+				case `Escape`:
+					this.selection.clear();
+					break;
+				default: return;
+			}
+			e.preventDefault();
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			scrollFadeStyles(`y`),
+			listItemFadeKeyframes,
+			i$3`
+      :host {
+        --grid-list-item-bg: var(--item-bg);
+        --grid-list-radius: var(--radius-m);
+        --grid-list-gap: var(--space-xs);
+        display: block;
+        height: 100%;
+        min-height: 2em;
+        overflow: hidden;
+        user-select: none;
+        background: var(--surface-3);
+        color: var(--surface-3-text);
+        border-radius: var(--radius-s);
+        border: 1px solid var(--border);
+      }
+      :host(:focus-visible) {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      .viewport {
+        position: relative;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+      :host([orientation="row"]) .viewport {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+      .spacer {
+        position: relative;
+        width: 100%;
+      }
+      .cell {
+        position: absolute;
+        inset: 0 auto auto 0;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        contain: layout style;
+        border-radius: var(--grid-list-radius);
+      }
+
+      /* The square that holds the slotted content. */
+      .thumb {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        align-items: stretch;
+        box-sizing: border-box;
+        overflow: hidden;
+        border-radius: 0;
+        background: transparent;
+        border: 1px solid transparent;
+        transition: background var(--transition), border-color var(--transition);
+      }
+      .thumb ::slotted(*) {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      .thumb ::slotted(*:empty)::after {
+        content: "Empty";
+        color: var(--surface-muted-text);
+        font-size: var(--text-s);
+      }
+      ::slotted([hidden]) {
+        display: none !important;
+      }
+
+      /* Selection / cursor wash — sits over the slotted content so it reads
+         on photos and arbitrary DOM alike. */
+      .thumb::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border-radius: inherit;
+        background: var(--accent);
+        opacity: 0;
+        transition: opacity var(--transition, 0.1s ease-out);
+      }
+      .cell.selected .thumb::after {
+        opacity: 0.18;
+      }
+
+      /* ---- Caption (base) ---- */
+      .caption {
+        box-sizing: border-box;
+        flex: none;
+        padding: 3px 6px;
+        font-size: var(--text-s, 0.8rem);
+        line-height: 1.3;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--surface-3-text);
+      }
+      :host([caption-align="left"]) .caption { text-align: left; }
+      :host([caption-align="right"]) .caption { text-align: right; }
+
+      /* ---- Box modes (hidden / under / overlaid): the cell is one box with a
+             single selection outline ---- */
+      :host(:not([caption-style="separate"])) .cell {
+        background: var(--grid-list-item-bg);
+        border: 1px solid transparent;
+        overflow: hidden;
+        transition: background var(--transition), border-color var(--transition);
+      }
+      :host(:not([caption-style="separate"])) .cell:hover {
+        background: var(--item-bg-tickled);
+        border-color: var(--item-border-tickled);
+      }
+      :host(:not([caption-style="separate"])) .cell.selected {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      :host(:not([caption-style="separate"])) .cell.tickled {
+        box-shadow: inset 0 0 0 2px var(--accent);
+      }
+
+      /* under: caption is a strip inside the box, below the content */
+      :host([caption-style="under"]) .caption {
+        border-top: 1px solid var(--border, rgba(128, 128, 128, 0.3));
+        background: var(--surface-4, transparent);
+      }
+
+      /* overlaid: caption floats over the content */
+      :host([caption-style="overlaid"]) .caption {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+      }
+      :host([caption-style="overlaid"][caption-position="top"]) .caption {
+        top: 0;
+        bottom: auto;
+      }
+      :host([caption-style="overlaid"][caption-position="middle"]) .caption {
+        top: 50%;
+        bottom: auto;
+        transform: translateY(-50%);
+      }
+      /* overlaid backdrop */
+      :host([caption-style="overlaid"][caption-backdrop="scrim"]) .caption {
+        background: rgba(0, 0, 0, 0.55);
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"]) .caption {
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+        padding-block: 10px 4px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"][caption-position="top"]) .caption {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+        padding-block: 4px 10px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"][caption-position="middle"]) .caption {
+        background: rgba(0, 0, 0, 0.5);
+        padding-block: 3px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="blur"]) .caption {
+        background: rgba(20, 20, 20, 0.3);
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+      }
+      :host([caption-style="overlaid"][caption-backdrop="none"]) .caption {
+        background: none;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.7);
+      }
+
+      /* ---- separate mode: square + detached caption, each highlighted ---- */
+      :host([caption-style="separate"]) .thumb {
+        flex: none;
+        border-radius: var(--grid-list-radius);
+        background: var(--grid-list-item-bg);
+        border: 1px solid transparent;
+      }
+      :host([caption-style="separate"]) .cell:hover .thumb {
+        background: var(--item-bg-tickled);
+        border-color: var(--item-border-tickled);
+      }
+      :host([caption-style="separate"]) .caption {
+        display: flex;
+        align-items: center;
+        align-self: center;
+        max-width: 100%;
+        margin-top: 4px;
+        border-radius: var(--radius-s, 4px);
+      }
+      :host([caption-style="separate"][caption-align="left"]) .caption { align-self: flex-start; }
+      :host([caption-style="separate"][caption-align="right"]) .caption { align-self: flex-end; }
+      :host([caption-style="separate"]) .cell.selected .thumb,
+      :host([caption-style="separate"]) .cell.tickled .thumb {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+      :host([caption-style="separate"]) .cell.tickled .thumb {
+        outline-style: dashed;
+      }
+      :host([caption-style="separate"]) .cell.selected .caption {
+        background: var(--accent);
+        color: var(--accent-text, #000);
+      }
+      :host([caption-style="separate"]) .cell.tickled .caption {
+        outline: 1px dashed var(--accent);
+      }
+
+      /* ---- Insertion / removal animation ----
+         Active only while the host carries [reflowing] — the ~0.3s window after
+         the child list changes mid-list (see #noteChildMutation). Kept out of
+         the base rules so it never fires during scroll virtualisation, where
+         cells are recycled to wildly different positions every frame. Placed
+         last so it wins over the earlier cell transition rule regardless of
+         specificity. Survivors slide to their new slot; a freshly inserted cell
+         also fades in. (A removed item's element is already gone, so there's
+         nothing left to fade — the gap simply closes as the others slide.) */
+      :host([reflowing]) .cell {
+        transition:
+          transform var(--grid-list-item-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1),
+          background var(--transition),
+          border-color var(--transition);
+      }
+      .cell.entering {
+        animation: ixfx-list-item-in var(--grid-list-item-move-duration, 200ms) ease both;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
+        .cell.entering { animation: none; }
+      }
+    `
+		];
+	}
+	#viewportRef;
+	#resizeObserver;
+	#mutationObserver;
+	#scrollRaf;
+	#items;
+	#itemWrap;
+	/** Items added mid-list that are still playing their enter animation. */
+	#entering;
+	/** Timer that ends the `[reflowing]` window opened by a mid-list insertion. */
+	#reflowTimer;
+	/**
+	* When cell geometry changes (zoom), the item nearest the viewport centre is
+	* captured here in `willUpdate` and the scroll position is corrected in
+	* `updated` so that item stays put — rather than the grid anchoring to its
+	* top-left corner.
+	*/
+	#zoomAnchor;
+	/**
+	* Per-item slot name. Each cell renders its own named `<slot>` and the
+	* matching light-DOM child carries `slot="<name>"`, so a child is projected
+	* into exactly one cell. (A single unnamed slot would collapse every child
+	* into the first cell.)
+	*/
+	#slotNames;
+	#slotSeq;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		for (const [attr, value] of [
+			[`caption-style`, this.captionStyle],
+			[`caption-align`, this.captionAlign],
+			[`caption-position`, this.captionPosition],
+			[`caption-backdrop`, this.captionBackdrop]
+		]) if (!this.hasAttribute(attr)) this.setAttribute(attr, value);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.#mutationObserver ??= new MutationObserver((records) => this.#onChildrenChanged(records));
+		this.#mutationObserver.observe(this, { childList: true });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#mutationObserver?.disconnect();
+		this.#cancelScrollRaf();
+		if (this.#reflowTimer) {
+			clearTimeout(this.#reflowTimer);
+			this.#reflowTimer = 0;
+		}
+	}
+	#onChildrenChanged(records) {
+		const previousLength = this.#items.length;
+		this.#syncItems();
+		this._syncItemStates();
+		this.#noteChildMutation(previousLength, records);
+		this.requestUpdate();
+		this.updateComplete.then(() => this.#emitViewportChange());
+	}
+	/**
+	* When the child list changes mid-list — not a first populate or a wholesale
+	* replace — mark any newcomers for an enter animation and open a short
+	* `[reflowing]` window so the cells that shift slide to their new position
+	* instead of snapping. Removals get the same window (the survivors slide to
+	* close the gap). The window is bounded in time so the transform transition
+	* never bleeds into scroll virtualisation.
+	*
+	* Reads the `MutationRecord`s directly rather than diffing `#items`, because a
+	* `requestUpdate()` between the DOM change and this callback (e.g. a caller
+	* that clears the selection before removing) lets `updated()` re-sync `#items`
+	* first, which would hide the change from a naive diff.
+	*/
+	#noteChildMutation(previousLength, records) {
+		if (!this.hasUpdated || !records || records.length === 0) return;
+		const currentSet = new Set(this.#items);
+		const added = [];
+		let removedCount = 0;
+		for (const record of records) {
+			for (const node of record.addedNodes) if (node.nodeType === Node.ELEMENT_NODE && currentSet.has(node)) added.push(node);
+			for (const node of record.removedNodes) if (node.nodeType === Node.ELEMENT_NODE) removedCount++;
+		}
+		if (added.length === 0 && removedCount === 0) return;
+		if (previousLength === 0 && removedCount === 0) return;
+		if (added.length > 0 && added.length === this.#items.length) return;
+		for (const el of added) this.#entering.add(el);
+		this.toggleAttribute(`reflowing`, true);
+		if (this.#reflowTimer) clearTimeout(this.#reflowTimer);
+		this.#reflowTimer = window.setTimeout(() => {
+			this.#reflowTimer = 0;
+			this.#entering.clear();
+			this.toggleAttribute(`reflowing`, false);
+			this.requestUpdate();
+		}, REFLOW_WINDOW_MS);
+	}
+	#emitViewportChange() {
+		this._dispatch(`grid-list-viewport-change`, { visibleKeys: this.visibleKeys() });
+	}
+	firstUpdated() {
+		const el = this.#viewportRef.value;
+		if (!el) return;
+		this._viewportWidth = el.clientWidth;
+		this._viewportHeight = el.clientHeight;
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				this._viewportWidth = entry.contentRect.width;
+				this._viewportHeight = entry.contentRect.height;
+			}
+		});
+		this.#resizeObserver.observe(el);
+		this.#syncItems();
+		this.requestUpdate();
+	}
+	willUpdate(changed) {
+		if (changed.has(`itemSize`) || changed.has(`gap`)) {
+			this.itemSize = Math.max(MIN_ITEM_SIZE, Math.round(this.itemSize));
+			this.gap = Math.max(0, Math.round(this.gap));
+		}
+		if (changed.has(`captionHeight`)) this.captionHeight = Math.max(0, Math.round(this.captionHeight));
+		if (changed.has(`itemWrap`)) this.#itemWrap = this.itemWrap;
+		if ((changed.has(`itemSize`) || changed.has(`gap`) || changed.has(`captionStyle`) || changed.has(`captionHeight`) || changed.has(`orientation`)) && this.hasUpdated && this.#items.length > 0) {
+			const prevOrientation = changed.get(`orientation`) ?? this.orientation;
+			const horizontal = prevOrientation === `row`;
+			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+			const prevExtent = horizontal ? this._viewportWidth : this._viewportHeight;
+			if (prevExtent > 0 && prevOffset > 1) {
+				const prevItemSize = changed.get(`itemSize`) ?? this.itemSize;
+				const prevGap = changed.get(`gap`) ?? this.gap;
+				const prevCaptionStyle = changed.get(`captionStyle`) ?? this.captionStyle;
+				const prevCaptionHeight = changed.get(`captionHeight`) ?? this.captionHeight;
+				const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
+				const prev = computeGridWindow(this.#items.length, prevItemSize, prevRowHeight, prevGap, this._viewportWidth, this._viewportHeight, prevOffset, prevOrientation);
+				const mainStride = horizontal ? prev.colStride : prev.rowStride;
+				const centerLine = (prevOffset + prevExtent / 2) / mainStride;
+				const lineFloor = Math.max(0, Math.floor(centerLine));
+				const index = horizontal ? Math.min(this.#items.length - 1, lineFloor) : Math.min(this.#items.length - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
+				this.#zoomAnchor = {
+					index,
+					lineFrac: centerLine - lineFloor
+				};
+			}
+		}
+	}
+	/** Full cell height: the square, plus a caption band in `separate` / `under`. */
+	#rowHeight() {
+		const captionBand = this.captionStyle === `separate` || this.captionStyle === `under`;
+		return this.itemSize + (captionBand ? this.captionHeight : 0);
+	}
+	#captionFor(el) {
+		return el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? ``;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.#syncItems();
+		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) this.selection.clearAnchor();
+		if (changed.has(`orientation`)) {
+			const vp = this.#viewportRef.value;
+			if (vp) {
+				if (this.orientation === `row`) {
+					vp.scrollTop = 0;
+					this._scrollTop = 0;
+				} else {
+					vp.scrollLeft = 0;
+					this._scrollLeft = 0;
+				}
+			}
+		}
+		this.#applyZoomAnchor();
+	}
+	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
+	#applyZoomAnchor() {
+		if (!this.#zoomAnchor) return;
+		const { index, lineFrac } = this.#zoomAnchor;
+		this.#zoomAnchor = void 0;
+		const vp = this.#viewportRef.value;
+		if (!vp) return;
+		const win = this.#currentWindow();
+		if (win.horizontal) {
+			if (this._viewportWidth <= 0) return;
+			const targetCenter = (index + lineFrac) * win.colStride;
+			const maxScroll = Math.max(0, win.totalWidth - this._viewportWidth);
+			const next = Math.min(maxScroll, Math.max(0, targetCenter - this._viewportWidth / 2));
+			if (Math.abs(vp.scrollLeft - next) > .5) {
+				vp.scrollLeft = next;
+				this._scrollLeft = next;
+			}
+			return;
+		}
+		if (this._viewportHeight <= 0) return;
+		const targetCenter = ((win.cols > 0 ? Math.floor(index / win.cols) : 0) + lineFrac) * win.rowStride;
+		const maxScroll = Math.max(0, win.totalHeight - this._viewportHeight);
+		const next = Math.min(maxScroll, Math.max(0, targetCenter - this._viewportHeight / 2));
+		if (Math.abs(vp.scrollTop - next) > .5) {
+			vp.scrollTop = next;
+			this._scrollTop = next;
+		}
+	}
+	#syncItems() {
+		this.#items = Array.from(this.querySelectorAll(ITEM_SELECTOR$1));
+		for (const el of this.#items) {
+			const name = this.#slotNameFor(el);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+	}
+	#slotNameFor(el) {
+		let name = this.#slotNames.get(el);
+		if (name === void 0) {
+			this.#slotSeq += 1;
+			name = `gl-item-${this.#slotSeq}`;
+			this.#slotNames.set(el, name);
+		}
+		return name;
+	}
+	_getVisibleItems() {
+		return this.#items.filter((el) => {
+			if (el.hidden) return false;
+			return true;
+		});
+	}
+	get count() {
+		return this.#items.length;
+	}
+	/**
+	* Number of cells currently rendered in the shadow DOM. With virtualization
+	* this is roughly the visible rows plus overscan, regardless of how large
+	* `count` is — useful for demos/diagnostics.
+	*/
+	get renderedCount() {
+		return this.renderRoot.querySelectorAll(`.cell`).length;
+	}
+	get selectedItems() {
+		return this.selection.selected;
+	}
+	/** The selection as stable `data-key` / `data-value` strings. */
+	get selectedKeys() {
+		return this.selection.selectedKeys;
+	}
+	select(item) {
+		this.selection.replace(item);
+	}
+	selectMany(items) {
+		this.selection.selectMany(items);
+	}
+	deselect(item) {
+		this.selection.deselect(item);
+	}
+	clearSelection() {
+		this.selection.clear();
+	}
+	selectAll() {
+		if (this.selection.canSelectAll()) this.selection.selectAll();
+	}
+	/**
+	* Replace the selection with the items carrying these keys. Unknown keys are
+	* ignored; survives the host rebuilding the item set. Requires each item to
+	* have a `data-key` (or `data-value`).
+	*/
+	selectKeys(keys) {
+		this.selection.selectKeys(keys, (key) => this.getItem(key));
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (key) => this.getItem(key));
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (key) => this.getItem(key));
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		const el = this.getItem(key);
+		if (!el) return;
+		this.tickled.focus(el);
+		this.#scrollItemIntoView(el);
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		const id = this.tickled.tickledId;
+		return id ? keyForElement(id) : void 0;
+	}
+	getItem(key) {
+		return this.#items.find((el) => keyForElement(el) === key);
+	}
+	getItemByIndex(index) {
+		return this.#items[index];
+	}
+	getKey(item) {
+		return keyForElement(item);
+	}
+	visibleKeys() {
+		const win = this.#currentWindow();
+		return this.#items.slice(win.startIndex, win.endIndex).map((el) => keyForElement(el)).filter((k) => k !== void 0);
+	}
+	/** Adjust the scroll offset so `el` is fully within the viewport. */
+	#scrollItemIntoView(el) {
+		const index = this.#items.indexOf(el);
+		const vp = this.#viewportRef.value;
+		if (index < 0 || !vp) return;
+		const win = this.#currentWindow();
+		if (win.horizontal) {
+			const left = index * win.colStride;
+			const right = left + this.itemSize;
+			const viewLeft = vp.scrollLeft;
+			let next = viewLeft;
+			if (left < viewLeft) next = left;
+			else if (right > viewLeft + this._viewportWidth) next = right - this._viewportWidth;
+			if (next !== viewLeft) {
+				vp.scrollLeft = next;
+				this._scrollLeft = next;
+			}
+			return;
+		}
+		const top = (win.cols > 0 ? Math.floor(index / win.cols) : 0) * win.rowStride;
+		const bottom = top + this.#rowHeight();
+		const viewTop = vp.scrollTop;
+		let next = viewTop;
+		if (top < viewTop) next = top;
+		else if (bottom > viewTop + this._viewportHeight) next = bottom - this._viewportHeight;
+		if (next !== viewTop) {
+			vp.scrollTop = next;
+			this._scrollTop = next;
+		}
+	}
+	_syncItemStates() {
+		for (const el of this.#items) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+		}
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const win = this.#currentWindow();
+		const slice = this.#items.slice(win.startIndex, win.endIndex);
+		const spacerStyle = win.horizontal ? `width:${win.totalWidth}px;height:100%` : `height:${win.totalHeight}px`;
+		const scrollFade = win.horizontal ? `scroll-fade-x` : `scroll-fade-y`;
+		return b`
+      <div
+        class="viewport ${scrollFade}"
+        part="viewport"
+        ${ref(this.#viewportRef)}
+        data-input-mode=${this.tickled.inputMode}
+        @scroll=${this.#onScroll}
+      >
+        <div class="spacer" style=${spacerStyle}>
+          ${repeat(slice, (el) => this.#slotNameFor(el), (el, i) => this.#renderCell(el, win.startIndex + i, win))}
+        </div>
+      </div>
+    `;
+	}
+	#renderCell(el, index, win) {
+		const selected = this.selection.selected.has(el);
+		const tickled = this.tickled.isTickled(el);
+		const entering = this.#entering.has(el);
+		const style = this.captionStyle;
+		const separate = style === `separate`;
+		const caption = style === `hidden` ? `` : this.#captionFor(el);
+		const showCaption = caption !== ``;
+		const cellHeight = win.rowStride - this.gap;
+		const x = win.horizontal ? index * win.colStride : columnOf(index, win.cols) * win.colStride;
+		const y = win.horizontal ? Math.max(0, (this._viewportHeight - cellHeight) / 2) : rowOf(index, win.cols) * win.rowStride;
+		const thumbStyle = separate ? `height:${this.itemSize}px` : ``;
+		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
+		return b`
+      <div
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
+        part="item"
+        style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
+        data-index=${index}
+        @click=${(e) => this.#onCellClick(e, el)}
+        @dblclick=${() => this.#onCellActivate(el)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(el)}
+      >
+        <div class="thumb" part="thumb" style=${thumbStyle}>
+          <slot name=${this.#slotNameFor(el)}></slot>
+        </div>
+        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss}>${caption}</div>` : ``}
+      </div>
+    `;
+	}
+	#onScroll;
+	#cancelScrollRaf() {
+		if (this.#scrollRaf !== 0) {
+			cancelAnimationFrame(this.#scrollRaf);
+			this.#scrollRaf = 0;
+		}
+	}
+	#onCellClick(e, item) {
+		this.selection.handleClick(item, e);
+		this._dispatch(`list-item-click`, { item });
+	}
+	#onCellActivate(item) {
+		if (this.interactionMode !== `manual`) this.selection.replace(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	#currentWindow() {
+		return computeGridWindow(this.#items.length, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation);
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], GridListElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], GridListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `item-size`
+})], GridListElement.prototype, "itemSize", void 0);
+__decorate([property({ type: Number })], GridListElement.prototype, "gap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], GridListElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-style`,
+	reflect: true
+})], GridListElement.prototype, "captionStyle", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-align`,
+	reflect: true
+})], GridListElement.prototype, "captionAlign", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-position`,
+	reflect: true
+})], GridListElement.prototype, "captionPosition", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-backdrop`,
+	reflect: true
+})], GridListElement.prototype, "captionBackdrop", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `caption-height`
+})], GridListElement.prototype, "captionHeight", void 0);
+__decorate([property({
+	type: String,
+	attribute: `item-wrap`
+})], GridListElement.prototype, "itemWrap", void 0);
+__decorate([state()], GridListElement.prototype, "_scrollTop", void 0);
+__decorate([state()], GridListElement.prototype, "_scrollLeft", void 0);
+__decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
+__decorate([state()], GridListElement.prototype, "_viewportWidth", void 0);
+GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElement);
+//#endregion
 //#region src/panel/panel.ts
 let PanelElement = class PanelElement extends i {
 	constructor(..._args) {
@@ -18938,6 +20754,8 @@ __decorate([property({
 GroupedItemListerElement = __decorate([safeCustomElement(`ixfx-grouped-item-lister`)], GroupedItemListerElement);
 //#endregion
 //#region src/tree/tree-base.ts
+/** Above this many rows entering / leaving at once, skip the animation entirely. */
+const MAX_ANIMATED_ROWS = 50;
 let TreeBaseElement = class TreeBaseElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -18961,6 +20779,12 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		});
 		this._focusedDepth = 0;
 		this.#config = { indent: 20 };
+		this.#renderedKeys = [];
+		this.#lastNodeByKey = /* @__PURE__ */ new Map();
+		this.#enteringKeys = /* @__PURE__ */ new Set();
+		this.#leaving = /* @__PURE__ */ new Map();
+		this.#leavingAnimating = /* @__PURE__ */ new Set();
+		this.#treeAnimReady = false;
 		this.#onKeyDown = (event) => {
 			const nodes = this.#getAllNodes();
 			if (nodes.length === 0) return;
@@ -19022,7 +20846,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 							bubbles: true,
 							composed: true
 						}));
-					} else if (current.depth > 1) {
+					} else if (current.depth > 0) {
 						const parentDepth = current.depth - 1;
 						for (let i = currentIdx - 1; i >= 0; i--) if (nodes[i].depth === parentDepth) {
 							this.#setFocusedIndex(i);
@@ -19088,6 +20912,85 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	#anchor;
 	#ownedRegistry;
 	#config;
+	#renderedKeys;
+	#lastNodeByKey;
+	#enteringKeys;
+	#leaving;
+	#leavingAnimating;
+	#treeAnimReady;
+	willUpdate(changedProps) {
+		super.willUpdate(changedProps);
+		this.#diffVisibleNodes();
+	}
+	#diffVisibleNodes() {
+		const nodes = this.root ? this.#getAllNodes() : [];
+		const nowKeys = new Set(nodes.map((n) => n.node.item.key));
+		this.#enteringKeys.clear();
+		if (this.#treeAnimReady && this.#renderedKeys.length > 0) {
+			const prevSet = new Set(this.#renderedKeys);
+			for (const { node } of nodes) if (!prevSet.has(node.item.key)) this.#enteringKeys.add(node.item.key);
+			if (this.#enteringKeys.size > MAX_ANIMATED_ROWS) this.#enteringKeys.clear();
+			for (const key of this.#renderedKeys) if (!nowKeys.has(key) && !this.#leaving.has(key)) {
+				const last = this.#lastNodeByKey.get(key);
+				if (last) this.#leaving.set(key, last);
+			}
+		}
+		for (const key of [...this.#leaving.keys()]) if (nowKeys.has(key)) {
+			this.#leaving.delete(key);
+			this.#leavingAnimating.delete(key);
+		}
+		if (this.#leaving.size > MAX_ANIMATED_ROWS) {
+			this.#leaving.clear();
+			this.#leavingAnimating.clear();
+		}
+	}
+	/** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
+	_isLeaving(node) {
+		return this.#leaving.has(node.item.key);
+	}
+	/** Splice the fading ghost rows back into the visible list near where they were. */
+	#weaveLeaving(nodes) {
+		if (this.#leaving.size === 0) return nodes;
+		const result = [...nodes];
+		const indexOfKey = (key) => result.findIndex((e) => e.node.item.key === key);
+		for (const [key, entry] of this.#leaving) {
+			const prevIdx = this.#renderedKeys.indexOf(key);
+			let insertAt = result.length;
+			for (let j = prevIdx + 1; j < this.#renderedKeys.length; j++) {
+				const at = indexOfKey(this.#renderedKeys[j]);
+				if (at !== -1) {
+					insertAt = at;
+					break;
+				}
+			}
+			result.splice(insertAt, 0, entry);
+		}
+		return result;
+	}
+	#runItemAnimations() {
+		if (this.#enteringKeys.size > 0) {
+			for (const el of this.renderRoot.querySelectorAll(`.item`)) {
+				const key = el.dataset.key;
+				if (key !== void 0 && this.#enteringKeys.has(key)) animateListItemIn(el);
+			}
+			this.#enteringKeys.clear();
+		}
+		if (this.#leaving.size > 0) for (const el of this.renderRoot.querySelectorAll(`.item.leaving`)) {
+			const key = el.dataset.key;
+			if (key === void 0 || this.#leavingAnimating.has(key)) continue;
+			this.#leavingAnimating.add(key);
+			animateListItemOut(el).then(() => {
+				this.#leaving.delete(key);
+				this.#leavingAnimating.delete(key);
+				this.requestUpdate();
+			});
+		}
+		const visible = this.root ? this.#getAllNodes() : [];
+		this.#renderedKeys = visible.map((n) => n.node.item.key);
+		this.#lastNodeByKey.clear();
+		for (const entry of visible) this.#lastNodeByKey.set(entry.node.item.key, entry);
+		this.#treeAnimReady = true;
+	}
 	updated(changedProps) {
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
@@ -19122,6 +21025,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		if (changedProps.has(`selectedNode`) && this.selectedNode) {
 			if (changedProps.get(`selectedNode`) !== this.selectedNode) this.tickled.setTickled(this.selectedNode.item.key);
 		}
+		this.#runItemAnimations();
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -19286,9 +21190,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}
 		}
 	}
-	renderNodeContent(node, _depth) {
+	renderNodeContent(node, depth) {
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		return b`
       <span class="tree-caret">
         ${isBranch ? b`<ixfx-icon class="caret-icon" name="chevron-down" .rotate=${isExpanded ? A : `-90deg`}></ixfx-icon>` : ``}
@@ -19569,9 +21473,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	_isFocused(node) {
 		return this.tickled.isTickled(node.item.key);
 	}
-	_isExpanded(node) {
+	_isExpanded(node, depth = 0) {
 		if (this._expandedKeys.has(node.item.key)) return true;
-		if (this.filterPredicate && node.children) return node.children.some((child) => this.#matchesFilter(child, 0));
+		if (this.filterPredicate && node.children) return node.children.some((child) => this.#matchesFilter(child, depth + 1));
 		return false;
 	}
 	#matchesFilter(node, depth) {
@@ -19652,7 +21556,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	}
 	#getAllNodes() {
 		if (!this.root) return [];
-		return this.#getVisibleNodes(this.root, 0);
+		return this.#getVisibleNodes(this.root, -1);
 	}
 	#getFocusedIndex() {
 		const nodes = this.#getAllNodes();
@@ -19706,14 +21610,14 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	}
 	#onDblClick;
 	#renderNodes(nodes) {
-		if (nodes.length === 0 && this.#pendingNode) return b`
+		if (nodes.length === 0 && this.#pendingNode && this.#leaving.size === 0) return b`
         <div class="tree-loading">
           ${this.renderLoadingIndicator()}
         </div>
       `;
 		return b`
       <ul class="tree-list" role="tree">
-        ${nodes.map(({ node, depth }) => this._renderNode(node, depth))}
+        ${this.#weaveLeaving(nodes).map(({ node, depth }) => this._renderNode(node, depth))}
       </ul>
     `;
 	}
@@ -19721,15 +21625,17 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this.#pendingNode === node;
 		const isFiltered = this.filterPredicate !== void 0 && !this.#matchesFilter(node, depth);
+		const isLeaving = this._isLeaving(node);
 		return b`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``} ${isLeaving ? `leaving` : ``}"
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : A}
+        aria-hidden=${isLeaving ? `true` : A}
         aria-level=${depth + 1}
         data-key=${node.item.key}
         style=${`--depth: ${depth}`}
@@ -19850,6 +21756,12 @@ let TreeBaseElement = class TreeBaseElement extends i {
       display: none;
     }
 
+    /* Fading-out ghost row (see #runItemAnimations) — inert while it collapses. */
+    .item.leaving {
+      pointer-events: none;
+      overflow: hidden;
+    }
+
     ::highlight(incr-search-highlight) {
       background: var(--search-highlight-bg, var(--accent));
       color: var(--search-highlight-color, var(--accent-text, #fff));
@@ -19909,11 +21821,11 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 			if (node.item.icon) this.#depthsWithIcons.add(depth);
 			if (node.children) for (const child of node.children) visit(child, depth + 1);
 		};
-		if (this.root) visit(this.root, 0);
+		if (this.root) visit(this.root, -1);
 	}
 	renderNodeContent(node, depth) {
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const icon = node.item.icon;
 		const tooltip = node.item.tooltip;
 		const caretAndLabel = b`
@@ -19959,16 +21871,18 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this._pendingNode === node;
 		const hasIconAtDepth = this.#depthsWithIcons.has(depth);
+		const isLeaving = this._isLeaving(node);
 		return b`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``}"
         data-key=${node.item.key}
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : A}
+        aria-hidden=${isLeaving ? `true` : A}
         aria-level=${depth + 1}
         style=${`--depth: ${depth}`}
         @click=${(e) => this._handleItemClick(node, depth, e)}
@@ -20241,6 +22155,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		this._searchQuery = ``;
 		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.#wrappedElements = /* @__PURE__ */ new Set();
+		this.#animatedItems = /* @__PURE__ */ new WeakSet();
 		this.selection = new ListSelectionController({
 			getOrderedItems: () => this._getVisibleItems(),
 			isSelectable: (el) => this._isCheckable(el),
@@ -20248,11 +22163,13 @@ let VerticalListElement = class VerticalListElement extends i {
 				selectionMode: this.selectionMode,
 				interactionMode: this.interactionMode
 			}),
+			getKey: keyForElement,
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this._dispatch(`list-select`, {
 					selected,
-					previous
+					previous,
+					selectedKeys: this.selection.selectedKeys
 				});
 			}
 		});
@@ -20365,6 +22282,10 @@ let VerticalListElement = class VerticalListElement extends i {
 	#search;
 	#customWrappers;
 	#wrappedElements;
+	/** Watches for items added to the light DOM so they can be animated in. */
+	#itemObserver;
+	/** Items that have already played (or been skipped for) their enter animation. */
+	#animatedItems;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -20373,6 +22294,9 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#animatedItems.add(el);
+		this.#itemObserver ??= new MutationObserver((records) => this.#onItemsMutated(records));
+		this.#itemObserver.observe(this, { childList: true });
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -20381,9 +22305,31 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.#itemObserver?.disconnect();
 		this.#search?.dispose();
 		this.#search = void 0;
 	}
+	/**
+	* Animate in items appended to the light DOM (however they got there —
+	* {@link addItem}, direct `appendChild`, a framework binding). A bulk populate
+	* (roughly everything at once) is left alone, as are the wrapper `<li>`s the
+	* checked-mode plumbing shuffles around.
+	*/
+	#onItemsMutated(records) {
+		if (!this.isConnected) return;
+		const fresh = [];
+		for (const record of records) for (const node of record.addedNodes) {
+			if (!(node instanceof HTMLElement) || node.parentElement !== this) continue;
+			if (!node.matches(ITEM_SELECTOR)) continue;
+			if (this.#animatedItems.has(node) || this.#customWrappers.has(node) || this.#wrappedElements.has(node)) continue;
+			this.#animatedItems.add(node);
+			fresh.push(node);
+		}
+		if (fresh.length === 0) return;
+		const total = this.querySelectorAll(ITEM_SELECTOR).length;
+		if (fresh.length >= total) return;
+		for (const el of fresh) animateListItemIn(el);
+	}
 	firstUpdated() {
 		this.#search = createElementIncrSearch({
 			container: this,
@@ -20429,8 +22375,21 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.appendChild(el);
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 	}
+	/**
+	* Collapse + fade `item` out, then detach it. The rows below slide up to
+	* close the gap. Resolves once the element has actually been removed.
+	* Under `prefers-reduced-motion: reduce` it's removed immediately.
+	*/
 	removeItem(item) {
-		item.remove();
+		this.selection.deselect(item);
+		return animateListItemOut(item).then(() => {
+			item.remove();
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+		});
+	}
+	/** {@link removeItem} for several items at once. */
+	removeItems(items) {
+		return Promise.all([...items].map((item) => this.removeItem(item))).then(() => void 0);
 	}
 	clearItems() {
 		this.#customWrappers.clear();
@@ -20469,6 +22428,43 @@ let VerticalListElement = class VerticalListElement extends i {
 	selectAll() {
 		if (this.selection.canSelectAll()) this.selection.selectAll();
 	}
+	/** The selection as stable `data-key` / `data-value` strings. */
+	get selectedKeys() {
+		return this.selection.selectedKeys;
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		const id = this.tickled.tickledId;
+		return id ? keyForElement(id) : void 0;
+	}
+	/** Replace the selection with the items carrying these keys (unknown keys ignored). */
+	selectKeys(keys) {
+		this.selection.selectKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		const el = this.#itemForKey(key);
+		if (!el) return;
+		this.tickled.focus(el);
+		el.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+	}
+	#itemForKey(key) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (this.#wrappedElements.has(el)) continue;
+			if (keyForElement(el) === key) return el;
+		}
+	}
 	*selectedFilter(kind) {
 		const wanted = (el) => {
 			switch (kind) {
@@ -27113,6 +29109,136 @@ function dismiss(id) {
 	syncRenderer();
 }
 //#endregion
+//#region src/pan-text/pan-text.ts
+const SPEED = 45;
+const END_PADDING = 4;
+const START_DELAY = 300;
+const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
+let PanTextElement = class PanTextElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.direction = `end`;
+		this.disabled = false;
+		this._isOverflowing = false;
+		this._isHovering = false;
+		this._overflow = 0;
+		this._resizeObserver = null;
+		this._onMouseEnter = () => {
+			this._isHovering = true;
+		};
+		this._onMouseLeave = () => {
+			this._isHovering = false;
+		};
+		this._measure = () => {
+			if (this._isHovering) return;
+			const el = this._textEl;
+			if (!el) return;
+			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
+			const overflowing = this._overflow > 0;
+			this.classList.toggle(`is-overflowing`, overflowing);
+			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(() => this._measure());
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	firstUpdated() {
+		this._measure();
+		this._resizeObserver?.observe(this);
+		document.fonts?.ready.then(() => this._measure());
+	}
+	updated() {
+		this._measure();
+	}
+	_textStyle() {
+		if (!this._isOverflowing) return ``;
+		const distance = this._overflow + END_PADDING;
+		const duration = Math.max(1.5, distance / SPEED);
+		const revealEnd = this.direction === `end`;
+		const restX = revealEnd ? 0 : -distance;
+		const hoverX = revealEnd ? -distance : 0;
+		if (this._isHovering) return [
+			`transform: translateX(${hoverX}px)`,
+			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
+			`overflow: visible`,
+			`text-overflow: clip`
+		].join(`; `);
+		return [
+			`transform: translateX(${restX}px)`,
+			`transition: transform 400ms ${PAN_EASING}`,
+			revealEnd ? `` : `overflow: visible; text-overflow: clip`
+		].filter(Boolean).join(`; `);
+	}
+	render() {
+		const textClasses = {
+			"is-overflowing": this._isOverflowing,
+			"is-hovering": this._isHovering
+		};
+		return b`
+      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
+        <slot @slotchange=${this._measure}></slot>
+      </span>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+    /* Renders like plain inline text: no colours, border, padding or margin
+       of its own — it only adds the clipping needed to pan on hover. */
+    :host {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: inherit;
+    }
+
+    :host([disabled]) {
+      opacity: var(--disabled-opacity, 0.5);
+      pointer-events: none;
+    }
+
+    .text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      will-change: transform;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .text {
+        transition: none !important;
+        transform: none !important;
+      }
+    }
+  `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `direction`
+})], PanTextElement.prototype, "direction", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disabled`
+})], PanTextElement.prototype, "disabled", void 0);
+__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
+__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
+__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
+PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
+//#endregion
 //#region src/panel/panel-group.ts
 let PanelGroupElement = class PanelGroupElement extends i {
 	constructor(..._args) {
@@ -36516,6 +38642,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map