@ixfx/components 0.7.5 → 0.8.0

package/bundle/index.js

@@ -2499,6 +2499,43 @@ var IncrSearchTreeController = class {
 	}
 };
 //#endregion
+//#region src/incr-search/data-list-search-adapter.ts
+/**
+* A {@link ListSearchAdapter} over a data-backed list. Unlike the element
+* adapter it never materialises an element per item — it reads keys and text
+* straight from the source by index. Highlights are painted on whatever
+* captions are currently rendered in the shadow window; offscreen matches paint
+* when scrolled into view. See `docs/infra-incremental.md`.
+*/
+function createDataListSearchAdapter(host, options) {
+	return {
+		getItems: () => Array.from({ length: options.rawCount() }, (_, i) => ({
+			key: options.rawKeyAt(i),
+			index: i
+		})),
+		getLabel: (item) => options.rawSearchTextAt(item.index),
+		getKey: (item) => item.key,
+		focusItem: (item) => {
+			if (item) host.focusKey(item.key);
+		},
+		activateItem: (item) => {
+			if (options.onActivate) options.onActivate(item.key);
+			else host.focusKey(item.key);
+		},
+		selectItems: (items) => {
+			host.selectKeys(items.map((i) => i.key));
+		},
+		applyFilter: (matched) => {
+			options.onFilterChange?.(matched);
+		},
+		highlightRoot: options.getHighlightRoot,
+		highlightSelector: `.cell .caption`,
+		highlightKeyOf: (el) => el.closest(`.cell`)?.getAttribute(`data-key`) ?? void 0,
+		highlightText: (el) => el.textContent ?? ``,
+		highlightKey: `grid-list-search`
+	};
+}
+//#endregion
 //#region src/interaction/keyed-list.ts
 /**
 * Helpers for key-based selection on the Element-flavoured list components
@@ -2794,7 +2831,6 @@ var ListSearchController = class {
 	#filterActive = false;
 	constructor(host, options) {
 		this.#host = host;
-		host.addController(this);
 		this.#adapter = options.adapter;
 		const requested = new Set(options.modes ?? LIST_SEARCH_MODES);
 		this.#modes = LIST_SEARCH_MODES.filter((m) => requested.has(m));
@@ -2805,6 +2841,7 @@ var ListSearchController = class {
 			fzf: options.fzf
 		});
 		this.#unsub = this.#search.onChange((state) => this.#onState(state));
+		host.addController(this);
 	}
 	/** `false` when no modes are available — the host should register no commands and render no field. */
 	get enabled() {
@@ -13340,7 +13377,7 @@ __decorate([state()], DataTableElement.prototype, "_stacked", void 0);
 DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableElement);
 //#endregion
 //#region src/detail-list/detail-list.ts
-const ITEM_SELECTOR$2 = `:scope > li`;
+const ITEM_SELECTOR$3 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
 let DetailListElement = class DetailListElement extends i {
@@ -13392,7 +13429,7 @@ let DetailListElement = class DetailListElement extends i {
 			itemWrap: this.itemWrap
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
-			itemSelector: ITEM_SELECTOR$2,
+			itemSelector: ITEM_SELECTOR$3,
 			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
 			highlightKey: SEARCH_HIGHLIGHT_KEY
 		}) });
@@ -13531,7 +13568,7 @@ let DetailListElement = class DetailListElement extends i {
 			subtree: false,
 			attributeFilter: [`hidden`]
 		});
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#animatedItems.add(el);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) this.#animatedItems.add(el);
 		this.#searchRegistry ??= createCommandRegistry();
 		this.#syncSearchCommands();
 	}
@@ -13550,7 +13587,7 @@ let DetailListElement = class DetailListElement extends i {
 			fresh.push(node);
 		}
 		if (fresh.length === 0) return;
-		const total = this.querySelectorAll(ITEM_SELECTOR$2).length;
+		const total = this.querySelectorAll(ITEM_SELECTOR$3).length;
 		if (fresh.length >= total) return;
 		for (const el of fresh) animateListItemIn(el);
 		window.setTimeout(() => this.#scheduleGeometry(), 230);
@@ -13727,7 +13764,7 @@ let DetailListElement = class DetailListElement extends i {
 		});
 	}
 	#itemForKey(key) {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (keyForElement(el) === key) return el;
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) if (keyForElement(el) === key) return el;
 	}
 	*selectedFilter(kind) {
 		const wanted = (el) => {
@@ -13737,7 +13774,7 @@ let DetailListElement = class DetailListElement extends i {
 				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
 			}
 		};
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) {
 			if (el.hidden) continue;
 			if (wanted(el)) yield el;
 		}
@@ -13750,7 +13787,7 @@ let DetailListElement = class DetailListElement extends i {
 		if (previousKeys.size > 0 || anchorKey !== null) {
 			const next = [];
 			let anchor;
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) {
 				const key = keyOf(el);
 				if (key !== null && previousKeys.has(key)) next.push(el);
 				if (key !== null && key === anchorKey) anchor = el;
@@ -13805,15 +13842,15 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	#applyFilterPredicate() {
 		if (!this.filterPredicate) {
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) el.removeAttribute(`hidden`);
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) el.removeAttribute(`hidden`);
 			return;
 		}
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
 		else el.setAttribute(`hidden`, ``);
 	}
 	#applySort() {
 		if (this.sort === `none`) return;
-		const rows = [...this.querySelectorAll(ITEM_SELECTOR$2)];
+		const rows = [...this.querySelectorAll(ITEM_SELECTOR$3)];
 		if (rows.length < 2) return;
 		const dir = this.sort === `descending` ? -1 : 1;
 		const meta = (el) => ({
@@ -14005,7 +14042,7 @@ let DetailListElement = class DetailListElement extends i {
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
 	}
 	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR$2)).filter((el) => {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR$3)).filter((el) => {
 			if (el.hidden) return false;
 			if (this.filterPredicate && !this.filterPredicate(el)) return false;
 			return true;
@@ -14060,10 +14097,10 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	/** Scan light-DOM children for unprocessed `data-icon` items. */
 	#processChildren() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#ensureIcon(el);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) this.#ensureIcon(el);
 	}
 	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) {
 			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));
