@ixfx/components 0.7.2 → 0.7.4

package/dist/index.js

@@ -1,5 +1,6 @@
 import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
-import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
@@ -14,28 +15,33 @@ import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CAR
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-DsFbV4XD.js";
-import { n as ListSelectionController, t as VerticalListElement } from "./vertical-list-ClnqTkF3.js";
-import "./menu-item-D2S4i8u1.js";
+import { i as keyForElement, n as isMultiMode, r as KeyedElementIndex, t as ListSelectionController } from "./list-selection-controller-CUo-Hhcm.js";
+import { a as prefersReducedMotion, i as listItemFadeKeyframes, n as animateListItemIn, r as animateListItemOut, t as LIST_ITEM_MOTION_MS } from "./list-item-animation-DuiwgN3l.js";
+import "./interaction-Cr13azbM.js";
+import "./menu-item-Bx-Fs7jq.js";
 import { Checkbox } from "./checkbox.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-Ddsk-7E_.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-Ch4W8qXQ.js";
+import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-B74zdI60.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import { t as menu_exports } from "./menu-CXDFJxNm.js";
+import { t as menu_exports } from "./menu-Bg90Qr0B.js";
 import { DataGridElement } from "./data-grid.js";
+import { DetailListElement } from "./detail-list.js";
 import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-BFSbUZQv.js";
 import { TabListElement } from "./tabs.js";
 import { TitlebarElement } from "./titlebar.js";
 import { EditableLabel } from "./editable-label.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-BInB5GKL.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
+import { GridListElement } from "./grid-list.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
+import { VerticalListElement } from "./vertical-list.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-BiRfwTz1.js";
 import { t as RadialInputElement } from "./radial-input-BfA3GO0H.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
@@ -43,7 +49,7 @@ import { t as SliderInputElement } from "./slider-input-Bl1hFE89.js";
 import { LedElement } from "./led.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
 import { NotificationPillElement } from "./notifier.js";
-import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-DWizs0bt.js";
+import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-VrX8dmvS.js";
 import { PolarPad } from "./polar-pad.js";
 import { t as tooltipValueStyles } from "./tooltip-CJt3WLmN.js";
 import { RangeInput } from "./range-input.js";
@@ -55,12 +61,13 @@ import { SwipeElement } from "./swipe.js";
 import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-B2fgDL4U.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
