@ixfx/components 0.13.1 → 0.13.3

package/dist/detail-list.js

@@ -1,1682 +1,3 @@
-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-D91M4Ozq.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 { t as DetailListElement } from "./detail-list-C96B5Txz.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.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;
-}
-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.#grid = [];
-		this.#positions = /* @__PURE__ */ new Map();
-		this.#tops = /* @__PURE__ */ new Map();
-		this.#geometryScheduled = 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: () => this._getVisibleItems().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,
-			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.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;
-	#grid;
-	#positions;
-	/** Viewport-relative `top` per item at the last geometry pass — lines rows up across columns. */
-	#tops;
-	#geometryScheduled;
-	#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;
-		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.#processChildren();
-			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.#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.querySelectorAll(ITEM_SELECTOR).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.#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._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;
-		}
-		if ((changed.has(`items`) || changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`)) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items);
-		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._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();
-	}
-	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.#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();
-		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 box = container.getBoundingClientRect();
-		const out = [];
-		for (const el of this._getVisibleItems()) {
-			const key = keyForElement(el);
-			if (key === void 0) continue;
-			const r = el.getBoundingClientRect();
-			if (r.right > box.left && r.left < box.right) 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) {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR)) if (keyForElement(el) === key) return el;
-	}
-	*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) {
-		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;
-		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();
-	}
-	#createItemEl(item, index) {
-		const li = document.createElement(`li`);
-		this.#itemData.set(li, item);
-		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;
-		}
-		for (const el of this.#sortRows(rows)) this.appendChild(el);
-		this.#scheduleGeometry();
-		this.#scheduleGroups();
-	}
-	/** Stable sort of `rows` by the current `sort` / `sortBy` / `sortComparator`. */
-	#sortRows(rows) {
-		const dir = this.sort === `descending` ? -1 : 1;
-		const meta = (el) => ({
-			element: el,
-			data: this.getItemData(el),
-			label: el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``
-		});
-		let cmp;
-		if (this.sortComparator) {
-			const user = this.sortComparator;
-			cmp = (a, b) => user(meta(a), meta(b));
-		} else if (this.sortBy) {
-			const prop = this.sortBy;
-			const key = (el) => {
-				const v = this.#propertyValue(this.getItemData(el), prop);
-				if (typeof v === `number`) return v;
-				return v === void 0 || v === null ? `` : String(v);
-			};
-			cmp = (a, b) => {
-				const ka = key(a);
-				const kb = key(b);
-				if (typeof ka === `number` && typeof kb === `number`) return ka - kb;
-				return String(ka).localeCompare(String(kb), void 0, { numeric: true });
-			};
-		} else cmp = (a, b) => meta(a).label.localeCompare(meta(b).label, void 0, { numeric: true });
-		const indexed = rows.map((el, i) => ({
-			el,
-			i
-		}));
-		indexed.sort((a, b) => cmp(a.el, b.el) * dir || a.i - b.i);
-		return indexed.map(({ el }) => el);
-	}
-	#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.querySelectorAll(ITEM_SELECTOR)];
-		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;
-		const current = [...this.children].filter((c) => c.matches(`li`) || c.hasAttribute(GROUP_HEADER_ATTR));
-		if (current.length !== nodes.length || current.some((c, i) => c !== nodes[i])) this.append(...nodes);
-		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;
-		}
-	}
-	#scheduleGeometry() {
-		if (this.#geometryScheduled) return;
-		this.#geometryScheduled = true;
-		requestAnimationFrame(() => {
-			this.#geometryScheduled = false;
-			this.#recomputeGeometry();
-		});
-	}
-	#recomputeGeometry() {
-		this.#grid = [];
-		this.#positions.clear();
-		this.#tops.clear();
-		if (!this.isConnected) return;
-		const columns = [];
-		for (const el of this._getVisibleItems()) {
-			const rect = el.getBoundingClientRect();
-			if (rect.width === 0 && rect.height === 0) continue;
-			this.#tops.set(el, rect.top);
-			let ci = columns.findIndex((c) => Math.abs(c.left - rect.left) <= 1);
-			if (ci === -1) {
-				columns.push({
-					left: rect.left,
-					items: []
-				});
-				ci = columns.length - 1;
-			}
-			columns[ci].items.push(el);
-		}
-		columns.sort((a, b) => a.left - b.left);
-		for (const col of columns) col.items.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
-		this.#grid = columns.map((c) => c.items);
-		this.#grid.forEach((col, colIdx) => col.forEach((el, rowIdx) => this.#positions.set(el, {
-			col: colIdx,
-			row: rowIdx
-		})));
-		this.#scheduleViewportChangeEmit();
-	}
-	#positionOf(el) {
-		let pos = this.#positions.get(el);
-		if (pos === void 0) {
-			this.#recomputeGeometry();
-			pos = this.#positions.get(el);
-		}
-		return pos;
-	}
-	#itemAt(col, row) {
-		return this.#grid[col]?.[row];
-	}
-	#gridSize() {
-		if (this.#grid.length === 0) this.#recomputeGeometry();
-		return {
-			cols: this.#grid.length,
-			rows: Math.max(0, ...this.#grid.map((c) => c.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.#grid[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.#grid[col]?.length ?? 1) - 1;
-						wrappedColumns = true;
-					} else if (this.itemWrap === `wrap`) {
-						col = cols - 1;
-						row = (this.#grid[col]?.length ?? 1) - 1;
-						wrappedColumns = true;
-					} else return;
-				} else if (deltaCol !== 0) {
-					const targetColLength = this.#grid[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.#recomputeGeometry();
-		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.#recomputeGeometry();
-		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.#grid[from.col + dir];
-		const current = this.tickled.tickledId;
-		const top = current ? this.#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.#tops.get(el) ?? Number.POSITIVE_INFINITY) - top);
-			if (delta < bestDelta) {
-				best = el;
-				bestDelta = delta;
-			}
-		}
-		return best;
-	}
-	#navigateRight() {
-		this.#recomputeGeometry();
-		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.#recomputeGeometry();
-		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());
-	}
-	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).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;
-		});
-	}
-	/**
-	* 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.querySelectorAll(ITEM_SELECTOR)) this.#ensureIcon(el);
-	}
-	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
-			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));
-			else el.removeAttribute(`data-checked`);
-		}
-		this.dataset.inputMode = this.tickled.inputMode;
-		this._syncCheckboxes();
-	}
-	_syncCheckboxes() {
-		const inCheckedMode = this.interactionMode === `checked`;
-		const wantsCustom = typeof this.checkboxRenderer === `function`;
-		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 out = [];
-		for (const el of this._getVisibleItems()) {
-			const key = keyForElement(el);
-			if (key !== void 0) out.push(key);
-		}
-		return out;
-	}
-	/**
-	* 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;
-      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 };
-
-//# sourceMappingURL=detail-list.js.map