@@ -16086,7 +16123,7 @@ SplitLayoutElement = __decorate([safeCustomElement(`ixfx-split-layout`)], SplitL
 //#endregion
 //#region src/tabs/tab-list.ts
 /** Pointer movement threshold (px) before a press becomes a drag. */
-const DRAG_THRESHOLD_PX$3 = 5;
+const DRAG_THRESHOLD_PX$4 = 5;
 let TabListElement = class TabListElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -16200,7 +16237,7 @@ let TabListElement = class TabListElement extends i {
 			const dy = event.clientY - state.startY;
 			const distance = Math.hypot(dx, dy);
 			if (!state.active) {
-				if (distance < DRAG_THRESHOLD_PX$3) return;
+				if (distance < DRAG_THRESHOLD_PX$4) return;
 				this.#beginDrag(event);
 			}
 			state.ghost?.move(event.clientX, event.clientY);
@@ -17050,12 +17087,23 @@ let TitlebarElement = class TitlebarElement extends i {
 		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
 		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
 		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		const treeVariant = this.variant === `tree`;
 		return b`
       <div
         class="bar"
         role="toolbar"
         @click=${implicitToggle ? this._onToggleClick : A}
       >
+        ${treeVariant && showCaret ? b`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
+          </button>
+          ` : A}
         <div class="title-text-wrapper">
           ${this.iconName ? b`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : A}
           <span class="title-text">${this.title}</span>
@@ -17073,7 +17121,7 @@ let TitlebarElement = class TitlebarElement extends i {
               <ixfx-icon name="close"></ixfx-icon>
             </button>
           ` : A}
-          ${showCaret ? b`
+          ${!treeVariant && showCaret ? b`
           <button
             class="caret-btn"
             type="button"
@@ -17296,6 +17344,77 @@ let TitlebarElement = class TitlebarElement extends i {
         -1px 0 0 var(--surface-5),
         1px 0 0 var(--surface-1);
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+    :host([variant="tree"]) .bar {
+      background: transparent;
+      padding: 0 var(--space-xs);
+      min-height: unset;
+      gap: var(--space-xs);
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .bar {
+      padding: var(--space-xs) 0;
+      flex-direction: column;
+      min-width: unset;
+      writing-mode: horizontal-tb;
+    }
+
+    :host([variant="tree"]) .title-text-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: 0;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="tree"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn {
+      background: transparent;
+      opacity: var(--prominence-idle-opacity);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn:hover {
+      background: transparent;
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    :host([variant="tree"]) .toolbar {
+      margin-left: auto;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .toolbar {
+      flex-direction: row;
+      margin-left: 0;
+      margin-top: auto;
+    }
+
+    :host([variant="tree"]) ixfx-icon {
+      width: 1em;
+      height: 1em;
+    }
   `];
 	}
 };
@@ -17331,7 +17450,7 @@ TitlebarElement = __decorate([safeCustomElement(`ixfx-titlebar`)], TitlebarEleme
 //#endregion
 //#region src/dock/dock-panel.ts
 /** Pointer movement threshold before a titlebar press becomes a dock drag. */
-const DRAG_THRESHOLD_PX$2 = 5;
+const DRAG_THRESHOLD_PX$3 = 5;
 let DockPanelElement = class DockPanelElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -17363,7 +17482,7 @@ let DockPanelElement = class DockPanelElement extends i {
 		this._onPointerMove = (event) => {
 			if (this._dragPointerId === null || event.pointerId !== this._dragPointerId) return;
 			if (!this._dragStarted) {
-				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$2) return;
+				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$3) return;
 				this._dragStarted = true;
 				const pointerId = this._dragPointerId;
 				this._teardownDragListeners();
@@ -17518,7 +17637,7 @@ DockPanelElement = __decorate([safeCustomElement(`ixfx-dock-panel`)], DockPanelE
 /** Fraction of the leaf rect (from each edge) that forms the split bands. */
 const BAND = .25;
 /** Pointer movement threshold before a press becomes a dock drag (matches tab-list). */
-const DRAG_THRESHOLD_PX$1 = 5;
+const DRAG_THRESHOLD_PX$2 = 5;
 /** Tolerance (px) when matching a child gutter endpoint to a parent gutter line. */
 const JUNCTION_TOL_PX = 6;
 /** Junction points closer than this merge into one handle (a 4-way cross yields one per side). */
@@ -17633,7 +17752,7 @@ let DockHostElement = class DockHostElement extends i {
 		this._onTabDragMove = (event) => {
 			const pending = this._tabDragPending;
 			if (pending === null || event.pointerId !== pending.pointerId) return;
-			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$1) return;
+			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$2) return;
 			this._tabDragPending = null;
 			this._teardownTabDragListeners();
 			this._suppressNextClick();
@@ -19333,7 +19452,7 @@ function WheelNudgeMixin(superClass) {
 }
 //#endregion
 //#region src/editable-label/editable-number.ts
-const DRAG_THRESHOLD_PX = 3;
+const DRAG_THRESHOLD_PX$1 = 3;
 let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel) {
 	#dragStartY;
 	#dragStartValue;
@@ -19450,7 +19569,7 @@ let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel)
 			if (this._editing) return;
 			if (this.disabled || this.noDrag) return;
 			const deltaY = this.#dragStartY - e.clientY;
-			if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX) return;
+			if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX$1) return;
 			this.#dragging = true;
 			this.#hasDragged = true;
 			this.toggleAttribute(`dragging`, true);
@@ -20059,6 +20178,226 @@ let FormElement = class FormElement extends i {
 };
 FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
 //#endregion
+//#region src/grid-list/grid-list-source.ts
+const ITEM_SELECTOR$2 = `:scope > *`;
+const SYNTHETIC_PREFIX = `gl-auto-`;
+/** Whether `key` is an auto-assigned key for a keyless light-DOM item. */
+function isSyntheticKey(key) {
+	return key.startsWith(SYNTHETIC_PREFIX);
+}
+function warnDuplicateKeys(keys) {
+	const seen = /* @__PURE__ */ new Set();
+	const dupes = /* @__PURE__ */ new Set();
+	for (const k of keys) {
+		if (isSyntheticKey(k)) continue;
+		if (seen.has(k)) dupes.add(k);
+		else seen.add(k);
+	}
+	if (dupes.size > 0) console.warn(`ixfx-grid-list: duplicate item key(s) ${[...dupes].map((k) => `"${k}"`).join(`, `)} — the first occurrence wins for key-based operations.`);
+}
+var ElementGridListSource = class {
+	#host;
+	#items = [];
+	#slotNames = /* @__PURE__ */ new WeakMap();
+	#syntheticKeys = /* @__PURE__ */ new WeakMap();
+	#seq = 0;
+	#predicate;
+	#searchKeys;
+	#effectiveIndices = [];
+	#keysCache;
+	constructor(host) {
+		this.#host = host;
+		this.refresh();
+	}
+	get count() {
+		return this.#effectiveIndices.length;
+	}
+	get rawCount() {
+		return this.#items.length;
+	}
+	keyAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#itemKey(this.#items[eff]);
+	}
+	indexOfKey(key) {
+		return this.#effectiveIndices.findIndex((i) => this.#itemKey(this.#items[i]) === key);
+	}
+	keys() {
+		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#itemKey(this.#items[i]));
+		return this.#keysCache;
+	}
+	labelAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#captionFor(this.#items[eff]);
+	}
+	rawKeyAt(index) {
+		const el = this.#items[index];
+		return el === void 0 ? `` : this.#itemKey(el);
+	}
+	rawSearchTextAt(index) {
+		const el = this.#items[index];
+		if (el === void 0) return ``;
+		return el.getAttribute(`data-search-label`) ?? el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.textContent?.trim() ?? ``;
+	}
+	isSelectable(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff !== void 0 && !this.#items[eff].hasAttribute(`not-checked`);
+	}
+	renderCellContent(index) {
+		const eff = this.#effectiveIndices[index];
+		if (eff === void 0) return void 0;
+		return b`<slot name=${this.slotNameFor(this.#items[eff])}></slot>`;
+	}
+	setFilters(opts) {
+		if (`predicate` in opts) this.#predicate = opts.predicate;
+		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
+		this.#recomputeEffective();
+	}
+	refresh() {
+		this.#items = Array.from(this.#host.querySelectorAll(ITEM_SELECTOR$2)).filter((el) => !el.hidden);
+		for (const el of this.#items) {
+			const name = this.slotNameFor(el);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+		warnDuplicateKeys(this.#items.map((el) => this.#itemKey(el)));
+		this.#recomputeEffective();
+	}
+	/** Effective-order elements — the array `GridListElement` renders and slices. */
+	effectiveElements() {
+		return this.#effectiveIndices.map((i) => this.#items[i]);
+	}
+	/** Raw-order element at `index`, or `undefined`. */
+	rawElementAt(index) {
+		return this.#items[index];
+	}
+	/** Stable per-element `<slot>` name. */
+	slotNameFor(el) {
+		let name = this.#slotNames.get(el);
+		if (name === void 0) {
+			this.#seq += 1;
+			name = `gl-item-${this.#seq}`;
+			this.#slotNames.set(el, name);
+		}
+		return name;
+	}
+	resolveKeyToElement(key) {
+		if (isSyntheticKey(key)) return this.#items.find((el) => this.#syntheticKeys.get(el) === key);
+		return this.#items.find((el) => keyForElement(el) === key);
+	}
+	resolveKeyToData(_key) {}
+	#recomputeEffective() {
+		const effective = [];
+		for (let i = 0; i < this.#items.length; i++) {
+			if (this.#predicate !== void 0 && !this.#predicate(i)) continue;
+			if (this.#searchKeys !== void 0) {
+				const key = this.#itemKey(this.#items[i]);
+				if (!isSyntheticKey(key) && !this.#searchKeys.has(key)) continue;
+			}
+			effective.push(i);
+		}
+		this.#effectiveIndices = effective;
+		this.#keysCache = void 0;
+	}
+	#itemKey(el) {
+		const userKey = keyForElement(el);
+		if (userKey !== void 0) return userKey;
+		let synthetic = this.#syntheticKeys.get(el);
+		if (synthetic === void 0) {
+			this.#seq += 1;
+			synthetic = `${SYNTHETIC_PREFIX}${this.#seq}`;
+			this.#syntheticKeys.set(el, synthetic);
+		}
+		return synthetic;
+	}
+	#captionFor(el) {
+		return el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? ``;
+	}
+};
+var DataGridListSource = class {
+	#items;
+	#adapter;
+	#predicate;
+	#searchKeys;
+	#effectiveIndices = [];
+	#keysCache;
+	constructor(items, adapter) {
+		this.#items = items;
+		this.#adapter = adapter;
+		warnDuplicateKeys(items.map((it, i) => adapter.key(it, i)));
+		this.#recomputeEffective();
+	}
+	get count() {
+		return this.#effectiveIndices.length;
+	}
+	get rawCount() {
+		return this.#items.length;
+	}
+	keyAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#adapter.key(this.#items[eff], eff);
+	}
+	indexOfKey(key) {
+		return this.#effectiveIndices.findIndex((i) => this.#adapter.key(this.#items[i], i) === key);
+	}
+	keys() {
+		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#adapter.key(this.#items[i], i));
+		return this.#keysCache;
+	}
+	labelAt(index) {
+		const eff = this.#effectiveIndices[index];
+		if (eff === void 0) return ``;
+		return this.#adapter.label?.(this.#items[eff], eff) ?? this.#adapter.key(this.#items[eff], eff);
+	}
+	rawKeyAt(index) {
+		return index < 0 || index >= this.#items.length ? `` : this.#adapter.key(this.#items[index], index);
+	}
+	rawSearchTextAt(index) {
+		if (index < 0 || index >= this.#items.length) return ``;
+		const item = this.#items[index];
+		return this.#adapter.searchableText?.(item, index) ?? this.#adapter.label?.(item, index) ?? ``;
+	}
+	isSelectable(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff !== void 0 && !this.#adapter.disabled?.(this.#items[eff], eff);
+	}
+	renderCellContent(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#adapter.render(this.#items[eff], eff);
+	}
+	setFilters(opts) {
+		if (`predicate` in opts) this.#predicate = opts.predicate;
+		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
+		this.#recomputeEffective();
+	}
+	refresh() {
+		this.#recomputeEffective();
+	}
+	/** Raw-order item at `index`, or `undefined`. */
+	rawItemAt(index) {
+		return this.#items[index];
+	}
+	/** Effective-order item at `index`, or `undefined`. */
+	getItemAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#items[eff];
+	}
+	resolveKeyToElement(_key) {}
+	resolveKeyToData(key) {
+		const idx = this.#items.findIndex((item, i) => this.#adapter.key(item, i) === key);
+		return idx >= 0 ? this.#items[idx] : void 0;
+	}
+	#recomputeEffective() {
+		const effective = [];
+		for (let i = 0; i < this.#items.length; i++) {
+			if (this.#predicate !== void 0 && !this.#predicate(i)) continue;
+			if (this.#searchKeys !== void 0 && !this.#searchKeys.has(this.#adapter.key(this.#items[i], i))) continue;
+			effective.push(i);
+		}
+		this.#effectiveIndices = effective;
+		this.#keysCache = void 0;
+	}
+};
+//#endregion
 //#region src/grid-list/grid-list.ts
 const ITEM_SELECTOR$1 = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
@@ -20153,6 +20492,7 @@ let GridListElement = class GridListElement extends i {
 		this.captionBackdrop = `scrim`;
 		this.captionHeight = 24;
 		this.itemWrap = `stop`;
+		this.items = [];
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
 		this._viewportHeight = 0;
@@ -20163,42 +20503,37 @@ let GridListElement = class GridListElement extends i {
 		this.#itemWrap = `stop`;
 		this.#entering = /* @__PURE__ */ new Set();
 		this.#reflowTimer = 0;
-		this.#slotNames = /* @__PURE__ */ new WeakMap();
-		this.#slotSeq = 0;
+		this.#sourceElement = new ElementGridListSource(this);
+		this.#source = this.#sourceElement;
 		this.selection = new ListSelectionController({
-			getOrderedItems: () => this._getVisibleItems(),
-			isSelectable: () => true,
+			getOrderedItems: () => this.#source.keys(),
+			isSelectable: (k) => {
+				const i = this.#source.indexOfKey(k);
+				return i >= 0 && this.#source.isSelectable(i);
+			},
 			getModes: () => ({
 				selectionMode: this.selectionMode,
 				interactionMode: this.interactionMode
 			}),
-			getKey: keyForElement,
+			getKey: (k) => k,
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this.requestUpdate();
-				this._dispatch(`list-select`, {
-					selected,
-					previous,
-					selectedKeys: this.selection.selectedKeys
-				});
+				this.#emitSelect(selected, previous);
 			}
 		});
 		this.tickled = new TickledController(this, {
-			getItems: () => this.#items.map((el) => ({
-				id: el,
-				enabled: !el.hasAttribute(`not-checked`)
+			getItems: () => this.#source.keys().map((k, i) => ({
+				id: k,
+				enabled: this.#source.isSelectable(i)
 			})),
-			onTickle: (id) => {
-				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			onTickle: (k) => {
+				if (k !== void 0) this.#emitItemEvent(`list-tickle`, k);
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.#itemWrap
 		});
-		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
-			itemSelector: ITEM_SELECTOR$1,
-			getLabel: (el) => el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			highlightKey: `grid-list-search`
-		}) });
+		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
 			const el = e.target;
 			this.#cancelScrollRaf();
@@ -20218,16 +20553,16 @@ let GridListElement = class GridListElement extends i {
 				}
 				return;
 			}