-import { LitElement, css, html, nothing, render } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
+import { classMap } from "lit/directives/class-map.js";
 //#region src/button/radio-group.ts
 let RadioGroup = class RadioGroup extends LitElement {
 	constructor(..._args) {
@@ -401,6 +408,99 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/tree-keyboard-controller.ts
+var TreeKeyboardNavController = class {
+	constructor(host, tickled, config) {
+		this.handleKeyDown = (event) => {
+			if (this.disableKeyboardNavigation()) return;
+			const { key } = event;
+			if ([
+				`ArrowDown`,
+				`ArrowUp`,
+				`ArrowLeft`,
+				`ArrowRight`,
+				`Enter`,
+				`Escape`
+			].includes(key)) this.tickled.setInputMode(`keyboard`);
+			switch (key) {
+				case `ArrowDown`:
+					event.preventDefault();
+					this.#handleArrowDown();
+					break;
+				case `ArrowUp`:
+					event.preventDefault();
+					this.#handleArrowUp();
+					break;
+				case `ArrowRight`:
+					event.preventDefault();
+					this.#handleArrowRight();
+					break;
+				case `ArrowLeft`:
+					event.preventDefault();
+					this.#handleArrowLeft();
+					break;
+				case `Enter`:
+					event.preventDefault();
+					this.#handleEnter();
+					break;
+				case `Escape`:
+					event.preventDefault();
+					this.callbacks.onEscape?.();
+			}
+		};
+		this.host = host;
+		this.tickled = tickled;
+		this.callbacks = config.callbacks;
+		this.disableKeyboardNavigation = config.disableKeyboardNavigation ?? (() => false);
+		host.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {}
+	#handleArrowDown() {
+		this.tickled.handleKeyboardNavigation(`next`);
+	}
+	#handleArrowUp() {
+		this.tickled.handleKeyboardNavigation(`previous`);
+	}
+	#handleArrowRight() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) return;
+		if (!this.callbacks.isExpanded(currentId)) {
+			this.callbacks.onExpand(currentId);
+			this.tickled.setTickled(currentId);
+		} else {
+			const items = this.callbacks.getItems();
+			const currentIdx = items.findIndex((item) => item.id === currentId);
+			if (currentIdx !== -1 && currentIdx + 1 < items.length) {
+				const nextItem = items[currentIdx + 1];
+				if (nextItem.enabled !== false) this.tickled.setTickled(nextItem.id);
+			}
+		}
+	}
+	#handleArrowLeft() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) {
+				this.tickled.setTickled(parentId);
+				if (this.callbacks.isExpanded(parentId)) this.callbacks.onCollapse(parentId);
+			}
+		} else if (this.callbacks.isExpanded(currentId)) this.callbacks.onCollapse(currentId);
+		else {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) this.tickled.setTickled(parentId);
+		}
+	}
+	#handleEnter() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		this.callbacks.onActivate(currentId);
+		this.callbacks.onSelect?.(currentId);
+	}
+};
+//#endregion
 //#region src/button/split-button.ts
 let SplitButton = class SplitButton extends ButtonElement {
 	constructor(..._args) {
@@ -1507,1010 +1607,270 @@ __decorate([state()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openCumPath", void 0);
 CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
-//#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.#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
-			}),
-			onChange: (selected, previous) => {
-				this._syncItemStates();
-				this._dispatch(`list-select`, {
-					selected,
-					previous
-				});
-			}
-		});
-		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;
-	#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(() => {
-			this.#processChildren();
-			this.#scheduleGeometry();
-		});
-		this.#mutationObserver.observe(this, {
-			childList: true,
-			subtree: false,
-			attributeFilter: [`hidden`]
-		});
-	}
-	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();
-	}
-	removeItem(item) {
-		item.remove();
-	}
-	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();
-	}
-	*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;
-		});
-	}
-	_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 });
+//#region src/data-table/data-table.ts
+let DataTableElement = class DataTableElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.rows = [];
+		this.tickleDelay = 400;
+		this.layout = `auto`;
+		this.narrowBreakpoint = 420;
+		this._tickled = new TickledController(this, { getItems: () => this.rows.map((_, i) => ({
+			id: i,
+			enabled: true
+		})) });
+		this._stacked = false;
+		this.#lastWidth = 0;
 	}
 	static {
 		this.styles = [
-			themeFallbacks,
-			scrollFadeStyles(`x`),
+			tickledStyles,
+			tickledItemStyles,
 			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;
-      --ixfx-detail-list-item-padding:
-        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-m, 8px)));
-    }
+      :host {
+        display: block;
+        container-type: inline-size;
+      }
 
-    :host(:focus-visible) {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
-    }
+      .properties {
+        display: grid;
+        grid-template-columns: var(--data-table-name-width, max-content)
+          var(--data-table-value-width, minmax(0, 1fr));
+        /* No column gap: the tickled highlight reads as one solid block.
+           Separation comes from cell padding, which the highlight covers. */
+        gap: 2px 0;
+      }
 
-    .container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
+      /* Widening: 2 then 3 property-pairs per row on roomy containers.
+         Suppressed when stacked, or when locked to 'columns'. */
+      @container (min-width: 650px) {
+        :host(:not([layout='columns'])) .properties:not(.stacked) {
+          grid-template-columns:
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr));
+        }
+      }
 
-    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);
-    }
+      @container (min-width: 1000px) {
+        :host(:not([layout='columns'])) .properties:not(.stacked) {
+          grid-template-columns:
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr));
+        }
+      }
 
