@ixfx/components 0.13.1 → 0.13.3

package/dist/detail-list-C96B5Txz.js

@@ -0,0 +1,2001 @@
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-1gpwtPx8.js";
+import { t as DataController } from "./data-controller-DOlmqNKb.js";
+import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-JIhwB49y.js";
+import { a as toGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
+import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
+import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
+import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import "./list-group-header.js";
+import { LitElement, css, html, nothing, render } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { createCommandRegistry } from "@clinth/ui-commands";
+//#region src/detail-list/detail-list-geometry.ts
+const EMPTY_GEOMETRY = {
+	columns: [],
+	positions: /* @__PURE__ */ new Map(),
+	tops: /* @__PURE__ */ new Map(),
+	lefts: /* @__PURE__ */ new Map()
+};
+function contentOrigin(scroller) {
+	const r = scroller.getBoundingClientRect();
+	return {
+		left: r.left - scroller.scrollLeft,
+		top: r.top - scroller.scrollTop
+	};
+}
+/** Items closer than this (px) horizontally share a column (sub-pixel layout). */
+const COLUMN_TOLERANCE_PX = 1;
+/**
+* Measure `items` (one rect read each — a single layout flush) and bucket them
+* into columns. Zero-sized items (e.g. `display:none`) are skipped.
+*/
+function measureGeometry(items, origin) {
+	const measured = [];
+	for (const el of items) {
+		const r = el.getBoundingClientRect();
+		if (r.width === 0 && r.height === 0) continue;
+		measured.push({
+			el,
+			left: r.left - origin.left,
+			top: r.top - origin.top,
+			width: r.width
+		});
+	}
+	measured.sort((a, b) => a.left - b.left || a.top - b.top);
+	const columns = [];
+	const positions = /* @__PURE__ */ new Map();
+	const tops = /* @__PURE__ */ new Map();
+	const lefts = /* @__PURE__ */ new Map();
+	for (const m of measured) {
+		let col = columns.at(-1);
+		if (!col || m.left - col.left > COLUMN_TOLERANCE_PX) {
+			col = {
+				left: m.left,
+				width: m.width,
+				items: []
+			};
+			columns.push(col);
+		}
+		positions.set(m.el, {
+			col: columns.length - 1,
+			row: col.items.length
+		});
+		col.items.push(m.el);
+		col.width = Math.max(col.width, m.width);
+		tops.set(m.el, m.top);
+		lefts.set(m.el, m.left);
+	}
+	return {
+		columns,
+		positions,
+		tops,
+		lefts
+	};
+}
+/**
+* Whether `geometry` still matches layout, judged by re-reading a few probe
+* elements. Layout shifts that matter (column width, row height, reflow after
+* an insert) move at least one of first / cursor / last.
+*/
+function geometryMatches(geometry, probes, origin) {
+	for (const el of probes) {
+		if (!el) continue;
+		const left = geometry.lefts.get(el);
+		const top = geometry.tops.get(el);
+		if (left === void 0 || top === void 0) return false;
+		const r = el.getBoundingClientRect();
+		if (Math.abs(r.left - origin.left - left) > .5 || Math.abs(r.top - origin.top - top) > .5) return false;
+	}
+	return true;
+}
+/** First index in `[lo, hi)` for which `pred` holds, given `pred` is monotonic (false… then true…). */
+function partitionPoint(lo, hi, pred) {
+	while (lo < hi) {
+		const mid = lo + hi >> 1;
+		if (pred(mid)) hi = mid;
+		else lo = mid + 1;
+	}
+	return lo;
+}
+/**
+* Items (in DOM order) whose box intersects the content-space span
+* `[start, end)`, found with O(log n) layout reads — no full measure.
+* Relies on column flow: DOM order is column order, so `left` only moves in
+* one direction along the list (increasing for LTR, decreasing for RTL).
+*/
+function itemsInSpanByOrder(items, origin, start, end) {
+	if (items.length === 0) return [];
+	const box = (i) => {
+		const r = items[i].getBoundingClientRect();
+		return {
+			left: r.left - origin.left,
+			right: r.right - origin.left
+		};
+	};
+	const first = box(0);
+	const last = box(items.length - 1);
+	if (first.left === last.left) return first.right > start && first.left < end ? items : [];
+	const n = items.length;
+	if (last.left > first.left) {
+		const from = partitionPoint(0, n, (i) => box(i).right > start);
+		const to = partitionPoint(from, n, (i) => box(i).left >= end);
+		return items.slice(from, to);
+	}
+	const from = partitionPoint(0, n, (i) => box(i).left < end);
+	const to = partitionPoint(from, n, (i) => box(i).right <= start);
+	return items.slice(from, to);
+}
+//#endregion
+//#region src/detail-list/detail-list.ts
+const ITEM_SELECTOR = `:scope > li`;
+const GROUP_HEADER_ATTR = `data-ixfx-group-header`;
+const GROUP_COLLAPSED_ATTR = `data-group-collapsed`;
+const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
+const NAV_KEYS = /* @__PURE__ */ new Set([
+	`ArrowDown`,
+	`ArrowUp`,
+	`ArrowLeft`,
+	`ArrowRight`,
+	`Home`,
+	`End`
+]);
+const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+/**
+* Layout for the per-item badge wrapper `#ensureBadge` adds. Applied as inline
+* `cssText` rather than shadow CSS because `::slotted()` only matches the
+* host's *direct* children — the badge lives inside a slotted `<li>`, so a
+* `::slotted()` rule could never reach it. The values still read the CSS
+* custom property, so it stays themeable from the outside.
+*/
+const BADGE_EL_CSS = `flex-shrink:0;display:inline-flex;align-items:center;margin-inline-start:auto;padding-inline-start:var(--detail-list-badge-gap,8px)`;
+function pointInRect(x, y, rect) {
+	return rect.width > 0 && rect.height > 0 && x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+}
+/** Hit-test the painted content, not a layout wrapper that may fill the row. */
+function contentAtPoint(node, x, y) {
+	if (node instanceof Text) {
+		if (!node.textContent?.trim()) return false;
+		const range = document.createRange();
+		range.selectNodeContents(node);
+		return Array.from(range.getClientRects()).some((rect) => pointInRect(x, y, rect));
+	}
+	if (!(node instanceof Element)) return false;
+	if (node.hasAttribute(`data-drag-select-blank`)) return false;
+	if (node.hasAttribute(`data-drag-select-content`)) return pointInRect(x, y, node.getBoundingClientRect());
+	if (Array.from(node.childNodes).some((child) => contentAtPoint(child, x, y))) return true;
+	return node.childNodes.length === 0 && pointInRect(x, y, node.getBoundingClientRect());
+}
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+function sameMembers(a, b) {
+	if (a.size !== b.size) return false;
+	for (const el of a) if (!b.has(el)) return false;
+	return true;
+}
+/** Remove `attr` from elements leaving the set, add it to elements entering it. */
+function applySetDiff(prev, next, attr) {
+	for (const el of prev) if (!next.has(el)) el.removeAttribute(attr);
+	for (const el of next) if (!prev.has(el)) el.setAttribute(attr, ``);
+}
+/** Attributes on an item that change list membership, visibility, keys or selectability. */
+const ITEM_CACHE_ATTRS = [
+	`hidden`,
+	GROUP_COLLAPSED_ATTR,
+	`not-checked`,
+	`data-key`,
+	`data-value`
+];
+/** Whether a mutation record can change the item caches (direct children / their cache attributes). */
+function affectsItemCaches(host, record) {
+	if (record.type === `childList`) return record.target === host;
+	return record.target.parentElement === host;
+}
+/**
+* Make `parent`'s managed children equal `nodes`, in order, with the fewest
+* DOM moves — a single insert stays a single move instead of re-appending
+* every row. `nodes` must contain every managed child; unmanaged children
+* (text, foreign elements) are left where they are.
+*/
+function syncChildOrder(parent, nodes, managed) {
+	const nextManaged = (from) => {
+		let el = from;
+		while (el && !managed(el)) el = el.nextElementSibling;
+		return el;
+	};
+	let cursor = nextManaged(parent.firstElementChild);
+	for (const node of nodes) {
+		if (node === cursor) {
+			cursor = nextManaged(cursor.nextElementSibling);
+			continue;
+		}
+		parent.insertBefore(node, cursor);
+	}
+}
+let DetailListElement = class DetailListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.sort = `none`;
+		this.sortBy = ``;
+		this.items = [];
+		this.displayProperty = ``;
+		this.iconProperty = ``;
+		this.iconColorProperty = ``;
+		this.textColorProperty = ``;
+		this.badgeProperty = ``;
+		this.keyProperty = ``;
+		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
+		this.groupBy = null;
+		this.crossGroupSelection = false;
+		this._collapsedGroups = /* @__PURE__ */ new Set();
+		this.#itemData = /* @__PURE__ */ new WeakMap();
+		this.#itemIndex = /* @__PURE__ */ new WeakMap();
+		this.#geometry = EMPTY_GEOMETRY;
+		this.#geometryDirty = true;
+		this.#geometryScheduled = false;
+		this.#appliedSelected = /* @__PURE__ */ new Set();
+		this.#appliedChecked = /* @__PURE__ */ new Set();
+		this.#itemStatesFullSync = true;
+		this.#hasCheckboxes = false;
+		this.#draggableApplied = false;
+		this.#sortRaf = 0;
+		this.#viewportScrollRaf = 0;
+		this.#animatedItems = /* @__PURE__ */ new WeakSet();
+		this.#builtFromProvider = [];
+		this.#groupIndex = /* @__PURE__ */ new Map();
+		this.#groupList = [];
+		this.#headerEls = /* @__PURE__ */ new Map();
+		this.#seq = /* @__PURE__ */ new WeakMap();
+		this.#seqNext = 0;
+		this.#wasGrouped = false;
+		this.#groupsScheduled = false;
+		this.#groupByChanged = false;
+		this.#providerBuilt = 0;
+		this.#data = new DataController(this);
+		this.selection = new ListSelectionController({
+			getOrderedItems: () => this._getVisibleItems(),
+			isSelectable: (el) => this._isCheckable(el),
+			getModes: () => ({
+				selectionMode: this.selectionMode,
+				interactionMode: this.interactionMode
+			}),
+			getKey: keyForElement,
+			getGroupKey: (el) => this.#groupIndex.get(el) ?? null,
+			crossGroupSelection: () => this.crossGroupSelection,
+			getFallbackGroupKey: () => {
+				const t = this.tickled.tickledId;
+				return t ? this.#groupIndex.get(t) ?? null : null;
+			},
+			onChange: (selected, previous) => {
+				this._syncItemStates();
+				this._dispatch(`list-select`, {
+					selected,
+					previous,
+					selectedKeys: this.selection.selectedKeys
+				});
+			}
+		});
+		this.tickled = new TickledController(this, {
+			getItems: () => {
+				const visible = this._getVisibleItems();
+				this.#tickledItemsCache ??= visible.map((el) => ({
+					id: el,
+					enabled: !el.hasAttribute(`not-checked`)
+				}));
+				return this.#tickledItemsCache;
+			},
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates(),
+			itemWrap: this.itemWrap,
+			hoverDisabled: () => this.#dragSelect.isDragging || this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#blankItemPressPending = false;
+		this.#clearBlankItemPress = () => {
+			this.#blankItemPressPending = false;
+		};
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `detail-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				const li = target.closest?.(`li`);
+				if (!li || !this.contains(li)) return void 0;
+				return keyForElement(li);
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({}),
+			getRenderer: () => this.dragPreviewRenderer,
+			getDragPreviewSourceResolver: () => this.dragPreviewSource,
+			dispatch: (detail) => this._dispatchCancelable(`list-native-drag-start`, detail),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.toggleAttribute(`data-native-dragging`, active);
+				for (const el of this.querySelectorAll(`li`)) el.toggleAttribute(`data-drag-origin`, active && originKey !== void 0 && keyForElement(el) === originKey);
+				if (active) {
+					const count = this.selection.selected.size;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#nativeDragging = false;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				for (const el of this.querySelectorAll(`li`)) el.removeAttribute(`data-drag-origin`);
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => this._syncNativeDraggable(),
+			shouldStart: () => !this.#blankItemPressPending
+		});
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.renderRoot.querySelector(`.container`),
+			isEnabled: () => this.selection.canDragSelect() && this._getVisibleItems().length > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueeRect = rect;
+				for (const el of this._getVisibleItems()) el.toggleAttribute(`data-marquee`, preview.has(el));
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				for (const el of this._getVisibleItems()) el.removeAttribute(`data-marquee`);
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (dx, _dy) => {
+				if (this._listEl) this._listEl.scrollLeft += dx;
+			},
+			shouldStart: (event) => {
+				if (this.#findGroupHeader(event.composedPath())) return false;
+				this.#blankItemPressPending = this.itemsDraggable && this.#isBlankItemPress(event);
+				return !this.itemsDraggable || this.#blankItemPressPending;
+			}
+		});
+		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: SEARCH_HIGHLIGHT_KEY
+		}) });
+		this.#onListScroll = () => {
+			if (this.#viewportScrollRaf !== 0) return;
+			this.#viewportScrollRaf = requestAnimationFrame(() => {
+				this.#viewportScrollRaf = 0;
+				this.#emitViewportChangeIfChanged();
+			});
+		};
+		this._onPointerOver = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this.tickled.handlePointerEnter(item);
+		};
+		this._onPointerLeave = (e) => {
+			this.tickled.handlePointerLeave(e);
+		};
+		this._endKeyboardNav = () => {
+			this.removeAttribute(`data-keyboard-nav`);
+		};
+		this._onKeyDown = (e) => {
+			if (this.search.isOpen) return;
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if (this.selection.canSelectAll()) {
+					e.preventDefault();
+					this.selection.selectAll();
+				}
+				return;
+			}
+			if (NAV_KEYS.has(e.key) && !this.hasAttribute(`data-keyboard-nav`)) this.setAttribute(`data-keyboard-nav`, ``);
+			switch (e.key) {
+				case `ArrowDown`:
+					e.preventDefault();
+					this.#navigateDown();
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this.selection.rangeTo(cur);
+					}
+					break;
+				case `ArrowUp`:
+					e.preventDefault();
+					this.#navigateUp();
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this.selection.rangeTo(cur);
+					}
+					break;
+				case `ArrowRight`:
+					e.preventDefault();
+					this.#navigateRight();
+					break;
+				case `ArrowLeft`:
+					e.preventDefault();
+					this.#navigateLeft();
+					break;
+				case `Home`:
+					e.preventDefault();
+					this.#navigateTo(this.#findFirstCheckable());
+					break;
+				case `End`:
+					e.preventDefault();
+					this.#navigateTo(this.#findLastCheckable());
+					break;
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._dispatch(`list-item-click`, { item: id });
+						this._activateItem(id);
+					}
+					break;
+				}
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this.selection.handleSpace(id);
+					}
+					break;
+				}
+				case `Escape`: this.selection.clear();
+			}
+		};
+		this._onClick = (e) => {
+			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
+			const path = e.composedPath();
+			const header = this.#findGroupHeader(path);
+			if (header) {
+				this.toggleGroup(header.dataset.groupKey ?? ``);
+				return;
+			}
+			const item = this._findListItem(path);
+			if (!item) return;
+			this.focus();
+			this._dispatch(`list-item-click`, { item });
+			this.selection.handleClick(item, e);
+		};
+		this._onDblClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this._activateItem(item);
+		};
+		this._onWheel = (e) => {
+			e.preventDefault();
+			const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+			this._listEl.scrollLeft += delta;
+		};
+	}
+	#itemData;
+	/** The `index` each object item was formatted with — reuse is only safe at the same index. */
+	#itemIndex;
+	/** Measured column grid (content coordinates). See `#ensureGeometry`. */
+	#geometry;
+	/** Layout may have changed since `#geometry` was measured. */
+	#geometryDirty;
+	#geometryScheduled;
+	/**
+	* Watches child / visibility / key changes so the item caches below can be
+	* validated synchronously (via `takeRecords()`) on every read — they are
+	* never stale, even within the same task as the mutation.
+	*/
+	#cacheObserver;
+	#allItemsCache;
+	#visibleCache;
+	#visibleCachePredicate;
+	#tickledItemsCache;
+	#renderedKeysCache;
+	#keyIndexCache;
+	/** Item states as last written to the DOM, so `_syncItemStates` can apply just the diff. */
+	#appliedTickled;
+	#appliedSelected;
+	#appliedChecked;
+	#itemStatesFullSync;
+	#hasCheckboxes;
+	#draggableApplied;
+	#sortRaf;
+	#viewportScrollRaf;
+	/** Key sets as of the last viewport-change dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
+	#resizeObserver;
+	#mutationObserver;
+	/** Items that have already played (or been skipped for) their enter animation. */
+	#animatedItems;
+	#builtFromProvider;
+	/** Element → group key, for the selection controller. Empty while ungrouped. */
+	#groupIndex;
+	#groupList;
+	#headerEls;
+	/** Insertion sequence per item, so regrouping starts from the original order. */
+	#seq;
+	#seqNext;
+	#wasGrouped;
+	#groupsScheduled;
+	#groupByChanged;
+	#groupObserver;
+	#providerBuilt;
+	#data;
+	#nativeDragging;
+	#postDragSuppressTimer;
+	#blankItemPressPending;
+	#clearBlankItemPress;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const visible = this._getVisibleItems();
+		const originEl = visible.find((el) => keyForElement(el) === originKey);
+		if (!originEl || !this._isCheckable(originEl)) return void 0;
+		if (!this.selection.selected.has(originEl)) this.selection.replace(originEl);
+		const selected = [];
+		visible.forEach((el, index) => {
+			if (!this.selection.selected.has(el)) return;
+			const key = keyForElement(el) ?? originKey;
+			selected.push({
+				key,
+				index,
+				item: this.#itemData.get(el) ?? el,
+				element: el
+			});
+		});
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	_syncNativeDraggable() {
+		if (!this.isConnected) return;
+		if (!this.itemsDraggable && !this.#draggableApplied) return;
+		this.#draggableApplied = this.itemsDraggable;
+		for (const el of this.querySelectorAll(`li`)) if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
+	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
+	#marqueeRect;
+	#dragSelect;
+	/** A row's padding/empty area may start marquee; its actual content may drag out. */
+	#isBlankItemPress(event) {
+		const path = event.composedPath();
+		const item = this._findListItem(path);
+		if (!item) return false;
+		for (const node of path) {
+			if (node === item) break;
+			if (node instanceof Element) {
+				if (node.matches(`input, button, a, select, textarea, [contenteditable], .ixfx-list-checkbox, [role="checkbox"]`)) return false;
+				if (node.hasAttribute(`data-drag-select-blank`)) return true;
+				if (node.hasAttribute(`data-drag-select-content`)) return false;
+			}
+		}
+		return !Array.from(item.childNodes).some((node) => contentAtPoint(node, event.clientX, event.clientY));
+	}
+	/** Collect visible items whose surface-relative box intersects `rect`. */
+	#marqueeHitTest(rect) {
+		const surface = this.renderRoot.querySelector(`.container`);
+		if (!surface) return [];
+		const box = surface.getBoundingClientRect();
+		const rx0 = rect.x;
+		const ry0 = rect.y;
+		const rx1 = rect.x + rect.width;
+		const ry1 = rect.y + rect.height;
+		const out = [];
+		for (const el of this._getVisibleItems()) {
+			const r = el.getBoundingClientRect();
+			const left = r.left - box.left;
+			const top = r.top - box.top;
+			if (left <= rx1 && left + r.width >= rx0 && top <= ry1 && top + r.height >= ry0) out.push(el);
+		}
+		return out;
+	}
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
+	#searchRegistry;
+	#unregisterSearchCommands;
+	/** Command registry carrying this list's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		this.addEventListener(`pointerover`, this._onPointerOver);
+		this.addEventListener(`pointerleave`, this._onPointerLeave);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`pointermove`, this._endKeyboardNav);
+		this.addEventListener(`pointerdown`, this._endKeyboardNav);
+		this.addEventListener(`click`, this._onClick);
+		this.addEventListener(`dblclick`, this._onDblClick);
+		this.addEventListener(`wheel`, this._onWheel);
+		window.addEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.addEventListener(`pointercancel`, this.#clearBlankItemPress);
+		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
+		this.#resizeObserver.observe(this);
+		this.#mutationObserver = new MutationObserver((records) => {
+			this.#processAddedChildren(records);
+			this.#animateChildMutations(records);
+			this.#scheduleGeometry();
+			this.#scheduleGroups();
+		});
+		this.#mutationObserver.observe(this, {
+			childList: true,
+			subtree: false,
+			attributeFilter: [`hidden`]
+		});
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#animatedItems.add(el);
+		this.#cacheObserver = new MutationObserver((records) => {
+			if (records.some((r) => affectsItemCaches(this, r))) this.#dropItemCaches();
+		});
+		this.#cacheObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ITEM_CACHE_ATTRS
+		});
+		this.#dropItemCaches();
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
+		this.#scheduleGroups();
+	}
+	/**
+	* 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.#allItems().length;
+		if (fresh.length >= total) return;
+		for (const el of fresh) animateListItemIn(el);
+		window.setTimeout(() => this.#scheduleGeometry(), 230);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`pointerover`, this._onPointerOver);
+		this.removeEventListener(`pointerleave`, this._onPointerLeave);
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`pointermove`, this._endKeyboardNav);
+		this.removeEventListener(`pointerdown`, this._endKeyboardNav);
+		this.removeEventListener(`click`, this._onClick);
+		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.removeEventListener(`wheel`, this._onWheel);
+		window.removeEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.removeEventListener(`pointercancel`, this.#clearBlankItemPress);
+		this.#blankItemPressPending = false;
+		cancelAnimationFrame(this.#sortRaf);
+		cancelAnimationFrame(this.#viewportScrollRaf);
+		this.#viewportScrollRaf = 0;
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#mutationObserver?.disconnect();
+		this.#mutationObserver = void 0;
+		this.#groupObserver?.disconnect();
+		this.#groupObserver = void 0;
+		this.#cacheObserver?.disconnect();
+		this.#cacheObserver = void 0;
+		this.#dropItemCaches();
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
+	}
+	firstUpdated() {
+		this.#processChildren();
+		if (this.filterPredicate) this.#applyFilterPredicate();
+		this.#recomputeGeometry();
+		this.#scheduleViewportChangeEmit();
+		this._syncNativeDraggable();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has(`groupBy`) && this.hasUpdated) {
+			if (this._collapsedGroups.size > 0) this._collapsedGroups = /* @__PURE__ */ new Set();
+			this.#groupByChanged = true;
+		}
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`_collapsedGroups`)) {
+			this.#scheduleGroups();
+			if (this.#groupByChanged) {
+				this.#groupByChanged = false;
+				this._dispatch(`list-group-change`, { groupBy: this.groupBy });
+			}
+		}
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
+		if (changed.has(`provider`)) {
+			this.#builtFromProvider = [];
+			this.#providerBuilt = 0;
+			this.#data.provider = this.provider;
+			queueMicrotask(() => {
+				if (this.provider) this.#data.request(void 0);
+			});
+			return;
+		}
+		const shapeChanged = changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`);
+		if ((changed.has(`items`) || shapeChanged) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items, !shapeChanged);
+		this.#syncFromProvider();
+		if (changed.has(`sort`) || changed.has(`sortBy`) || changed.has(`sortComparator`)) this.#applySort();
+		if (changed.has(`filterPredicate`)) {
+			this.#applyFilterPredicate();
+			this.#scheduleGeometry();
+			this.#scheduleGroups();
+		}
+		if (changed.has(`interactionMode`)) {
+			this.selection.clearAnchor();
+			this.#itemStatesFullSync = true;
+			this._syncItemStates();
+			this._syncNativeDraggable();
+		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
+		if (changed.has(`itemsDraggable`)) {
+			this._syncNativeDraggable();
+			this.#nativeDrag.refreshDraggable();
+		}
+	}
+	/** The most recently selected item, or `undefined` if nothing is selected. */
+	get selectedItem() {
+		return [...this.selection.selected].at(-1);
+	}
+	/** The full current selection set (read-only). */
+	get selectedItems() {
+		return this.selection.selected;
+	}
+	/**
+	* Force an immediate geometry recompute. Called automatically on resize,
+	* DOM changes, sort/filter/search changes — only needed when layout is
+	* changed by outside forces (e.g. an external font load).
+	*/
+	refreshLayout() {
+		this.#recomputeGeometry();
+		this.#scheduleViewportChangeEmit();
+	}
+	addItem(item, options) {
+		let el;
+		if (typeof item === `string`) {
+			const li = document.createElement(`li`);
+			this._setLabel(li, item);
+			el = li;
+		} else el = item;
+		if (options?.notChecked) el.setAttribute(`not-checked`, ``);
+		this.appendChild(el);
+		this.#ensureIcon(el);
+		if (this.sort !== `none`) this.#applySort();
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.#scheduleGroups();
+	}
+	/**
+	* 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) {
+		this.selection.deselect(item);
+		return animateListItemOut(item).then(() => {
+			item.remove();
+			this.#scheduleGroups();
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+			this.#scheduleGeometry();
+		});
+	}
+	/** {@link removeItem} for several items at once. */
+	removeItems(items) {
+		return Promise.all([...items].map((item) => this.removeItem(item))).then(() => void 0);
+	}
+	clearItems() {
+		this.replaceChildren();
+		this.#headerEls.clear();
+		this.#scheduleGroups();
+		this.selection.reset();
+		this.#builtFromProvider = [];
+		this.#providerBuilt = 0;
+		this._syncItemStates();
+	}
+	/**
+	* Replace the entire item list in one call.
+	* Equivalent to `clearItems()` followed by `addItem()` for each element.
+	*/
+	setItems(items) {
+		this.clearItems();
+		for (const item of items) {
+			this.appendChild(item);
+			this.#ensureIcon(item);
+		}
+		if (this.sort !== `none`) this.#applySort();
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.#scheduleGroups();
+	}
+	/**
+	* Get the source object behind an `<li>` built from an `items` array or
+	* provider. Returns `undefined` for declarative / programmatic elements.
+	*/
+	getItemData(item) {
+		return this.#itemData.get(item);
+	}
+	/**
+	* Keys of items currently intersecting the viewport — for prioritising
+	* viewport-first work (e.g. metadata/thumbnail fetches). Items are laid
+	* out as a fixed-height, horizontally-scrolling column grid, so this is a
+	* horizontal intersection test against the scroll container; every row of
+	* an intersecting column counts as visible. Hidden (filtered-out) and
+	* keyless items are omitted. Mirrors `ixfx-grid-list.visibleKeys()` /
+	* `ixfx-data-grid.getVisibleRange()`.
+	*/
+	visibleKeys() {
+		const container = this._listEl;
+		if (!container) return [];
+		const start = container.scrollLeft;
+		const end = start + container.getBoundingClientRect().width;
+		const out = [];
+		for (const el of itemsInSpanByOrder(this._getVisibleItems(), contentOrigin(container), start, end)) {
+			const key = keyForElement(el);
+			if (key !== void 0) out.push(key);
+		}
+		return out;
+	}
+	/**
+	* Dispatch a command to this list — used by `ixfx-grouped-item-lister` to
+	* forward commands. Routes through the command registry (so `list.search.*`
+	* and any other registered commands work).
+	*/
+	dispatch(commandId, args) {
+		this.#searchRegistry?.invoke(commandId, args);
+	}
+	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();
+	}
+	/** 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) {
+		if (!this.#keyIndexCache) {
+			const index = /* @__PURE__ */ new Map();
+			for (const el of this.#allItems()) {
+				const k = keyForElement(el);
+				if (k !== void 0 && !index.has(k)) index.set(k, el);
+			}
+			this.#keyIndexCache = index;
+		}
+		return this.#keyIndexCache.get(key);
+	}
+	*selectedFilter(kind) {
+		const wanted = (el) => {
+			switch (kind) {
+				case `selected`: return el.hasAttribute(`data-selected`);
+				case `checked`: return el.hasAttribute(`data-checked`);
+				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
+			}
+		};
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (el.hidden) continue;
+			if (wanted(el)) yield el;
+		}
+	}
+	#rebuildFromObjects(items, reuseRows = false) {
+		const keyOf = (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? null;
+		const previousKeys = new Set([...this.selection.selected].map(keyOf).filter((k) => k !== null));
+		const anchorKey = this.selection.anchor ? keyOf(this.selection.anchor) : null;
+		if (reuseRows) this.#reconcileObjectRows(items);
+		else this.replaceChildren(...items.map((item, index) => this.#createItemEl(item, index)));
+		if (previousKeys.size > 0 || anchorKey !== null) {
+			const next = [];
+			let anchor;
+			for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+				const key = keyOf(el);
+				if (key !== null && previousKeys.has(key)) next.push(el);
+				if (key !== null && key === anchorKey) anchor = el;
+			}
+			this.selection.seed(next, anchor);
+		}
+		if (this.sort !== `none`) this.#applySort();
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this._syncItemStates();
+		this.#scheduleGeometry();
+		this.#scheduleGroups();
+	}
+	/**
+	* Update the rows to match `items`, keeping the `<li>` of every object that
+	* is still present (by identity) instead of rebuilding all of them — so
+	* `items = [...items, next]` creates one row, not thousands. A row built by
+	* a `formatter` is only kept at the same index, since the formatter receives
+	* the index.
+	*/
+	#reconcileObjectRows(items) {
+		const reusable = /* @__PURE__ */ new Map();
+		for (const li of this.#allItems()) if (this.#itemData.has(li) && !reusable.has(this.#itemData.get(li))) reusable.set(this.#itemData.get(li), li);
+		const next = items.map((item, index) => {
+			const li = reusable.get(item);
+			if (li && (!this.formatter || this.#itemIndex.get(li) === index)) {
+				reusable.delete(item);
+				return li;
+			}
+			return this.#createItemEl(item, index);
+		});
+		const keep = new Set(next);
+		for (const li of this.#allItems()) if (!keep.has(li)) li.remove();
+		if (this.#groupingActive()) {
+			for (const li of next) this.#seq.set(li, this.#seqNext++);
+			this.append(...next.filter((li) => li.parentElement !== this));
+			this.#scheduleGroups();
+			return;
+		}
+		syncChildOrder(this, next, (el) => el.localName === `li`);
+	}
+	#createItemEl(item, index) {
+		const li = document.createElement(`li`);
+		this.#itemData.set(li, item);
+		this.#itemIndex.set(li, index);
+		const content = this.formatter ? this.formatter(item, index) : this.displayProperty ? this.#propertyValue(item, this.displayProperty) : item;
+		const textColor = this.#colorValue(item, this.textColorProperty);
+		const iconColor = this.#colorValue(item, this.iconColorProperty);
+		if (iconColor !== void 0) li.setAttribute(`data-icon-color`, iconColor);
+		if (typeof content === `string`) {
+			const span = this._setLabel(li, content);
+			if (textColor !== void 0) span.style.color = textColor;
+			if (this.iconProperty) {
+				const icon = this.#propertyValue(item, this.iconProperty);
+				if (typeof icon === `string` && icon.length > 0) li.setAttribute(`data-icon`, icon);
+			}
+		} else if (content instanceof Node) {
+			li.appendChild(content);
+			if (textColor !== void 0) li.style.color = textColor;
+		}
+		if (this.keyProperty) {
+			const key = this.#propertyValue(item, this.keyProperty);
+			if (key !== void 0 && key !== null) li.setAttribute(`data-key`, String(key));
+		}
+		this.#ensureIcon(li);
+		this.#ensureBadge(li, this.#propertyValue(item, this.badgeProperty));
+		return li;
+	}
+	#propertyValue(item, prop) {
+		if (typeof item !== `object` || item === null || !(prop in item)) return void 0;
+		return item[prop];
+	}
+	/** A non-empty string from `item[prop]`, else `undefined`. */
+	#colorValue(item, prop) {
+		return prop ? appearanceColor(this.#propertyValue(item, prop)) : void 0;
+	}
+	#syncFromProvider() {
+		if (this.provider === void 0) return;
+		const items = this.#data.items;
+		if (items === this.#builtFromProvider) return;
+		let prefix = 0;
+		while (prefix < this.#builtFromProvider.length && prefix < items.length && this.#builtFromProvider[prefix] === items[prefix]) prefix++;
+		if (prefix === this.#builtFromProvider.length && prefix <= items.length) {
+			const tail = items.slice(prefix);
+			for (const item of tail) this.appendChild(this.#createItemEl(item, this.#providerBuilt++));
+			if (this.sort !== `none`) {
+				cancelAnimationFrame(this.#sortRaf);
+				this.#sortRaf = requestAnimationFrame(() => this.#applySort());
+			}
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+			this._syncItemStates();
+			this.#scheduleGeometry();
+			this.#scheduleGroups();
+		} else {
+			this.#providerBuilt = 0;
+			this.#rebuildFromObjects(items);
+		}
+		this.#builtFromProvider = items;
+	}
+	#applyFilterPredicate() {
+		if (!this.filterPredicate) {
+			for (const el of this.querySelectorAll(ITEM_SELECTOR)) el.removeAttribute(`hidden`);
+			return;
+		}
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
+		else el.setAttribute(`hidden`, ``);
+	}
+	#applySort() {
+		if (this.sort === `none`) return;
+		const rows = [...this.querySelectorAll(ITEM_SELECTOR)];
+		if (rows.length < 2) return;
+		if (this.#groupingActive()) {
+			this.#scheduleGroups();
+			return;
+		}
+		syncChildOrder(this, this.#sortRows(rows), (el) => el.localName === `li`);
+		this.#scheduleGeometry();
+		this.#scheduleGroups();
+	}
+	/** Stable sort of `rows` by the current `sort` / `sortBy` / `sortComparator`. */
+	#sortRows(rows) {
+		const dir = this.sort === `descending` ? -1 : 1;
+		const metas = rows.map((el) => ({
+			element: el,
+			data: this.getItemData(el),
+			label: el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``
+		}));
+		const collator = new Intl.Collator(void 0, { numeric: true });
+		let cmp;
+		if (this.sortComparator) {
+			const user = this.sortComparator;
+			cmp = (a, b) => user(metas[a], metas[b]);
+		} else if (this.sortBy) {
+			const prop = this.sortBy;
+			const keys = metas.map((m) => {
+				const v = this.#propertyValue(m.data, prop);
+				if (typeof v === `number`) return v;
+				return v === void 0 || v === null ? `` : String(v);
+			});
+			cmp = (a, b) => {
+				const ka = keys[a];
+				const kb = keys[b];
+				if (typeof ka === `number` && typeof kb === `number`) return ka - kb;
+				return collator.compare(String(ka), String(kb));
+			};
+		} else cmp = (a, b) => collator.compare(metas[a].label, metas[b].label);
+		const order = rows.map((_, i) => i);
+		order.sort((a, b) => cmp(a, b) * dir || a - b);
+		return order.map((i) => rows[i]);
+	}
+	#groupingActive() {
+		return this.groupBy !== null && this.groupBy !== void 0 && this.groupBy !== ``;
+	}
+	/** Coalesce regrouping to one pass per microtask (streaming batches, search keystrokes). */
+	#scheduleGroups() {
+		if (this.#groupsScheduled || !this.#groupingActive() && !this.#wasGrouped) return;
+		this.#groupsScheduled = true;
+		queueMicrotask(() => {
+			this.#groupsScheduled = false;
+			this.#syncGroups();
+		});
+	}
+	#groupValue(el, name) {
+		return this.#propertyValue(this.getItemData(el), name) ?? el.getAttribute(`data-${name}`);
+	}
+	#groupKeyOf(el) {
+		const by = this.groupBy;
+		if (typeof by === `string`) return toGroupKey(this.#groupValue(el, by));
+		return toGroupKey(by(this.getItemData(el), el));
+	}
+	#isItemVisible(el) {
+		return !el.hidden && (!this.filterPredicate || this.filterPredicate(el));
+	}
+	#headerFor(key) {
+		let header = this.#headerEls.get(key);
+		if (!header) {
+			header = document.createElement(`ixfx-list-group-header`);
+			header.setAttribute(GROUP_HEADER_ATTR, ``);
+			header.dataset.groupKey = key;
+			this.#headerEls.set(key, header);
+		}
+		return header;
+	}
+	/**
+	* Bring the light DOM into grouped order: original order → sort → partition
+	* into contiguous groups, each preceded by a header row. Idempotent — it only
+	* touches the DOM when the order actually changes, so it never loops through
+	* the mutation observer. Ungrouping restores the original (sorted) order.
+	*/
+	#syncGroups() {
+		const active = this.#groupingActive();
+		if (!active && !this.#wasGrouped) return;
+		const items = this.#allItems();
+		for (const el of items) if (!this.#seq.has(el)) this.#seq.set(el, this.#seqNext++);
+		let ordered = items.toSorted((a, b) => this.#seq.get(a) - this.#seq.get(b));
+		if (this.sort !== `none` && ordered.length > 1) ordered = this.#sortRows(ordered);
+		const nodes = [];
+		const info = [];
+		const index = /* @__PURE__ */ new Map();
+		const liveHeaders = /* @__PURE__ */ new Set();
+		if (active) {
+			const label = this.groupLabel;
+			const parts = partitionByGroup(ordered, (el) => this.#groupKeyOf(el), label ? (key, els) => label(key, els.map((el) => this.getItemData(el) ?? el)) : void 0);
+			for (const part of parts) {
+				const count = part.items.filter((el) => this.#isItemVisible(el)).length;
+				const collapsed = count > 0 && this._collapsedGroups.has(part.key);
+				if (count > 0) {
+					const header = this.#headerFor(part.key);
+					header.label = part.label;
+					header.count = count;
+					header.collapsed = collapsed;
+					liveHeaders.add(part.key);
+					nodes.push(header);
+					info.push({
+						key: part.key,
+						label: part.label,
+						count,
+						collapsed: this._collapsedGroups.has(part.key)
+					});
+				}
+				for (const el of part.items) {
+					index.set(el, part.key);
+					el.toggleAttribute(GROUP_COLLAPSED_ATTR, collapsed);
+					nodes.push(el);
+				}
+			}
+		} else {
+			for (const el of ordered) el.removeAttribute(GROUP_COLLAPSED_ATTR);
+			nodes.push(...ordered);
+		}
+		for (const [key, header] of this.#headerEls) if (!liveHeaders.has(key)) {
+			header.remove();
+			this.#headerEls.delete(key);
+		}
+		this.#groupIndex = index;
+		this.#groupList = info;
+		this.#wasGrouped = active;
+		syncChildOrder(this, nodes, (c) => c.localName === `li` || c.hasAttribute(GROUP_HEADER_ATTR));
+		if (this.tickled.tickledId?.hasAttribute(GROUP_COLLAPSED_ATTR)) this.tickled.focus(void 0);
+		this.#syncGroupObserver(active);
+		this.#scheduleGeometry();
+	}
+	/** Filter-search hides rows via `hidden` on the `<li>`s — regroup when that changes. */
+	#syncGroupObserver(active) {
+		if (!active) {
+			this.#groupObserver?.disconnect();
+			this.#groupObserver = void 0;
+			return;
+		}
+		if (this.#groupObserver || !this.isConnected) return;
+		this.#groupObserver = new MutationObserver(() => this.#scheduleGroups());
+		this.#groupObserver.observe(this, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: [`hidden`]
+		});
+	}
+	/** Groups in display order (empty when ungrouped). */
+	get groups() {
+		return this.#groupList;
+	}
+	/** Collapse or expand one group. Fires `list-group-toggle` when the state changes. */
+	setGroupCollapsed(groupKey, collapsed) {
+		if (this._collapsedGroups.has(groupKey) === collapsed) return;
+		const next = new Set(this._collapsedGroups);
+		if (collapsed) next.add(groupKey);
+		else next.delete(groupKey);
+		this._collapsedGroups = next;
+		this._dispatch(`list-group-toggle`, {
+			groupKey,
+			collapsed
+		});
+	}
+	toggleGroup(groupKey) {
+		this.setGroupCollapsed(groupKey, !this._collapsedGroups.has(groupKey));
+	}
+	collapseAllGroups() {
+		for (const g of this.#groupList) this.setGroupCollapsed(g.key, true);
+	}
+	expandAllGroups() {
+		for (const key of [...this._collapsedGroups]) this.setGroupCollapsed(key, false);
+	}
+	#findGroupHeader(path) {
+		for (const target of path) {
+			if (target === this) break;
+			if (target instanceof HTMLElement && target.parentElement === this && target.hasAttribute(GROUP_HEADER_ATTR)) return target;
+		}
+	}
+	/**
+	* Mark the layout dirty and, next frame, check for a viewport change.
+	* Geometry moves (resize, filter, sort, DOM changes) can change the visible
+	* set without a scroll, so every layout-changing path comes through here.
+	* The grid itself is re-measured lazily, by whoever needs it next.
+	*/
+	#scheduleGeometry() {
+		this.#geometryDirty = true;
+		if (this.#geometryScheduled) return;
+		this.#geometryScheduled = true;
+		requestAnimationFrame(() => {
+			this.#geometryScheduled = false;
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/** Re-measure the column grid now (one layout read per visible item). */
+	#recomputeGeometry() {
+		this.#geometryDirty = false;
+		this.#geometry = this.isConnected && this._listEl ? measureGeometry(this._getVisibleItems(), contentOrigin(this._listEl)) : EMPTY_GEOMETRY;
+	}
+	/**
+	* The column grid, re-measured only if it's known dirty or a few probe items
+	* have moved (catches layout changes nothing told us about, e.g. a CSS
+	* variable change). Cheap enough to call per keypress / scroll frame.
+	*/
+	#ensureGeometry() {
+		const visible = this._getVisibleItems();
+		if (this.#geometryDirty || !this._listEl) {
+			this.#recomputeGeometry();
+			return this.#geometry;
+		}
+		const cursor = this.tickled.tickledId;
+		const probes = [
+			visible[0],
+			cursor && this.#geometry.positions.has(cursor) ? cursor : void 0,
+			visible.at(-1)
+		];
+		if (!geometryMatches(this.#geometry, probes, contentOrigin(this._listEl))) this.#recomputeGeometry();
+		return this.#geometry;
+	}
+	#positionOf(el) {
+		let pos = this.#geometry.positions.get(el);
+		if (pos === void 0) {
+			this.#recomputeGeometry();
+			pos = this.#geometry.positions.get(el);
+		}
+		return pos;
+	}
+	#column(col) {
+		return this.#geometry.columns[col]?.items;
+	}
+	#itemAt(col, row) {
+		return this.#column(col)?.[row];
+	}
+	#gridSize() {
+		const { columns } = this.#ensureGeometry();
+		return {
+			cols: columns.length,
+			rows: Math.max(0, ...columns.map((c) => c.items.length))
+		};
+	}
+	#navigateTo(target) {
+		if (!target) return;
+		this.tickled.handleKeyboardNavigation(target);
+		this.tickled.tickledId?.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+	}
+	#findNextCheckable(fromCol, fromRow, deltaCol, deltaRow) {
+		const { cols } = this.#gridSize();
+		const maxIterations = this._getVisibleItems().length + 1;
+		let col = deltaCol !== 0 ? fromCol + deltaCol : fromCol;
+		let row = deltaRow !== 0 ? fromRow + deltaRow : fromRow;
+		let wrappedColumns = false;
+		for (let iterations = 0; iterations < maxIterations; iterations++) {
+			const colLength = this.#column(col)?.length ?? 0;
+			if (row < 0 || row >= colLength) {
+				if (deltaCol !== 0 || wrappedColumns) {
+					if (this.itemWrap === `wrap`) {
+						if (deltaCol < 0) col = cols - 1;
+						else if (deltaCol > 0) col = 0;
+						wrappedColumns = true;
+					} else return;
+				}
+				if (deltaRow > 0) {
+					if (col + 1 < cols) {
+						col = col + 1;
+						row = 0;
+						wrappedColumns = true;
+					} else if (this.itemWrap === `wrap`) {
+						col = 0;
+						row = 0;
+						wrappedColumns = true;
+					} else return;
+				} else if (deltaRow < 0) {
+					if (col - 1 >= 0) {
+						col = col - 1;
+						row = (this.#column(col)?.length ?? 1) - 1;
+						wrappedColumns = true;
+					} else if (this.itemWrap === `wrap`) {
+						col = cols - 1;
+						row = (this.#column(col)?.length ?? 1) - 1;
+						wrappedColumns = true;
+					} else return;
+				} else if (deltaCol !== 0) {
+					const targetColLength = this.#column(col)?.length ?? 0;
+					if (row >= targetColLength && targetColLength > 0) row = targetColLength - 1;
+				}
+				if (col === fromCol && row === fromRow + deltaRow) return;
+				continue;
+			}
+			const item = this.#itemAt(col, row);
+			if (item && this._isCheckable(item)) return item;
+			row += deltaRow;
+		}
+	}
+	#findFirstCheckable() {
+		return this._getVisibleItems().find((item) => this._isCheckable(item));
+	}
+	#findLastCheckable() {
+		const visibleItems = this._getVisibleItems();
+		for (let i = visibleItems.length - 1; i >= 0; i--) if (this._isCheckable(visibleItems[i])) return visibleItems[i];
+	}
+	#navigateDown() {
+		this.#ensureGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findFirstCheckable());
+			return;
+		}
+		const next = this.#findNextCheckable(cur.col, cur.row, 0, 1);
+		if (next) this.#navigateTo(next);
+	}
+	#navigateUp() {
+		this.#ensureGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findLastCheckable());
+			return;
+		}
+		const next = this.#findNextCheckable(cur.col, cur.row, 0, -1);
+		if (next) this.#navigateTo(next);
+	}
+	/**
+	* Left/Right target. Ungrouped lists keep the row-index rule. Grouped lists
+	* have headers at arbitrary heights, so an item's row index no longer equals
+	* its visual row — pick the item in the neighbouring column whose top is
+	* nearest the cursor's (ties go to the upper one).
+	*/
+	#horizontalTarget(from, dir) {
+		if (this.#groupList.length === 0) return this.#findNextCheckable(from.col, from.row, dir, 0);
+		const column = this.#column(from.col + dir);
+		const current = this.tickled.tickledId;
+		const top = current ? this.#geometry.tops.get(current) : void 0;
+		if (!column || top === void 0) return void 0;
+		let best;
+		let bestDelta = Number.POSITIVE_INFINITY;
+		for (const el of column) {
+			if (!this._isCheckable(el)) continue;
+			const delta = Math.abs((this.#geometry.tops.get(el) ?? Number.POSITIVE_INFINITY) - top);
+			if (delta < bestDelta) {
+				best = el;
+				bestDelta = delta;
+			}
+		}
+		return best;
+	}
+	#navigateRight() {
+		this.#ensureGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findFirstCheckable());
+			return;
+		}
+		const next = this.#horizontalTarget(cur, 1);
+		if (next) this.#navigateTo(next);
+		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findFirstCheckable());
+	}
+	#navigateLeft() {
+		this.#ensureGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findFirstCheckable());
+			return;
+		}
+		const next = this.#horizontalTarget(cur, -1);
+		if (next) this.#navigateTo(next);
+		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
+	}
+	/**
+	* Visible items in DOM order. Cached — every per-hover / per-frame path
+	* reads it — and validated on each call, so it is never stale.
+	*/
+	_getVisibleItems() {
+		this.#validateItemCaches();
+		if (this.#visibleCachePredicate !== this.filterPredicate) {
+			this.#dropVisibleCaches();
+			this.#visibleCachePredicate = this.filterPredicate;
+		}
+		this.#visibleCache ??= this.#allItems().filter((el) => {
+			if (el.hidden) return false;
+			if (el.hasAttribute(GROUP_COLLAPSED_ATTR)) return false;
+			if (this.filterPredicate && !this.filterPredicate(el)) return false;
+			return true;
+		});
+		return this.#visibleCache;
+	}
+	/** Every item (`<li>` child), in DOM order. Cached like `_getVisibleItems`. */
+	#allItems() {
+		this.#validateItemCaches();
+		this.#allItemsCache ??= [...this.querySelectorAll(ITEM_SELECTOR)];
+		return this.#allItemsCache;
+	}
+	/** Drop the item caches if anything relevant changed since they were built. */
+	#validateItemCaches() {
+		if (!this.#cacheObserver) {
+			this.#dropItemCaches();
+			return;
+		}
+		if (this.#cacheObserver.takeRecords().some((r) => affectsItemCaches(this, r))) this.#dropItemCaches();
+	}
+	#dropItemCaches() {
+		this.#allItemsCache = void 0;
+		this.#keyIndexCache = void 0;
+		this.#itemStatesFullSync = true;
+		this.#dropVisibleCaches();
+	}
+	#dropVisibleCaches() {
+		this.#visibleCache = void 0;
+		this.#tickledItemsCache = void 0;
+		this.#renderedKeysCache = void 0;
+		this.#geometryDirty = 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`);
+	}
+	/** Appends the caption span; returns it so callers can style it per item. */
+	_setLabel(li, label) {
+		const span = document.createElement(`span`);
+		span.style.cssText = LABEL_SPAN_CSS;
+		span.textContent = label;
+		li.appendChild(span);
+		li.setAttribute(`data-search-label`, label);
+		return span;
+	}
+	/**
+	* Inject a leading `<ixfx-icon>` into an item carrying `data-icon`.
+	* Idempotent — skips when the item already starts with an icon.
+	*/
+	#ensureIcon(li) {
+		const name = li.getAttribute(`data-icon`);
+		if (!name) return;
+		if (li.firstElementChild?.tagName === `IXFX-ICON`) return;
+		const icon = document.createElement(`ixfx-icon`);
+		icon.setAttribute(`name`, name);
+		icon.style.marginInlineEnd = `var(--detail-list-icon-gap, 6px)`;
+		icon.style.flexShrink = `0`;
+		const color = li.getAttribute(`data-icon-color`);
+		if (color) icon.style.color = color;
+		li.prepend(icon);
+	}
+	/**
+	* Append a right-justified Finder-style badge. `badge` may be a DOM `Node`
+	* or anything Lit can render (typically a `TemplateResult`). Idempotent —
+	* a second call replaces the existing badge.
+	*/
+	#ensureBadge(li, badge) {
+		if (appearanceAbsent(badge)) return;
+		let holder = li.querySelector(`:scope > .item-badge`);
+		if (!holder) {
+			holder = document.createElement(`span`);
+			holder.className = `item-badge`;
+			holder.style.cssText = BADGE_EL_CSS;
+			li.appendChild(holder);
+		}
+		holder.replaceChildren();
+		if (badge instanceof Node) holder.appendChild(badge);
+		else render(badge, holder);
+	}
+	/** Scan light-DOM children for unprocessed `data-icon` items. */
+	#processChildren() {
+		for (const el of this.#allItems()) this.#ensureIcon(el);
+	}
+	/** `#processChildren` for just the items a batch of mutations added. */
+	#processAddedChildren(records) {
+		for (const record of records) for (const node of record.addedNodes) if (node instanceof HTMLLIElement && node.parentElement === this) this.#ensureIcon(node);
+	}
+	/**
+	* Reflect cursor / selection / checked state onto the items. After the item
+	* set changes (or the interaction mode does) every item is visited; otherwise
+	* only the items whose state changed are touched, so hovering is O(1).
+	*/
+	_syncItemStates() {
+		const selected = this.selection.selected;
+		const checked = this.interactionMode === `checked` ? new Set([...selected].filter((el) => !el.hasAttribute(`not-checked`))) : /* @__PURE__ */ new Set();
+		const tickled = this.tickled.tickledId;
+		const selectionChanged = this.#itemStatesFullSync || !sameMembers(this.#appliedSelected, selected) || !sameMembers(this.#appliedChecked, checked);
+		if (this.#itemStatesFullSync) {
+			for (const el of this.#allItems()) {
+				el.toggleAttribute(`data-tickled`, el === tickled);
+				el.toggleAttribute(`data-selected`, selected.has(el));
+				el.toggleAttribute(`data-checked`, checked.has(el));
+			}
+			this.#itemStatesFullSync = false;
+		} else {
+			if (tickled !== this.#appliedTickled) {
+				this.#appliedTickled?.removeAttribute(`data-tickled`);
+				tickled?.setAttribute(`data-tickled`, ``);
+			}
+			applySetDiff(this.#appliedSelected, selected, `data-selected`);
+			applySetDiff(this.#appliedChecked, checked, `data-checked`);
+		}
+		this.#appliedTickled = tickled;
+		this.#appliedSelected = new Set(selected);
+		this.#appliedChecked = checked;
+		if (this.dataset.inputMode !== this.tickled.inputMode) this.dataset.inputMode = this.tickled.inputMode;
+		if (selectionChanged) this._syncCheckboxes();
+	}
+	_syncCheckboxes() {
+		const inCheckedMode = this.interactionMode === `checked`;
+		const wantsCustom = typeof this.checkboxRenderer === `function`;
+		if (!inCheckedMode && !this.#hasCheckboxes) return;
+		this.#hasCheckboxes = inCheckedMode;
+		for (const el of this.querySelectorAll(`li`)) {
+			const existing = el.querySelector(`.ixfx-list-checkbox`);
+			if (!inCheckedMode) {
+				if (existing) existing.remove();
+				continue;
+			}
+			if (el.hasAttribute(`not-checked`)) {
+				if (existing) existing.remove();
+				continue;
+			}
+			const existingIsCustom = existing?.classList.contains(`ixfx-list-checkbox-custom`) ?? false;
+			if (existing && existingIsCustom !== wantsCustom) existing.remove();
+			let cb = el.querySelector(`.ixfx-list-checkbox`);
+			if (!cb) {
+				if (wantsCustom) {
+					const opts = this.checkboxRenderer;
+					const margin = opts.margin ?? `0`;
+					const width = opts.width ?? `24px`;
+					cb = this._createCustomCheckbox(el, margin, width);
+				} else cb = this._createNativeCheckboxCell(el);
+				el.prepend(cb);
+			}
+			const checked = this.selection.selected.has(el);
+			if (wantsCustom) {
+				cb.setAttribute(`aria-checked`, String(checked));
+				cb.toggleAttribute(`data-checked`, checked);
+				if (this.checkboxRenderer) {
+					const renderer = typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer;
+					render(renderer(checked), cb);
+				}
+			} else {
+				const input = cb.querySelector(`input.ixfx-list-checkbox`);
+				if (input) input.checked = checked;
+			}
+		}
+	}
+	/**
+	* Native checkbox cell: a span that stretches to the row's full cross-axis
+	* (so the entire column height is a click target) with a real `<input>`
+	* centred inside. The span owns the click; the input is purely visual and
+	* has `pointer-events:none` so a single click produces one toggle.
+	*/
+	_createNativeCheckboxCell(el) {
+		const cell = document.createElement(`span`);
+		cell.className = `ixfx-list-checkbox ixfx-list-checkbox-native`;
+		cell.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:18px;margin:0 6px 0 0;cursor:pointer;pointer-events:auto`;
+		cell.tabIndex = -1;
+		cell.setAttribute(`role`, `checkbox`);
+		cell.setAttribute(`part`, `checkbox`);
+		cell.addEventListener(`click`, (e) => {
+			e.stopPropagation();
+			this.selection.toggle(el);
+		});
+		const input = document.createElement(`input`);
+		input.type = `checkbox`;
+		input.className = `ixfx-list-checkbox`;
+		input.style.cssText = `pointer-events:none;cursor:pointer;margin:0`;
+		cell.appendChild(input);
+		return cell;
+	}
+	/** Custom checkbox cell: same shape as the native cell; renderer content inside. */
+	_createCustomCheckbox(el, margin, width) {
+		const span = document.createElement(`span`);
+		span.className = `ixfx-list-checkbox ixfx-list-checkbox-custom`;
+		span.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:${width};margin:${margin};cursor:pointer;pointer-events:auto`;
+		span.tabIndex = -1;
+		span.setAttribute(`role`, `checkbox`);
+		span.setAttribute(`part`, `checkbox`);
+		span.addEventListener(`click`, (e) => {
+			e.stopPropagation();
+			this.selection.toggle(el);
+		});
+		return span;
+	}
+	_findListItem(path) {
+		for (const target of path) {
+			if (!(target instanceof Element)) continue;
+			if (target === this) break;
+			if (target.parentElement === this && target.matches(`li`)) return target;
+		}
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_dispatchCancelable(name, detail) {
+		return this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	/** Scroll on the `part="list"` element — rAF-coalesced viewport-change check. */
+	#onListScroll;
+	/** Coalesce non-scroll viewport checks to at most one per animation frame. */
+	#scheduleViewportChangeEmit() {
+		if (this.#viewportScrollRaf !== 0) return;
+		this.#viewportScrollRaf = requestAnimationFrame(() => {
+			this.#viewportScrollRaf = 0;
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/**
+	* Keys of everything currently rendered. The list has no virtual window —
+	* every non-hidden item is in the DOM — so this is all keyed items, mirroring
+	* `ixfx-vertical-list.renderedKeys()` in its non-virtualized mode.
+	*/
+	#renderedKeys() {
+		const visible = this._getVisibleItems();
+		this.#renderedKeysCache ??= visible.flatMap((el) => {
+			const key = keyForElement(el);
+			return key === void 0 ? [] : [key];
+		});
+		return this.#renderedKeysCache;
+	}
+	/**
+	* Dispatch `detail-list-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
+	#emitViewportChangeIfChanged() {
+		const renderedKeys = this.#renderedKeys();
+		const visibleKeys = this.visibleKeys();
+		if (sameKeys(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
+		this._dispatch(`detail-list-viewport-change`, {
+			renderedKeys,
+			visibleKeys
+		});
+	}
+	_activateItem(item) {
+		if (this.interactionMode !== `manual`) this.selection.replace(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			scrollFadeStyles(`x`),
+			listSearchStyles,
+			css`
+    :host {
+      display: block;
+      position: relative;
+      background: var(--detail-list-bg, var(--surface-3));
+      color: var(--detail-list-text, var(--surface-3-text));
+      border-radius: var(--detail-list-radius, var(--radius-s));
+      border: 1px solid var(--detail-list-border, var(--border));
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
+      outline: none;
+      --_detail-list-item-padding:
+        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-xs, 3px)));
+    }
+
+    :host(:focus-visible) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      /* keep the last column clear of the scrollbar / right edge */
+      padding-inline-end: calc(var(--detail-list-column-gap, 8px) + 4px);
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-flow: column wrap;
+      align-content: flex-start;
+      column-gap: var(--detail-list-column-gap, 8px);
+      overflow-x: auto;
+      overflow-y: hidden;
+      box-sizing: border-box;
+      /* Scrollbar theming: consumers override these CSS variables to control
+         the native scrollbar (scrollbar-width, scrollbar-gutter, scrollbar-color). */
+      scrollbar-width: var(--detail-list-scrollbar-width, auto);
+      scrollbar-gutter: var(--detail-list-scrollbar-gutter, auto);
+      scrollbar-color: var(--detail-list-scrollbar-color, auto);
+    }
+
+    ::slotted([hidden]) {
+      display: none !important;
+    }
+
+    /* Rows of a collapsed group leave the flow; their header stays. */
+    ::slotted([data-group-collapsed]) {
+      display: none !important;
+    }
+
+    /* Group headers are rows in the column flow, the same size as an item. */
+    ::slotted(ixfx-list-group-header) {
+      box-sizing: border-box;
+      flex: none;
+      width: var(--detail-list-column-width, 220px);
+      height: var(--detail-list-item-height, 28px);
+      --list-group-header-height: var(--detail-list-group-header-height, var(--detail-list-item-height, 28px));
+    }
+
+    ::slotted(li) {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      flex: none;
+      /* Paint-isolates each row, so restyling one row (hover, selection)
+         doesn't repaint the whole list: ~3.5x less render work per hover at
+         10k rows, for ~0.6ms more compositor commit per scroll frame. Paint
+         only: layout/style containment add nothing here, and no size
+         containment — fitColumnWidth() measures rows at max-content. */
+      contain: paint;
+      width: var(--detail-list-column-width, 220px);
+      height: var(--detail-list-item-height, 28px);
+      padding: var(--_detail-list-item-padding);
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      outline: 1px solid transparent;
+    }
+
+    /* While navigating by keyboard, key-repeat outpaces the 0.1s fade so the
+       cursor smears across rows. Snap instead. */
+    :host([data-keyboard-nav]) ::slotted(li) {
+      transition: none;
+    }
+
+    /* In checked mode, only the checkbox column is clickable; the row body
+       gets a default cursor so it doesn't suggest otherwise. */
+    :host([interaction-mode="checked"]) ::slotted(li) {
+      cursor: default;
+    }
+
+    ::slotted([data-tickled]) {
+      background: var(--item-bg-tickled);
+      outline: var(--item-border-tickled);
+    }
+
+    ::slotted([data-selected]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+      outline: 1px solid transparent;
+    }
+
+    ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-selected-tickled);
+      outline: 2px dashed var(--surface-3);
+      outline-offset: -2px;
+    }
+
+    /* Drag-select (marquee) rectangle + covered-row preview.
+       Style hooks: part="marquee", --detail-list-marquee-border,
+       --detail-list-marquee-fill. */
+    .marquee {
+      position: absolute;
+      pointer-events: none;
+      z-index: 5;
+      border: 1px solid var(--detail-list-marquee-border, var(--accent));
+      background: var(--detail-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+    }
+
+    ::slotted([data-marquee]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+    }
+
+    ::slotted([data-drag-origin]) {
+      opacity: 0.6;
+    }
+
+    /* Per-item icon / badge (adapter mode) are styled inline by
+       #ensureBadge — ::slotted() only reaches the host's direct children,
+       and these spans live inside a slotted <li>. */
+
+    /* checked mode: the injected checkbox communicates selection — suppress bg */
+    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
+      background: transparent;
+      color: inherit;
+      outline: 1px solid transparent;
+    }
+
+    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-tickled);
+      color: inherit;
+      outline: var(--item-border-tickled);
+    }
+
+    .loading {
+      position: absolute;
+      bottom: 8px;
+      right: 8px;
+      z-index: 10;
+      background: var(--surface-4, #2a2a2a);
+      border: 1px solid var(--border, #444);
+      border-radius: var(--radius-m, 4px);
+      padding: 2px 8px;
+      font-size: var(--text-s, 11px);
+      color: var(--surface-muted-text, #888);
+    }
+
+    .loading[hidden] {
+      display: none;
+    }
+  `
+		];
+	}
+	render() {
+		const loading = this.#data.loading;
+		const progress = this.#data.progress;
+		return html`
+      <div class="container">
+        <ul part="list" class="scroll-fade-x" @scroll=${this.#onListScroll}>
+          <slot></slot>
+        </ul>
+        ${this.#marqueeRect ? html`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
+        <div class="loading" part="loading" ?hidden=${!loading}>
+          ${loading ? progress !== void 0 ? `${Math.round(progress * 100)}%` : `loading…` : nothing}
+        </div>
+        ${this.search.renderField()}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], DetailListElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], DetailListElement.prototype, "interactionMode", void 0);
+__decorate([property({ type: String })], DetailListElement.prototype, "sort", void 0);
+__decorate([property({
+	type: String,
+	attribute: `sort-by`
+})], DetailListElement.prototype, "sortBy", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "sortComparator", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "items", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "provider", void 0);
+__decorate([property({
+	type: String,
+	attribute: `display-property`
+})], DetailListElement.prototype, "displayProperty", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "formatter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-property`
+})], DetailListElement.prototype, "iconProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-color-property`
+})], DetailListElement.prototype, "iconColorProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `text-color-property`
+})], DetailListElement.prototype, "textColorProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `badge-property`
+})], DetailListElement.prototype, "badgeProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `key-property`
+})], DetailListElement.prototype, "keyProperty", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: String,
+	attribute: `item-wrap`
+})], DetailListElement.prototype, "itemWrap", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "checkboxRenderer", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], DetailListElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], DetailListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "dragPreviewRenderer", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "dragPreviewSource", void 0);
+__decorate([property({ attribute: `group-by` })], DetailListElement.prototype, "groupBy", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "groupLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `cross-group-selection`,
+	reflect: true
+})], DetailListElement.prototype, "crossGroupSelection", void 0);
+__decorate([state()], DetailListElement.prototype, "_collapsedGroups", void 0);
+__decorate([query(`ul`)], DetailListElement.prototype, "_listEl", void 0);
+DetailListElement = __decorate([safeCustomElement(`ixfx-detail-list`)], DetailListElement);
+//#endregion
+export { DetailListElement as t };
+
+//# sourceMappingURL=detail-list-C96B5Txz.js.map