-			const count = this.#items.length;
+			const count = this.#source.count;
 			if (count === 0) return;
 			const win = this.#currentWindow();
 			const move = (delta) => {
-				const from = this.tickled.tickledId ? this.#items.indexOf(this.tickled.tickledId) : -1;
+				const from = this.tickled.tickledId ? this.#source.indexOfKey(this.tickled.tickledId) : -1;
 				const nextIndex = Math.max(0, Math.min(count - 1, from + delta));
-				const next = this.#items[nextIndex];
-				if (next) {
-					this.tickled.handleKeyboardNavigation(next);
-					this.#scrollItemIntoView(next);
+				const nextKey = this.#source.keyAt(nextIndex);
+				if (nextKey) {
+					this.tickled.handleKeyboardNavigation(nextKey);
+					this.#scrollItemIntoView(nextKey);
 				}
 			};
 			const perLine = this.orientation === `grid` ? win.cols : 1;
@@ -20264,7 +20599,7 @@ let GridListElement = class GridListElement extends i {
 					const id = this.tickled.tickledId;
 					if (id) {
 						e.preventDefault();
-						this._dispatch(`list-item-click`, { item: id });
+						this.#emitItemEvent(`list-item-click`, id);
 						this.#onCellActivate(id);
 					}
 					break;
@@ -20319,6 +20654,12 @@ let GridListElement = class GridListElement extends i {
         height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
+        /* Consumer control over the native scrollbar (both orientations): set
+           --grid-list-scrollbar-width to "none" to hide it or "thin" to slim it.
+           The container is also exposed as ::part(viewport). */
+        scrollbar-width: var(--grid-list-scrollbar-width, auto);
+        scrollbar-gutter: var(--grid-list-scrollbar-gutter, auto);
+        scrollbar-color: var(--grid-list-scrollbar-color, auto);
       }
       :host([orientation="row"]) .viewport {
         overflow-x: auto;
@@ -20564,13 +20905,47 @@ let GridListElement = class GridListElement extends i {
 	*/
 	#zoomAnchor;
 	/**
-	* Per-item slot name. Each cell renders its own named `<slot>` and the
-	* matching light-DOM child carries `slot="<name>"`, so a child is projected
-	* into exactly one cell. (A single unnamed slot would collapse every child
-	* into the first cell.)
+	* The active view over the items. Element mode projects light-DOM children
+	* through named `<slot>`s (owned by {@link ElementGridListSource}); data mode
+	* renders from {@link items} via {@link itemAdapter}. Everything else here
+	* addresses items by effective index + key and never branches on the mode.
+	*
+	* Initialised eagerly (element mode) so the public getters — `count`,
+	* `selectedKeys`, … — are safe to touch before the first Lit update. The
+	* first `willUpdate` rebuilds it once the light DOM / `itemAdapter` is known.
 	*/
-	#slotNames;
-	#slotSeq;
+	#sourceElement;
+	#source;
+	#searchMode;
+	#searchFilterKeys;
+	/** (Re)build {@link search} for the current mode; a no-op if it already matches. */
+	#ensureSearch() {
+		const mode = this.itemAdapter !== void 0 ? `data` : `element`;
+		if (this.#searchMode === mode && this.search !== void 0) return;
+		const previous = this.search;
+		if (previous) {
+			previous.hostDisconnected();
+			this.removeController(previous);
+		}
+		this.search = mode === `data` ? new ListSearchController(this, { adapter: createDataListSearchAdapter(this, {
+			rawCount: () => this.#source?.rawCount ?? 0,
+			rawKeyAt: (i) => this.#source?.rawKeyAt(i) ?? ``,
+			rawSearchTextAt: (i) => this.#source?.rawSearchTextAt(i) ?? ``,
+			onFilterChange: (keys) => {
+				this.#searchFilterKeys = keys;
+				this.#source?.setFilters({ searchKeys: keys });
+				this.requestUpdate();
+				this.updateComplete.then(() => this.#emitViewportChange());
+			},
+			onActivate: (key) => this.#onCellActivate(key),
+			getHighlightRoot: () => this.renderRoot
+		}) }) : new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
+			itemSelector: ITEM_SELECTOR$1,
+			getLabel: (el) => el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: `grid-list-search`
+		}) });
+		this.#searchMode = mode;
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	/** Command registry carrying this grid's `list.search.*` commands. */
@@ -20585,7 +20960,7 @@ let GridListElement = class GridListElement extends i {
 		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
 	}
 	#syncSearchCommands() {
-		if (!this.#searchRegistry) return;
+		if (!this.#searchRegistry || !this.search) return;
 		this.search.setModes(this.#effectiveSearchModes());
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
@@ -20593,6 +20968,8 @@ let GridListElement = class GridListElement extends i {
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		if (!this.hasAttribute(`role`)) this.setAttribute(`role`, `listbox`);
+		this.#syncAriaMultiselectable();
 		for (const [attr, value] of [
 			[`caption-style`, this.captionStyle],
 			[`caption-align`, this.captionAlign],
@@ -20606,6 +20983,7 @@ let GridListElement = class GridListElement extends i {
 			attributeFilter: [`hidden`]
 		});
 		this.#searchRegistry ??= createCommandRegistry();
+		this.#ensureSearch();
 		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
@@ -20626,6 +21004,19 @@ let GridListElement = class GridListElement extends i {
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
 		this.#syncItems();
+		const removedKeys = [];
+		for (const record of records ?? []) for (const node of record.removedNodes) {
+			if (node.nodeType !== Node.ELEMENT_NODE) continue;
+			const key = keyForElement(node);
+			if (key !== void 0) removedKeys.push(key);
+		}
+		if (removedKeys.length > 0) {
+			const present = new Set(this.#source.keys());
+			const gone = removedKeys.filter((k) => !present.has(k));
+			if (gone.length > 0) this.selection.removeKeys(gone, (k) => k);
+			const tickledId = this.tickled.tickledId;
+			if (tickledId && gone.includes(tickledId)) this.tickled.focus(void 0);
+		}
 		this._syncItemStates();
 		this.#noteChildMutation(previousLength, records);
 		this.requestUpdate();
@@ -20667,33 +21058,86 @@ let GridListElement = class GridListElement extends i {
 		}, REFLOW_WINDOW_MS);
 	}
 	#emitViewportChange() {
-		this._dispatch(`grid-list-viewport-change`, { visibleKeys: this.visibleKeys() });
+		this._dispatch(`grid-list-viewport-change`, {
+			renderedKeys: this.renderedKeys(),
+			visibleKeys: this.visibleKeys()
+		});
 	}
 	firstUpdated() {
+		if (!this.#source) this.#rebuildSource();
 		const el = this.#viewportRef.value;
 		if (!el) return;
-		this._viewportWidth = el.clientWidth;
-		this._viewportHeight = el.clientHeight;
 		this.#resizeObserver = new ResizeObserver((entries) => {
 			for (const entry of entries) {
-				this._viewportWidth = entry.contentRect.width;
-				this._viewportHeight = entry.contentRect.height;
+				const w = entry.contentRect.width;
+				const h = entry.contentRect.height;
+				if (w <= 0 || h <= 0) return;
+				this._viewportWidth = w;
+				this._viewportHeight = h;
 			}
 		});
 		this.#resizeObserver.observe(el);
+		this.#measureViewport(false);
 		this.#syncItems();
 		this.requestUpdate();
 	}
+	/** (Re)construct {@link #source} for the current mode and re-apply the filters. */
+	#rebuildSource() {
+		if (this.itemAdapter !== void 0) {
+			this.#source = new DataGridListSource(this.items, this.itemAdapter);
+			this.#sourceElement = void 0;
+		} else {
+			this.#sourceElement = new ElementGridListSource(this);
+			this.#source = this.#sourceElement;
+		}
+		this.#applyFilters();
+		if (this.#searchFilterKeys) this.#source.setFilters({ searchKeys: this.#searchFilterKeys });
+	}
+	/** Push the current filter predicate into whichever source is active. */
+	#applyFilters() {
+		if (this.#source instanceof ElementGridListSource) {
+			const fp = this.filterPredicate;
+			const src = this.#source;
+			src.setFilters({ predicate: fp ? (i) => fp(src.rawElementAt(i)) : void 0 });
+			this.#items = src.effectiveElements();
+		} else if (this.#source instanceof DataGridListSource) {
+			const ip = this.itemFilterPredicate;
+			const src = this.#source;
+			src.setFilters({ predicate: ip ? (i) => ip(src.rawItemAt(i), i) : void 0 });
+		}
+	}
 	willUpdate(changed) {
 		if (changed.has(`searchModes`)) this.#syncSearchCommands();
-		if (changed.has(`filterPredicate`)) this.#syncItems();
+		if (changed.has(`filterPredicate`) || changed.has(`itemFilterPredicate`)) {
+			this.#applyFilters();
+			this.updateComplete.then(() => this.#emitViewportChange());
+		}
+		if (changed.has(`items`) || changed.has(`itemAdapter`)) {
+			this.#zoomAnchor = void 0;
+			const prevKeys = this.#source?.keys() ?? [];
+			const modeFlipped = this.itemAdapter !== void 0 !== this.#source instanceof DataGridListSource;
+			this.#rebuildSource();
+			const nextKeys = this.#source.keys();
+			const nextKeySet = new Set(nextKeys);
+			const removedKeys = prevKeys.filter((k) => !nextKeySet.has(k));
+			if (removedKeys.length > 0) this.selection.removeKeys(removedKeys, (k) => k);
+			const tickledId = this.tickled.tickledId;
+			if (tickledId && !nextKeySet.has(tickledId)) this.tickled.focus(void 0);
+			this._syncItemStates();
+			this.updateComplete.then(() => this.#emitViewportChange());
+			if (modeFlipped) {
+				this.#ensureSearch();
+				this.#syncSearchCommands();
+			}
+			this.search?.refresh();
+		}
 		if (changed.has(`itemSize`) || changed.has(`gap`)) {
 			this.itemSize = Math.max(MIN_ITEM_SIZE, Math.round(this.itemSize));
 			this.gap = Math.max(0, Math.round(this.gap));
 		}
 		if (changed.has(`captionHeight`)) this.captionHeight = Math.max(0, Math.round(this.captionHeight));
 		if (changed.has(`itemWrap`)) this.#itemWrap = this.itemWrap;
-		if ((changed.has(`itemSize`) || changed.has(`gap`) || changed.has(`captionStyle`) || changed.has(`captionHeight`) || changed.has(`orientation`)) && this.hasUpdated && this.#items.length > 0) {
+		if ((changed.has(`itemSize`) || changed.has(`gap`) || changed.has(`captionStyle`) || changed.has(`captionHeight`) || changed.has(`orientation`)) && this.hasUpdated && this.#source.count > 0) {
 			const prevOrientation = changed.get(`orientation`) ?? this.orientation;
 			const horizontal = prevOrientation === `row`;
 			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
@@ -20703,19 +21147,13 @@ let GridListElement = class GridListElement extends i {
 				const prevGap = changed.get(`gap`) ?? this.gap;
 				const prevCaptionStyle = changed.get(`captionStyle`) ?? this.captionStyle;
 				const prevCaptionHeight = changed.get(`captionHeight`) ?? this.captionHeight;
-				const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
-				const prev = computeGridWindow(this.#items.length, prevItemSize, prevRowHeight, prevGap, this._viewportWidth, this._viewportHeight, prevOffset, prevOrientation);
-				const mainStride = horizontal ? prev.colStride : prev.rowStride;
-				const centerLine = (prevOffset + prevExtent / 2) / mainStride;
-				const lineFloor = Math.max(0, Math.floor(centerLine));
-				const index = horizontal ? Math.min(this.#items.length - 1, lineFloor) : Math.min(this.#items.length - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
-				this.#zoomAnchor = {
-					index,
-					lineFrac: centerLine - lineFloor
-				};
+				this.#captureCentreAnchor(prevOffset, prevExtent, prevItemSize, prevGap, prevCaptionStyle, prevCaptionHeight, prevOrientation);
 			}
 		}
 	}
+	#syncAriaMultiselectable() {
+		this.setAttribute(`aria-multiselectable`, this.selection.canSelectMultiple() ? `true` : `false`);
+	}
 	/** Full cell height: the square, plus a caption band in `separate` / `under`. */
 	#rowHeight() {
 		const captionBand = this.captionStyle === `separate` || this.captionStyle === `under`;
@@ -20727,7 +21165,10 @@ let GridListElement = class GridListElement extends i {
 	updated(changed) {
 		super.updated(changed);
 		this.#syncItems();
-		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) this.selection.clearAnchor();
+		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) {
+			this.selection.clearAnchor();
+			this.#syncAriaMultiselectable();
+		}
 		if (changed.has(`orientation`)) {
 			const vp = this.#viewportRef.value;
 			if (vp) {
@@ -20740,6 +21181,11 @@ let GridListElement = class GridListElement extends i {
 				}
 			}
 		}
+		const vp = this.#viewportRef.value;
+		if (vp) {
+			if (Math.abs(vp.scrollTop - this._scrollTop) > .5) vp.scrollTop = this._scrollTop;
+			if (Math.abs(vp.scrollLeft - this._scrollLeft) > .5) vp.scrollLeft = this._scrollLeft;
+		}
 		this.#applyZoomAnchor();
 	}
 	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
@@ -20770,30 +21216,67 @@ let GridListElement = class GridListElement extends i {
 			this._scrollTop = next;
 		}
 	}
-	#syncItems() {
-		this.#items = Array.from(this.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => !el.hidden && (this.filterPredicate === void 0 || this.filterPredicate(el)));
-		for (const el of this.#items) {
-			const name = this.#slotNameFor(el);
-			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
-		}
+	#captureCentreAnchor(prevOffset, prevExtent, prevItemSize, prevGap, prevCaptionStyle, prevCaptionHeight, prevOrientation) {
+		const count = this.#source?.count ?? 0;
+		if (count === 0) return;
+		const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
+		const horizontal = prevOrientation === `row`;
+		const prev = computeGridWindow(count, prevItemSize, prevRowHeight, prevGap, this._viewportWidth, this._viewportHeight, prevOffset, prevOrientation);
+		const mainStride = horizontal ? prev.colStride : prev.rowStride;
+		const centerLine = (prevOffset + prevExtent / 2) / mainStride;
+		const lineFloor = Math.max(0, Math.floor(centerLine));
+		const index = horizontal ? Math.min(count - 1, lineFloor) : Math.min(count - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
+		this.#zoomAnchor = {
+			index,
+			lineFrac: centerLine - lineFloor
+		};
 	}
-	#slotNameFor(el) {
-		let name = this.#slotNames.get(el);
-		if (name === void 0) {
-			this.#slotSeq += 1;
-			name = `gl-item-${this.#slotSeq}`;
-			this.#slotNames.set(el, name);
+	/**
+	* Re-read the viewport after an ancestor's visibility/layout changed.
+	* Safe while hidden (zero-sized reads are ignored); forces a repaint of the
+	* virtual window even when the size is unchanged.
+	*/
+	refreshLayout() {
+		this.#measureViewport(true);
+	}
+	/** Alias of {@link refreshLayout}. */
+	remeasure() {
+		this.#measureViewport(true);
+	}
+	#measureViewport(forceRender = false) {
+		const vp = this.#viewportRef.value;
+		if (!vp) return;
+		const w = vp.clientWidth;
+		const h = vp.clientHeight;
+		if (w <= 0 || h <= 0) return;
+		const horizontal = this.orientation === `row`;
+		const changed = w !== this._viewportWidth || h !== this._viewportHeight;
+		if (changed) {
+			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+			const prevExtent = horizontal ? w : h;
+			this.#captureCentreAnchor(prevOffset, prevExtent, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
+			this._viewportWidth = w;
+			this._viewportHeight = h;
 		}
-		return name;
+		if (forceRender && !changed) {
+			this.#captureCentreAnchor(horizontal ? this._scrollLeft : this._scrollTop, horizontal ? w : h, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
+			this.requestUpdate();
+		}
+		if (changed || forceRender) this.updateComplete.then(() => this.#emitViewportChange());
 	}
-	_getVisibleItems() {
-		return this.#items.filter((el) => {
-			if (el.hidden) return false;
-			return true;
-		});
+	/**
+	* Element mode only: re-read the light DOM into the source and refresh the
+	* `#items` cache + filter. A no-op in data mode (the source is rebuilt through
+	* `#rebuildSource` when `items` / `itemAdapter` change).
+	*/
+	#syncItems() {
+		if (this.#source instanceof ElementGridListSource) {
+			this.#source.refresh();
+			this.#applyFilters();
+		}
 	}
 	get count() {
-		return this.#items.length;
+		return this.#source.count;
 	}
 	/**
 	* Number of cells currently rendered in the shadow DOM. With virtualization
@@ -20804,20 +21287,38 @@ let GridListElement = class GridListElement extends i {
 		return this.renderRoot.querySelectorAll(`.cell`).length;
 	}
 	get selectedItems() {
-		return this.selection.selected;
+		const els = /* @__PURE__ */ new Set();
+		for (const key of this.selection.selectedKeys) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) els.add(el);
+		}
+		return els;
 	}