-    ::slotted([hidden]) {
-      display: none !important;
-    }
+      /* Stacked (key above value). Threshold is JS-driven via 'narrowBreakpoint'.
+         minmax(0, 1fr) — not 1fr — so a long value's min-content size can't
+         blow the column out past the container; the value then ellipsises. */
+      .properties.stacked {
+        grid-template-columns: minmax(0, 1fr);
+      }
 
-    ::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(--ixfx-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;
-    }
+      /* A pair is its own subgrid so the whole row is one element:
+         the tickled highlight can't split, and key/value share a baseline. */
+      .pair {
+        display: grid;
+        grid-column: span 2;
+        grid-template-columns: subgrid;
+        align-items: var(--data-table-cell-align, baseline);
+        cursor: pointer;
+      }
 
-    /* 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;
-    }
+      .pair[data-full] {
+        grid-column: 1 / -1;
+      }
 
-    ::slotted([data-tickled]) {
-      background: var(--item-bg-tickled);
-      outline: var(--item-border-tickled);
-    }
+      .pair[data-full] > .value {
+        grid-column: 2 / -1;
+      }
 
-    ::slotted([data-selected]) {
-      background: var(--item-bg-selected);
-      color: var(--item-text-selected);
-      outline: 1px solid transparent;
-    }
+      .properties.stacked .pair {
+        display: block;
+        grid-column: 1 / -1;
+        /* Let the block shrink below its content so .value-text can clip. */
+        min-width: 0;
+      }
 
-    ::slotted([data-selected][data-tickled]) {
-      background: var(--item-bg-selected-tickled);
-      outline: 2px dashed var(--surface-3);
-      outline-offset: -2px;
-    }
+      .properties.stacked .pair:not(:last-child) {
+        margin-bottom: var(--space-s);
+      }
 
-    /* checked mode: the injected checkbox communicates selection — suppress bg */
-    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
-      background: transparent;
-      color: inherit;
-      outline: 1px solid transparent;
-    }
+      /* Stacked keys get their own line, so a long label must wrap rather than
+         run off the edge (nowrap is only wanted for the max-content column). */
+      .properties.stacked .key {
+        white-space: normal;
+        overflow-wrap: break-word;
+      }
 
-    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
-      background: var(--item-bg-tickled);
-      color: inherit;
-      outline: var(--item-border-tickled);
-    }
+      .key,
+      .value {
+        min-width: 0;
+        /* Row rhythm comes from this padding (tunable), not line-height. */
+        padding: var(--data-table-row-padding, 0.35em) 0;
+      }
 
-    .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);
-    }
+      .key {
+        padding-right: var(--space-m);
+        opacity: 0.6;
+        white-space: nowrap;
+        text-align: var(--data-table-name-align, left);
+        font-size: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        /* Uppercase keys have no descenders, so both edges can be trimmed to
+           the glyphs for tight baseline / centre alignment. */
+        text-box: trim-both cap alphabetic;
+      }
 
-    .loading[hidden] {
-      display: none;
-    }
+      .value {
+        position: relative;
+        padding-right: var(--space-l);
+        font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
 
-    .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);
-    }
+      /* The value text is clipped here — never on .value itself — so a long
+         value stays within its cell even while tickled, and the detail
+         popover (a child of .value) can still escape the cell. */
+      .value-text {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        /* No text-box trim here: the natural line box gives descenders the room
+           overflow:hidden would otherwise clip. Baseline alignment of key and
+           value comes from align-items on .pair, which needs no trimming. */
+      }
 
-    .search-overlay[hidden] {
-      display: none;
-    }
+      .pair.tickled {
+        background: var(--item-bg-tickled, color-mix(in oklch, var(--surface-2), var(--accent) 10%));
+      }
 
