@ixfx/components 0.7.3 → 0.7.4

package/dist/detail-list.js

@@ -0,0 +1,1115 @@
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-DcEEGQa_.js";
+import { t as DataController } from "./data-controller-DOlmqNKb.js";
+import { t as createElementIncrSearch } from "./element-search-Y8SRfPGM.js";
+import { i as keyForElement, t as ListSelectionController } from "./list-selection-controller-CUo-Hhcm.js";
+import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-DuiwgN3l.js";
+import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
+import { LitElement, css, html, nothing, render } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#region src/detail-list/detail-list.ts
+const ITEM_SELECTOR = `:scope > li`;
+const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
+const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+let DetailListElement = class DetailListElement extends LitElement {
+	constructor(..._args2) {
+		super(..._args2);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.sort = `none`;
+		this.sortBy = ``;
+		this.items = [];
+		this.displayProperty = ``;
+		this.iconProperty = ``;
+		this.keyProperty = ``;
+		this.itemWrap = `stop`;
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#itemData = /* @__PURE__ */ new WeakMap();
+		this.#grid = [];
+		this.#positions = /* @__PURE__ */ new Map();
+		this.#geometryScheduled = false;
+		this.#animatedItems = /* @__PURE__ */ new WeakSet();
+		this.#builtFromProvider = [];
+		this.#providerBuilt = 0;
+		this.#data = new DataController(this);
+		this.selection = new ListSelectionController({
+			getOrderedItems: () => this._getVisibleItems(),
+			isSelectable: (el) => this._isCheckable(el),
+			getModes: () => ({
+				selectionMode: this.selectionMode,
+				interactionMode: this.interactionMode
+			}),
+			getKey: keyForElement,
+			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
+		});
+		this._onPointerOver = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this.tickled.handlePointerEnter(item);
+		};
+		this._onPointerLeave = (e) => {
+			this.tickled.handlePointerLeave(e);
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
+				e.preventDefault();
+				this._openSearch();
+				return;
+			}
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if (this.selection.canSelectAll()) {
+					e.preventDefault();
+					this.selection.selectAll();
+				}
+				return;
+			}
+			if (this._searchVisible && e.key === `Escape`) {
+				e.preventDefault();
+				this._closeSearch();
+				return;
+			}
+			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) => {
+			const item = this._findListItem(e.composedPath());
+			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();
+			this._listEl.scrollLeft += e.deltaY;
+		};
+		this._onSearchInput = (e) => {
+			const input = e.target;
+			this._searchQuery = input.value;
+			this.#search?.setQuery(this._searchQuery).then(() => this.#recomputeGeometry());
+		};
+		this._onSearchKeydown = (e) => {
+			if (e.key === `Escape`) {
+				e.stopPropagation();
+				this._closeSearch();
+			} else if (e.key === `ArrowDown`) {
+				e.preventDefault();
+				this.focus();
+				this.#navigateDown();
+			} else if (e.key === `ArrowUp`) {
+				e.preventDefault();
+				this.focus();
+				this.#navigateUp();
+			} else if (e.key === `ArrowRight`) e.preventDefault();
+			else if (e.key === `ArrowLeft`) e.preventDefault();
+			else if (e.key === `Enter`) {
+				e.preventDefault();
+				e.stopPropagation();
+				const id = this.tickled.tickledId ?? this.#findFirstCheckable();
+				if (id) {
+					this._dispatch(`list-item-click`, { item: id });
+					this._activateItem(id);
+					this._closeSearch();
+				}
+			} else if (e.key === ` `) {
+				const id = this.tickled.tickledId;
+				if (id) {
+					e.preventDefault();
+					this.selection.handleSpace(id);
+				}
+			}
+		};
+	}
+	#search;
+	#itemData;
+	#grid;
+	#positions;
+	#geometryScheduled;
+	#resizeObserver;
+	#mutationObserver;
+	/** Items that have already played (or been skipped for) their enter animation. */
+	#animatedItems;
+	#builtFromProvider;
+	#providerBuilt;
+	#data;
+	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(`click`, this._onClick);
+		this.addEventListener(`dblclick`, this._onDblClick);
+		this.addEventListener(`wheel`, this._onWheel);
+		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
+		this.#resizeObserver.observe(this);
+		this.#mutationObserver = new MutationObserver((records) => {
+			this.#processChildren();
+			this.#animateChildMutations(records);
+			this.#scheduleGeometry();
+		});
+		this.#mutationObserver.observe(this, {
+			childList: true,
+			subtree: false,
+			attributeFilter: [`hidden`]
+		});
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#animatedItems.add(el);
+	}
+	/**
+	* Collapse-in items appended to the light DOM (however they got there). A bulk
+	* populate is left alone. Geometry is re-read once the animations settle so
+	* keyboard navigation lines back up with the final layout.
+	*/
+	#animateChildMutations(records) {
+		if (!this.isConnected) return;
+		const fresh = [];
+		for (const record of records) for (const node of record.addedNodes) {
+			if (!(node instanceof HTMLElement) || node.parentElement !== this || node.localName !== `li`) continue;
+			if (this.#animatedItems.has(node)) continue;
+			this.#animatedItems.add(node);
+			fresh.push(node);
+		}
+		if (fresh.length === 0) return;
+		const total = this.querySelectorAll(ITEM_SELECTOR).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(`click`, this._onClick);
+		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.removeEventListener(`wheel`, this._onWheel);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#mutationObserver?.disconnect();
+		this.#mutationObserver = void 0;
+		this.#search?.dispose();
+		this.#search = void 0;
+	}
+	firstUpdated() {
+		this.#processChildren();
+		if (this.filterPredicate) this.#applyFilterPredicate();
+		this.#search = createElementIncrSearch({
+			container: this,
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: SEARCH_HIGHLIGHT_KEY
+		});
+		this.#recomputeGeometry();
+	}
+	updated(changed) {
+		super.updated(changed);
+		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`) && 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();
+		}
+		if (changed.has(`interactionMode`)) {
+			this.selection.clearAnchor();
+			this._syncItemStates();
+		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
+	}
+	/** 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();
+	}
+	/**
+	* 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();
+			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.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();
+	}
+	/**
+	* 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);
+	}
+	/** Dispatch a command to this list. No-op by default (grouped-lister parity). */
+	dispatch(_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();
+	}
+	#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;
+		if (typeof content === `string`) {
+			this._setLabel(li, content);
+			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 (this.keyProperty) {
+			const key = this.#propertyValue(item, this.keyProperty);
+			if (key !== void 0 && key !== null) li.setAttribute(`data-key`, String(key));
+		}
+		this.#ensureIcon(li);
+		return li;
+	}
+	#propertyValue(item, prop) {
+		if (typeof item !== `object` || item === null || !(prop in item)) return void 0;
+		return item[prop];
+	}
+	#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`) this.#applySort();
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+			this._syncItemStates();
+			this.#scheduleGeometry();
+		} 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;
+		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);
+		for (const { el } of indexed) this.appendChild(el);
+		this.#scheduleGeometry();
+	}
+	#scheduleGeometry() {
+		if (this.#geometryScheduled) return;
+		this.#geometryScheduled = true;
+		requestAnimationFrame(() => {
+			this.#geometryScheduled = false;
+			this.#recomputeGeometry();
+		});
+	}
+	#recomputeGeometry() {
+		this.#grid = [];
+		this.#positions.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;
+			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
+		})));
+	}
+	#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);
+	}
+	#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.#findNextCheckable(cur.col, cur.row, 1, 0);
+		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.#findNextCheckable(cur.col, cur.row, -1, 0);
+		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 (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`);
+	}
+	_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);
+	}
+	/**
+	* 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`;
+		li.prepend(icon);
+	}
+	/** 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
+		}));
+	}
+	_openSearch() {
+		this._searchVisible = true;
+		this.updateComplete.then(() => this._searchInputEl?.focus());
+	}
+	_closeSearch() {
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#search?.clearQuery().then(() => this.#recomputeGeometry());
+		this.focus();
+	}
+	_activateItem(item) {
+		if (this.interactionMode !== `manual`) this.selection.replace(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			scrollFadeStyles(`x`),
+			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;
+    }
+
+    ::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;
+    }
+
+    /* 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;
+    }
+
+    /* 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;
+    }
+
+    .search-overlay {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--surface-4, #2a2a2a);
+      border: 1px solid var(--border, #444);
+      border-radius: var(--radius-m, 4px);
+      padding: 4px 6px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .search-overlay[hidden] {
+      display: none;
+    }
+
+    .search-input {
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font-size: var(--text-m, 0.875em);
+      min-width: 140px;
+    }
+
+    .search-close {
+      background: transparent;
+      border: none;
+      color: var(--surface-muted-text, #888);
+      cursor: pointer;
+      font-size: 1.1em;
+      line-height: 1;
+      padding: 0 2px;
+    }
+
+    .search-close:hover {
+      color: inherit;
+    }
+  `
+		];
+	}
+	render() {
+		const loading = this.#data.loading;
+		const progress = this.#data.progress;
+		return html`
+      <div class="container">
+        <ul part="list" class="scroll-fade-x">
+          <slot></slot>
+        </ul>
+        <div class="loading" part="loading" ?hidden=${!loading}>
+          ${loading ? progress !== void 0 ? `${Math.round(progress * 100)}%` : `loading…` : nothing}
+        </div>
+        <div
+          class="search-overlay"
+          part="search-overlay"
+          ?hidden=${!this._searchVisible}
+        >
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search…"
+            .value=${this._searchQuery}
+            @input=${this._onSearchInput}
+            @keydown=${this._onSearchKeydown}
+          />
+          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
+        </div>
+      </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: `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([state()], DetailListElement.prototype, "_searchVisible", void 0);
+__decorate([state()], DetailListElement.prototype, "_searchQuery", void 0);
+__decorate([query(`.search-input`)], DetailListElement.prototype, "_searchInputEl", 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