-	/** The selection as stable `data-key` / `data-value` strings. */
+	/**
+	* The selection as stable `data-key` / `data-value` strings. Auto-assigned
+	* keys for keyless light-DOM items are omitted (they are not a stable contract
+	* for the consumer).
+	*/
 	get selectedKeys() {
-		return this.selection.selectedKeys;
+		const out = /* @__PURE__ */ new Set();
+		for (const k of this.selection.selectedKeys) if (!isSyntheticKey(k)) out.add(k);
+		return out;
 	}
 	select(item) {
-		this.selection.replace(item);
+		const key = keyForElement(item);
+		if (key) this.selection.replace(key);
 	}
 	selectMany(items) {
-		this.selection.selectMany(items);
+		const keys = [];
+		for (const item of items) {
+			const key = keyForElement(item);
+			if (key) keys.push(key);
+		}
+		this.selection.selectMany(keys);
 	}
 	deselect(item) {
-		this.selection.deselect(item);
+		const key = keyForElement(item);
+		if (key) this.selection.deselect(key);
 	}
 	clearSelection() {
 		this.selection.clear();
@@ -20831,44 +21332,126 @@ let GridListElement = class GridListElement extends i {
 	* have a `data-key` (or `data-value`).
 	*/
 	selectKeys(keys) {
-		this.selection.selectKeys(keys, (key) => this.getItem(key));
+		this.selection.selectKeys(keys, (k) => k);
 	}
 	/** Add items by key to the selection (multi-select modes only). */
 	addSelectedKeys(keys) {
-		this.selection.addKeys(keys, (key) => this.getItem(key));
+		this.selection.addKeys(keys, (k) => k);
 	}
 	/** Remove items by key from the selection. */
 	removeSelectedKeys(keys) {
-		this.selection.removeKeys(keys, (key) => this.getItem(key));
+		this.selection.removeKeys(keys, (k) => k);
+	}
+	/**
+	* Data mode only: raw index of `key` in `this.items`, or `-1`. Data-mode keys
+	* come straight from the adapter, so this is exact even under a filter/search.
+	*/
+	#rawIndexOfKey(key) {
+		const adapter = this.itemAdapter;
+		if (!adapter) return -1;
+		return this.items.findIndex((it, i) => adapter.key(it, i) === key);
+	}
+	/**
+	* Data mode: replace the whole item array. Selection and cursor keep any key
+	* that is still present; keys that vanish are dropped (one `list-select`).
+	* A no-op in element mode.
+	*/
+	setItems(items) {
+		if (this.itemAdapter) this.items = items;
+	}
+	/**
+	* Data mode: append items to the end. Scroll position, selection and cursor
+	* are untouched; appended items don't play the mid-list `[reflowing]` slide.
+	* A no-op in element mode.
+	*/
+	appendItems(items) {
+		if (this.itemAdapter && items.length > 0) this.items = [...this.items, ...items];
+	}
+	/**
+	* Data mode: replace the item carrying `key`. A visible cell re-renders in
+	* place (the keyed subtree is kept); an offscreen item shows its new content
+	* when scrolled into view. Scroll and selection are untouched. Unknown keys
+	* are ignored.
+	*/
+	updateItem(key, item) {
+		if (!this.itemAdapter) return;
+		const idx = this.#rawIndexOfKey(key);
+		if (idx < 0) return;
+		const next = [...this.items];
+		next[idx] = item;
+		this.items = next;
+	}
+	/**
+	* Data mode: remove the items carrying these keys. Removed keys are dropped
+	* from selection and cursor (via the `items` change). A no-op in element mode.
+	*/
+	removeItems(keys) {
+		if (!this.itemAdapter) return;
+		const adapter = this.itemAdapter;
+		const keySet = new Set(keys);
+		this.items = this.items.filter((it, i) => !keySet.has(adapter.key(it, i)));
+	}
+	/**
+	* Data mode: drop every item. Selection and cursor are reset and one
+	* `list-select` with empty sets is emitted. A no-op in element mode.
+	*/
+	clearItems() {
+		if (!this.itemAdapter) return;
+		this.selection.reset();
+		this.tickled.focus(void 0);
+		this.items = [];
+		this.#emitSelect(/* @__PURE__ */ new Set(), /* @__PURE__ */ new Set());
 	}
 	/** Move the cursor to the item with this key and scroll it into view. */
 	focusKey(key) {
-		const el = this.getItem(key);
-		if (!el) return;
-		this.tickled.focus(el);
-		this.#scrollItemIntoView(el);
+		if (this.#source.indexOfKey(key) < 0) return;
+		this.tickled.focus(key);
+		this.#scrollItemIntoView(key);
 	}
 	/** The key of the item under the cursor, or `undefined`. */
 	get tickledKey() {
-		const id = this.tickled.tickledId;
-		return id ? keyForElement(id) : void 0;
+		return this.tickled.tickledId;
 	}
+	/** Element mode: the light-DOM element carrying `key`, or `undefined`. */
 	getItem(key) {
-		return this.#items.find((el) => keyForElement(el) === key);
+		return this.#source.resolveKeyToElement(key);
 	}
+	/** Element mode: the light-DOM element at effective index `index`. */
 	getItemByIndex(index) {
 		return this.#items[index];
 	}
+	/** Data mode: the data value carrying `key`, or `undefined`. */
+	getData(key) {
+		return this.#source.resolveKeyToData(key);
+	}
 	getKey(item) {
 		return keyForElement(item);
 	}
+	/**
+	* Keys of items in the rendered window (viewport + overscan) — the priority
+	* set for prefetching. Use {@link visibleKeys} for the strict viewport
+	* intersection. Auto-assigned keyless-item keys are omitted.
+	*/
+	renderedKeys() {
+		return this.#windowKeys(this.#currentWindow());
+	}
+	/**
+	* Keys of items actually intersecting the viewport (no overscan).
+	* Auto-assigned keyless-item keys are omitted.
+	*/
 	visibleKeys() {
-		const win = this.#currentWindow();
-		return this.#items.slice(win.startIndex, win.endIndex).map((el) => keyForElement(el)).filter((k) => k !== void 0);
+		return this.#windowKeys(this.#currentWindow(true));
+	}
+	#windowKeys(win) {
+		return this.#source.keys().slice(win.startIndex, win.endIndex).filter((k) => !isSyntheticKey(k));
 	}
-	/** Adjust the scroll offset so `el` is fully within the viewport. */
-	#scrollItemIntoView(el) {
-		const index = this.#items.indexOf(el);
+	#currentWindow(noOverscan = false) {
+		const overscan = noOverscan ? 0 : 2;
+		return computeGridWindow(this.#source.count, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation, overscan);
+	}
+	/** Adjust the scroll offset so `key` is fully within the viewport. */
+	#scrollItemIntoView(key) {
+		const index = this.#source.indexOfKey(key);
 		const vp = this.#viewportRef.value;
 		if (index < 0 || !vp) return;
 		const win = this.#currentWindow();
@@ -20897,12 +21480,43 @@ let GridListElement = class GridListElement extends i {
 		}
 	}
 	_syncItemStates() {
+		const selected = this.selection.selectedKeys;
 		for (const el of this.#items) {
-			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
-			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+			const key = keyForElement(el);
+			el.toggleAttribute(`data-tickled`, key !== void 0 && this.tickled.isTickled(key));
+			el.toggleAttribute(`data-selected`, key !== void 0 && selected.has(key));
 		}
 		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 	}