-    .search-input {
-      background: transparent;
-      border: none;
-      outline: none;
-      color: inherit;
-      font-size: var(--text-m, 0.875em);
-      min-width: 140px;
-    }
+      /* Lift the row whose detail is open above the rows it slides over. */
+      .pair.show-detail {
+        position: relative;
+        z-index: 1;
+      }
 
-    .search-close {
-      background: transparent;
-      border: none;
-      color: var(--surface-muted-text, #888);
-      cursor: pointer;
-      font-size: 1.1em;
-      line-height: 1;
-      padding: 0 2px;
-    }
+      .detail {
+        position: absolute;
+        z-index: 2;
+        /* Flush with the bottom of the value (no gap) so the pointer can travel
+           from value to panel without crossing a dead zone that would dismiss it.
+           Left-aligned with the value; only as wide as its content, capped at
+           the table width. */
+        top: 100%;
+        left: 0;
+        right: auto;
+        width: max-content;
+        max-width: 100cqi;
+        padding: var(--space-xs);
+        background: var(--surface-2);
+        visibility: hidden;
+        transform: translateY(-4px);
+        pointer-events: none;
+        transition: transform var(--transition);
+      }
 
-    .search-close:hover {
-      color: inherit;
-    }
-  `
+      .pair.show-detail .detail {
+        visibility: visible;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+    `
 		];
 	}