+	#emitSelect(selected, previous) {
+		const selectedEls = /* @__PURE__ */ new Set();
+		const previousEls = /* @__PURE__ */ new Set();
+		for (const key of selected) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) selectedEls.add(el);
+		}
+		for (const key of previous) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) previousEls.add(el);
+		}
+		this._dispatch(`list-select`, {
+			selected: selectedEls,
+			previous: previousEls,
+			selectedKeys: this.selectedKeys,
+			previousKeys: new Set([...previous].filter((k) => !isSyntheticKey(k)))
+		});
+	}
+	#emitItemEvent(name, key) {
+		const index = this.#source.indexOfKey(key);
+		const element = this.#source.resolveKeyToElement(key);
+		const item = element ?? this.#source.resolveKeyToData(key);
+		this._dispatch(name, {
+			item,
+			key,
+			index,
+			element
+		});
+	}
 	_dispatch(name, detail) {
 		this.dispatchEvent(new CustomEvent(name, {
 			detail,
@@ -20910,9 +21524,11 @@ let GridListElement = class GridListElement extends i {
 			composed: true
 		}));
 	}
+	/** Selected keys, snapshotted once per render so the cell renderers don't each rebuild the set. */
+	#selectedSnapshot;
 	render() {
 		const win = this.#currentWindow();
-		const slice = this.#items.slice(win.startIndex, win.endIndex);
+		this.#selectedSnapshot = this.selection.selectedKeys;
 		const spacerStyle = win.horizontal ? `width:${win.totalWidth}px;height:100%` : `height:${win.totalHeight}px`;
 		const scrollFade = win.horizontal ? `scroll-fade-x` : `scroll-fade-y`;
 		return b`
@@ -20924,15 +21540,56 @@ let GridListElement = class GridListElement extends i {
         @scroll=${this.#onScroll}
       >
         <div class="spacer" style=${spacerStyle}>
-          ${repeat(slice, (el) => this.#slotNameFor(el), (el, i) => this.#renderCell(el, win.startIndex + i, win))}
+          ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
         </div>
       </div>
-      ${this.search.renderField()}
+      ${this.search?.renderField()}
     `;
 	}
+	#renderDataCells(win) {
+		const slice = Array.from({ length: win.endIndex - win.startIndex }, (_, i) => win.startIndex + i);
+		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderDataCell(index, win));
+	}
+	#renderDataCell(index, win) {
+		const key = this.#source.keyAt(index);
+		const selected = this.#selectedSnapshot.has(key);
+		const tickled = this.tickled.isTickled(key);
+		const style = this.captionStyle;
+		const separate = style === `separate`;
+		const caption = style === `hidden` ? `` : this.#source.labelAt(index);
+		const showCaption = caption !== ``;
+		const cellHeight = win.rowStride - this.gap;
+		const x = win.horizontal ? index * win.colStride : columnOf(index, win.cols) * win.colStride;
+		const y = win.horizontal ? Math.max(0, (this._viewportHeight - cellHeight) / 2) : rowOf(index, win.cols) * win.rowStride;
+		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
+		return b`
+      <div
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        role="option"
+        aria-selected=${selected ? `true` : `false`}
+        style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
+        data-index=${index}
+        data-key=${key}
+        ?data-selected=${selected}
+        ?data-tickled=${tickled}
+        @click=${(e) => this.#onCellClick(e, key)}
+        @dblclick=${() => this.#onCellActivate(key)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+      >
+        <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
+        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+      </div>
+    `;
+	}
+	#renderElementCells(win) {
+		const slice = this.#items.slice(win.startIndex, win.endIndex);
+		return repeat(slice, (_el, i) => this.#source.keyAt(win.startIndex + i), (el, i) => this.#renderCell(el, win.startIndex + i, win));
+	}
 	#renderCell(el, index, win) {
-		const selected = this.selection.selected.has(el);
-		const tickled = this.tickled.isTickled(el);
+		const key = this.#source.keyAt(index);
+		const selected = this.#selectedSnapshot.has(key);
+		const tickled = this.tickled.isTickled(key);
 		const entering = this.#entering.has(el);
 		const style = this.captionStyle;
 		const separate = style === `separate`;
@@ -20946,17 +21603,22 @@ let GridListElement = class GridListElement extends i {
 		return b`
       <div
         class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
-        part="item"
+        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        role="option"
+        aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
-        @click=${(e) => this.#onCellClick(e, el)}
-        @dblclick=${() => this.#onCellActivate(el)}
-        @pointerenter=${() => this.tickled.handlePointerEnter(el)}
+        data-key=${key}
+        ?data-selected=${selected}
+        ?data-tickled=${tickled}
+        @click=${(e) => this.#onCellClick(e, key)}
+        @dblclick=${() => this.#onCellActivate(key)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
-          <slot name=${this.#slotNameFor(el)}></slot>
+          ${this.#source.renderCellContent(index)}
         </div>
-        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss}>${caption}</div>` : ``}
+        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
       </div>
     `;
 	}
@@ -20967,16 +21629,13 @@ let GridListElement = class GridListElement extends i {
 			this.#scrollRaf = 0;
 		}
 	}
-	#onCellClick(e, item) {
-		this.selection.handleClick(item, e);
-		this._dispatch(`list-item-click`, { item });
+	#onCellClick(e, key) {
+		this.selection.handleClick(key, e);
+		this.#emitItemEvent(`list-item-click`, key);
 	}
-	#onCellActivate(item) {
-		if (this.interactionMode !== `manual`) this.selection.replace(item);
-		this._dispatch(`list-activate`, { item });
-	}
-	#currentWindow() {
-		return computeGridWindow(this.#items.length, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation);
+	#onCellActivate(key) {
+		if (this.interactionMode !== `manual`) this.selection.replace(key);
+		this.#emitItemEvent(`list-activate`, key);
 	}
 };
 __decorate([property({
@@ -21025,11 +21684,14 @@ __decorate([property({
 	attribute: `item-wrap`
 })], GridListElement.prototype, "itemWrap", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "itemFilterPredicate", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
 	reflect: true
 })], GridListElement.prototype, "searchModes", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "items", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "itemAdapter", void 0);
 __decorate([state()], GridListElement.prototype, "_scrollTop", void 0);
 __decorate([state()], GridListElement.prototype, "_scrollLeft", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
@@ -21049,6 +21711,7 @@ let PanelElement = class PanelElement extends i {
 		this.toggleInteraction = `implicit`;
 		this.variant = `titlebar`;
 		this.hideTitlebar = false;
+		this.keepToolbar = false;
 	}
 	_onTitlebarToggle(event) {
 		event.stopPropagation();
@@ -21068,6 +21731,7 @@ let PanelElement = class PanelElement extends i {
 		this.remove();
 	}
 	render() {
+		const showToolbar = this.keepToolbar || !this.collapsed;
 		return b`
       ${this.hideTitlebar ? A : b`
         <ixfx-titlebar
@@ -21082,7 +21746,7 @@ let PanelElement = class PanelElement extends i {
           @toggle=${this._onTitlebarToggle}
           @close=${this._onCloseClick}
         >
-          <slot name="toolbar" slot="toolbar"></slot>
+          ${showToolbar ? b`<slot name="toolbar" slot="toolbar"></slot>` : A}
         </ixfx-titlebar>
         `}
 
@@ -21182,6 +21846,30 @@ let PanelElement = class PanelElement extends i {
     :host([variant="midline"][orientation="vertical"]) .content-wrapper {
       background: transparent;
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+
+    :host([variant="tree"]) {
+      border: none !important;
+      border-radius: 0 !important;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .content-inner {
+      box-shadow: none;
+      background: transparent;
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .content-wrapper {
+      background: transparent;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .content-inner {
+      width: max-content;
+      height: 100%;
+      transform: none;
+    }
   `];
 	}
 };
@@ -21217,6 +21905,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-titlebar`
 })], PanelElement.prototype, "hideTitlebar", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `keep-toolbar`
+})], PanelElement.prototype, "keepToolbar", void 0);
 PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
 //#endregion
 //#region src/grouped-item-lister/grouped-item-lister.ts
@@ -27885,15 +28577,62 @@ let LedElement = class LedElement extends i {
 		this.value = 0;
 		this.lit = false;
 		this.color = `oklch(50% 0.15 25)`;
+		this.glow = false;
+		this.mode = `brightness`;
 		this.blinking = false;
 		this.rate = 500;
+		this.attackTime = 40;
+		this.releaseTime = 400;
+		this.pulseRetrigger = false;
+		this.#appliedMode = `brightness`;
+		this.#pulseStart = 0;
+		this.#pulsePeak = 0;
+		this.#pulseFrom = 0;
+		this.#pulseLevel = 0;
+		this.#pulseTick = (now) => {
+			const attack = Math.max(0, this.attackTime);
+			const release = Math.max(0, this.releaseTime);
+			const from = this.#pulseFrom;
+			const peak = this.#pulsePeak;
+			const elapsed = now - this.#pulseStart;
+			let level;
+			if (attack > 0 && elapsed < attack) level = from + (peak - from) * (elapsed / attack);
+			else if (elapsed < attack + release) level = release > 0 ? peak * (1 - (elapsed - attack) / release) : 0;
+			else level = 0;
+			level = Math.max(0, Math.min(Math.max(from, peak), level));
+			this.#pulseLevel = level;
+			this.style.setProperty(`--value`, String(level));
+			if (elapsed < attack + release) this.#pulseRaf = requestAnimationFrame(this.#pulseTick);
+			else {
+				this.#pulseRaf = void 0;
+				this.#pulseLevel = 0;
+			}
+		};
 	}
 	#blinkInterval;
+	#appliedMode;
+	#pulseRaf;
+	#pulseStart;
+	#pulsePeak;
+	#pulseFrom;
+	#pulseLevel;
 	willUpdate(changedProperties) {
-		if (changedProperties.has(`lit`)) this.value = this.lit ? 1 : 0;
-		if (changedProperties.has(`value`) || changedProperties.has(`lit`)) this.style.setProperty(`--value`, String(this.value));
-		if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) this.#updateBlinking();
+		if (changedProperties.has(`blinking`)) {
+			if (this.blinking) this.mode = `blink`;
+			else if (this.mode === `blink`) this.mode = `brightness`;
+		}
+		if (this.mode !== this.#appliedMode) {
+			this.#appliedMode = this.mode;
+			this.#onModeChange();
+		}
+		if (changedProperties.has(`lit`)) {
+			if (this.lit) this.value = 1;
+			else if (changedProperties.get(`lit`) !== void 0) this.value = 0;
+		}
+		if (changedProperties.has(`color`)) this.style.setProperty(`--_color-attr`, this.color);
+		if (this.mode !== `pulse` && (changedProperties.has(`value`) || changedProperties.has(`lit`))) this.style.setProperty(`--value`, String(this.value));
 		if (changedProperties.has(`rate`)) {
+			this.#updateBlinking();
 			const transitionMs = this.rate < 300 ? this.rate * .5 : 150;
 			this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);
 		}
@@ -27901,18 +28640,43 @@ let LedElement = class LedElement extends i {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#stopBlinking();
+		this.#stopPulse();
 	}
-	#updateBlinking() {
-		if (this.blinking && this.rate > 0) {
-			this.#stopBlinking();
-			this.#blinkInterval = window.setInterval(() => {
-				this.value = this.value === 0 ? 1 : 0;
-			}, this.rate);
-		} else {
-			this.#stopBlinking();
-			this.value = 0;
+	/**
+	* Pulse-mode trigger: lights the LED to {@link value} using an attack/release
+	* envelope, then decays back to unlit. Calling again restarts the envelope
+	* (from 0 if {@link pulseRetrigger} is set, otherwise from the current level).
+	* No-op unless {@link mode} is `pulse`.
+	*/
+	pulse() {
+		if (this.mode !== `pulse`) return;
+		this.#pulsePeak = this.value;
+		this.#pulseFrom = this.pulseRetrigger ? 0 : this.#pulseLevel;
+		this.#pulseStart = performance.now();
+		if (this.#pulseRaf === void 0) this.#pulseRaf = requestAnimationFrame(this.#pulseTick);
+	}
+	#onModeChange() {
+		this.#stopPulse();
+		this.#pulseLevel = 0;
+		this.blinking = this.mode === `blink`;
+		this.#updateBlinking();
+		this.style.setProperty(`--value`, this.mode === `pulse` ? `0` : String(this.value));
+	}
+	#pulseTick;
+	#stopPulse() {
+		if (this.#pulseRaf !== void 0) {
+			cancelAnimationFrame(this.#pulseRaf);
+			this.#pulseRaf = void 0;
 		}
 	}
+	#updateBlinking() {
+		const wasBlinking = this.#blinkInterval !== void 0;
+		this.#stopBlinking();
+		if (this.mode === `blink` && this.rate > 0) this.#blinkInterval = window.setInterval(() => {
+			this.value = this.value === 0 ? 1 : 0;
+		}, this.rate);
+		else if (wasBlinking || this.mode === `blink`) this.value = 0;
+	}
 	#stopBlinking() {
 		if (this.#blinkInterval !== void 0) {
 			clearInterval(this.#blinkInterval);
@@ -27926,6 +28690,8 @@ let LedElement = class LedElement extends i {
 		this.styles = i$3`
     :host {
       --_size: var(--size, 1ex);
+      /* Resolved colour: explicit --colour wins, then the \`color\` attribute, then a default. */
+      --_colour: var(--colour, var(--_color-attr, oklch(50% 0.15 25)));
       display: inline-block;
       min-width: 1ex;
       min-height: 1ex;
@@ -27935,12 +28701,61 @@ let LedElement = class LedElement extends i {
     }
 
     div {
+      position: relative;
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));
+      background: color-mix(in oklch, var(--_colour), white calc((1 - var(--value, 0)) * 50%));
       transition: background var(--transition-duration, 150ms) ease-out;
     }
+
+    /* Glow: a more realistic domed LED with a specular highlight and coloured bloom. */
+    :host([glow]) {
+      /* Body darkens toward black as the LED dims, so an unlit LED reads as a dark dome. */
+      --_body: color-mix(in oklch, var(--_colour), black calc((1 - var(--value, 0)) * 60%));
+      overflow: visible;
+    }
+
+    :host([glow]) div {
+      background:
+        radial-gradient(circle at 32% 28%,
+          color-mix(in oklch, var(--_body), white 55%) 0%,
+          var(--_body) 45%,
+          color-mix(in oklch, var(--_body), black 32%) 100%);
+      box-shadow:
+        /* inner rim shading for depth */
+        inset 0 calc(var(--_size) * -0.1) calc(var(--_size) * 0.18)
+          color-mix(in oklch, var(--_body), black 45%),
+        inset 0 calc(var(--_size) * 0.08) calc(var(--_size) * 0.14)
+          color-mix(in oklch, var(--_body), white 25%),
+        /* coloured bloom, scaled by value so it only glows when lit */
+        0 0 calc(var(--_size) * 0.6 * var(--value, 0)) calc(var(--_size) * 0.12 * var(--value, 0))
+          var(--_colour),
+        0 0 calc(var(--_size) * 1.7 * var(--value, 0)) calc(var(--_size) * 0.5 * var(--value, 0))
+          color-mix(in oklch, var(--_colour), transparent 45%);
+      transition:
+        background var(--transition-duration, 150ms) ease-out,
+        box-shadow var(--transition-duration, 150ms) ease-out;
+    }
+
+    /* Specular highlight blob near the top-left. */
+    :host([glow]) div::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background: radial-gradient(ellipse 55% 45% at 30% 22%,
+        color-mix(in oklch, white, transparent 10%) 0%,
+        transparent 60%);
+      pointer-events: none;
+    }
+
+    /* Pulse mode animates --value frame-by-frame, so drop the CSS transition
+       that would otherwise smear the envelope. Placed last to win over the
+       glow rule for elements matching both. */
+    :host([mode="pulse"]) div {
+      transition: none;
+    }
   `;
 	}
 };
@@ -27951,6 +28766,15 @@ __decorate([property({
 	reflect: true
 })], LedElement.prototype, "lit", void 0);
 __decorate([property({ type: String })], LedElement.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `glow`,
+	reflect: true
+})], LedElement.prototype, "glow", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LedElement.prototype, "mode", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: `blinking`,
@@ -27960,6 +28784,18 @@ __decorate([property({
 	type: Number,
 	attribute: `rate`
 })], LedElement.prototype, "rate", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `attack-time`
+})], LedElement.prototype, "attackTime", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `release-time`
+})], LedElement.prototype, "releaseTime", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `pulse-retrigger`
+})], LedElement.prototype, "pulseRetrigger", void 0);
 LedElement = __decorate([safeCustomElement(`ixfx-led`)], LedElement);
 //#endregion
 //#region src/miller/miller-base.ts
@@ -30127,6 +30963,66 @@ __decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
 PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
 //#endregion
 //#region src/panel/panel-group.ts