+	#detailTimer;
+	#resizeObserver;
+	#lastWidth;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			this.#lastWidth = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+			this.#updateStacked();
+		});
+		this.#resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearTimeout(this.#detailTimer);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+	}
+	willUpdate(changed) {
+		if (changed.has(`layout`) || changed.has(`narrowBreakpoint`)) this.#updateStacked();
+	}
+	#updateStacked() {
+		const stacked = this.layout === `rows` ? true : this.layout === `columns` ? false : this.#lastWidth > 0 && this.#lastWidth <= this.narrowBreakpoint;
+		if (stacked !== this._stacked) this._stacked = stacked;
+	}
+	#handlePointerEnter(i) {
+		this._tickled.handlePointerEnter(i);
+		clearTimeout(this.#detailTimer);
+		if (this._detailIndex !== void 0) this._detailIndex = void 0;
+		this.#detailTimer = setTimeout(() => {
+			if (this._tickled.isTickled(i)) this._detailIndex = i;
+		}, this.tickleDelay);
+	}
+	#handlePointerLeave(e) {
+		clearTimeout(this.#detailTimer);
+		this._detailIndex = void 0;
+		this._tickled.handlePointerLeave(e);
+	}
+	#select(i) {
+		clearTimeout(this.#detailTimer);
+		this.selectedIndex = this.selectedIndex === i ? void 0 : i;
+		this._tickled.setTickled(i);
+		this._detailIndex = i;
+		this.dispatchEvent(new CustomEvent(`data-table-row-click`, {
+			bubbles: true,
+			composed: true,
+			detail: {
+				row: this.rows[i],
+				index: i,
+				selected: this.selectedIndex === i
+			}
+		}));
+	}
 	render() {
-		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>
-    `;
+		return html`<div
+      class="properties ${this._stacked ? `stacked` : ``}"
+      @pointerleave=${(e) => this.#handlePointerLeave(e)}
+    >
+      ${this.rows.map((r, i) => html`<div
+          class="pair ${this._tickled.isTickled(i) ? `tickled` : ``} ${this._detailIndex === i ? `show-detail` : ``}"
+          ?data-full=${r.fullWidth}
+          @pointerenter=${() => this.#handlePointerEnter(i)}
+          @click=${() => this.#select(i)}
+        ><div class="key">${r.label}</div><div class="value"><span class="value-text">${typeof r.value === `boolean` ? r.value ? `Yes` : `No` : r.value}</span>${r.detail === void 0 ? nothing : html`<div class="detail" part="detail">${r.detail}</div>`}</div></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);
+	type: Array,
+	attribute: false
+})], DataTableElement.prototype, "rows", 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);
+	type: Number,
+	attribute: false
+})], DataTableElement.prototype, "selectedIndex", void 0);
 __decorate([property({
-	type: String,
-	attribute: `display-property`
-})], DetailListElement.prototype, "displayProperty", void 0);
-__decorate([property({ attribute: false })], DetailListElement.prototype, "formatter", void 0);
+	type: Number,
+	attribute: `tickle-delay`
+})], DataTableElement.prototype, "tickleDelay", 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);
+	reflect: true
+})], DataTableElement.prototype, "layout", 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);
+	type: Number,
+	attribute: `narrow-breakpoint`
+})], DataTableElement.prototype, "narrowBreakpoint", void 0);
+__decorate([state()], DataTableElement.prototype, "_tickled", void 0);
+__decorate([state()], DataTableElement.prototype, "_detailIndex", void 0);
+__decorate([state()], DataTableElement.prototype, "_stacked", void 0);
+DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableElement);
 //#endregion
 //#region src/dock/dock-drag.ts
 let activeDrag = null;
@@ -5801,6 +5161,136 @@ function dismiss(id) {
 	syncRenderer();
 }
 //#endregion
+//#region src/pan-text/pan-text.ts
+const SPEED = 45;
+const END_PADDING = 4;
+const START_DELAY = 300;
+const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
+let PanTextElement = class PanTextElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.direction = `end`;
+		this.disabled = false;
+		this._isOverflowing = false;
+		this._isHovering = false;
+		this._overflow = 0;
+		this._resizeObserver = null;
+		this._onMouseEnter = () => {
+			this._isHovering = true;
+		};
+		this._onMouseLeave = () => {
+			this._isHovering = false;
+		};
+		this._measure = () => {
+			if (this._isHovering) return;
+			const el = this._textEl;
+			if (!el) return;
+			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
+			const overflowing = this._overflow > 0;
+			this.classList.toggle(`is-overflowing`, overflowing);
+			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(() => this._measure());
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	firstUpdated() {
+		this._measure();
+		this._resizeObserver?.observe(this);
+		document.fonts?.ready.then(() => this._measure());
+	}
+	updated() {
+		this._measure();
+	}
+	_textStyle() {
+		if (!this._isOverflowing) return ``;
+		const distance = this._overflow + END_PADDING;
+		const duration = Math.max(1.5, distance / SPEED);
+		const revealEnd = this.direction === `end`;
+		const restX = revealEnd ? 0 : -distance;
+		const hoverX = revealEnd ? -distance : 0;
+		if (this._isHovering) return [
+			`transform: translateX(${hoverX}px)`,
+			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
+			`overflow: visible`,
+			`text-overflow: clip`
+		].join(`; `);
+		return [
+			`transform: translateX(${restX}px)`,
+			`transition: transform 400ms ${PAN_EASING}`,
+			revealEnd ? `` : `overflow: visible; text-overflow: clip`
+		].filter(Boolean).join(`; `);
+	}
+	render() {
+		const textClasses = {
+			"is-overflowing": this._isOverflowing,
+			"is-hovering": this._isHovering
+		};
+		return html`
+      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
+        <slot @slotchange=${this._measure}></slot>
+      </span>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+    /* Renders like plain inline text: no colours, border, padding or margin
+       of its own — it only adds the clipping needed to pan on hover. */
+    :host {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: inherit;
+    }
+
+    :host([disabled]) {
+      opacity: var(--disabled-opacity, 0.5);
+      pointer-events: none;
+    }
+
+    .text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      will-change: transform;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .text {
+        transition: none !important;
+        transform: none !important;
+      }
+    }
+  `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `direction`
+})], PanTextElement.prototype, "direction", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disabled`
+})], PanTextElement.prototype, "disabled", void 0);
+__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
+__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
+__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
+PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
+//#endregion
 //#region src/panel/panel-group.ts
 let PanelGroupElement = class PanelGroupElement extends LitElement {
 	constructor(..._args) {
@@ -8491,6 +7981,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map