+/** Pointer movement threshold (px) before a press becomes a drag. */
+const DRAG_THRESHOLD_PX = 5;
+/**
+* Pure helper: nearest gap index for a pointer position along one axis.
+* `edges` are the [start, end] of each sibling (excluding the drag source),
+* in DOM order. Returns 0..edges.length.
+*/
+function panelGapIndex(edges, pos) {
+	let bestGap = 0;
+	let bestDist = Number.POSITIVE_INFINITY;
+	for (let i = 0; i < edges.length; i++) {
+		const [start, end] = edges[i];
+		if (pos < (start + end) / 2) {
+			const d = Math.abs(pos - start);
+			if (d < bestDist) {
+				bestDist = d;
+				bestGap = i;
+			}
+		} else {
+			const d = Math.abs(pos - end);
+			if (d < bestDist) {
+				bestDist = d;
+				bestGap = i + 1;
+			}
+		}
+	}
+	return bestGap;
+}
+let panelGhostStylesInjected = false;
+/**
+* Global ghost styling so the drag preview matches `ixfx-titlebar` chrome
+* (font, colours, padding). Injected once; the ghost lives outside shadow DOM
+* (body/theme container) so component styles cannot reach it.
+*/
+function injectPanelGhostStyles() {
+	if (panelGhostStylesInjected) return;
+	panelGhostStylesInjected = true;
+	const style = document.createElement(`style`);
+	style.textContent = `
+    .ixfx-drag-ghost.ixfx-panel-group-ghost {
+      padding: var(--space-s, 8px) var(--space-m, 16px);
+      background: var(--surface-4);
+      color: var(--surface-3-text);
+      border: none;
+      border-radius: var(--radius-s, 4px);
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      font-weight: var(--font-weight-bold, 600);
+      min-height: 2em;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+    .ixfx-drag-ghost.ixfx-panel-group-ghost ixfx-icon {
+      width: 1.25em;
+      height: 1.25em;
+      flex-shrink: 0;
+    }
+  `;
+	document.head.appendChild(style);
+}
 let PanelGroupElement = class PanelGroupElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -30134,22 +31030,105 @@ let PanelGroupElement = class PanelGroupElement extends i {
 		this.variant = `titlebar`;
 		this.toggleInteraction = `implicit`;
 		this.collapsible = true;
-		this.allowMultiple = false;
-		this.gap = `var(--space-m)`;
+		this.accordion = false;
+		this.allowReorder = false;
+		this._dragState = null;
+		this._suppressNextClick = false;
+		this._onClickCapture = (event) => {
+			if (!this._suppressNextClick) return;
+			this._suppressNextClick = false;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		this._onKeyDown = (event) => {
+			const state = this._dragState;
+			if (event.key !== `Escape` || !state?.active) return;
+			event.preventDefault();
+			const pointerId = state.pointerId;
+			this._abortDrag();
+			this._endDrag(pointerId);
+		};
+		this._onPointerDown = (event) => {
+			if (!this.allowReorder || event.button !== 0) return;
+			const target = this._findDragTarget(event);
+			if (!target?.parentNode) return;
+			const fromIndex = Array.prototype.indexOf.call(target.parentNode.children, target);
+			if (fromIndex < 0) return;
+			this._dragState = {
+				pointerId: event.pointerId,
+				source: target,
+				fromIndex,
+				startX: event.clientX,
+				startY: event.clientY,
+				active: false,
+				ghost: null,
+				gapIndex: void 0
+			};
+			window.addEventListener(`pointermove`, this._onPointerMove);
+			window.addEventListener(`pointerup`, this._onPointerUp);
+			window.addEventListener(`pointercancel`, this._onPointerCancel);
+		};
+		this._onPointerMove = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			const distance = Math.hypot(event.clientX - state.startX, event.clientY - state.startY);
+			if (!state.active) {
+				if (distance < DRAG_THRESHOLD_PX) return;
+				this._beginDrag(event);
+			}
+			state.ghost?.move(event.clientX, event.clientY);
+			const gap = this._computeGapIndex(event.clientX, event.clientY);
+			if (gap !== state.gapIndex) {
+				state.gapIndex = gap;
+				this.requestUpdate();
+			}
+		};
+		this._onPointerUp = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			if (state.active) {
+				const gap = this._computeGapIndex(event.clientX, event.clientY);
+				this._commitDrag(state.source, state.fromIndex, gap);
+			}
+			this._endDrag(event.pointerId);
+		};
+		this._onPointerCancel = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			this._abortDrag();
+			this._endDrag(event.pointerId);
+		};
 	}
 	_onPanelToggle(e) {
 		const panel = e.target;
 		if (panel.collapsed) return;
-		if (this.allowMultiple) return;
+		if (!this.accordion) return;
 		for (const p of this._panels) if (p !== panel) p.collapsed = true;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`click`, this._onClickCapture, true);
+	}
+	disconnectedCallback() {
+		this.removeEventListener(`click`, this._onClickCapture, true);
+		if (this._dragState) {
+			this._abortDrag();
+			this._endDrag(this._dragState.pointerId);
+		}
+		super.disconnectedCallback();
+	}
 	firstUpdated() {
+		if (this.gap !== void 0) this.style.setProperty(`--group-gap`, this.gap);
 		this.updateComplete.then(() => {
 			this._propagateAll();
 		});
 	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`gap`)) {
+			if (this.gap !== void 0) this.style.setProperty(`--group-gap`, this.gap);
+			else this.style.removeProperty(`--group-gap`);
+		}
 		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`) || changed.has(`collapsible`)) this.updateComplete.then(() => {
 			this._propagateAll();
 		});
@@ -30164,19 +31143,167 @@ let PanelGroupElement = class PanelGroupElement extends i {
 			else panel.removeAttribute(`collapsible`);
 		}
 	}
+	_onSlotChange() {
+		this.updateComplete.then(() => {
+			this._propagateAll();
+		});
+	}
+	/**
+	* Walk composedPath for the nearest ixfx-panel, requiring the press to have
+	* gone through an ixfx-titlebar (titlebar-anywhere drag). Bails when the
+	* path crosses interactive chrome (buttons/links/inputs/toolbar/caret/close)
+	* so those controls always win over dragging.
+	*/
+	_findDragTarget(event) {
+		if (!this.allowReorder) return null;
+		const path = event.composedPath();
+		let panel = null;
+		let viaTitlebar = false;
+		for (const node of path) {
+			if (!(node instanceof HTMLElement)) continue;
+			const tag = node.tagName;
+			if (tag === `BUTTON` || tag === `A` || tag === `INPUT` || tag === `SELECT` || tag === `TEXTAREA`) return null;
+			if (node.classList.contains(`toolbar`) || node.classList.contains(`close-btn`) || node.classList.contains(`caret-btn`)) return null;
+			if (node.hasAttribute?.(`slot`) && node.getAttribute(`slot`) === `toolbar`) return null;
+			if (tag === `IXFX-TITLEBAR`) viaTitlebar = true;
+			if (!panel && tag === `IXFX-PANEL`) panel = node;
+		}
+		if (!panel || !viaTitlebar) return null;
+		return panel;
+	}
+	_beginDrag(event) {
+		const state = this._dragState;
+		if (!state || state.active) return;
+		try {
+			this.setPointerCapture(event.pointerId);
+		} catch {}
+		state.active = true;
+		this.setAttribute(`dragging`, ``);
+		state.source.setAttribute(`drag-source`, ``);
+		state.ghost = this._createGhost(state.source);
+		state.ghost?.move(event.clientX, event.clientY);
+	}
+	_abortDrag() {
+		const state = this._dragState;
+		if (!state) return;
+		state.source.removeAttribute(`drag-source`);
+		if (state.gapIndex !== void 0) {
+			state.gapIndex = void 0;
+			this.requestUpdate();
+		}
+	}
+	_endDrag(pointerId) {
+		const state = this._dragState;
+		if (!state) return;
+		state.ghost?.destroy();
+		state.ghost = null;
+		this.removeAttribute(`dragging`);
+		this._dragState = null;
+		window.removeEventListener(`pointermove`, this._onPointerMove);
+		window.removeEventListener(`pointerup`, this._onPointerUp);
+		window.removeEventListener(`pointercancel`, this._onPointerCancel);
+		try {
+			this.releasePointerCapture(pointerId);
+		} catch {}
+		this.requestUpdate();
+	}
+	_commitDrag(source, fromIndex, gapIndex) {
+		source.removeAttribute(`drag-source`);
+		const siblings = (this._panels ?? []).filter((el) => el !== source);
+		const target = gapIndex === void 0 ? siblings.length : Math.max(0, Math.min(gapIndex, siblings.length));
+		const parent = source.parentNode;
+		if (!parent) return;
+		const ref = siblings[target] ?? null;
+		parent.insertBefore(source, ref);
+		const toIndex = Array.prototype.indexOf.call(parent.children, source);
+		if (toIndex === fromIndex) return;
+		this._suppressNextClick = true;
+		this.dispatchEvent(new CustomEvent(`reorder`, {
+			bubbles: true,
+			composed: true,
+			detail: {
+				fromIndex,
+				toIndex,
+				panel: source
+			}
+		}));
+	}
+	_createGhost(source) {
+		const content = document.createElement(`span`);
+		content.style.display = `inline-flex`;
+		content.style.alignItems = `center`;
+		content.style.padding = `0 var(--space-s, 8px)`;
+		content.style.minWidth = `0`;
+		if (source.iconName) {
+			const icon = document.createElement(`ixfx-icon`);
+			icon.name = source.iconName;
+			content.appendChild(icon);
+		}
+		const label = document.createElement(`span`);
+		label.textContent = (source.title || (source.textContent ?? ``).trim()).slice(0, 60);
+		label.style.paddingLeft = `1ch`;
+		label.style.overflow = `hidden`;
+		label.style.textOverflow = `ellipsis`;
+		label.style.whiteSpace = `nowrap`;
+		content.appendChild(label);
+		try {
+			injectPanelGhostStyles();
+			return createDragGhost({
+				anchor: source,
+				content,
+				className: `ixfx-panel-group-ghost`
+			});
+		} catch {
+			return null;
+		}
+	}
+	/**
+	* Nearest panel gap to the pointer, ignoring the drag source.
+	* The perpendicular axis is ignored — the pointer always resolves to a gap.
+	*/
+	_computeGapIndex(clientX, clientY) {
+		const state = this._dragState;
+		if (!state) return;
+		const siblings = (this._panels ?? []).filter((el) => el !== state.source);
+		if (siblings.length === 0) return 0;
+		const useX = this.orientation === `horizontal`;
+		const pos = useX ? clientX : clientY;
+		return panelGapIndex(siblings.map((el) => {
+			const rect = el.getBoundingClientRect();
+			return [useX ? rect.left : rect.top, useX ? rect.right : rect.bottom];
+		}), pos);
+	}
+	_computeCaretStyle() {
+		const state = this._dragState;
+		if (!state?.active || state.gapIndex === void 0) return;
+		const siblings = (this._panels ?? []).filter((el) => el !== state.source);
+		if (siblings.length === 0) return;
+		const hostRect = this.getBoundingClientRect();
+		if (!hostRect) return;
+		const gap = Math.max(0, Math.min(state.gapIndex, siblings.length));
+		const rect = gap < siblings.length ? siblings[gap].getBoundingClientRect() : siblings[siblings.length - 1].getBoundingClientRect();
+		if (this.orientation === `horizontal`) return `transform: translate(${(gap < siblings.length ? rect.left : rect.right) - hostRect.left - 1}px, 0); width: 2px; height: ${hostRect.height}px;`;
+		return `transform: translate(0, ${(gap < siblings.length ? rect.top : rect.bottom) - hostRect.top - 1}px); width: ${hostRect.width}px; height: 2px;`;
+	}
 	render() {
+		const caretStyle = this._computeCaretStyle();
 		return b`
       <slot
         @toggle=${this._onPanelToggle}
+        @slotchange=${this._onSlotChange}
+        @pointerdown=${this._onPointerDown}
+        @keydown=${this._onKeyDown}
       ></slot>
+      ${caretStyle ? b`<div class="drop-caret" style=${caretStyle}></div>` : A}
     `;
 	}
 	static {
 		this.styles = i$3`
     :host {
+      position: relative;
       display: flex;
       flex-direction: column;
-      gap: var(--group-gap, var(--space-m));
+      gap: var(--group-gap, var(--space-l));
     }
 
     :host([orientation="horizontal"]) {
@@ -30197,6 +31324,36 @@ let PanelGroupElement = class PanelGroupElement extends i {
       flex-basis: content;
       min-width: 0;
     }
+
+    :host([allow-reorder]) ::slotted(ixfx-panel) {
+      cursor: grab;
+    }
+
+    :host([allow-reorder]) ::slotted(ixfx-panel[drag-source]) {
+      cursor: grabbing;
+      opacity: 0.4;
+    }
+
+    /* While dragging, suppress text selection inside the panels. */
+    :host([dragging]),
+    :host([dragging]) ::slotted(*) {
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    :host([dragging]) ::slotted(ixfx-panel) {
+      cursor: grabbing;
+    }
+
+    .drop-caret {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--accent);
+      border-radius: 1px;
+      pointer-events: none;
+      z-index: 1;
+    }
   `;
 	}
 };
@@ -30212,8 +31369,14 @@ __decorate([property({
 __decorate([property({ type: Boolean })], PanelGroupElement.prototype, "collapsible", void 0);
 __decorate([property({
 	type: Boolean,
-	attribute: `allow-multiple`
-})], PanelGroupElement.prototype, "allowMultiple", void 0);
+	attribute: `accordion`,
+	reflect: true
+})], PanelGroupElement.prototype, "accordion", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-reorder`,
+	reflect: true
+})], PanelGroupElement.prototype, "allowReorder", void 0);
 __decorate([property()], PanelGroupElement.prototype, "gap", void 0);
 __decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
 PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
@@ -30926,11 +32089,18 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.valueTooltips = `hover`;
 		this.tooltipDelay = 400;
 		this.valueUpdateInterval = 500;
+		this.interactionMode = `inspect`;
 		this.valueFormat = (valueMin, valueMax, frequency) => `${valueMin.toFixed(2)} - ${valueMax.toFixed(2)}: ${frequency}`;
 		this._width = 100;
 		this._height = 40;
 		this._hoveredIndex = null;
 		this._inlineOverlayText = null;
+		this._coloredRangeMin = null;
+		this._coloredRangeMax = null;
+		this._selectionStart = null;
+		this._selectionEnd = null;
+		this._isDragging = false;
+		this._selectionOverlayText = null;
 		this.#series = new PlotDataSeries({
 			capacityLimit: 100,
 			persistentScaling: true
@@ -30943,6 +32113,22 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.#tooltipPosition = null;
 		this.#valueRefreshTimer = null;
 		this.#onPointerMove = (e) => {
+			if (this.interactionMode === `select` && this._isDragging) {
+				const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+				this._selectionEnd = index;
+				const start = Math.min(this._selectionStart, this._selectionEnd);
+				const end = Math.max(this._selectionStart, this._selectionEnd);
+				const bars = this.#computeBars();
+				if (start <= end) {
+					const startBar = bars[start];
+					const endBar = bars[end];
+					this.setColoredRange(startBar.valueMin, endBar.valueMax);
+					this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
+				}
+				this.requestUpdate();
+				return;
+			}
+			if (this.interactionMode === `select`) return;
 			if (this.valueTooltips === `none`) return;
 			const index = this.#bucketIndexFromPointer(e.clientX, e.clientY);
 			const bucketIndex = index >= 0 ? index : null;
@@ -30950,10 +32136,34 @@ let PlotHistogram = class PlotHistogram extends i {
 			else this.#updateBubbleTooltip(bucketIndex, e.clientX, e.clientY);
 		};
 		this.#onPointerLeave = () => {
+			if (this.interactionMode === `select`) {
+				if (this._isDragging) {
+					this._isDragging = false;
+					this._selectionOverlayText = null;
+					this.requestUpdate();
+				}
+				return;
+			}
 			if (this.valueTooltips === `none`) return;
 			if (this.valueTooltips === `inline`) this.#setInlineIndex(null);
 			else this.#updateBubbleTooltip(null, 0, 0);
 		};
+		this.#onPointerDown = (e) => {
+			if (this.interactionMode !== `select`) return;
+			const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+			this._isDragging = true;
+			this._selectionStart = index;
+			this._selectionEnd = index;
+			const bars = this.#computeBars();
+			const startBar = bars[index];
+			const endBar = bars[index];
+			this.setColoredRange(startBar.valueMin, endBar.valueMax);
+			this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
+			this.requestUpdate();
+		};
+		this.#onPointerUp = () => {
+			if (this.interactionMode === `select`) this._isDragging = false;
+		};
 	}
 	#series;
 	#hasProgrammaticData;
@@ -30977,6 +32187,59 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.#series.clear();
 		this.requestUpdate();
 	}
+	setColoredRange(min, max) {
+		this._coloredRangeMin = min;
+		this._coloredRangeMax = max;
+		this.requestUpdate();
+	}
+	clearColoredRange() {
+		this._coloredRangeMin = null;
+		this._coloredRangeMax = null;
+		this.requestUpdate();
+	}
+	setSelection(startBarIndex, endBarIndex) {
+		const bars = this.#computeBars();
+		const start = Math.min(startBarIndex, endBarIndex);
+		const end = Math.max(startBarIndex, endBarIndex);
+		const clampedStart = Math.max(0, Math.min(start, bars.length - 1));
+		const clampedEnd = Math.max(0, Math.min(end, bars.length - 1));
+		this._selectionStart = clampedStart;
+		this._selectionEnd = clampedEnd;
+		if (clampedStart <= clampedEnd) {
+			const startBar = bars[clampedStart];
+			const endBar = bars[clampedEnd];
+			this.setColoredRange(startBar.valueMin, endBar.valueMax);
+		}
+		this.requestUpdate();
+	}
+	clearSelection() {
+		this._selectionStart = null;
+		this._selectionEnd = null;
+		this.requestUpdate();
+	}
+	getSelectedRange() {
+		if (this._selectionStart === null || this._selectionEnd === null) return {
+			barIndices: null,
+			dataValues: null
+		};
+		const bars = this.#computeBars();
+		const start = Math.min(this._selectionStart, this._selectionEnd);
+		const end = Math.max(this._selectionStart, this._selectionEnd);
+		const clampedStart = Math.max(0, Math.min(start, bars.length - 1));
+		const clampedEnd = Math.max(0, Math.min(end, bars.length - 1));
+		const startBar = bars[clampedStart];
+		const endBar = bars[clampedEnd];
+		return {
+			barIndices: {
+				start: clampedStart,
+				end: clampedEnd
+			},
+			dataValues: {
+				min: startBar.valueMin,
+				max: endBar.valueMax
+			}
+		};
+	}
 	firstUpdated(_changed) {
 		this._width = this.clientWidth || 100;
 		this._height = this.clientHeight || 40;
@@ -31111,6 +32374,10 @@ let PlotHistogram = class PlotHistogram extends i {
 			}
 		});
 	}
+	#isBarInColoredRange(bar) {
+		if (this._coloredRangeMin === null || this._coloredRangeMax === null) return true;
+		return bar.valueMin < this._coloredRangeMax && bar.valueMax > this._coloredRangeMin;
+	}
 	/** Index of the bar rect under the pointer, or -1 if none (matches click hit-testing). */
 	#bucketIndexFromPointer(clientX, clientY) {
 		const rect = this.getBoundingClientRect();
@@ -31118,6 +32385,18 @@ let PlotHistogram = class PlotHistogram extends i {
 		const y = clientY - rect.top;
 		return this.#computeBars().findIndex((b) => x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height);
 	}
+	/** Gets bucket index from position, clamping to valid range (0 to bucketCount-1). */
+	#bucketIndexFromPosition(clientX, clientY) {
+		const { w, h, isHorizontal, padding, dataMin, dataSpan, bucketCount, availableMain } = this.#computeGeometry();
+		const rect = this.getBoundingClientRect();
+		const x = clientX - rect.left;
+		const y = clientY - rect.top;
+		let relativePos;
+		if (isHorizontal) relativePos = (x - padding) / availableMain;
+		else relativePos = (y - padding) / availableMain;
+		relativePos = Math.max(0, Math.min(1, relativePos));
+		return Math.floor(relativePos * bucketCount);
+	}
 	#tooltipIndex;
 	#tooltipVisible;
 	#tooltipShowTimer;
@@ -31252,15 +32531,23 @@ let PlotHistogram = class PlotHistogram extends i {
 	}
 	#onPointerMove;
 	#onPointerLeave;
+	#onPointerDown;
+	#onPointerUp;
 	render() {
 		const { w: w$7, h, padding } = this.#computeGeometry();
-		const barsContent = this.#computeBars().map((b, i) => w`
-      <rect class="bar" x=${b.x} y=${b.y} width=${b.width} height=${b.height}
-        style="--value: ${b.relativeValue}"
-        @click=${() => this.#emitClick(i, b.valueMin, b.valueMax, b.relativeValue)} />
-    `);
+		const barsContent = this.#computeBars().map((b, i) => {
+			const greyStyle = this.#isBarInColoredRange(b) ? `` : `filter: grayscale(1)`;
+			return w`
+        <rect class="bar" x=${b.x} y=${b.y} width=${b.width} height=${b.height}
+          style="--value: ${b.relativeValue}; ${greyStyle}"
+          @click=${() => this.#emitClick(i, b.valueMin, b.valueMax, b.relativeValue)} />
+      `;
+		});
 		const textColor = `var(--plot-text, var(--surface-2-text, #fff))`;
-		const overlayText = this.valueTooltips === `inline` && this._inlineOverlayText !== null ? this._inlineOverlayText : this.title;
+		let overlayText;
+		if (this.interactionMode === `select` && this._selectionOverlayText !== null) overlayText = this._selectionOverlayText;
+		else if (this.valueTooltips === `inline` && this._inlineOverlayText !== null) overlayText = this._inlineOverlayText;
+		else overlayText = this.title;
 		const titleContent = overlayText ? w`<text x=${padding + 2} y=${padding + Math.min(10, h * .6)}
           class="overlay-text" fill=${textColor}
           style="opacity: 0.6">${overlayText}</text>` : w``;
@@ -31268,7 +32555,9 @@ let PlotHistogram = class PlotHistogram extends i {
       <svg width=${w$7} height=${h} viewBox="0 0 ${w$7} ${h}"
         xmlns="http://www.w3.org/2000/svg"
         @pointermove=${this.#onPointerMove}
-        @pointerleave=${this.#onPointerLeave}>
+        @pointerleave=${this.#onPointerLeave}
+        @pointerdown=${this.#onPointerDown}
+        @pointerup=${this.#onPointerUp}>
         <rect width=${w$7} height=${h} fill="transparent" />
         ${barsContent}
         ${titleContent}
@@ -31330,10 +32619,17 @@ __decorate([property({
 	type: Number,
 	attribute: `value-update-interval`
 })], PlotHistogram.prototype, "valueUpdateInterval", void 0);
+__decorate([property({ attribute: `interaction-mode` })], PlotHistogram.prototype, "interactionMode", void 0);
 __decorate([state()], PlotHistogram.prototype, "_width", void 0);
 __decorate([state()], PlotHistogram.prototype, "_height", void 0);
 __decorate([state()], PlotHistogram.prototype, "_hoveredIndex", void 0);
 __decorate([state()], PlotHistogram.prototype, "_inlineOverlayText", void 0);
+__decorate([state()], PlotHistogram.prototype, "_coloredRangeMin", void 0);
+__decorate([state()], PlotHistogram.prototype, "_coloredRangeMax", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionStart", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionEnd", void 0);
+__decorate([state()], PlotHistogram.prototype, "_isDragging", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionOverlayText", void 0);
 PlotHistogram = __decorate([safeCustomElement(`ixfx-plot-histogram`)], PlotHistogram);
 //#endregion
 //#region src/plots/single-axis.ts
@@ -39524,6 +40820,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-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, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSearchController, 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, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, 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, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSearchController, 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, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map