@ixfx/components 0.3.2 → 0.4.1

package/dist/index.js

@@ -1,37 +1,38 @@
-import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-TPbSHruI.js";
-import { n as tickledStyles, r as TickledController } from "./tickled-styles-Bg3QbcrD.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
-import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as getIcon } from "./registry-Q2gYQCHM.js";
-import { t as IxfxIconElement } from "./icon-9NWTXtE1.js";
+import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
+import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-fNDdqf6l.js";
+import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
+import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as getIcon } from "./registry-CkW7q09Q.js";
+import { t as IxfxIconElement } from "./icon-Ndo40kNO.js";
 import { AcTextElement } from "./ac-text.js";
-import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearchTreeController, r as createIncrSearch, t as createElementIncrSearch } from "./incr-search-DSKKsk6w.js";
-import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-C7elhuyJ.js";
+import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearchTreeController, r as createIncrSearch, t as createElementIncrSearch } from "./incr-search-CeERfijK.js";
+import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-C3b9OWJD.js";
 import "./icons.js";
-import { t as prominenceStyles } from "./prominence--ic9uWBl.js";
-import { n as buttonStyles, t as ButtonElement } from "./button-DMt5XWUK.js";
-import { t as popupSurfaceStyles } from "./popup-ImtS9KnS.js";
-import "./menu-item-CKRfP0pN.js";
+import { t as prominenceStyles } from "./prominence-DlFShic3.js";
+import { n as buttonStyles, t as ButtonElement } from "./button-C3fLMKUv.js";
+import { t as popupSurfaceStyles } from "./popup-DiWMxsWj.js";
+import "./menu-item-BrIuORYD.js";
 import { Checkbox } from "./checkbox.js";
-import { C as resultThrow, E as throwIfFailed, d as scaler, h as without, n as clamper, p as containsDuplicateInstances, y as nullUndefTest } from "./dist-TAGYwaju.js";
-import { a as computeColour, c as last, i as applyAgeModification, l as QueueMutable, n as PlotSingleAxis, o as parseColourScaleAttr, r as PlotDataSeries, s as readBaseColour, t as PlotXyAxis, u as __exportAll } from "./xy-axis-DL0tfJDr.js";
-import { a as toStringAbbreviate, c as isEqualDefault, l as isEqualValueDefault, o as defaultComparer, r as isPrimitive, u as isEqualValueIgnoreOrder } from "./dist-BX0OVIm7.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-K6zu82lm.js";
+import { _ as isEqualValueDefault, a as PlotDataSeries, c as parseColourScaleAttr, d as QueueMutable, f as isPrimitive, g as isEqualDefault, h as defaultComparer, i as PlotMultiAxis, l as readBaseColour, m as __exportAll, n as PlotSingleAxis, o as applyAgeModification, p as toStringAbbreviate, r as PlotHistogram, s as computeColour, t as PlotXyAxis, u as last, v as isEqualValueIgnoreOrder } from "./xy-axis-CK64haaK.js";
+import { C as resultThrow, T as throwIfFailed, d as scaler, h as without, n as clamper, p as containsDuplicateInstances, y as nullUndefTest } from "./dist-CA13FvMn.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-0sgAha1T.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
-import { i as TreeDataModel, n as TreeController, r as TreeBaseElement, t as TreeListElement } from "./tree-CvvKbO-f.js";
+import { t as collectDataResult } from "./data-provider-DgI909FP.js";
+import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-CJWpMUvD.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { EditableLabel } from "./editable-label.js";
-import { t as resolveStep } from "./keyboard-De_vOHLg.js";
-import { t as IxfxHexEditorElement } from "./hex-editor-CsN_ySkH.js";
-import { t as RadialInputElement } from "./radial-input-DZA6WaFu.js";
+import { t as resolveStep } from "./keyboard-CimiEskD.js";
+import { PanelElement } from "./panel.js";
+import { t as IxfxHexEditorElement } from "./hex-editor-WZrjRtvL.js";
+import { t as RadialInputElement } from "./radial-input-DZ7eQCcM.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LedElement } from "./led.js";
-import { t as menu_exports } from "./menu-DJJuCm-5.js";
+import { t as menu_exports } from "./menu-vjoiHZ13.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
-import { PanelElement } from "./panel.js";
 import { PolarPad } from "./polar-pad.js";
-import { t as tooltipValueStyles } from "./tooltip-DMxmBNky.js";
+import { t as tooltipValueStyles } from "./tooltip-CJt3WLmN.js";
 import { RangeInput } from "./range-input.js";
 import { RangeElement } from "./range.js";
 import { SelectHorizontalElement } from "./selecthorizontal.js";
@@ -39,13 +40,182 @@ import { SnapContainer } from "./snap-container.js";
 import { SplitLayoutElement } from "./split-layout.js";
 import { SwipeElement } from "./swipe.js";
 import { TabListElement } from "./tabs.js";
-import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-Bh0PhlKW.js";
+import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-2OFtN4Ta.js";
 import { XyPad } from "./xy-pad.js";
 import { LitElement, css, html, nothing } from "lit";
 import { eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { keyed } from "lit/directives/keyed.js";
+//#region src/common/data-controller.ts
+function isAsyncIterable(v) {
+	return typeof v === `object` && v !== null && Symbol.asyncIterator in v;
+}
+/**
+* Lit ReactiveController that manages one active data provider request at a time.
+*
+* Handles all three provider return modes (sync, async one-shot, streaming),
+* tracks progress, and cancels in-flight requests when a new one starts.
+* Calls host.requestUpdate() on every state change so the component re-renders
+* automatically.
+*
+* @typeParam TQuery - The query/scope type passed to the provider.
+* @typeParam TItem  - The item type produced by the provider.
+*
+* @example
+* ```ts
+* class MyList extends LitElement {
+*   #data = new DataController<string, MyItem>(this, myProvider);
+*
+*   protected override render() {
+*     return html`
+*       ${this.#data.loading ? html`<span>Loading…</span>` : nothing}
+*       ${this.#data.items.map(item => html`<div>${item.label}</div>`)}
+*     `;
+*   }
+* }
+* ```
+*/
+var DataController = class {
+	#host;
+	#opts;
+	#provider;
+	#abort;
+	#items = [];
+	#loading = false;
+	#loaded = 0;
+	#total;
+	#error;
+	constructor(host, provider, options) {
+		this.#host = host;
+		this.#provider = provider;
+		this.#opts = {
+			clearOnRequest: options?.clearOnRequest ?? true,
+			onError: options?.onError
+		};
+		host.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {
+		this.cancel();
+	}
+	get provider() {
+		return this.#provider;
+	}
+	set provider(value) {
+		this.#provider = value;
+	}
+	/** The currently accumulated items. */
+	get items() {
+		return this.#items;
+	}
+	/** True while a provider call is pending or a stream is still open. */
+	get loading() {
+		return this.#loading;
+	}
+	/** Number of items accumulated so far in the current request. */
+	get loaded() {
+		return this.#loaded;
+	}
+	/**
+	* Provider's latest estimate of the total number of items expected.
+	* Undefined when the provider has not reported a total.
+	*/
+	get total() {
+		return this.#total;
+	}
+	/**
+	* Progress as a 0–1 value, or undefined when total is unknown.
+	* Derived from loaded / total.
+	*/
+	get progress() {
+		if (this.#total === void 0 || this.#total === 0) return void 0;
+		return Math.min(this.#loaded / this.#total, 1);
+	}
+	/** The last error thrown by the provider, or undefined if the last request succeeded. */
+	get error() {
+		return this.#error;
+	}
+	/**
+	* Cancel any in-flight request and start a new one.
+	* Clears items immediately unless clearOnRequest was set to false.
+	*/
+	request(query) {
+		this.cancel();
+		if (!this.#provider) return;
+		if (this.#opts.clearOnRequest) {
+			this.#items = [];
+			this.#loaded = 0;
+		}
+		this.#total = void 0;
+		this.#error = void 0;
+		this.#loading = true;
+		this.#host.requestUpdate();
+		this.#abort = new AbortController();
+		const { signal } = this.#abort;
+		this.#consume(this.#provider(query, signal), signal);
+	}
+	/** Abort any in-flight request without issuing a new one. */
+	cancel() {
+		this.#abort?.abort();
+		this.#abort = void 0;
+		if (this.#loading) {
+			this.#loading = false;
+			this.#host.requestUpdate();
+		}
+	}
+	#consume(result, signal) {
+		if (Array.isArray(result)) {
+			this.#applyBatch({ items: result }, signal);
+			this.#loading = false;
+			this.#host.requestUpdate();
+		} else if (isAsyncIterable(result)) this.#consumeStream(result, signal);
+		else result.then((items) => {
+			if (signal.aborted) return;
+			this.#applyBatch({ items }, signal);
+			this.#loading = false;
+			this.#host.requestUpdate();
+		}, (err) => {
+			if (signal.aborted) return;
+			this.#handleError(err);
+		});
+	}
+	async #consumeStream(stream, signal) {
+		try {
+			for await (const batch of stream) {
+				if (signal.aborted) return;
+				this.#applyBatch(batch, signal);
+				this.#host.requestUpdate();
+			}
+		} catch (err) {
+			if (signal.aborted) return;
+			this.#handleError(err);
+			return;
+		}
+		if (!signal.aborted) {
+			this.#loading = false;
+			this.#host.requestUpdate();
+		}
+	}
+	#applyBatch(batch, _signal) {
+		if (batch.replace) {
+			this.#items = [...batch.items];
+			this.#loaded = batch.items.length;
+		} else {
+			this.#items = [...this.#items, ...batch.items];
+			this.#loaded = this.#items.length;
+		}
+		if (batch.total !== void 0) this.#total = batch.total;
+	}
+	#handleError(err) {
+		this.#error = err;
+		this.#loading = false;
+		this.#opts.onError?.(err);
+		this.#host.requestUpdate();
+	}
+};
+//#endregion
 //#region src/ac-token/ac-token.ts
 const DEFAULT_TOKENIZER = (text) => text.split(/[\s,;]+/);
 function makeLruCache(maxSize) {
@@ -62,26 +232,31 @@ function makeLruCache(maxSize) {
 	};
 }
 let AcTokenElement = class AcTokenElement extends LitElement {
+	#data;
 	#cache;
 	#debounceTimer;
-	#abortController;
 	#staticProvider;
+	#lastSuggestions;
 	constructor() {
 		super();
 		this.placeholder = ``;
 		this.cacheSize = 20;
 		this.debounceMs = 150;
 		this.strict = false;
+		this.allowDuplicates = false;
 		this._tokens = [];
 		this._draft = ``;
-		this._suggestions = [];
 		this._isOpen = false;
-		this._isLoading = false;
-		this._tickled = new TickledController(this, { getItems: () => this._suggestions.map((_, i) => ({
+		this._tickled = new TickledController(this, { getItems: () => this.#data.items.map((_, i) => ({
 			id: i,
 			enabled: true
 		})) });
+		this.#data = new DataController(this, void 0, {
+			clearOnRequest: true,
+			onError: (err) => console.error(`[ixfx-ac-token] completionProvider error:`, err)
+		});
 		this.#cache = makeLruCache(20);
+		this.#lastSuggestions = [];
 		this.#onWrapperClick = (e) => {
 			if (!e.target.closest(`.token-chip`)) this.shadowRoot?.querySelector(`input.draft`)?.focus();
 		};
@@ -196,11 +371,18 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.#cancelPending();
+		if (this.#debounceTimer !== void 0) {
+			clearTimeout(this.#debounceTimer);
+			this.#debounceTimer = void 0;
+		}
 	}
 	updated(changedProps) {
 		if (changedProps.has(`completionProvider`) || changedProps.has(`cacheSize`)) this.#cache = makeLruCache(this.cacheSize);
 		if (changedProps.has(`completionProvider`)) this.#buildStaticProvider();
+		if (this.#data.items !== this.#lastSuggestions) {
+			this.#lastSuggestions = this.#data.items;
+			this._tickled.clearTickled();
+		}
 	}
 	#buildStaticProvider() {
 		const raw = this.getAttribute(`data-tokens`);
@@ -242,9 +424,9 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 				break;
 			case `Enter`: {
 				const tickledIdx = this._tickled.tickledId;
-				if (this._isOpen && tickledIdx !== void 0 && this._suggestions[tickledIdx]) {
+				if (this._isOpen && tickledIdx !== void 0 && this.#data.items[tickledIdx]) {
 					e.preventDefault();
-					this.#selectSuggestion(this._suggestions[tickledIdx]);
+					this.#selectSuggestion(this.#data.items[tickledIdx]);
 				} else if (!this.strict && this._draft.trim()) {
 					e.preventDefault();
 					this.#addToken({ label: this._draft.trim() });
@@ -334,6 +516,11 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 			composed: true
 		}));
 	}
+	#filterUsed(items) {
+		if (this.allowDuplicates) return items;
+		const used = new Set(this._tokens.map((t) => t.label));
+		return items.filter((item) => !used.has(item.label));
+	}
 	#closePopup() {
 		this._isOpen = false;
 		this._tickled.clearTickled();
@@ -343,50 +530,42 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 			clearTimeout(this.#debounceTimer);
 			this.#debounceTimer = void 0;
 		}
-		this.#abortController?.abort();
-		this.#abortController = void 0;
-		this._isLoading = false;
+		this.#data.cancel();
 	}
 	#scheduleSuggestionFetch(query) {
-		const provider = this.completionProvider ?? this.#staticProvider;
-		if (!provider) {
+		const cachedProvider = this.#buildCachedProvider();
+		if (!cachedProvider) {
 			this._isOpen = false;
 			return;
 		}
 		if (this.#debounceTimer !== void 0) clearTimeout(this.#debounceTimer);
 		this._isOpen = true;
 		this.#debounceTimer = setTimeout(() => {
-			this.#fetchSuggestions(query, provider);
+			this.#data.provider = cachedProvider;
+			this.#data.request(query);
 		}, this.debounceMs);
 	}
-	#fetchSuggestions(query, provider) {
-		const cached = this.#cache.get(query);
-		if (cached !== void 0) {
-			this._suggestions = cached;
-			this._tickled.clearTickled();
-			this._isLoading = false;
-			return;
-		}
-		this.#abortController?.abort();
-		this.#abortController = new AbortController();
-		const { signal } = this.#abortController;
-		this._isLoading = true;
-		Promise.resolve(provider(query, signal)).then((results) => {
-			if (signal.aborted) return;
-			this.#cache.set(query, results);
-			this._suggestions = results;
-			this._tickled.clearTickled();
-			this._isLoading = false;
-		}).catch((err) => {
-			if (signal.aborted) return;
-			console.error(`[ixfx-ac-token] completionProvider error:`, err);
-			this._suggestions = [];
-			this._isLoading = false;
-		});
+	#buildCachedProvider() {
+		const raw = this.completionProvider ?? this.#staticProvider;
+		if (!raw) return void 0;
+		return (query, signal) => {
+			const hit = this.#cache.get(query);
+			if (hit !== void 0) return this.#filterUsed(hit);
+			const result = raw(query, signal);
+			if (Symbol.asyncIterator in Object(result)) return result;
+			if (Array.isArray(result)) {
+				this.#cache.set(query, result);
+				return this.#filterUsed(result);
+			}
+			return result.then((items) => {
+				if (!signal.aborted) this.#cache.set(query, items);
+				return this.#filterUsed(items);
+			});
+		};
 	}
 	#scrollSuggestionIntoView() {
 		this.updateComplete.then(() => {
-			this.shadowRoot?.querySelector(`.suggestion.tickled`)?.scrollIntoView({ block: `nearest` });
+			this.shadowRoot?.querySelector(`.item.tickled`)?.scrollIntoView({ block: `nearest` });
 		});
 	}
 	#renderChip(item, index) {
@@ -405,7 +584,7 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 		const isTickled = this._tickled.isTickled(index);
 		return html`
       <div
-        class="suggestion ${isTickled ? `tickled` : ``}"
+        class="item ${isTickled ? `tickled` : ``}"
         role="option"
         id="ac-token-sugg-${index}"
         aria-selected=${isTickled}
@@ -419,7 +598,7 @@ let AcTokenElement = class AcTokenElement extends LitElement {
     `;
 	}
 	#renderPopup() {
-		const showEmpty = !this._isLoading && this._suggestions.length === 0;
+		const showEmpty = !this.#data.loading && this.#data.items.length === 0;
 		return html`
       <div
         class="popup"
@@ -428,7 +607,7 @@ let AcTokenElement = class AcTokenElement extends LitElement {
         data-input-mode=${this._tickled.inputMode}
         @pointerleave=${(e) => this._tickled.handlePointerLeave(e)}
       >
-        ${showEmpty ? html`<div class="no-results">No matching results</div>` : this._suggestions.map((item, i) => this.#renderSuggestion(item, i))}
+        ${showEmpty ? html`<div class="no-results">No matching results</div>` : this.#data.items.map((item, i) => this.#renderSuggestion(item, i))}
       </div>
     `;
 	}
@@ -456,13 +635,17 @@ let AcTokenElement = class AcTokenElement extends LitElement {
           @blur=${this.#onBlur}
           @paste=${this.#onPaste}
         >
-        ${this._isLoading ? html`<span class="spinner" aria-hidden="true"></span>` : nothing}
+        ${this.#data.loading ? html`<span class="spinner" aria-hidden="true"></span>` : nothing}
       </div>
       ${this._isOpen ? this.#renderPopup() : nothing}
     `;
 	}
 	static {
-		this.styles = [tickledStyles, css`
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			css`
     :host {
       display: block;
       position: relative;
@@ -594,27 +777,16 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 
     /* ---- Suggestion items ---- */
 
-    .suggestion {
+    .item {
+      /* tickledItemStyles provides base; override layout for popup context */
       display: flex;
-      align-items: center;
+      padding: var(--item-padding, var(--space-xs, 3px) var(--space-l, 12px));
       gap: var(--space-m, 8px);
-      padding: var(--space-xs, 3px) var(--space-l, 12px);
       cursor: pointer;
-      border-radius: var(--radius-s, 3px);
       margin: 0 var(--space-xs, 3px);
-      transition: background var(--transition, 0.1s ease-out);
-      user-select: none;
       white-space: nowrap;
       min-height: 28px;
-    }
-
-    .suggestion.tickled {
-      background: var(--_item-focused-bg, var(--accent));
-      color: var(--accent-text, #fff);
-    }
-
-    .suggestion.tickled .sugg-sublabel {
-      color: color-mix(in srgb, var(--accent-text, #fff) 70%, transparent);
+      user-select: none;
     }
 
     .sugg-icon {
@@ -643,7 +815,8 @@ let AcTokenElement = class AcTokenElement extends LitElement {
       color: var(--surface-muted-text);
       font-style: italic;
     }
-  `];
+  `
+		];
 	}
 };
 __decorate([property({ type: Object })], AcTokenElement.prototype, "completionProvider", void 0);
@@ -658,12 +831,14 @@ __decorate([property({
 	attribute: `debounce-ms`
 })], AcTokenElement.prototype, "debounceMs", void 0);
 __decorate([property({ type: Boolean })], AcTokenElement.prototype, "strict", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-duplicates`
+})], AcTokenElement.prototype, "allowDuplicates", void 0);
 __decorate([state()], AcTokenElement.prototype, "_tokens", void 0);
 __decorate([state()], AcTokenElement.prototype, "_draft", void 0);
 __decorate([state()], AcTokenElement.prototype, "_selectedTokenIndex", void 0);
-__decorate([state()], AcTokenElement.prototype, "_suggestions", void 0);
 __decorate([state()], AcTokenElement.prototype, "_isOpen", void 0);
-__decorate([state()], AcTokenElement.prototype, "_isLoading", void 0);
 AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
 //#endregion
 //#region src/button/radio-group.ts
@@ -815,7 +990,10 @@ let RadioGroup = class RadioGroup extends LitElement {
     `;
 	}
 	static {
-		this.styles = [prominenceStyles, css`
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			css`
     :host {
       display: inline-flex;
       min-width: min-content;
@@ -964,7 +1142,8 @@ let RadioGroup = class RadioGroup extends LitElement {
     .radio-group.compact.horizontal .radio-item {
       padding: var(--compact-padding, 0.5rem);
     }
-  `];
+  `
+		];
 	}
 };
 __decorate([property({ type: String })], RadioGroup.prototype, "value", void 0);
@@ -1244,6 +1423,7 @@ let SplitButton = class SplitButton extends ButtonElement {
 	}
 	static {
 		this.styles = [
+			themeFallbacks,
 			prominenceStyles,
 			buttonStyles,
 			css`
@@ -1383,7 +1563,7 @@ __decorate([state()], SplitButton.prototype, "_loadingItems", void 0);
 __decorate([state()], SplitButton.prototype, "_menuHasItems", void 0);
 SplitButton = __decorate([safeCustomElement(`ixfx-split-button`)], SplitButton);
 //#endregion
-//#region node_modules/.pnpm/@ixfx+collections@0.56.12/node_modules/@ixfx/collections/dist/StackMutable-B9Qm32K8.js
+//#region node_modules/.pnpm/@ixfx+collections@0.56.13/node_modules/@ixfx/collections/dist/StackMutable-B9Qm32K8.js
 const trimStack = (opts, stack, toAdd) => {
 	const potentialLength = stack.length + toAdd.length;
 	const policy = opts.discardPolicy ?? `additions`;
@@ -1519,7 +1699,7 @@ var StackMutable = class {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/@ixfx+collections@0.56.12/node_modules/@ixfx/collections/dist/tree-C6jGRTgK.js
+//#region node_modules/.pnpm/@ixfx+collections@0.56.13/node_modules/@ixfx/collections/dist/tree-C6jGRTgK.js
 const compare$1 = (a, b, eq = isEqualValueIgnoreOrder, parent) => {
 	const valueEqual = valueOrIdentityEqual(a, b, eq);
 	const childrenCompare = compareChildren(a, b, eq);
@@ -4605,12 +4785,18 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	static {
-		this.styles = [popupSurfaceStyles, css`
+		this.styles = [
+			prominenceStyles,
+			themeFallbacks,
+			popupSurfaceStyles,
+			css`
     :host {
       --text-highlight: var(--accent);
       --separator: var(--surface-muted-text);
       --padding-s: var(--space-xs);
       --padding-m: var(--space-s);
+      --hover-bg: var(--surface-5);
+      --hover-fg: var(--surface-5-text);
 
       display: flex;
       width: 100%;
@@ -4658,11 +4844,11 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     }
 
     .seg-root {
-      opacity: 0.8;
+      opacity: var(--prominence-idle-opacity);
     }
 
     .seg-root:hover {
-      opacity: 1;
+      opacity: var(--prominence-tickled-opacity);
     }
 
     .seg-root label {
@@ -4702,7 +4888,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     }
 
     .caret.disabled {
-      opacity: 0.4;
+      opacity: var(--prominence-disabled-opacity);
       cursor: not-allowed;
     }
 
@@ -4776,7 +4962,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     @keyframes crumb-spin {
       to { transform: rotate(360deg); }
     }
-  `];
+  `
+		];
 	}
 };
 __decorate([property({ type: String })], CrumbPathElement.prototype, "path", void 0);
@@ -5196,6 +5383,7 @@ let EditableNumber = class EditableNumber extends EditableLabel {
 	}
 	static {
 		this.styles = [
+			themeFallbacks,
 			prominenceStyles,
 			...EditableLabel.styles,
 			css`
@@ -5375,1843 +5563,2318 @@ __decorate([property({
 __decorate([property({ type: Number })], EditableNumber.prototype, "precision", void 0);
 EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
 //#endregion
-//#region src/panel/panel-group.ts
-let PanelGroupElement = class PanelGroupElement extends LitElement {
+//#region src/grouped-item-lister/grouped-item-lister.ts
+const UNGROUPED_KEY = `__ungrouped__`;
+let GroupedItemListerElement = class GroupedItemListerElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.orientation = `horizontal`;
-		this.variant = `titlebar`;
-		this.toggleInteraction = `implicit`;
-		this.allowMultiple = false;
-		this.gap = `var(--space-m)`;
+		this.grouped = false;
+		this.crossGroupSelection = false;
+		this.#subComponents = /* @__PURE__ */ new Map();
+		this.#clearingSelection = false;
+		this.#data = new DataController(this);
+		this.#onSelect = (event) => {
+			if (this.#clearingSelection) return;
+			const sourceEl = event.target;
+			let sourceKey;
+			for (const [key, subEl] of this.#subComponents) if (subEl === sourceEl) {
+				sourceKey = key;
+				break;
+			}
+			if (sourceKey === void 0) return;
+			if (this.grouped && !this.crossGroupSelection) {
+				this.#clearingSelection = true;
+				for (const [key, subEl] of this.#subComponents) if (key !== sourceKey) subEl.clearSelection();
+				this.#clearingSelection = false;
+			}
+			this.dispatchEvent(new CustomEvent(`grouped-select`, {
+				detail: {
+					selected: this.selectedItems,
+					groupKey: sourceKey === UNGROUPED_KEY ? void 0 : sourceKey
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
 	}
-	_onPanelToggle(e) {
-		const panel = e.target;
-		if (panel.collapsed) return;
-		if (this.allowMultiple) return;
-		for (const p of this._panels) if (p !== panel) p.collapsed = true;
+	#groupBy;
+	#factory;
+	#subComponents;
+	#renderedGroups;
+	#clearingSelection;
+	#data;
+	get groupBy() {
+		return this.#groupBy;
+	}
+	set groupBy(value) {
+		this.#groupBy = value;
+		this.requestUpdate();
 	}
-	firstUpdated() {
-		this.updateComplete.then(() => {
-			this._propagateAll();
-		});
+	get factory() {
+		return this.#factory;
+	}
+	set factory(value) {
+		if (value === this.#factory) return;
+		this.#clearSubComponents();
+		this.#factory = value;
+		this.requestUpdate();
+	}
+	get provider() {
+		return this.#data.provider;
+	}
+	set provider(value) {
+		this.#data.provider = value;
+		if (value) this.#data.request(void 0);
+	}
+	/** The union of all selected items across every sub-component. */
+	get selectedItems() {
+		const all = /* @__PURE__ */ new Set();
+		for (const subEl of this.#subComponents.values()) for (const item of subEl.selectedItems) all.add(item);
+		return all;
+	}
+	/**
+	* Forward a command to all live sub-components.
+	* Use this to propagate changes like sort order, filter state, or view mode.
+	*/
+	dispatch(commandId, args) {
+		for (const subEl of this.#subComponents.values()) subEl.dispatch(commandId, args);
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`select`, this.#onSelect);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`select`, this.#onSelect);
 	}
 	updated(changed) {
 		super.updated(changed);
-		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`)) this.updateComplete.then(() => {
-			this._propagateAll();
-		});
+		if (changed.has(`grouped`)) this.#clearSubComponents();
+		this.#syncSubComponents();
 	}
-	_propagateAll() {
-		const invertedOrientation = this.orientation === `horizontal` ? `vertical` : `horizontal`;
-		for (const panel of this._panels) {
-			panel.setAttribute(`variant`, this.variant);
-			panel.setAttribute(`toggle-interaction`, this.toggleInteraction);
-			panel.setAttribute(`orientation`, invertedOrientation);
+	render() {
+		if (!this.#factory) return nothing;
+		if (!this.grouped) return html`<div class="ungrouped-host"></div>`;
+		if (!this.#groupBy) return nothing;
+		this.#renderedGroups = this.#computeGroups();
+		return html`${repeat(this.#renderedGroups.keys(), (key) => key, (key) => html`<ixfx-panel data-group-key=${key} .title=${key}></ixfx-panel>`)}`;
+	}
+	#computeGroups() {
+		const groups = /* @__PURE__ */ new Map();
+		if (!this.#groupBy) return groups;
+		for (const item of this.#data.items) {
+			const key = this.#groupBy(item);
+			let bucket = groups.get(key);
+			if (!bucket) {
+				bucket = [];
+				groups.set(key, bucket);
+			}
+			bucket.push(item);
 		}
+		return groups;
 	}
-	render() {
-		return html`
-      <slot
-        @toggle=${this._onPanelToggle}
-      ></slot>
-    `;
+	#clearSubComponents() {
+		for (const subEl of this.#subComponents.values()) subEl.remove();
+		this.#subComponents.clear();
 	}
-	static {
-		this.styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: var(--group-gap, var(--space-m));
-    }
-
-    :host([orientation="horizontal"]) {
-      flex-direction: row;
-      align-items: flex-start;
-      flex-wrap: wrap;
-    }
-
-    :host([orientation="vertical"]) {
-      flex-direction: column;
-    }
-
-    ::slotted(ixfx-panel) {
-      flex-shrink: 1;
-    }
-
-    :host([orientation="horizontal"]) ::slotted(ixfx-panel) {
-      flex-basis: content;
-      min-width: 0;
-    }
-  `;
+	#syncSubComponents() {
+		if (!this.#factory) return;
+		if (!this.grouped) {
+			this.#syncUngrouped();
+			return;
+		}
+		if (!this.#groupBy) return;
+		this.#syncGrouped();
+	}
+	#syncUngrouped() {
+		const host = this.querySelector(`.ungrouped-host`);
+		if (!host) return;
+		let subEl = this.#subComponents.get(UNGROUPED_KEY);
+		if (!subEl) {
+			subEl = this.#factory(void 0);
+			host.appendChild(subEl);
+			this.#subComponents.set(UNGROUPED_KEY, subEl);
+		}
+		subEl.setItems(this.#data.items);
 	}
+	#syncGrouped() {
+		const groups = this.#renderedGroups ?? this.#computeGroups();
+		for (const key of [...this.#subComponents.keys()]) if (!groups.has(key)) {
+			this.#subComponents.get(key)?.remove();
+			this.#subComponents.delete(key);
+		}
+		for (const [key, items] of groups) {
+			const panel = [...this.children].find((el) => el instanceof HTMLElement && el.dataset[`groupKey`] === key);
+			if (!panel) continue;
+			let subEl = this.#subComponents.get(key);
+			if (!subEl) {
+				subEl = this.#factory(key);
+				panel.appendChild(subEl);
+				this.#subComponents.set(key, subEl);
+			}
+			subEl.setItems(items);
+		}
+	}
+	#onSelect;
 };
 __decorate([property({
-	type: String,
+	type: Boolean,
 	reflect: true
-})], PanelGroupElement.prototype, "orientation", void 0);
-__decorate([property({ type: String })], PanelGroupElement.prototype, "variant", void 0);
-__decorate([property({
-	type: String,
-	attribute: `toggle-interaction`
-})], PanelGroupElement.prototype, "toggleInteraction", void 0);
+})], GroupedItemListerElement.prototype, "grouped", void 0);
 __decorate([property({
 	type: Boolean,
-	attribute: `allow-multiple`
-})], PanelGroupElement.prototype, "allowMultiple", void 0);
-__decorate([property()], PanelGroupElement.prototype, "gap", void 0);
-__decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
-PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
+	attribute: `cross-group-selection`,
+	reflect: true
+})], GroupedItemListerElement.prototype, "crossGroupSelection", void 0);
+GroupedItemListerElement = __decorate([safeCustomElement(`ixfx-grouped-item-lister`)], GroupedItemListerElement);
 //#endregion
-//#region src/util/drag.ts
-function getCoordinates(event) {
-	return {
-		client: {
-			x: event.clientX,
-			y: event.clientY
+//#region src/grouped-item-lister/tree-list-adapter.ts
+/**
+* Creates an `HTMLElement` that implements `IGroupedSubComponent<T>` by wrapping
+* an `ixfx-tree-list` internally.
+*
+* `toTreeItem` converts each item `T` to display metadata (`key`, `label`, etc).
+* The adapter stores the original `T` in `TreeItem.data` and uses it to map
+* tree-node selections back to typed values.
+*
+* Unlike `createVerticalListAdapter`, items can be hierarchical: provide
+* `options.getChildren` to return each item's children and the adapter will
+* recursively build the `TreeNode` tree. Omit it for a flat list of leaf nodes.
+*
+* The four interface events (`select`, `activate`, `item-click`, `tickle`) are
+* intercepted at the tree level, re-typed from `TreeNode` → `T`, and re-dispatched
+* on the adapter element so `ixfx-grouped-item-lister` can identify the source.
+*
+* @example Flat item list:
+* ```ts
+* lister.factory = () =>
+*   createTreeListAdapter<FileItem>(item => ({ key: item.id, label: item.name, isLeaf: true }));
+* ```
+*
+* @example Hierarchical items:
+* ```ts
+* lister.factory = () =>
+*   createTreeListAdapter<Category>(
+*     cat => ({ key: cat.id, label: cat.name }),
+*     { getChildren: cat => cat.subCategories },
+*   );
+* ```
+*/
+function createTreeListAdapter(toTreeItem, options) {
+	const container = document.createElement(`div`);
+	container.style.cssText = `display:contents;`;
+	let treeEl;
+	function buildNode(item) {
+		const treeItem = {
+			...toTreeItem(item),
+			data: item
+		};
+		const children = options?.getChildren?.(item);
+		return {
+			item: treeItem,
+			children: children ? children.map(buildNode) : treeItem.isLeaf ? [] : void 0
+		};
+	}
+	function getOrCreateTree() {
+		if (treeEl) return treeEl;
+		treeEl = document.createElement(`ixfx-tree-list`);
+		treeEl.interactionMode = options?.interactionMode ?? `standard`;
+		treeEl.selectionFilter = options?.selectionFilter ?? `all`;
+		treeEl.exclusivity = options?.exclusivity ?? `none`;
+		treeEl.style.cssText = `display:block;width:100%;`;
+		container.appendChild(treeEl);
+		attachBridgeListeners();
+		return treeEl;
+	}
+	function mapNodes(nodes) {
+		const result = /* @__PURE__ */ new Set();
+		for (const node of nodes) if (node.item.data !== void 0) result.add(node.item.data);
+		return result;
+	}
+	function attachBridgeListeners() {
+		treeEl.addEventListener(`select`, (e) => {
+			e.stopPropagation();
+			const detail = {
+				selected: mapNodes(e.detail.selected),
+				previous: mapNodes(e.detail.previous)
+			};
+			container.dispatchEvent(new CustomEvent(`select`, {
+				detail,
+				bubbles: true,
+				composed: true
+			}));
+		});
+		treeEl.addEventListener(`activate`, (e) => {
+			e.stopPropagation();
+			const item = e.detail.node.item.data;
+			if (item === void 0) return;
+			const detail = { item };
+			container.dispatchEvent(new CustomEvent(`activate`, {
+				detail,
+				bubbles: true,
+				composed: true
+			}));
+		});
+		treeEl.addEventListener(`item-click`, (e) => {
+			e.stopPropagation();
+			const item = e.detail.node.item.data;
+			if (item === void 0) return;
+			const detail = { item };
+			container.dispatchEvent(new CustomEvent(`item-click`, {
+				detail,
+				bubbles: true,
+				composed: true
+			}));
+		});
+		treeEl.addEventListener(`tickle`, (e) => {
+			e.stopPropagation();
+			const item = e.detail.node.item.data;
+			if (item === void 0) return;
+			const detail = { item };
+			container.dispatchEvent(new CustomEvent(`tickle`, {
+				detail,
+				bubbles: true,
+				composed: true
+			}));
+		});
+	}
+	let selectionMode = `single`;
+	const adapter = Object.assign(container, {
+		setItems(items) {
+			const tree = getOrCreateTree();
+			tree.root = {
+				item: {
+					key: `__adapter_root__`,
+					label: ``,
+					isLeaf: false
+				},
+				children: items.map(buildNode)
+			};
 		},
-		offset: {
-			x: event.offsetX,
-			y: event.offsetY
+		clearSelection() {
+			treeEl?.clearSelection();
+		},
+		dispatch(commandId, args) {
+			options?.onDispatch?.(commandId, args, treeEl);
 		}
-	};
-}
-function dragLogicStart(downEvent, handler) {
-	const start = getCoordinates(downEvent);
-	const onMove = (event) => {
-		handler.progress(getCoordinates(event), start);
-	};
-	const onUp = (event) => {
-		document.removeEventListener(`pointermove`, onMove);
-		document.removeEventListener(`pointerup`, onUp);
-		handler.complete(getCoordinates(event), start);
-	};
-	document.addEventListener(`pointermove`, onMove);
-	document.addEventListener(`pointerup`, onUp);
+	});
+	Object.defineProperties(adapter, {
+		selectedItems: {
+			get() {
+				return treeEl ? mapNodes(treeEl.selectedNodes) : /* @__PURE__ */ new Set();
+			},
+			enumerable: true,
+			configurable: true
+		},
+		selectionMode: {
+			get() {
+				return selectionMode;
+			},
+			set(v) {
+				selectionMode = v;
+				if (!treeEl) return;
+				if (v === `none`) treeEl.selectionFilter = `none`;
+				else if (v === `single`) {
+					treeEl.selectionFilter = options?.selectionFilter ?? `all`;
+					treeEl.interactionMode = `implicit`;
+				} else {
+					treeEl.selectionFilter = options?.selectionFilter ?? `all`;
+					treeEl.interactionMode = options?.interactionMode ?? `standard`;
+				}
+			},
+			enumerable: true,
+			configurable: true
+		}
+	});
+	return adapter;
 }
 //#endregion
-//#region src/util/near.ts
-function near(target, range) {
-	const min = target - range;
-	const max = target + range;
-	return (v) => v >= min && v <= max;
+//#region src/vertical-list/vertical-list.ts
+const ITEM_SELECTOR = `li, [data-list-item]`;
+function isMultiMode(mode) {
+	return mode === `checked` || mode === `vscode` || mode === `standard`;
 }
-//#endregion
-//#region src/range/range-multi.ts
-let RangeMultiElement = class RangeMultiElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.tooltip = true;
-		this.tooltipOrientation = `top`;
-		this.crossover = `allow`;
-		this.resizeMode = `dual`;
-		this.orientation = `horizontal`;
-		this.step = 1;
-		this.a = 0;
-		this.b = 50;
-		this.#userMax = 100;
-		this.#userMin = 0;
-		this.#scaleTo100 = (v) => v;
-		this.#scaleFrom100 = (v) => v;
-		this.#userClamp = (v) => v;
-		this.draggingThumb = `none`;
-	}
-	#userMax;
-	#userMin;
-	#scaleTo100;
-	#scaleFrom100;
-	#userClamp;
-	#updateScale() {
-		this.#scaleTo100 = scaler(this.#userMin, this.#userMax, 0, 100);
-		this.#scaleFrom100 = scaler(0, 100, this.#userMin, this.#userMax);
-		this.#userClamp = clamper(this.#userMin, this.#userMax);
-		this.a = this.#userClamp(this.a);
-		this.b = this.#userClamp(this.b);
-	}
-	set max(v) {
-		this.#userMax = v;
-		this.#updateScale();
-	}
-	get max() {
-		return this.#userMax;
-	}
-	set min(v) {
-		this.#userMin = v;
-		this.#updateScale();
-	}
-	get min() {
-		return this.#userMin;
-	}
-	_onInput(event) {
-		event.stopPropagation();
-		const t = event.target;
-		const v = this.#scaleFrom100(t.valueAsNumber);
-		const which = t.id;
-		let a = this.a;
-		let b = this.b;
-		if (this.resizeMode === `none`) {
-			let panDelta = v - (which === `a` ? this.a : this.b);
-			const newA = this.a + panDelta;
-			const newB = this.b + panDelta;
-			if (newA < this.min) panDelta = this.min - this.a;
-			if (newB > this.max) panDelta = this.max - this.b;
-			if (panDelta === 0) {
-				t.valueAsNumber = this.#scaleTo100(which === `a` ? this.a : this.b);
+let VerticalListElement = class VerticalListElement extends LitElement {
+	constructor(..._args2) {
+		super(..._args2);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#customWrappers = /* @__PURE__ */ new Map();
+		this.tickled = new TickledController(this, {
+			getItems: () => this._getVisibleItems().map((el) => ({
+				id: el,
+				enabled: true
+			})),
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates()
+		});
+		this._onPointerOver = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this.tickled.handlePointerEnter(item);
+		};
+		this._onPointerLeave = (e) => {
+			this.tickled.handlePointerLeave(e);
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
+				e.preventDefault();
+				this._openSearch();
 				return;
 			}
-			a = this.a + panDelta;
-			b = this.b + panDelta;
-		} else if (this.resizeMode === `bipolar`) {
-			let newA;
-			let newB;
-			if (which === `a`) {
-				const delta = v - this.a;
-				newA = v;
-				newB = this.b - delta;
-			} else {
-				const delta = v - this.b;
-				newA = this.a - delta;
-				newB = v;
-			}
-			if (newA < this.min || newB > this.max || newA > this.max || newB < this.min) {
-				t.valueAsNumber = this.#scaleTo100(which === `a` ? this.a : this.b);
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) {
+					e.preventDefault();
+					this._selectAll();
+				}
 				return;
 			}
-			a = newA;
-			b = newB;
-		} else if (this.resizeMode === `bipolar-flex`) {
-			let newA;
-			let newB;
-			if (which === `a`) {
-				newA = v;
-				if (this.b <= this.min) newB = this.min;
-				else if (this.b >= this.max) newB = this.max;
-				else {
-					const delta = v - this.a;
-					newB = this.b - delta;
+			if (this._searchVisible) return;
+			switch (e.key) {
+				case `ArrowDown`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`next`);
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this._rangeSelectTo(cur);
+					}
+					break;
+				case `ArrowUp`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`previous`);
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this._rangeSelectTo(cur);
+					}
+					break;
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._dispatch(`list-item-click`, { item: id });
+						this._activateItem(id);
+					}
+					break;
 				}
-			} else {
-				newB = v;
-				if (this.a <= this.min) newA = this.min;
-				else if (this.a >= this.max) newA = this.max;
-				else {
-					const delta = v - this.b;
-					newA = this.a - delta;
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._handleSpaceKey(id);
+					}
+					break;
 				}
+				case `Escape`:
+					this._clearSelection();
+					break;
 			}
-			if (newA < this.min) newA = this.min;
-			if (newA > this.max) newA = this.max;
-			if (newB < this.min) newB = this.min;
-			if (newB > this.max) newB = this.max;
-			if (newA > newB) {
-				t.valueAsNumber = this.#scaleTo100(which === `a` ? this.a : this.b);
-				return;
-			}
-			a = newA;
-			b = newB;
-		} else if (which === `a`) if (v > this.b && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.a);
-		else a = v;
-		else if (which === `b`) if (v < a && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.b);
-		else b = v;
-		else throw new Error(`Expected 'a' or 'b', got: '${t.id}'`);
-		this.setPoles(a, b);
-	}
-	setPoles(a, b) {
-		const aDiff = a !== this.a;
-		const bDiff = b !== this.b;
-		this.a = this.#userClamp(a);
-		this.b = this.#userClamp(b);
-		this.dispatchEvent(new CustomEvent(`input`, { detail: {
-			a: this.a,
-			b: this.b,
-			changed: aDiff && bDiff ? `both` : aDiff ? `a` : `b`
-		} }));
-	}
-	_onPointerDown(event) {
-		const startA = this.a;
-		const startB = this.b;
-		this.valuesAtPointerDown = {
-			a: startA,
-			b: startB
 		};
-		const rect = event.target.getBoundingClientRect();
-		const isVertical = this.orientation === `vertical`;
-		const dim = isVertical ? rect.height : rect.width;
-		const valuePerPix = dim / (this.max - this.min);
-		const pos = isVertical ? event.offsetY : event.offsetX;
-		const valueFromPos = (p) => {
-			return isVertical ? this.max - p * valuePerPix : p * valuePerPix;
+		this._onClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (!item) return;
+			this._dispatch(`list-item-click`, { item });
+			this._handleClickSelection(item, e);
 		};
-		const posFromValue = (v) => {
-			return isVertical ? dim - v * valuePerPix : v * valuePerPix;
+		this._onDblClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this._activateItem(item);
 		};
-		const aPosPx = posFromValue(startA);
-		const bPosPx = posFromValue(startB);
-		if (isVertical ? (this.b < this.a ? pos > bPosPx : pos < bPosPx) || (this.b < this.a ? pos < aPosPx : pos > aPosPx) : this.b < this.a && pos < bPosPx || this.b > this.a && pos > bPosPx || this.a < this.b && pos < aPosPx || this.a > this.b && pos > aPosPx) {
-			if (this.resizeMode === `none` || this.resizeMode === `bipolar` || this.resizeMode === `bipolar-flex`) {
-				let panDelta = valueFromPos(pos) - this.b;
-				if (this.a + panDelta < this.min) panDelta = this.min - this.a;
-				if (this.b + panDelta > this.max) panDelta = this.max - this.b;
-				const finalA = this.a + panDelta;
-				const finalB = this.b + panDelta;
-				if (finalA >= this.min && finalB <= this.max) this.setPoles(finalA, finalB);
-			} else this.b = valueFromPos(pos);
-			return;
-		}
-		const aPosPxNear = near(aPosPx, 10);
-		const bPosPxNear = near(bPosPx, 10);
-		const handleDrag = (draggingWhich) => {
-			const setPoles = this.setPoles.bind(this);
-			const resizeMode = this.resizeMode;
-			const min = this.min;
-			const max = this.max;
-			const startPos = isVertical ? event.offsetY : event.offsetX;
-			let polesChanged = false;
-			dragLogicStart(event, {
-				progress(current, _start) {
-					const currentPos = isVertical ? current.offset.y : current.offset.x;
-					const amt = (isVertical ? startPos - currentPos : currentPos - startPos) / valuePerPix;
-					polesChanged = true;
-					if (draggingWhich === `a`) if (resizeMode === `bipolar`) {
-						const calcA = startA + amt;
-						const calcB = startB - amt;
-						if (calcA < min || calcB > max || calcA > max || calcB < min) return;
-						setPoles(calcA, calcB);
-					} else if (resizeMode === `bipolar-flex`) {
-						let calcA = startA + amt;
-						let calcB = startB;
-						if (startB <= min) calcB = min;
-						else if (startB >= max) calcB = max;
-						else {
-							calcA = startA + amt;
-							calcB = startB - amt;
-						}
-						if (calcA < min) calcA = min;
-						if (calcA > max) calcA = max;
-						if (calcB < min) calcB = min;
-						if (calcB > max) calcB = max;
-						if (calcA > calcB) return;
-						setPoles(calcA, calcB);
-					} else {
-						let constrainedAmt = amt;
-						if (startA + amt < min) constrainedAmt = min - startA;
-						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
-						const finalA = startA + constrainedAmt;
-						const finalB = startB + constrainedAmt;
-						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
-					}
-					else if (draggingWhich === `b`) if (resizeMode === `bipolar`) {
-						const calcA = startA - amt;
-						const calcB = startB + amt;
-						if (calcA < min || calcB > max || calcA > max || calcB < min) return;
-						setPoles(calcA, calcB);
-					} else if (resizeMode === `bipolar-flex`) {
-						let calcA = startA;
-						let calcB = startB + amt;
-						if (startA <= min) calcA = min;
-						else if (startA >= max) calcA = max;
-						else {
-							calcA = startA - amt;
-							calcB = startB + amt;
-						}
-						if (calcA < min) calcA = min;
-						if (calcA > max) calcA = max;
-						if (calcB < min) calcB = min;
-						if (calcB > max) calcB = max;
-						if (calcA > calcB) return;
-						setPoles(calcA, calcB);
-					} else {
-						let constrainedAmt = amt;
-						if (startA + amt < min) constrainedAmt = min - startA;
-						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
-						const finalA = startA + constrainedAmt;
-						const finalB = startB + constrainedAmt;
-						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
-					}
-					else if (resizeMode === `bipolar`) {
-						const calcA = startA + amt;
-						const calcB = startB + amt;
-						if (calcA < min || calcB > max) return;
-						setPoles(calcA, calcB);
-					} else if (resizeMode === `bipolar-flex`) {
-						let calcA = startA + amt;
-						let calcB = startB + amt;
-						if (calcA < min) {
-							calcA = min;
-							calcB = min + (startB - startA);
-						} else if (calcB > max) {
-							calcB = max;
-							calcA = max - (startB - startA);
-						}
-						if (calcA < min || calcB > max || calcA > calcB) return;
-						setPoles(calcA, calcB);
-					} else {
-						let constrainedAmt = amt;
-						if (startA + amt < min) constrainedAmt = min - startA;
-						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
-						const finalA = startA + constrainedAmt;
-						const finalB = startB + constrainedAmt;
-						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
-					}
-				},
-				complete(_final, _start) {
-					if (!polesChanged) {
-						const currentPos = isVertical ? event.offsetY : event.offsetX;
-						if (Math.abs(currentPos - aPosPx) < Math.abs(currentPos - bPosPx)) setPoles(valueFromPos(currentPos), startB);
-						else setPoles(startA, valueFromPos(currentPos));
-					}
+		this._onSearchInput = (e) => {
+			const input = e.target;
+			this._searchQuery = input.value;
+			this.#search?.setQuery(this._searchQuery);
+		};
+		this._onSearchKeydown = (e) => {
+			if (e.key === `Escape`) {
+				e.stopPropagation();
+				this._closeSearch();
+			} else if (e.key === `ArrowDown`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`next`);
+			} else if (e.key === `ArrowUp`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`previous`);
+			} else if (e.key === `Enter`) {
+				e.preventDefault();
+				e.stopPropagation();
+				const id = this.tickled.tickledId ?? this._getVisibleItems()[0];
+				if (id) {
+					this._dispatch(`list-item-click`, { item: id });
+					this._activateItem(id);
+					this._closeSearch();
 				}
-			});
+			}
 		};
-		if (aPosPxNear(pos)) {
-			this.draggingThumb = `a`;
-			if (this.resizeMode === `dual`) return false;
-			event.preventDefault();
-			event.target.setPointerCapture(event.pointerId);
-			handleDrag(`a`);
-			return;
-		} else if (bPosPxNear(pos)) {
-			this.draggingThumb = `b`;
-			if (this.resizeMode === `dual`) return false;
-			event.preventDefault();
-			event.target.setPointerCapture(event.pointerId);
-			handleDrag(`b`);
-			return;
-		} else this.draggingThumb = `none`;
-		event.preventDefault();
-		event.target.setPointerCapture(event.pointerId);
-		handleDrag(`none`);
-	}
-	firstUpdated(_changedProperties) {
-		this.#updateScale();
-	}
-	render() {
-		const ttA = this.tooltip ? html`<ixfx-tooltip style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)" anchor="--a-tooltip" .orientation=${this.tooltipOrientation} .value=${this.a}></ixfx-tooltip>` : nothing;
-		const ttB = this.tooltip ? html`<ixfx-tooltip style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)" anchor="--b-tooltip" .orientation=${this.tooltipOrientation} .value=${this.b}></ixfx-tooltip>` : nothing;
-		const scaledA = this.#scaleTo100(this.a);
-		const scaledB = this.#scaleTo100(this.b);
-		const verticalStyle = this.orientation === `vertical` ? `writing-mode: vertical-lr; direction: rtl;` : nothing;
-		return html`
-      <div @pointerdown=${this._onPointerDown} @input=${this._onInput} style="--a: ${scaledA}; --b: ${scaledB}">
-        <input class="thumb-round" .value=${scaledA} id="a" step=${this.step} type="range" style="${verticalStyle}" anchor="--a-tooltip" />
-        ${ttA}
-
-        <input class="thumb-round" .value=${scaledB} id="b" step=${this.step} type="range" style="${verticalStyle}" anchor="--b-tooltip" />
-        ${ttB}
-      </div>`;
-	}
-	static {
-		this.styles = [
-			tooltipValueStyles,
-			prominenceStyles,
-			css`
-    :host {
-      display: grid;
-      --value-label-color: unset;
-  
-      --range-background: AccentColor;
-      --range-height: 1.5em;
-      --range-thickness: 1em;
-      --thumb-background: ButtonFace;
-      --thumb-radius: 50%;
-      --thumb-width: 1em;
-      --thumb-height: 1em;
-      --js:1;
-    }
-
-    :host([orientation="vertical"]) {
-      display: block;
-      width: 1.5em;
-      height: 200px;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      font: inherit;
-    }
-
-    div {
-       --j: var(--js, 0);
-       display:inline grid;
-       align-content: end;
-       grid-gap: 0.25em;
-       place-self: center;
-       min-width: 8em;
-       width: calc(100% - 1.5em);
-       height: 1.5rem;
-    }
-
-    :host([orientation="vertical"]) div {
-       width: 1.5rem;
-       height: calc(100% - 1.5em);
-       min-width: unset;
-       min-height: 8em;
-    }
-
-    div::before, div::after {
-       margin: 0.5rem 0.6875rem;
-       border-radius: 0.25rem;
-       box-shadow: none;
-       background: var(--surface-4);
-       content: "";
-    }
-    :host([orientation="vertical"]) div::before,
-    :host([orientation="vertical"]) div::after {
-       margin: 0.5rem 0;
-    }
-    div::after {
-       --or: calc((100 - Max(var(--a), var(--b)))*1%);
-       --ol: calc(Min(var(--a), var(--b))*1%);
-       box-shadow: none;
-       background: var(--accent);
-       clip-path: inset(0 var(--or) 0 var(--ol));
-    }
-    :host([orientation="vertical"]) div::after {
-       clip-path: inset(var(--or) 0 var(--ol) 0);
-    }
-    div input, div::before, div::after {
-       grid-area: calc(1 + var(--j))/1;
-    }
-    div output, div::after {
-       display:'none';
-    }
-
-    [type=range] {
-      width: 100%;
-      height: var(--range-height);
-      background: transparent;
-      pointer-events: none;
-    }
-
-    :host([orientation="vertical"]) [type=range] {
-      writing-mode: vertical-lr;
-      direction: rtl;
-      width: var(--range-height);
-      height: 100%;
-    }
-
-    [type=range], [type=range]::-webkit-slider-runnable-track, [type=range]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-    }
-    [type=range], [type=range] + ixfx-tooltip {
-      --sel: 0;
-      z-index: calc(1 + var(--sel));
-    }
-    [type=range]::-webkit-slider-runnable-track {
-      background: transparent;
-    }
-    [type=range]::-moz-range-track {
-      background: transparent;
-    }
-
-    input.thumb-round::-webkit-slider-thumb {
-      width: var(--thumb-width);
-      height: var(--thumb-height);
-      border-radius: var(--thumb-radius);
-    }
-
-    [type=range]::-webkit-slider-thumb {
-      box-sizing: border-box;
-      border: solid calc(0.5rem + -1px) transparent;
-
-      /* box-shadow: var(--shadow-m); */
-      background: var(--thumb-background);
-      pointer-events: auto;
-      cursor: ew-resize;
-    }
-
-    :host([orientation="vertical"]) [type=range]::-webkit-slider-thumb {
-      width: var(--thumb-height);
-      height: var(--thumb-width);
-      cursor: ns-resize;
-    }
-
-    [type=range]::-moz-range-thumb {
-      box-sizing: border-box;
-      border: solid calc(0.5rem + -1px) transparent;
-      width: 1.375rem;
-      height: 1.375rem;
-      border-radius: 50%;
-      box-shadow: var(--shadow-m);
-      background: var(--thumb-background);
-      pointer-events: auto;
-      cursor: ew-resize;
-    }
-
-    :host([orientation="vertical"]) [type=range]::-moz-range-thumb {
-      cursor: ns-resize;
-    }
-
-    [type=range]:focus {
-      outline: none;
-    }
-    [type=range]:focus, [type=range]:focus + ixfx-tooltip, [type=range]:hover, [type=range]:hover + ixfx-tooltip {
-      --sel: 1 ;
-    }
-  `
-		];
-	}
-};
-__decorate([property({ type: Boolean })], RangeMultiElement.prototype, "tooltip", void 0);
-__decorate([property({
-	type: String,
-	attribute: `tooltip-orientation`
-})], RangeMultiElement.prototype, "tooltipOrientation", void 0);
-__decorate([property({ type: String })], RangeMultiElement.prototype, "crossover", void 0);
-__decorate([property({
-	type: String,
-	attribute: `resize-mode`
-})], RangeMultiElement.prototype, "resizeMode", void 0);
-__decorate([property({
-	type: String,
-	reflect: true
-})], RangeMultiElement.prototype, "orientation", void 0);
-__decorate([property()], RangeMultiElement.prototype, "step", void 0);
-__decorate([property({ type: Number })], RangeMultiElement.prototype, "a", void 0);
-__decorate([property({ type: Number })], RangeMultiElement.prototype, "b", void 0);
-__decorate([property({ type: Number })], RangeMultiElement.prototype, "max", null);
-__decorate([property({ type: Number })], RangeMultiElement.prototype, "min", null);
-__decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onInput", null);
-__decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
-RangeMultiElement = __decorate([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
-//#endregion
-//#region src/tabs/tab-list-item.ts
-let TabListItemElement = class TabListItemElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.closeable = false;
-		this.iconName = void 0;
-		this.description = void 0;
-		this.commandActive = void 0;
-		this.registry = void 0;
-		this._compact = false;
 	}
+	#search;
+	#selectionAnchor;
+	#customWrappers;
 	connectedCallback() {
 		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(([entry]) => {
-			this._compact = entry.contentRect.width < 64;
-		});
-		this._resizeObserver.observe(this);
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		this.addEventListener(`pointerover`, this._onPointerOver);
+		this.addEventListener(`pointerleave`, this._onPointerLeave);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`click`, this._onClick);
+		this.addEventListener(`dblclick`, this._onDblClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`pointerover`, this._onPointerOver);
+		this.removeEventListener(`pointerleave`, this._onPointerLeave);
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`click`, this._onClick);
+		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.#search?.dispose();
+		this.#search = void 0;
 	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = void 0;
-		this._commandCleanup?.();
-		this._commandCleanup = void 0;
+	firstUpdated() {
+		this.#search = createElementIncrSearch({
+			container: this,
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: `vertical-list-search`
+		});
 	}
 	updated(changed) {
 		super.updated(changed);
-		this._syncTooltipAttrs();
-		if (changed.has(`registry`) || changed.has(`commandActive`)) this._syncCommandListener();
-	}
-	_syncTooltipAttrs() {
-		if (this.description) {
-			this.setAttribute(`data-tooltip`, this.description);
-			this.setAttribute(`data-tooltip-anchor`, `top`);
-		} else {
-			this.removeAttribute(`data-tooltip`);
-			this.removeAttribute(`data-tooltip-anchor`);
+		if (changed.has(`interactionMode`)) {
+			this.#selectionAnchor = void 0;
+			const previousSelected = this._selectedItems;
+			const savedWrappers = changed.get(`interactionMode`) === `checked` ? new Map(this.#customWrappers) : null;
+			this._syncCheckboxes();
+			if (previousSelected.size > 0) {
+				let remapped;
+				if (savedWrappers && savedWrappers.size > 0) remapped = new Set([...previousSelected].map((el) => savedWrappers.get(el) ?? el));
+				else if (this.#customWrappers.size > 0) {
+					const innerToWrapper = new Map([...this.#customWrappers].map(([w, i]) => [i, w]));
+					remapped = new Set([...previousSelected].map((el) => innerToWrapper.get(el) ?? el));
+				} else remapped = new Set(previousSelected);
+				this._selectedItems = remapped;
+			}
+			this._syncItemStates();
 		}
 	}
-	_syncCommandListener() {
-		this._commandCleanup?.();
-		this._commandCleanup = void 0;
-		if (this.registry && this.commandActive) this._commandCleanup = this.registry.addOnInvokeHandler((id) => {
-			if (id === this.commandActive) this.click();
-		});
+	/** The most recently selected item, or `undefined` if nothing is selected. */
+	get selectedItem() {
+		return [...this._selectedItems].at(-1);
 	}
-	render() {
-		const showLabel = !this._compact || !this.iconName;
-		return html`
-      <div>
-        ${this.iconName ? html`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : nothing}
-        ${showLabel ? html`<span class="label"><slot></slot></span>` : nothing}
-        <div class="actions">
-          <div class="toolbar"><slot name="toolbar"></slot></div>
-          ${this.closeable ? html`
-            <button
-              class="close-btn"
-              type="button"
-              aria-label="Close tab"
-              @click=${this._onCloseClick}
-            >
-              <ixfx-icon name="close"></ixfx-icon>
-            </button>
-          ` : nothing}
-        </div>
-      </div>
-    `;
+	/** The full current selection set (read-only). */
+	get selectedItems() {
+		return this._selectedItems;
 	}
-	_onCloseClick(e) {
-		e.stopPropagation();
-		this.dispatchEvent(new CustomEvent(`close`, {
-			bubbles: true,
-			composed: true
-		}));
-		this.remove();
+	addItem(item) {
+		if (typeof item === `string`) {
+			const li = document.createElement(`li`);
+			li.textContent = item;
+			this.appendChild(li);
+		} else this.appendChild(item);
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
 	}
-	static {
-		this.styles = [prominenceStyles, css`
-      :host {
-        --selected-colour: var(--accent);
-        --selected-border-width: 1px;
-        --padding: var(--space-m);
-        display: inline-flex;
-        min-width: 0;
-        user-select: none;
-        box-sizing: border-box;
-      }
-
-      :host > div {
-        display: flex;
-        align-items: center;
-        gap: var(--space-s, 4px);
-        padding: var(--padding) calc(2 * var(--padding));
-        min-width: 0;
-        width: 100%;
-        font-weight: 500;
-        border: var(--selected-border-width) solid transparent;
-      }
-
-      :host([selected]) > div {
-        color: var(--selected-colour);
-        border-top-color: var(--indicator-color-top, transparent);
-        border-bottom-color: var(--indicator-color-bottom, transparent);
-        border-left-color: var(--indicator-color-left, transparent);
-        border-right-color: var(--indicator-color-right, transparent);
-      }
-
-      .label {
-        overflow: var(--allow-overflow, hidden);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        min-width: 0;
-        flex: 1 1 auto;
-      }
-
-      ixfx-icon {
-        flex-shrink: 0;
-      }
-
-      .actions {
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-        margin-left: auto;
-        flex-shrink: 0;
-      }
-
-      .toolbar {
-        display: none;
-        align-items: center;
-        gap: var(--space-xs);
-      }
-
-      :host([selected]) .toolbar {
-        display: flex;
-      }
-
-      slot[name="toolbar"] {
-        display: contents;
-      }
-
-      .close-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        padding: var(--space-xs);
-        cursor: pointer;
-        color: inherit;
-        border-radius: var(--radius-s);
-        opacity: var(--prominence-idle-opacity);
-        transition: opacity var(--transition), background var(--transition);
-      }
-
-      .close-btn:hover {
-        background: var(--surface-5);
-        opacity: var(--prominence-tickled-opacity);
-      }
-
-      .close-btn:focus-visible {
-        outline: 2px solid var(--accent);
-        outline-offset: 1px;
-      }
-
-      :host([selected]) .close-btn,
-      :host(:hover) .close-btn {
-        opacity: var(--prominence-tickled-opacity);
-      }
-    `];
+	removeItem(item) {
+		item.remove();
 	}
-};
-__decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], TabListItemElement.prototype, "iconName", void 0);
-__decorate([property({ type: String })], TabListItemElement.prototype, "description", void 0);
-__decorate([property({
-	type: String,
-	attribute: `command-active`
-})], TabListItemElement.prototype, "commandActive", void 0);
-__decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
-__decorate([state()], TabListItemElement.prototype, "_compact", void 0);
-TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
-//#endregion
-//#region src/tabs/tab-panel.ts
-let TabPanelElement = class TabPanelElement extends LitElement {
-	render() {
-		return html`<slot></slot>`;
+	clearItems() {
+		this.#customWrappers.clear();
+		this.replaceChildren();
+		this.#selectionAnchor = void 0;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
 	}
-	static {
-		this.styles = css`
-  :host {
-    display:none;
-    height:100%;
-    width:100%;
-  }
-
-  :host([selected]) {
-    background: var(--surface-3);
-    display:block;
-  }
-  `;
+	/**
+	* Replace the entire item list in one call.
+	* Equivalent to `clearItems()` followed by `addItem()` for each element.
+	* Preserves `interactionMode` checkbox wrapping.
+	*/
+	setItems(items) {
+		this.clearItems();
+		for (const item of items) this.appendChild(item);
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
 	}
-};
-TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
-//#endregion
-//#region src/tabs/tab-panels.ts
-let TabPanelsElement = class TabPanelsElement extends LitElement {
-	render() {
-		return html`<slot></slot>`;
+	/**
+	* Dispatch a command to this list. No-op by default.
+	* Intended for use with `ixfx-grouped-item-lister`'s `dispatch()` method,
+	* which forwards commands to all sub-components.
+	*/
+	dispatch(_commandId, _args) {}
+	select(item) {
+		this._replaceSelection(item);
 	}
-	getSelectedElement() {
-		for (const el of this._listItems) if (this.#isSelected(el)) return el;
+	selectMany(items) {
+		if (this.selectionMode !== `multiple`) throw new Error(`selectMany requires selectionMode="multiple" (current: "${this.selectionMode}")`);
+		const previous = this._selectedItems;
+		const next = new Set(items);
+		if (next.size === 0) return;
+		this._selectedItems = next;
+		this.#selectionAnchor = [...next].at(-1);
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	deselect(item) {
+		if (!this._selectedItems.has(item)) return;
+		const previous = this._selectedItems;
+		const next = new Set(this._selectedItems);
+		next.delete(item);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
 	}
-	#isSelected(el) {
-		return el.hasAttribute(`selected`);
+	clearSelection() {
+		this._clearSelection();
 	}
-	#unselect(el) {
-		el.removeAttribute(`selected`);
-		if (this.onUnselectedPanel) this.onUnselectedPanel(el.id, el);
+	selectAll() {
+		if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) this._selectAll();
 	}
-	#select(el) {
-		if (this.onSelectingPanel) this.onSelectingPanel(el.id, el);
-		el.setAttribute(`selected`, ``);
-		if (this.onSelectedPanel) this.onSelectedPanel(el.id, el);
+	_replaceSelection(item) {
+		if (this.selectionMode === `none`) return;
+		const previous = this._selectedItems;
+		const next = new Set([item]);
+		this._selectedItems = next;
+		this.#selectionAnchor = item;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
 	}
-	syncWithList(el) {
-		const apply = (t) => {
-			if (!t) return;
-			const forEl = t.getAttribute(`for`);
-			if (forEl) this.selectPanel(forEl);
-		};
-		const t = el.getSelectedElement();
-		if (!t) {
-			el.updateComplete.then(() => apply(el.getSelectedElement()));
-			return;
+	_toggleItem(item) {
+		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
+		if (this.selectionMode === `none` && this.interactionMode !== `checked`) return;
+		const previous = this._selectedItems;
+		const next = new Set(this._selectedItems);
+		if (next.has(item)) next.delete(item);
+		else {
+			if (!effectiveMultiple) next.clear();
+			next.add(item);
 		}
-		apply(t);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
 	}
-	selectPanel(id) {
-		const current = this.getSelectedElement();
-		if (current) {
-			if (current.id === id) return;
-			this.#unselect(current);
+	_rangeSelectTo(item) {
+		if (this.selectionMode === `none`) return;
+		if (!this.#selectionAnchor) {
+			this._replaceSelection(item);
+			return;
 		}
-		let found = false;
-		for (const el of this._listItems) if (el.id === id) {
-			this.#select(el);
-			found = true;
+		const visible = this._getVisibleItems();
+		const anchorIdx = visible.indexOf(this.#selectionAnchor);
+		const targetIdx = visible.indexOf(item);
+		if (anchorIdx === -1 || targetIdx === -1) {
+			this._replaceSelection(item);
+			return;
 		}
-		return found;
-	}
-	static {
-		this.styles = css`
-  :host {
-    display: block;
-  }
-  
-  `;
+		const start = Math.min(anchorIdx, targetIdx);
+		const end = Math.max(anchorIdx, targetIdx);
+		const previous = this._selectedItems;
+		const next = new Set(visible.slice(start, end + 1));
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
 	}
-};
-__decorate([queryAssignedElements()], TabPanelsElement.prototype, "_listItems", void 0);
-TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
-//#endregion
-//#region src/transitory-label/transitory-label.ts
-let TransitoryLabelElement = class TransitoryLabelElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.text = ``;
-		this.effect = `fade`;
-		this.duration = 300;
-		this.easing = `ease`;
-		this._currentText = ``;
-		this._outgoingText = ``;
-		this._transitionId = 0;
-		this._queue = [];
-		this.#onOutgoingEnd = () => {
-			this._onTransitionEnd();
-		};
-		this.#onLastCharOut = () => {
-			this._onTransitionEnd();
-		};
+	_clearSelection() {
+		if (this._selectedItems.size === 0) return;
+		const previous = this._selectedItems;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: /* @__PURE__ */ new Set(),
+			previous
+		});
 	}
-	setText(msg, effect) {
-		this._pendingEffect = effect;
-		this.text = msg;
+	_selectAll() {
+		const visible = this._getVisibleItems();
+		if (visible.length === 0) return;
+		const previous = this._selectedItems;
+		const next = new Set(visible);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
 	}
-	updated(changed) {
-		if (changed.has(`text`) && this.text !== this._currentText) {
-			const effect = this._pendingEffect ?? this.effect;
-			this._pendingEffect = void 0;
-			if (this._activeEffect !== void 0) this._queue.push({
-				text: this.text,
-				effect
-			});
-			else this._startTransition(this.text, effect);
+	_handleClickSelection(item, e) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (this.selectionMode === `none` && mode !== `checked`) return;
+		switch (mode) {
+			case `implicit`:
+				this._replaceSelection(item);
+				break;
+			case `standard`:
+			case `vscode`:
+				if (e.ctrlKey || e.metaKey) {
+					if (this.selectionMode === `multiple` || mode === `vscode`) this._toggleItem(item);
+				} else if (e.shiftKey && (this.selectionMode === `multiple` || mode === `vscode`)) this._rangeSelectTo(item);
+				else this._replaceSelection(item);
+				break;
+			case `checked`: break;
 		}
 	}
-	_startTransition(newText, effect) {
-		const prevText = this._currentText;
-		this._currentText = newText;
-		this._outgoingText = prevText;
-		if (prevText !== ``) {
-			this._transitionId++;
-			this._activeEffect = effect;
-		}
+	_handleSpaceKey(item) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (mode === `implicit`) this._replaceSelection(item);
+		else this._toggleItem(item);
 	}
-	_onTransitionEnd() {
-		this._outgoingText = ``;
-		this._activeEffect = void 0;
-		if (this._queue.length > 0) {
-			const next = this._queue.shift();
-			this._startTransition(next.text, next.effect);
+	_getVisibleItems() {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
+			if (el.hidden) return false;
+			if (this.filterPredicate && !this.filterPredicate(el)) return false;
+			return true;
+		});
+	}
+	_syncItemStates() {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this._selectedItems.has(el));
+			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, this._selectedItems.has(el));
+			else el.removeAttribute(`data-checked`);
 		}
+		this.dataset.inputMode = this.tickled.inputMode;
+		this._syncCheckboxes();
 	}
-	#onOutgoingEnd;
-	#onLastCharOut;
-	#renderCharSwap() {
-		const charDuration = Math.round(this.duration * .3);
-		const charStagger = Math.round(this.duration * .1);
-		const currentChars = this._currentText.split(``);
-		const outgoingChars = this._outgoingText.split(``);
-		const lastIdx = outgoingChars.length - 1;
-		const charStyle = (i) => `animation-duration:${charDuration}ms;animation-delay:${i * charStagger}ms;animation-timing-function:${this.easing}`;
-		return html`
-      ${keyed(`cc${this._transitionId}`, html`
-        <span class="layer current char-swap">
-          ${currentChars.map((ch, i) => html`<span class="char in" style=${charStyle(i)}>${ch}</span>`)}
-        </span>
-      `)}
-      ${this._outgoingText ? keyed(this._transitionId, html`
-          <span class="layer outgoing char-swap">
-            ${outgoingChars.map((ch, i) => html`<span
-                class="char out"
-                style=${charStyle(i)}
-                @animationend=${i === lastIdx ? this.#onLastCharOut : void 0}
-              >${ch}</span>`)}
-          </span>
-        `) : nothing}
-    `;
+	_syncCheckboxes() {
+		const inCheckedMode = this.interactionMode === `checked`;
+		if (inCheckedMode) for (const inner of Array.from(this.children)) {
+			if (!inner.hasAttribute(`data-list-item`)) continue;
+			if (inner.parentElement !== this) continue;
+			const wrapper = document.createElement(`li`);
+			wrapper.className = `ixfx-custom-row`;
+			const key = inner.getAttribute(`data-key`);
+			const label = inner.getAttribute(`data-search-label`);
+			if (key !== null) wrapper.setAttribute(`data-key`, key);
+			if (label !== null) wrapper.setAttribute(`data-search-label`, label);
+			inner.removeAttribute(`data-list-item`);
+			this.insertBefore(wrapper, inner);
+			wrapper.appendChild(inner);
+			this.#customWrappers.set(wrapper, inner);
+		}
+		else {
+			for (const [wrapper, inner] of this.#customWrappers) {
+				if (wrapper.parentElement !== this) continue;
+				inner.setAttribute(`data-list-item`, ``);
+				this.insertBefore(inner, wrapper);
+				wrapper.remove();
+			}
+			this.#customWrappers.clear();
+		}
+		for (const el of this.querySelectorAll(`li`)) {
+			let cb = el.querySelector(`input.ixfx-list-checkbox`);
+			if (inCheckedMode) {
+				if (!cb) {
+					cb = document.createElement(`input`);
+					cb.type = `checkbox`;
+					cb.className = `ixfx-list-checkbox`;
+					cb.style.cssText = `flex-shrink:0;margin:0 6px 0 0;cursor:pointer;accent-color:var(--accent,#60a5fa);pointer-events:auto`;
+					cb.tabIndex = -1;
+					cb.addEventListener(`click`, (e) => {
+						e.stopPropagation();
+						this._toggleItem(el);
+					});
+					el.prepend(cb);
+				}
+				cb.checked = this._selectedItems.has(el);
+			} else if (cb) cb.remove();
+		}
 	}
-	render() {
-		if (this._activeEffect === `character-swap`) return html`<span class="container">${this.#renderCharSwap()}</span>`;
-		const effect = this._activeEffect ?? ``;
-		const durStyle = this._activeEffect ? `animation-duration:${this.duration}ms;animation-timing-function:${this.easing}` : ``;
-		return html`
-      <span class="container">
-        ${this._outgoingText ? keyed(this._transitionId, html`
-            <span class="layer outgoing ${effect}" style=${durStyle} @animationend=${this.#onOutgoingEnd}>
-              ${this._outgoingText}
-            </span>
-          `) : nothing}
-        ${keyed(`c${this._transitionId}`, html`
-          <span class="layer current ${effect}" style=${durStyle}>
-            ${this._currentText}
-          </span>
-        `)}
-      </span>
-    `;
+	_findListItem(path) {
+		for (const target of path) {
+			if (!(target instanceof Element)) continue;
+			if (target === this) break;
+			if (target.parentElement === this && target.matches(ITEM_SELECTOR)) return target;
+		}
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_openSearch() {
+		this._searchVisible = true;
+		this.updateComplete.then(() => this._searchInputEl?.focus());
+	}
+	_closeSearch() {
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#search?.clearQuery();
+		this.focus();
+	}
+	_activateItem(item) {
+		if (this.interactionMode !== `manual`) this._replaceSelection(item);
+		this._dispatch(`list-activate`, { item });
 	}
 	static {
-		this.styles = css`
+		this.styles = [themeFallbacks, css`
     :host {
-      display: inline-block;
-      --transitory-label-easing: ease;
-    }
-
-    .container {
-      display: inline-grid;
+      display: block;
+      position: relative;
+      background: var(--list-bg, var(--surface-3));
+      color: var(--list-text, var(--surface-3-text));
+      border-radius: var(--list-radius, var(--radius-s));
+      border: 1px solid var(--list-border, var(--border));
+      width: 100%;
+      height: 100%;
       overflow: hidden;
+      box-sizing: border-box;
+      outline: none;
     }
 
-    .layer {
-      grid-area: 1 / 1;
-      white-space: nowrap;
+    :host(:focus-visible) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
     }
 
-    .layer.outgoing {
-      pointer-events: none;
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
     }
 
-    /* slide-right */
-    .layer.current.slide-right {
-      transform: translateX(-100%);
-      animation: tl-slide-in-left var(--transitory-label-easing) forwards;
-    }
-    .layer.outgoing.slide-right {
-      animation: tl-slide-out-right var(--transitory-label-easing) forwards;
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      box-sizing: border-box;
     }
 
-    @keyframes tl-slide-in-left {
-      from { transform: translateX(-100%); }
-      to   { transform: translateX(0); }
-    }
-    @keyframes tl-slide-out-right {
-      from { transform: translateX(0); }
-      to   { transform: translateX(100%); }
+    ::slotted([hidden]) {
+      display: none !important;
     }
 
-    /* slide-left */
-    .layer.current.slide-left {
-      transform: translateX(100%);
-      animation: tl-slide-in-right var(--transitory-label-easing) forwards;
-    }
-    .layer.outgoing.slide-left {
-      animation: tl-slide-out-left var(--transitory-label-easing) forwards;
+    ::slotted(li) {
+      display: flex;
+      align-items: center;
+      padding: var(--list-item-padding, 4px var(--space-m, 8px));
+      min-height: var(--list-item-height, 28px);
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      box-sizing: border-box;
+      outline: 1px solid transparent;
     }
 
-    @keyframes tl-slide-in-right {
-      from { transform: translateX(100%); }
-      to   { transform: translateX(0); }
-    }
-    @keyframes tl-slide-out-left {
-      from { transform: translateX(0); }
-      to   { transform: translateX(-100%); }
+    /* Custom shadow-DOM components handle their own internal layout/padding */
+    ::slotted([data-list-item]) {
+      display: block;
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      outline: 1px solid transparent;
     }
 
-    /* slide-up */
-    .layer.current.slide-up {
-      transform: translateY(100%);
-      animation: tl-slide-in-bottom var(--transitory-label-easing) forwards;
-    }
-    .layer.outgoing.slide-up {
-      animation: tl-slide-out-top var(--transitory-label-easing) forwards;
+    ::slotted([data-tickled]) {
+      background: var(--item-bg-tickled);
+      outline: var(--item-border-tickled);
     }
 
-    @keyframes tl-slide-in-bottom {
-      from { transform: translateY(100%); }
-      to   { transform: translateY(0); }
+    ::slotted([data-selected]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+      outline: 1px solid transparent;
     }
-    @keyframes tl-slide-out-top {
-      from { transform: translateY(0); }
-      to   { transform: translateY(-100%); }
+
+    ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-selected-tickled);
+      outline: 2px dashed var(--surface-3);
+      outline-offset: -2px;
     }
 
-    /* slide-down */
-    .layer.current.slide-down {
-      transform: translateY(-100%);
-      animation: tl-slide-in-top var(--transitory-label-easing) forwards;
+    /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
+    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
+      background: transparent;
+      color: inherit;
+      outline: 1px solid transparent;
     }
-    .layer.outgoing.slide-down {
-      animation: tl-slide-out-bottom var(--transitory-label-easing) forwards;
+
+    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-tickled);
+      color: inherit;
+      outline: var(--item-border-tickled);
     }
 
-    @keyframes tl-slide-in-top {
-      from { transform: translateY(-100%); }
-      to   { transform: translateY(0); }
+    .search-overlay {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--surface-4, #2a2a2a);
+      border: 1px solid var(--border, #444);
+      border-radius: var(--radius-m, 4px);
+      padding: 4px 6px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     }
-    @keyframes tl-slide-out-bottom {
-      from { transform: translateY(0); }
-      to   { transform: translateY(100%); }
+
+    .search-overlay[hidden] {
+      display: none;
     }
 
-    /* fade */
-    .layer.current.fade {
-      opacity: 0;
-      animation: tl-fade-in var(--transitory-label-easing) forwards;
+    .search-input {
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font-size: var(--text-m, 0.875em);
+      min-width: 140px;
     }
-    .layer.outgoing.fade {
-      animation: tl-fade-out var(--transitory-label-easing) forwards;
+
+    .search-close {
+      background: transparent;
+      border: none;
+      color: var(--surface-muted-text, #888);
+      cursor: pointer;
+      font-size: 1.1em;
+      line-height: 1;
+      padding: 0 2px;
     }
 
-    @keyframes tl-fade-in {
-      from { opacity: 0; }
-      to   { opacity: 1; }
+    .search-close:hover {
+      color: inherit;
     }
-    @keyframes tl-fade-out {
-      from { opacity: 1; }
-      to   { opacity: 0; }
+  `];
+	}
+	render() {
+		return html`
+      <div class="container">
+        <ul part="list">
+          <slot></slot>
+        </ul>
+        <div
+          class="search-overlay"
+          part="search-overlay"
+          ?hidden=${!this._searchVisible}
+        >
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search…"
+            .value=${this._searchQuery}
+            @input=${this._onSearchInput}
+            @keydown=${this._onSearchKeydown}
+          />
+          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], VerticalListElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], VerticalListElement.prototype, "interactionMode", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "filterPredicate", void 0);
+__decorate([state()], VerticalListElement.prototype, "_selectedItems", void 0);
+__decorate([state()], VerticalListElement.prototype, "_searchVisible", void 0);
+__decorate([state()], VerticalListElement.prototype, "_searchQuery", void 0);
+__decorate([query(`.search-input`)], VerticalListElement.prototype, "_searchInputEl", void 0);
+VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
+//#endregion
+//#region src/grouped-item-lister/vertical-list-adapter.ts
+/**
+* Creates an `HTMLElement` that implements `IGroupedSubComponent<T>` by wrapping
+* an `ixfx-vertical-list` internally.
+*
+* Items are typed as `T`. The `renderItem` function converts each item to a DOM
+* element (typically an `<li>`) that `ixfx-vertical-list` renders and handles
+* pointer/keyboard interaction for.
+*
+* The returned element bridges the `list-*` event names fired by
+* `ixfx-vertical-list` to the `select / activate / item-click / tickle` names
+* required by `IGroupedSubComponent`, and maps element-based selection sets back
+* to typed `T` values.
+*
+* @example Basic usage with ixfx-grouped-item-lister:
+* ```ts
+* lister.factory = () =>
+*   createVerticalListAdapter<MyItem>(item => {
+*     const li = document.createElement('li');
+*     li.textContent = item.label;
+*     return li;
+*   });
+* ```
+*/
+function createVerticalListAdapter(renderItem, options) {
+	const container = document.createElement(`div`);
+	container.style.cssText = `display:contents;`;
+	let listEl;
+	let selectionMode = options?.selectionMode ?? `single`;
+	let elToItem = /* @__PURE__ */ new WeakMap();
+	function getOrCreateList() {
+		if (listEl) return listEl;
+		listEl = document.createElement(`ixfx-vertical-list`);
+		listEl.style.cssText = `height:auto;width:100%;`;
+		listEl.selectionMode = selectionMode;
+		if (options?.interactionMode) listEl.interactionMode = options.interactionMode;
+		container.appendChild(listEl);
+		attachBridgeListeners();
+		return listEl;
+	}
+	function attachBridgeListeners() {
+		listEl.addEventListener(`list-select`, (e) => {
+			const detail = {
+				selected: mapEls(e.detail.selected),
+				previous: mapEls(e.detail.previous)
+			};
+			container.dispatchEvent(new CustomEvent(`select`, {
+				detail,
+				bubbles: true,
+				composed: true
+			}));
+		});
+		listEl.addEventListener(`list-activate`, (e) => {
+			const item = elToItem.get(e.detail.item);
+			if (item !== void 0) container.dispatchEvent(new CustomEvent(`activate`, {
+				detail: { item },
+				bubbles: true,
+				composed: true
+			}));
+		});
+		listEl.addEventListener(`list-item-click`, (e) => {
+			const item = elToItem.get(e.detail.item);
+			if (item !== void 0) container.dispatchEvent(new CustomEvent(`item-click`, {
+				detail: { item },
+				bubbles: true,
+				composed: true
+			}));
+		});
+		listEl.addEventListener(`list-tickle`, (e) => {
+			const item = elToItem.get(e.detail.item);
+			if (item !== void 0) container.dispatchEvent(new CustomEvent(`tickle`, {
+				detail: { item },
+				bubbles: true,
+				composed: true
+			}));
+		});
+	}
+	function applyItems(items) {
+		const list = getOrCreateList();
+		list.clearItems();
+		elToItem = /* @__PURE__ */ new WeakMap();
+		for (const item of items) {
+			const el = renderItem(item);
+			elToItem.set(el, item);
+			list.addItem(el);
+		}
+	}
+	function mapEls(els) {
+		const result = /* @__PURE__ */ new Set();
+		for (const el of els) {
+			const item = elToItem.get(el);
+			if (item !== void 0) result.add(item);
+		}
+		return result;
+	}
+	const adapter = Object.assign(container, {
+		setItems(items) {
+			applyItems(items);
+		},
+		clearSelection() {
+			listEl?.clearSelection();
+		},
+		dispatch(commandId, args) {
+			options?.onDispatch?.(commandId, args, listEl);
+		}
+	});
+	Object.defineProperties(adapter, {
+		selectedItems: {
+			get() {
+				return listEl ? mapEls(listEl.selectedItems) : /* @__PURE__ */ new Set();
+			},
+			enumerable: true,
+			configurable: true
+		},
+		selectionMode: {
+			get() {
+				return listEl?.selectionMode ?? selectionMode;
+			},
+			set(v) {
+				selectionMode = v;
+				if (listEl) listEl.selectionMode = v;
+			},
+			enumerable: true,
+			configurable: true
+		}
+	});
+	return adapter;
+}
+//#endregion
+//#region src/panel/panel-group.ts
+let PanelGroupElement = class PanelGroupElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.variant = `titlebar`;
+		this.toggleInteraction = `implicit`;
+		this.allowMultiple = false;
+		this.gap = `var(--space-m)`;
+	}
+	_onPanelToggle(e) {
+		const panel = e.target;
+		if (panel.collapsed) return;
+		if (this.allowMultiple) return;
+		for (const p of this._panels) if (p !== panel) p.collapsed = true;
+	}
+	firstUpdated() {
+		this.updateComplete.then(() => {
+			this._propagateAll();
+		});
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`)) this.updateComplete.then(() => {
+			this._propagateAll();
+		});
+	}
+	_propagateAll() {
+		const invertedOrientation = this.orientation === `horizontal` ? `vertical` : `horizontal`;
+		for (const panel of this._panels) {
+			panel.setAttribute(`variant`, this.variant);
+			panel.setAttribute(`toggle-interaction`, this.toggleInteraction);
+			panel.setAttribute(`orientation`, invertedOrientation);
+		}
+	}
+	render() {
+		return html`
+      <slot
+        @toggle=${this._onPanelToggle}
+      ></slot>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--group-gap, var(--space-m));
     }
 
-    /* character-swap */
-    .char {
-      display: inline-block;
+    :host([orientation="horizontal"]) {
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: wrap;
     }
 
-    .char.in {
-      opacity: 0;
-      animation: tl-char-in var(--transitory-label-easing) forwards;
+    :host([orientation="vertical"]) {
+      flex-direction: column;
     }
 
-    .char.out {
-      animation: tl-char-out var(--transitory-label-easing) forwards;
+    ::slotted(ixfx-panel) {
+      flex-shrink: 1;
     }
 
-    @keyframes tl-char-in {
-      from { opacity: 0; transform: translateY(-0.3em) scale(0.8); }
-      to   { opacity: 1; transform: translateY(0) scale(1); }
-    }
-    @keyframes tl-char-out {
-      from { opacity: 1; transform: translateY(0) scale(1); }
-      to   { opacity: 0; transform: translateY(0.3em) scale(0.8); }
+    :host([orientation="horizontal"]) ::slotted(ixfx-panel) {
+      flex-basis: content;
+      min-width: 0;
     }
   `;
 	}
 };
-__decorate([property({ type: String })], TransitoryLabelElement.prototype, "text", void 0);
-__decorate([property({ type: String })], TransitoryLabelElement.prototype, "effect", void 0);
-__decorate([property({ type: Number })], TransitoryLabelElement.prototype, "duration", void 0);
-__decorate([property({ type: String })], TransitoryLabelElement.prototype, "easing", void 0);
-__decorate([state()], TransitoryLabelElement.prototype, "_currentText", void 0);
-__decorate([state()], TransitoryLabelElement.prototype, "_outgoingText", void 0);
-__decorate([state()], TransitoryLabelElement.prototype, "_activeEffect", void 0);
-__decorate([state()], TransitoryLabelElement.prototype, "_transitionId", void 0);
-TransitoryLabelElement = __decorate([safeCustomElement(`ixfx-transitory-label`)], TransitoryLabelElement);
+__decorate([property({
+	type: String,
+	reflect: true
+})], PanelGroupElement.prototype, "orientation", void 0);
+__decorate([property({ type: String })], PanelGroupElement.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toggle-interaction`
+})], PanelGroupElement.prototype, "toggleInteraction", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-multiple`
+})], PanelGroupElement.prototype, "allowMultiple", void 0);
+__decorate([property()], PanelGroupElement.prototype, "gap", void 0);
+__decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
+PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
 //#endregion
-//#region src/util/checkbox.ts
-function isCheckboxLike(el) {
-	if (!(el instanceof HTMLElement)) return false;
-	return `checked` in el;
-}
-function resolveElement(elOrQuery) {
-	if (typeof elOrQuery === `string`) {
-		const found = document.querySelector(elOrQuery);
-		if (!(found instanceof HTMLElement)) throw new Error(`Element not found or not HTMLElement: ${elOrQuery}`);
-		return found;
-	}
-	return elOrQuery;
-}
-function monitorIndeterminate(targetElOrQuery, watchedElsOrQueries) {
-	const target = resolveElement(targetElOrQuery);
-	if (!isCheckboxLike(target)) throw new Error(`Target element is not a checkbox-like element`);
-	const watched = [];
-	for (const elOrQuery of watchedElsOrQueries) {
-		const el = resolveElement(elOrQuery);
-		if (isCheckboxLike(el)) watched.push(el);
-	}
-	const updateTarget = () => {
-		if (watched.length === 0) {
-			target.checked = false;
-			target.indeterminate = false;
-			return;
-		}
-		let checkedCount = 0;
-		let uncheckedCount = 0;
-		for (const el of watched) if (el.checked) checkedCount++;
-		else uncheckedCount++;
-		if (checkedCount > 0 && uncheckedCount > 0) {
-			target.checked = false;
-			target.indeterminate = true;
-		} else if (checkedCount === watched.length) {
-			target.checked = true;
-			target.indeterminate = false;
-		} else {
-			target.checked = false;
-			target.indeterminate = false;
+//#region src/util/drag.ts
+function getCoordinates(event) {
+	return {
+		client: {
+			x: event.clientX,
+			y: event.clientY
+		},
+		offset: {
+			x: event.offsetX,
+			y: event.offsetY
 		}
 	};
-	const handleChange = () => {
-		updateTarget();
+}
+function dragLogicStart(downEvent, handler) {
+	const start = getCoordinates(downEvent);
+	const onMove = (event) => {
+		handler.progress(getCoordinates(event), start);
 	};
-	for (const el of watched) el.addEventListener(`change`, handleChange);
-	updateTarget();
-	return () => {
-		for (const el of watched) el.removeEventListener(`change`, handleChange);
+	const onUp = (event) => {
+		document.removeEventListener(`pointermove`, onMove);
+		document.removeEventListener(`pointerup`, onUp);
+		handler.complete(getCoordinates(event), start);
 	};
+	document.addEventListener(`pointermove`, onMove);
+	document.addEventListener(`pointerup`, onUp);
 }
 //#endregion
-//#region src/util/is-numeric.ts
-function isNumeric(str) {
-	if (typeof str === `number`) return true;
-	if (typeof str !== `string`) return false;
-	const trimmed = str.trim();
-	return trimmed !== `` && !Number.isNaN(Number(trimmed));
+//#region src/util/near.ts
+function near(target, range) {
+	const min = target - range;
+	const max = target + range;
+	return (v) => v >= min && v <= max;
 }
 //#endregion
-//#region src/util/tooltip.ts
-var _TooltipElement;
-let TooltipElement = class TooltipElement extends LitElement {
-	static {
-		_TooltipElement = this;
-	}
+//#region src/range/range-multi.ts
+let RangeMultiElement = class RangeMultiElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.valueFormatTooltip = _TooltipElement.defaultFormatter;
-		this.orientation = `top`;
-		this.anchor = `--tooltip`;
+		this.tooltip = true;
+		this.tooltipOrientation = `top`;
+		this.crossover = `allow`;
+		this.resizeMode = `dual`;
+		this.orientation = `horizontal`;
+		this.step = 1;
+		this.a = 0;
+		this.b = 50;
+		this.#userMax = 100;
+		this.#userMin = 0;
+		this.#scaleTo100 = (v) => v;
+		this.#scaleFrom100 = (v) => v;
+		this.#userClamp = (v) => v;
+		this.draggingThumb = `none`;
 	}
-	static {
-		this.numberFormatter = (v) => Math.floor(v).toString();
+	#userMax;
+	#userMin;
+	#scaleTo100;
+	#scaleFrom100;
+	#userClamp;
+	#updateScale() {
+		this.#scaleTo100 = scaler(this.#userMin, this.#userMax, 0, 100);
+		this.#scaleFrom100 = scaler(0, 100, this.#userMin, this.#userMax);
+		this.#userClamp = clamper(this.#userMin, this.#userMax);
+		this.a = this.#userClamp(this.a);
+		this.b = this.#userClamp(this.b);
 	}
-	static {
-		this.defaultFormatter = (v) => {
-			if (typeof v === `number`) {
-				if (Number.isInteger(v)) return v.toString();
-				return v.toFixed(2);
-			} else if (typeof v === `string`) return v;
-			else return JSON.stringify(v);
-		};
+	set max(v) {
+		this.#userMax = v;
+		this.#updateScale();
 	}
-	#renderIcon() {
-		if (!this.icon) return nothing;
-		if (this.icon.startsWith(`<svg`)) return html`<span class="tooltip-icon" style="display:inline-flex;align-items:center;margin-right:0.25em">${unsafeHTML(this.icon)}</span>`;
-		if (!getIcon(this.icon)) return nothing;
-		return html`<ixfx-icon class="tooltip-icon" style="margin-right:0.25em" name="${this.icon}"></ixfx-icon>`;
+	get max() {
+		return this.#userMax;
 	}
-	render() {
-		const classes = {
-			"tooltip": true,
-			"tooltip-orientation-top": this.orientation === `top`,
-			"tooltip-orientation-bottom": this.orientation === `bottom`,
-			"tooltip-orientation-right": this.orientation === `right`,
-			"tooltip-orientation-left": this.orientation === `left`,
-			"tooltip-type-text": true,
-			"tooltip-type-number": false,
-			"tooltip-style-bubble": true
-		};
-		let value = ``;
-		switch (typeof this.value) {
-			case `number`:
-				classes[`tooltip-type-number`] = true;
-				value = this.valueFormatTooltip(this.value);
-				break;
-			case `string`:
-				if (isNumeric(this.value)) {
-					classes[`tooltip-type-number`] = true;
-					value = this.valueFormatTooltip(Number.parseFloat(this.value));
-				} else value = this.value;
-				break;
-			default: value = JSON.stringify(this.value);
-		}
-		return html`<output style="--anchor-id: ${this.anchor}" class=${classMap(classes)}>${this.#renderIcon()}${value}</output>`;
+	set min(v) {
+		this.#userMin = v;
+		this.#updateScale();
 	}
-	createRenderRoot() {
-		return this;
+	get min() {
+		return this.#userMin;
 	}
-};
-__decorate([property({ type: String })], TooltipElement.prototype, "orientation", void 0);
-__decorate([property({ type: String })], TooltipElement.prototype, "anchor", void 0);
-__decorate([property()], TooltipElement.prototype, "value", void 0);
-__decorate([property({ type: String })], TooltipElement.prototype, "icon", void 0);
-TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
-//#endregion
-//#region src/vertical-list/vertical-list.ts
-const ITEM_SELECTOR = `li, [data-list-item]`;
-function isMultiMode(mode) {
-	return mode === `checked` || mode === `vscode` || mode === `standard`;
-}
-let VerticalListElement = class VerticalListElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.selectionMode = `single`;
-		this.interactionMode = `standard`;
-		this._selectedItems = /* @__PURE__ */ new Set();
-		this._searchVisible = false;
-		this._searchQuery = ``;
-		this.#customWrappers = /* @__PURE__ */ new Map();
-		this.tickled = new TickledController(this, {
-			getItems: () => this._getVisibleItems().map((el) => ({
-				id: el,
-				enabled: true
-			})),
-			onTickle: (id) => {
-				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
-			},
-			onStateChange: () => this._syncItemStates()
-		});
-		this._onPointerOver = (e) => {
-			const item = this._findListItem(e.composedPath());
-			if (item) this.tickled.handlePointerEnter(item);
-		};
-		this._onPointerLeave = (e) => {
-			this.tickled.handlePointerLeave(e);
-		};
-		this._onKeyDown = (e) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
-				e.preventDefault();
-				this._openSearch();
+	_onInput(event) {
+		event.stopPropagation();
+		const t = event.target;
+		const v = this.#scaleFrom100(t.valueAsNumber);
+		const which = t.id;
+		let a = this.a;
+		let b = this.b;
+		if (this.resizeMode === `none`) {
+			let panDelta = v - (which === `a` ? this.a : this.b);
+			const newA = this.a + panDelta;
+			const newB = this.b + panDelta;
+			if (newA < this.min) panDelta = this.min - this.a;
+			if (newB > this.max) panDelta = this.max - this.b;
+			if (panDelta === 0) {
+				t.valueAsNumber = this.#scaleTo100(which === `a` ? this.a : this.b);
 				return;
 			}
-			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
-				if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) {
-					e.preventDefault();
-					this._selectAll();
+			a = this.a + panDelta;
+			b = this.b + panDelta;
+		} else if (this.resizeMode === `bipolar`) {
+			let newA;
+			let newB;
+			if (which === `a`) {
+				const delta = v - this.a;
+				newA = v;
+				newB = this.b - delta;
+			} else {
+				const delta = v - this.b;
+				newA = this.a - delta;
+				newB = v;
+			}
+			if (newA < this.min || newB > this.max || newA > this.max || newB < this.min) {
+				t.valueAsNumber = this.#scaleTo100(which === `a` ? this.a : this.b);
+				return;
+			}
+			a = newA;
+			b = newB;
+		} else if (this.resizeMode === `bipolar-flex`) {
+			let newA;
+			let newB;
+			if (which === `a`) {
+				newA = v;
+				if (this.b <= this.min) newB = this.min;
+				else if (this.b >= this.max) newB = this.max;
+				else {
+					const delta = v - this.a;
+					newB = this.b - delta;
+				}
+			} else {
+				newB = v;
+				if (this.a <= this.min) newA = this.min;
+				else if (this.a >= this.max) newA = this.max;
+				else {
+					const delta = v - this.b;
+					newA = this.a - delta;
 				}
+			}
+			if (newA < this.min) newA = this.min;
+			if (newA > this.max) newA = this.max;
+			if (newB < this.min) newB = this.min;
+			if (newB > this.max) newB = this.max;
+			if (newA > newB) {
+				t.valueAsNumber = this.#scaleTo100(which === `a` ? this.a : this.b);
 				return;
 			}
-			if (this._searchVisible) return;
-			switch (e.key) {
-				case `ArrowDown`:
-					e.preventDefault();
-					this.tickled.handleKeyboardNavigation(`next`);
-					if (e.shiftKey && this.interactionMode === `vscode`) {
-						const cur = this.tickled.tickledId;
-						if (cur) this._rangeSelectTo(cur);
+			a = newA;
+			b = newB;
+		} else if (which === `a`) if (v > this.b && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.a);
+		else a = v;
+		else if (which === `b`) if (v < a && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.b);
+		else b = v;
+		else throw new Error(`Expected 'a' or 'b', got: '${t.id}'`);
+		this.setPoles(a, b);
+	}
+	setPoles(a, b) {
+		const aDiff = a !== this.a;
+		const bDiff = b !== this.b;
+		this.a = this.#userClamp(a);
+		this.b = this.#userClamp(b);
+		this.dispatchEvent(new CustomEvent(`input`, { detail: {
+			a: this.a,
+			b: this.b,
+			changed: aDiff && bDiff ? `both` : aDiff ? `a` : `b`
+		} }));
+	}
+	_onPointerDown(event) {
+		const startA = this.a;
+		const startB = this.b;
+		this.valuesAtPointerDown = {
+			a: startA,
+			b: startB
+		};
+		const rect = event.target.getBoundingClientRect();
+		const isVertical = this.orientation === `vertical`;
+		const dim = isVertical ? rect.height : rect.width;
+		const valuePerPix = dim / (this.max - this.min);
+		const pos = isVertical ? event.offsetY : event.offsetX;
+		const valueFromPos = (p) => {
+			return isVertical ? this.max - p * valuePerPix : p * valuePerPix;
+		};
+		const posFromValue = (v) => {
+			return isVertical ? dim - v * valuePerPix : v * valuePerPix;
+		};
+		const aPosPx = posFromValue(startA);
+		const bPosPx = posFromValue(startB);
+		if (isVertical ? (this.b < this.a ? pos > bPosPx : pos < bPosPx) || (this.b < this.a ? pos < aPosPx : pos > aPosPx) : this.b < this.a && pos < bPosPx || this.b > this.a && pos > bPosPx || this.a < this.b && pos < aPosPx || this.a > this.b && pos > aPosPx) {
+			if (this.resizeMode === `none` || this.resizeMode === `bipolar` || this.resizeMode === `bipolar-flex`) {
+				let panDelta = valueFromPos(pos) - this.b;
+				if (this.a + panDelta < this.min) panDelta = this.min - this.a;
+				if (this.b + panDelta > this.max) panDelta = this.max - this.b;
+				const finalA = this.a + panDelta;
+				const finalB = this.b + panDelta;
+				if (finalA >= this.min && finalB <= this.max) this.setPoles(finalA, finalB);
+			} else this.b = valueFromPos(pos);
+			return;
+		}
+		const aPosPxNear = near(aPosPx, 10);
+		const bPosPxNear = near(bPosPx, 10);
+		const handleDrag = (draggingWhich) => {
+			const setPoles = this.setPoles.bind(this);
+			const resizeMode = this.resizeMode;
+			const min = this.min;
+			const max = this.max;
+			const startPos = isVertical ? event.offsetY : event.offsetX;
+			let polesChanged = false;
+			dragLogicStart(event, {
+				progress(current, _start) {
+					const currentPos = isVertical ? current.offset.y : current.offset.x;
+					const amt = (isVertical ? startPos - currentPos : currentPos - startPos) / valuePerPix;
+					polesChanged = true;
+					if (draggingWhich === `a`) if (resizeMode === `bipolar`) {
+						const calcA = startA + amt;
+						const calcB = startB - amt;
+						if (calcA < min || calcB > max || calcA > max || calcB < min) return;
+						setPoles(calcA, calcB);
+					} else if (resizeMode === `bipolar-flex`) {
+						let calcA = startA + amt;
+						let calcB = startB;
+						if (startB <= min) calcB = min;
+						else if (startB >= max) calcB = max;
+						else {
+							calcA = startA + amt;
+							calcB = startB - amt;
+						}
+						if (calcA < min) calcA = min;
+						if (calcA > max) calcA = max;
+						if (calcB < min) calcB = min;
+						if (calcB > max) calcB = max;
+						if (calcA > calcB) return;
+						setPoles(calcA, calcB);
+					} else {
+						let constrainedAmt = amt;
+						if (startA + amt < min) constrainedAmt = min - startA;
+						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
+						const finalA = startA + constrainedAmt;
+						const finalB = startB + constrainedAmt;
+						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
 					}
-					break;
-				case `ArrowUp`:
-					e.preventDefault();
-					this.tickled.handleKeyboardNavigation(`previous`);
-					if (e.shiftKey && this.interactionMode === `vscode`) {
-						const cur = this.tickled.tickledId;
-						if (cur) this._rangeSelectTo(cur);
+					else if (draggingWhich === `b`) if (resizeMode === `bipolar`) {
+						const calcA = startA - amt;
+						const calcB = startB + amt;
+						if (calcA < min || calcB > max || calcA > max || calcB < min) return;
+						setPoles(calcA, calcB);
+					} else if (resizeMode === `bipolar-flex`) {
+						let calcA = startA;
+						let calcB = startB + amt;
+						if (startA <= min) calcA = min;
+						else if (startA >= max) calcA = max;
+						else {
+							calcA = startA - amt;
+							calcB = startB + amt;
+						}
+						if (calcA < min) calcA = min;
+						if (calcA > max) calcA = max;
+						if (calcB < min) calcB = min;
+						if (calcB > max) calcB = max;
+						if (calcA > calcB) return;
+						setPoles(calcA, calcB);
+					} else {
+						let constrainedAmt = amt;
+						if (startA + amt < min) constrainedAmt = min - startA;
+						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
+						const finalA = startA + constrainedAmt;
+						const finalB = startB + constrainedAmt;
+						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
 					}
-					break;
-				case `Enter`: {
-					const id = this.tickled.tickledId;
-					if (id) {
-						e.preventDefault();
-						this._dispatch(`list-item-click`, { item: id });
-						this._activateItem(id);
+					else if (resizeMode === `bipolar`) {
+						const calcA = startA + amt;
+						const calcB = startB + amt;
+						if (calcA < min || calcB > max) return;
+						setPoles(calcA, calcB);
+					} else if (resizeMode === `bipolar-flex`) {
+						let calcA = startA + amt;
+						let calcB = startB + amt;
+						if (calcA < min) {
+							calcA = min;
+							calcB = min + (startB - startA);
+						} else if (calcB > max) {
+							calcB = max;
+							calcA = max - (startB - startA);
+						}
+						if (calcA < min || calcB > max || calcA > calcB) return;
+						setPoles(calcA, calcB);
+					} else {
+						let constrainedAmt = amt;
+						if (startA + amt < min) constrainedAmt = min - startA;
+						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
+						const finalA = startA + constrainedAmt;
+						const finalB = startB + constrainedAmt;
+						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
 					}
-					break;
-				}
-				case ` `: {
-					const id = this.tickled.tickledId;
-					if (id) {
-						e.preventDefault();
-						this._handleSpaceKey(id);
+				},
+				complete(_final, _start) {
+					if (!polesChanged) {
+						const currentPos = isVertical ? event.offsetY : event.offsetX;
+						if (Math.abs(currentPos - aPosPx) < Math.abs(currentPos - bPosPx)) setPoles(valueFromPos(currentPos), startB);
+						else setPoles(startA, valueFromPos(currentPos));
 					}
-					break;
-				}
-				case `Escape`:
-					this._clearSelection();
-					break;
-			}
-		};
-		this._onClick = (e) => {
-			const item = this._findListItem(e.composedPath());
-			if (!item) return;
-			this._dispatch(`list-item-click`, { item });
-			this._handleClickSelection(item, e);
-		};
-		this._onDblClick = (e) => {
-			const item = this._findListItem(e.composedPath());
-			if (item) this._activateItem(item);
-		};
-		this._onSearchInput = (e) => {
-			const input = e.target;
-			this._searchQuery = input.value;
-			this.#search?.setQuery(this._searchQuery);
-		};
-		this._onSearchKeydown = (e) => {
-			if (e.key === `Escape`) {
-				e.stopPropagation();
-				this._closeSearch();
-			} else if (e.key === `ArrowDown`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`next`);
-			} else if (e.key === `ArrowUp`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`previous`);
-			} else if (e.key === `Enter`) {
-				e.preventDefault();
-				e.stopPropagation();
-				const id = this.tickled.tickledId ?? this._getVisibleItems()[0];
-				if (id) {
-					this._dispatch(`list-item-click`, { item: id });
-					this._activateItem(id);
-					this._closeSearch();
 				}
-			}
+			});
 		};
+		if (aPosPxNear(pos)) {
+			this.draggingThumb = `a`;
+			if (this.resizeMode === `dual`) return false;
+			event.preventDefault();
+			event.target.setPointerCapture(event.pointerId);
+			handleDrag(`a`);
+			return;
+		} else if (bPosPxNear(pos)) {
+			this.draggingThumb = `b`;
+			if (this.resizeMode === `dual`) return false;
+			event.preventDefault();
+			event.target.setPointerCapture(event.pointerId);
+			handleDrag(`b`);
+			return;
+		} else this.draggingThumb = `none`;
+		event.preventDefault();
+		event.target.setPointerCapture(event.pointerId);
+		handleDrag(`none`);
+	}
+	firstUpdated(_changedProperties) {
+		this.#updateScale();
+	}
+	render() {
+		const ttA = this.tooltip ? html`<ixfx-tooltip style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)" anchor="--a-tooltip" .orientation=${this.tooltipOrientation} .value=${this.a}></ixfx-tooltip>` : nothing;
+		const ttB = this.tooltip ? html`<ixfx-tooltip style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)" anchor="--b-tooltip" .orientation=${this.tooltipOrientation} .value=${this.b}></ixfx-tooltip>` : nothing;
+		const scaledA = this.#scaleTo100(this.a);
+		const scaledB = this.#scaleTo100(this.b);
+		const verticalStyle = this.orientation === `vertical` ? `writing-mode: vertical-lr; direction: rtl;` : nothing;
+		return html`
+      <div @pointerdown=${this._onPointerDown} @input=${this._onInput} style="--a: ${scaledA}; --b: ${scaledB}">
+        <input class="thumb-round" .value=${scaledA} id="a" step=${this.step} type="range" style="${verticalStyle}" anchor="--a-tooltip" />
+        ${ttA}
+
+        <input class="thumb-round" .value=${scaledB} id="b" step=${this.step} type="range" style="${verticalStyle}" anchor="--b-tooltip" />
+        ${ttB}
+      </div>`;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tooltipValueStyles,
+			prominenceStyles,
+			css`
+    :host {
+      display: grid;
+      --value-label-color: unset;
+  
+      --range-background: AccentColor;
+      --range-height: 1.5em;
+      --range-thickness: 1em;
+      --thumb-background: ButtonFace;
+      --thumb-radius: 50%;
+      --thumb-width: 1em;
+      --thumb-height: 1em;
+      --js:1;
+    }
+
+    :host([orientation="vertical"]) {
+      display: block;
+      width: 1.5em;
+      height: 200px;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      font: inherit;
+    }
+
+    div {
+       --j: var(--js, 0);
+       display:inline grid;
+       align-content: end;
+       grid-gap: 0.25em;
+       place-self: center;
+       min-width: 8em;
+       width: calc(100% - 1.5em);
+       height: 1.5rem;
+    }
+
+    :host([orientation="vertical"]) div {
+       width: 1.5rem;
+       height: calc(100% - 1.5em);
+       min-width: unset;
+       min-height: 8em;
+    }
+
+    div::before, div::after {
+       margin: 0.5rem 0.6875rem;
+       border-radius: 0.25rem;
+       box-shadow: none;
+       background: var(--surface-4);
+       content: "";
+    }
+    :host([orientation="vertical"]) div::before,
+    :host([orientation="vertical"]) div::after {
+       margin: 0.5rem 0;
+    }
+    div::after {
+       --or: calc((100 - Max(var(--a), var(--b)))*1%);
+       --ol: calc(Min(var(--a), var(--b))*1%);
+       box-shadow: none;
+       background: var(--accent);
+       clip-path: inset(0 var(--or) 0 var(--ol));
+    }
+    :host([orientation="vertical"]) div::after {
+       clip-path: inset(var(--or) 0 var(--ol) 0);
+    }
+    div input, div::before, div::after {
+       grid-area: calc(1 + var(--j))/1;
+    }
+    div output, div::after {
+       display:'none';
+    }
+
+    [type=range] {
+      width: 100%;
+      height: var(--range-height);
+      background: transparent;
+      pointer-events: none;
+    }
+
+    :host([orientation="vertical"]) [type=range] {
+      writing-mode: vertical-lr;
+      direction: rtl;
+      width: var(--range-height);
+      height: 100%;
+    }
+
+    [type=range], [type=range]::-webkit-slider-runnable-track, [type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+    }
+    [type=range], [type=range] + ixfx-tooltip {
+      --sel: 0;
+      z-index: calc(1 + var(--sel));
+    }
+    [type=range]::-webkit-slider-runnable-track {
+      background: transparent;
+    }
+    [type=range]::-moz-range-track {
+      background: transparent;
+    }
+
+    input.thumb-round::-webkit-slider-thumb {
+      width: var(--thumb-width);
+      height: var(--thumb-height);
+      border-radius: var(--thumb-radius);
+    }
+
+    [type=range]::-webkit-slider-thumb {
+      box-sizing: border-box;
+      border: solid calc(0.5rem + -1px) transparent;
+
+      /* box-shadow: var(--shadow-m); */
+      background: var(--thumb-background);
+      pointer-events: auto;
+      cursor: ew-resize;
+    }
+
+    :host([orientation="vertical"]) [type=range]::-webkit-slider-thumb {
+      width: var(--thumb-height);
+      height: var(--thumb-width);
+      cursor: ns-resize;
+    }
+
+    [type=range]::-moz-range-thumb {
+      box-sizing: border-box;
+      border: solid calc(0.5rem + -1px) transparent;
+      width: 1.375rem;
+      height: 1.375rem;
+      border-radius: 50%;
+      box-shadow: var(--shadow-m);
+      background: var(--thumb-background);
+      pointer-events: auto;
+      cursor: ew-resize;
+    }
+
+    :host([orientation="vertical"]) [type=range]::-moz-range-thumb {
+      cursor: ns-resize;
+    }
+
+    [type=range]:focus {
+      outline: none;
+    }
+    [type=range]:focus, [type=range]:focus + ixfx-tooltip, [type=range]:hover, [type=range]:hover + ixfx-tooltip {
+      --sel: 1 ;
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: Boolean })], RangeMultiElement.prototype, "tooltip", void 0);
+__decorate([property({
+	type: String,
+	attribute: `tooltip-orientation`
+})], RangeMultiElement.prototype, "tooltipOrientation", void 0);
+__decorate([property({ type: String })], RangeMultiElement.prototype, "crossover", void 0);
+__decorate([property({
+	type: String,
+	attribute: `resize-mode`
+})], RangeMultiElement.prototype, "resizeMode", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], RangeMultiElement.prototype, "orientation", void 0);
+__decorate([property()], RangeMultiElement.prototype, "step", void 0);
+__decorate([property({ type: Number })], RangeMultiElement.prototype, "a", void 0);
+__decorate([property({ type: Number })], RangeMultiElement.prototype, "b", void 0);
+__decorate([property({ type: Number })], RangeMultiElement.prototype, "max", null);
+__decorate([property({ type: Number })], RangeMultiElement.prototype, "min", null);
+__decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onInput", null);
+__decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
+RangeMultiElement = __decorate([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
+//#endregion
+//#region src/tabs/tab-list-item.ts
+let TabListItemElement = class TabListItemElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.closeable = false;
+		this.iconName = void 0;
+		this.description = void 0;
+		this.commandActive = void 0;
+		this.registry = void 0;
+		this._compact = false;
 	}
-	#search;
-	#selectionAnchor;
-	#customWrappers;
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
-		this.addEventListener(`pointerover`, this._onPointerOver);
-		this.addEventListener(`pointerleave`, this._onPointerLeave);
-		this.addEventListener(`keydown`, this._onKeyDown);
-		this.addEventListener(`click`, this._onClick);
-		this.addEventListener(`dblclick`, this._onDblClick);
+		this._resizeObserver = new ResizeObserver(([entry]) => {
+			this._compact = entry.contentRect.width < 64;
+		});
+		this._resizeObserver.observe(this);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener(`pointerover`, this._onPointerOver);
-		this.removeEventListener(`pointerleave`, this._onPointerLeave);
-		this.removeEventListener(`keydown`, this._onKeyDown);
-		this.removeEventListener(`click`, this._onClick);
-		this.removeEventListener(`dblclick`, this._onDblClick);
-		this.#search?.dispose();
-		this.#search = void 0;
-	}
-	firstUpdated() {
-		this.#search = createElementIncrSearch({
-			container: this,
-			itemSelector: ITEM_SELECTOR,
-			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			highlightKey: `vertical-list-search`
-		});
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = void 0;
+		this._commandCleanup?.();
+		this._commandCleanup = void 0;
 	}
 	updated(changed) {
 		super.updated(changed);
-		if (changed.has(`interactionMode`)) {
-			this.#selectionAnchor = void 0;
-			const previousSelected = this._selectedItems;
-			const savedWrappers = changed.get(`interactionMode`) === `checked` ? new Map(this.#customWrappers) : null;
-			this._syncCheckboxes();
-			if (previousSelected.size > 0) {
-				let remapped;
-				if (savedWrappers && savedWrappers.size > 0) remapped = new Set([...previousSelected].map((el) => savedWrappers.get(el) ?? el));
-				else if (this.#customWrappers.size > 0) {
-					const innerToWrapper = new Map([...this.#customWrappers].map(([w, i]) => [i, w]));
-					remapped = new Set([...previousSelected].map((el) => innerToWrapper.get(el) ?? el));
-				} else remapped = new Set(previousSelected);
-				this._selectedItems = remapped;
-			}
-			this._syncItemStates();
+		this._syncTooltipAttrs();
+		if (changed.has(`registry`) || changed.has(`commandActive`)) this._syncCommandListener();
+	}
+	_syncTooltipAttrs() {
+		if (this.description) {
+			this.setAttribute(`data-tooltip`, this.description);
+			this.setAttribute(`data-tooltip-anchor`, `top`);
+		} else {
+			this.removeAttribute(`data-tooltip`);
+			this.removeAttribute(`data-tooltip-anchor`);
 		}
 	}
-	/** The most recently selected item, or `undefined` if nothing is selected. */
-	get selectedItem() {
-		return [...this._selectedItems].at(-1);
+	_syncCommandListener() {
+		this._commandCleanup?.();
+		this._commandCleanup = void 0;
+		if (this.registry && this.commandActive) this._commandCleanup = this.registry.addOnInvokeHandler((id) => {
+			if (id === this.commandActive) this.click();
+		});
 	}
-	/** The full current selection set (read-only). */
-	get selectedItems() {
-		return this._selectedItems;
+	render() {
+		const showLabel = !this._compact || !this.iconName;
+		return html`
+      <div>
+        ${this.iconName ? html`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : nothing}
+        ${showLabel ? html`<span class="label"><slot></slot></span>` : nothing}
+        <div class="actions">
+          <div class="toolbar"><slot name="toolbar"></slot></div>
+          ${this.closeable ? html`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close tab"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : nothing}
+        </div>
+      </div>
+    `;
 	}
-	addItem(item) {
-		if (typeof item === `string`) {
-			const li = document.createElement(`li`);
-			li.textContent = item;
-			this.appendChild(li);
-		} else this.appendChild(item);
-		if (this.interactionMode === `checked`) this._syncCheckboxes();
+	_onCloseClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+		this.remove();
 	}
-	removeItem(item) {
-		item.remove();
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			css`
+      :host {
+        --selected-colour: var(--accent);
+        --selected-border-width: 1px;
+        --padding: var(--space-m);
+        display: inline-flex;
+        min-width: 0;
+        user-select: none;
+        box-sizing: border-box;
+      }
+
+      :host > div {
+        display: flex;
+        align-items: center;
+        gap: var(--space-s, 4px);
+        padding: var(--padding) calc(2 * var(--padding));
+        min-width: 0;
+        width: 100%;
+        font-weight: 500;
+        border: var(--selected-border-width) solid transparent;
+      }
+
+      :host([selected]) > div {
+        color: var(--selected-colour);
+        border-top-color: var(--indicator-color-top, transparent);
+        border-bottom-color: var(--indicator-color-bottom, transparent);
+        border-left-color: var(--indicator-color-left, transparent);
+        border-right-color: var(--indicator-color-right, transparent);
+      }
+
+      .label {
+        overflow: var(--allow-overflow, hidden);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+
+      ixfx-icon {
+        flex-shrink: 0;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .toolbar {
+        display: none;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+
+      :host([selected]) .toolbar {
+        display: flex;
+      }
+
+      slot[name="toolbar"] {
+        display: contents;
+      }
+
+      .close-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: var(--space-xs);
+        cursor: pointer;
+        color: inherit;
+        border-radius: var(--radius-s);
+        opacity: var(--prominence-idle-opacity);
+        transition: opacity var(--transition), background var(--transition);
+      }
+
+      .close-btn:hover {
+        background: var(--surface-5);
+        opacity: var(--prominence-tickled-opacity);
+      }
+
+      .close-btn:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
+
+      :host([selected]) .close-btn,
+      :host(:hover) .close-btn {
+        opacity: var(--prominence-tickled-opacity);
+      }
+    `
+		];
 	}
-	clearItems() {
-		this.#customWrappers.clear();
-		this.replaceChildren();
-		this.#selectionAnchor = void 0;
-		this._selectedItems = /* @__PURE__ */ new Set();
-		this._syncItemStates();
+};
+__decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], TabListItemElement.prototype, "iconName", void 0);
+__decorate([property({ type: String })], TabListItemElement.prototype, "description", void 0);
+__decorate([property({
+	type: String,
+	attribute: `command-active`
+})], TabListItemElement.prototype, "commandActive", void 0);
+__decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
+__decorate([state()], TabListItemElement.prototype, "_compact", void 0);
+TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
+//#endregion
+//#region src/tabs/tab-panel.ts
+let TabPanelElement = class TabPanelElement extends LitElement {
+	render() {
+		return html`<slot></slot>`;
 	}
-	select(item) {
-		this._replaceSelection(item);
+	static {
+		this.styles = [themeFallbacks, css`
+  :host {
+    display:none;
+    height:100%;
+    width:100%;
+  }
+
+  :host([selected]) {
+    background: var(--surface-3);
+    display:block;
+  }
+  `];
 	}
-	selectMany(items) {
-		if (this.selectionMode !== `multiple`) throw new Error(`selectMany requires selectionMode="multiple" (current: "${this.selectionMode}")`);
-		const previous = this._selectedItems;
-		const next = new Set(items);
-		if (next.size === 0) return;
-		this._selectedItems = next;
-		this.#selectionAnchor = [...next].at(-1);
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: next,
-			previous
-		});
+};
+TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
+//#endregion
+//#region src/tabs/tab-panels.ts
+let TabPanelsElement = class TabPanelsElement extends LitElement {
+	render() {
+		return html`<slot></slot>`;
 	}
-	deselect(item) {
-		if (!this._selectedItems.has(item)) return;
-		const previous = this._selectedItems;
-		const next = new Set(this._selectedItems);
-		next.delete(item);
-		this._selectedItems = next;
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: next,
-			previous
-		});
+	getSelectedElement() {
+		for (const el of this._listItems) if (this.#isSelected(el)) return el;
 	}
-	clearSelection() {
-		this._clearSelection();
+	#isSelected(el) {
+		return el.hasAttribute(`selected`);
 	}
-	selectAll() {
-		if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) this._selectAll();
+	#unselect(el) {
+		el.removeAttribute(`selected`);
+		if (this.onUnselectedPanel) this.onUnselectedPanel(el.id, el);
 	}
-	_replaceSelection(item) {
-		if (this.selectionMode === `none`) return;
-		const previous = this._selectedItems;
-		const next = new Set([item]);
-		this._selectedItems = next;
-		this.#selectionAnchor = item;
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: next,
-			previous
-		});
+	#select(el) {
+		if (this.onSelectingPanel) this.onSelectingPanel(el.id, el);
+		el.setAttribute(`selected`, ``);
+		if (this.onSelectedPanel) this.onSelectedPanel(el.id, el);
 	}
-	_toggleItem(item) {
-		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
-		if (this.selectionMode === `none` && this.interactionMode !== `checked`) return;
-		const previous = this._selectedItems;
-		const next = new Set(this._selectedItems);
-		if (next.has(item)) next.delete(item);
-		else {
-			if (!effectiveMultiple) next.clear();
-			next.add(item);
-		}
-		this._selectedItems = next;
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: next,
-			previous
-		});
+	syncWithList(el) {
+		const doSync = () => {
+			const t = el.getSelectedElement();
+			if (!t) return;
+			const forEl = t.getAttribute(`for`);
+			if (forEl) this.selectPanel(forEl);
+		};
+		Promise.all([el.updateComplete, this.updateComplete]).then(doSync);
 	}
-	_rangeSelectTo(item) {
-		if (this.selectionMode === `none`) return;
-		if (!this.#selectionAnchor) {
-			this._replaceSelection(item);
-			return;
+	selectPanel(id) {
+		const current = this.getSelectedElement();
+		if (current) {
+			if (current.id === id) return;
+			this.#unselect(current);
 		}
-		const visible = this._getVisibleItems();
-		const anchorIdx = visible.indexOf(this.#selectionAnchor);
-		const targetIdx = visible.indexOf(item);
-		if (anchorIdx === -1 || targetIdx === -1) {
-			this._replaceSelection(item);
-			return;
+		let found = false;
+		for (const el of this._listItems) if (el.id === id) {
+			this.#select(el);
+			found = true;
 		}
-		const start = Math.min(anchorIdx, targetIdx);
-		const end = Math.max(anchorIdx, targetIdx);
-		const previous = this._selectedItems;
-		const next = new Set(visible.slice(start, end + 1));
-		this._selectedItems = next;
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: next,
-			previous
-		});
-	}
-	_clearSelection() {
-		if (this._selectedItems.size === 0) return;
-		const previous = this._selectedItems;
-		this._selectedItems = /* @__PURE__ */ new Set();
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: /* @__PURE__ */ new Set(),
-			previous
-		});
-	}
-	_selectAll() {
-		const visible = this._getVisibleItems();
-		if (visible.length === 0) return;
-		const previous = this._selectedItems;
-		const next = new Set(visible);
-		this._selectedItems = next;
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: next,
-			previous
-		});
+		return found;
 	}
-	_handleClickSelection(item, e) {
-		const mode = this.interactionMode;
-		if (mode === `manual`) return;
-		if (this.selectionMode === `none` && mode !== `checked`) return;
-		switch (mode) {
-			case `implicit`:
-				this._replaceSelection(item);
-				break;
-			case `standard`:
-			case `vscode`:
-				if (e.ctrlKey || e.metaKey) {
-					if (this.selectionMode === `multiple` || mode === `vscode`) this._toggleItem(item);
-				} else if (e.shiftKey && (this.selectionMode === `multiple` || mode === `vscode`)) this._rangeSelectTo(item);
-				else this._replaceSelection(item);
-				break;
-			case `checked`: break;
-		}
+	static {
+		this.styles = css`
+  :host {
+    display: block;
+  }
+  
+  `;
 	}
-	_handleSpaceKey(item) {
-		const mode = this.interactionMode;
-		if (mode === `manual`) return;
-		if (mode === `implicit`) this._replaceSelection(item);
-		else this._toggleItem(item);
+};
+__decorate([queryAssignedElements()], TabPanelsElement.prototype, "_listItems", void 0);
+TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
+//#endregion
+//#region src/transitory-label/transitory-label.ts
+let TransitoryLabelElement = class TransitoryLabelElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.text = ``;
+		this.effect = `fade`;
+		this.duration = 300;
+		this.easing = `ease`;
+		this._currentText = ``;
+		this._outgoingText = ``;
+		this._transitionId = 0;
+		this._queue = [];
+		this.#onOutgoingEnd = () => {
+			this._onTransitionEnd();
+		};
+		this.#onLastCharOut = () => {
+			this._onTransitionEnd();
+		};
 	}
-	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
-			if (el.hidden) return false;
-			if (this.filterPredicate && !this.filterPredicate(el)) return false;
-			return true;
-		});
+	setText(msg, effect) {
+		this._pendingEffect = effect;
+		this.text = msg;
 	}
-	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
-			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
-			el.toggleAttribute(`data-selected`, this._selectedItems.has(el));
-			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, this._selectedItems.has(el));
-			else el.removeAttribute(`data-checked`);
+	updated(changed) {
+		if (changed.has(`text`) && this.text !== this._currentText) {
+			const effect = this._pendingEffect ?? this.effect;
+			this._pendingEffect = void 0;
+			if (this._activeEffect !== void 0) this._queue.push({
+				text: this.text,
+				effect
+			});
+			else this._startTransition(this.text, effect);
 		}
-		this.dataset.inputMode = this.tickled.inputMode;
-		this._syncCheckboxes();
 	}
-	_syncCheckboxes() {
-		const inCheckedMode = this.interactionMode === `checked`;
-		if (inCheckedMode) for (const inner of Array.from(this.children)) {
-			if (!inner.hasAttribute(`data-list-item`)) continue;
-			if (inner.parentElement !== this) continue;
-			const wrapper = document.createElement(`li`);
-			wrapper.className = `ixfx-custom-row`;
-			const key = inner.getAttribute(`data-key`);
-			const label = inner.getAttribute(`data-search-label`);
-			if (key !== null) wrapper.setAttribute(`data-key`, key);
-			if (label !== null) wrapper.setAttribute(`data-search-label`, label);
-			inner.removeAttribute(`data-list-item`);
-			this.insertBefore(wrapper, inner);
-			wrapper.appendChild(inner);
-			this.#customWrappers.set(wrapper, inner);
-		}
-		else {
-			for (const [wrapper, inner] of this.#customWrappers) {
-				if (wrapper.parentElement !== this) continue;
-				inner.setAttribute(`data-list-item`, ``);
-				this.insertBefore(inner, wrapper);
-				wrapper.remove();
-			}
-			this.#customWrappers.clear();
-		}
-		for (const el of this.querySelectorAll(`li`)) {
-			let cb = el.querySelector(`input.ixfx-list-checkbox`);
-			if (inCheckedMode) {
-				if (!cb) {
-					cb = document.createElement(`input`);
-					cb.type = `checkbox`;
-					cb.className = `ixfx-list-checkbox`;
-					cb.style.cssText = `flex-shrink:0;margin:0 6px 0 0;cursor:pointer;accent-color:var(--accent,#60a5fa);pointer-events:auto`;
-					cb.tabIndex = -1;
-					cb.addEventListener(`click`, (e) => {
-						e.stopPropagation();
-						this._toggleItem(el);
-					});
-					el.prepend(cb);
-				}
-				cb.checked = this._selectedItems.has(el);
-			} else if (cb) cb.remove();
+	_startTransition(newText, effect) {
+		const prevText = this._currentText;
+		this._currentText = newText;
+		this._outgoingText = prevText;
+		if (prevText !== ``) {
+			this._transitionId++;
+			this._activeEffect = effect;
 		}
 	}
-	_findListItem(path) {
-		for (const target of path) {
-			if (!(target instanceof Element)) continue;
-			if (target === this) break;
-			if (target.parentElement === this && target.matches(ITEM_SELECTOR)) return target;
+	_onTransitionEnd() {
+		this._outgoingText = ``;
+		this._activeEffect = void 0;
+		if (this._queue.length > 0) {
+			const next = this._queue.shift();
+			this._startTransition(next.text, next.effect);
 		}
 	}
-	_dispatch(name, detail) {
-		this.dispatchEvent(new CustomEvent(name, {
-			detail,
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_openSearch() {
-		this._searchVisible = true;
-		this.updateComplete.then(() => this._searchInputEl?.focus());
-	}
-	_closeSearch() {
-		this._searchVisible = false;
-		this._searchQuery = ``;
-		this.#search?.clearQuery();
-		this.focus();
+	#onOutgoingEnd;
+	#onLastCharOut;
+	#renderCharSwap() {
+		const charDuration = Math.round(this.duration * .3);
+		const charStagger = Math.round(this.duration * .1);
+		const currentChars = this._currentText.split(``);
+		const outgoingChars = this._outgoingText.split(``);
+		const lastIdx = outgoingChars.length - 1;
+		const charStyle = (i) => `animation-duration:${charDuration}ms;animation-delay:${i * charStagger}ms;animation-timing-function:${this.easing}`;
+		return html`
+      ${keyed(`cc${this._transitionId}`, html`
+        <span class="layer current char-swap">
+          ${currentChars.map((ch, i) => html`<span class="char in" style=${charStyle(i)}>${ch}</span>`)}
+        </span>
+      `)}
+      ${this._outgoingText ? keyed(this._transitionId, html`
+          <span class="layer outgoing char-swap">
+            ${outgoingChars.map((ch, i) => html`<span
+                class="char out"
+                style=${charStyle(i)}
+                @animationend=${i === lastIdx ? this.#onLastCharOut : void 0}
+              >${ch}</span>`)}
+          </span>
+        `) : nothing}
+    `;
 	}
-	_activateItem(item) {
-		if (this.interactionMode !== `manual`) this._replaceSelection(item);
-		this._dispatch(`list-activate`, { item });
+	render() {
+		if (this._activeEffect === `character-swap`) return html`<span class="container">${this.#renderCharSwap()}</span>`;
+		const effect = this._activeEffect ?? ``;
+		const durStyle = this._activeEffect ? `animation-duration:${this.duration}ms;animation-timing-function:${this.easing}` : ``;
+		return html`
+      <span class="container">
+        ${this._outgoingText ? keyed(this._transitionId, html`
+            <span class="layer outgoing ${effect}" style=${durStyle} @animationend=${this.#onOutgoingEnd}>
+              ${this._outgoingText}
+            </span>
+          `) : nothing}
+        ${keyed(`c${this._transitionId}`, html`
+          <span class="layer current ${effect}" style=${durStyle}>
+            ${this._currentText}
+          </span>
+        `)}
+      </span>
+    `;
 	}
 	static {
 		this.styles = css`
     :host {
-      display: block;
-      position: relative;
-      background: var(--list-bg, var(--surface-3));
-      color: var(--list-text, var(--surface-3-text));
-      border-radius: var(--list-radius, var(--radius-s));
-      border: 1px solid var(--list-border, var(--border));
-      width: 100%;
-      height: 100%;
+      display: inline-block;
+      --transitory-label-easing: ease;
+    }
+
+    .container {
+      display: inline-grid;
       overflow: hidden;
-      box-sizing: border-box;
-      outline: none;
     }
 
-    :host(:focus-visible) {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
+    .layer {
+      grid-area: 1 / 1;
+      white-space: nowrap;
     }
 
-    .container {
-      position: relative;
-      width: 100%;
-      height: 100%;
+    .layer.outgoing {
+      pointer-events: none;
     }
 
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-      box-sizing: border-box;
+    /* slide-right */
+    .layer.current.slide-right {
+      transform: translateX(-100%);
+      animation: tl-slide-in-left var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-right {
+      animation: tl-slide-out-right var(--transitory-label-easing) forwards;
     }
 
-    ::slotted([hidden]) {
-      display: none !important;
+    @keyframes tl-slide-in-left {
+      from { transform: translateX(-100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-right {
+      from { transform: translateX(0); }
+      to   { transform: translateX(100%); }
     }
 
-    ::slotted(li) {
-      display: flex;
-      align-items: center;
-      padding: var(--list-item-padding, 4px var(--space-m, 8px));
-      min-height: var(--list-item-height, 28px);
-      cursor: pointer;
-      user-select: none;
-      transition: background var(--transition, 0.1s ease-out),
-                  outline-color var(--transition, 0.1s ease-out);
-      box-sizing: border-box;
-      outline: 1px solid transparent;
+    /* slide-left */
+    .layer.current.slide-left {
+      transform: translateX(100%);
+      animation: tl-slide-in-right var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-left {
+      animation: tl-slide-out-left var(--transitory-label-easing) forwards;
     }
 
-    /* Custom shadow-DOM components handle their own internal layout/padding */
-    ::slotted([data-list-item]) {
-      display: block;
-      cursor: pointer;
-      user-select: none;
-      transition: background var(--transition, 0.1s ease-out),
-                  outline-color var(--transition, 0.1s ease-out);
-      outline: 1px solid transparent;
+    @keyframes tl-slide-in-right {
+      from { transform: translateX(100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-left {
+      from { transform: translateX(0); }
+      to   { transform: translateX(-100%); }
     }
 
-    ::slotted([data-tickled]) {
-      background: var(--item-bg-tickled, rgba(0, 0, 0, 0.06));
-      outline: 1px solid var(--accent, #60a5fa);
+    /* slide-up */
+    .layer.current.slide-up {
+      transform: translateY(100%);
+      animation: tl-slide-in-bottom var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-up {
+      animation: tl-slide-out-top var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-bottom {
+      from { transform: translateY(100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-top {
+      from { transform: translateY(0); }
+      to   { transform: translateY(-100%); }
     }
 
-    ::slotted([data-selected]) {
-      background: var(--item-bg-selected, rgba(25, 118, 210, 1));
-      color: var(--item-text-selected, #fff);
-      outline: 1px solid transparent;
+    /* slide-down */
+    .layer.current.slide-down {
+      transform: translateY(-100%);
+      animation: tl-slide-in-top var(--transitory-label-easing) forwards;
     }
-
-    ::slotted([data-selected][data-tickled]) {
-      background: var(--item-bg-selected-tickled, rgba(21, 101, 192, 1));
-      outline: 2px dashed var(--surface-3, #1e1e1e);
-      outline-offset: -2px;
+    .layer.outgoing.slide-down {
+      animation: tl-slide-out-bottom var(--transitory-label-easing) forwards;
     }
 
-    /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
-    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
-      background: transparent;
-      color: inherit;
-      outline: 1px solid transparent;
+    @keyframes tl-slide-in-top {
+      from { transform: translateY(-100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-bottom {
+      from { transform: translateY(0); }
+      to   { transform: translateY(100%); }
     }
 
-    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
-      background: var(--item-bg-tickled, rgba(0, 0, 0, 0.06));
-      color: inherit;
-      outline: 1px solid var(--accent, #60a5fa);
+    /* fade */
+    .layer.current.fade {
+      opacity: 0;
+      animation: tl-fade-in var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.fade {
+      animation: tl-fade-out var(--transitory-label-easing) forwards;
     }
 
-    .search-overlay {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      background: var(--surface-4, #2a2a2a);
-      border: 1px solid var(--border, #444);
-      border-radius: var(--radius-m, 4px);
-      padding: 4px 6px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    @keyframes tl-fade-in {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    @keyframes tl-fade-out {
+      from { opacity: 1; }
+      to   { opacity: 0; }
     }
 
-    .search-overlay[hidden] {
-      display: none;
+    /* character-swap */
+    .char {
+      display: inline-block;
     }
 
-    .search-input {
-      background: transparent;
-      border: none;
-      outline: none;
-      color: inherit;
-      font-size: var(--text-m, 0.875em);
-      min-width: 140px;
+    .char.in {
+      opacity: 0;
+      animation: tl-char-in var(--transitory-label-easing) forwards;
     }
 
-    .search-close {
-      background: transparent;
-      border: none;
-      color: var(--surface-muted-text, #888);
-      cursor: pointer;
-      font-size: 1.1em;
-      line-height: 1;
-      padding: 0 2px;
+    .char.out {
+      animation: tl-char-out var(--transitory-label-easing) forwards;
     }
 
-    .search-close:hover {
-      color: inherit;
+    @keyframes tl-char-in {
+      from { opacity: 0; transform: translateY(-0.3em) scale(0.8); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes tl-char-out {
+      from { opacity: 1; transform: translateY(0) scale(1); }
+      to   { opacity: 0; transform: translateY(0.3em) scale(0.8); }
     }
   `;
 	}
+};
+__decorate([property({ type: String })], TransitoryLabelElement.prototype, "text", void 0);
+__decorate([property({ type: String })], TransitoryLabelElement.prototype, "effect", void 0);
+__decorate([property({ type: Number })], TransitoryLabelElement.prototype, "duration", void 0);
+__decorate([property({ type: String })], TransitoryLabelElement.prototype, "easing", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_currentText", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_outgoingText", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_activeEffect", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_transitionId", void 0);
+TransitoryLabelElement = __decorate([safeCustomElement(`ixfx-transitory-label`)], TransitoryLabelElement);
+//#endregion
+//#region src/util/checkbox.ts
+function isCheckboxLike(el) {
+	if (!(el instanceof HTMLElement)) return false;
+	return `checked` in el;
+}
+function resolveElement(elOrQuery) {
+	if (typeof elOrQuery === `string`) {
+		const found = document.querySelector(elOrQuery);
+		if (!(found instanceof HTMLElement)) throw new Error(`Element not found or not HTMLElement: ${elOrQuery}`);
+		return found;
+	}
+	return elOrQuery;
+}
+function monitorIndeterminate(targetElOrQuery, watchedElsOrQueries) {
+	const target = resolveElement(targetElOrQuery);
+	if (!isCheckboxLike(target)) throw new Error(`Target element is not a checkbox-like element`);
+	const watched = [];
+	for (const elOrQuery of watchedElsOrQueries) {
+		const el = resolveElement(elOrQuery);
+		if (isCheckboxLike(el)) watched.push(el);
+	}
+	const updateTarget = () => {
+		if (watched.length === 0) {
+			target.checked = false;
+			target.indeterminate = false;
+			return;
+		}
+		let checkedCount = 0;
+		let uncheckedCount = 0;
+		for (const el of watched) if (el.checked) checkedCount++;
+		else uncheckedCount++;
+		if (checkedCount > 0 && uncheckedCount > 0) {
+			target.checked = false;
+			target.indeterminate = true;
+		} else if (checkedCount === watched.length) {
+			target.checked = true;
+			target.indeterminate = false;
+		} else {
+			target.checked = false;
+			target.indeterminate = false;
+		}
+	};
+	const handleChange = () => {
+		updateTarget();
+	};
+	for (const el of watched) el.addEventListener(`change`, handleChange);
+	updateTarget();
+	return () => {
+		for (const el of watched) el.removeEventListener(`change`, handleChange);
+	};
+}
+//#endregion
+//#region src/util/is-numeric.ts
+function isNumeric(str) {
+	if (typeof str === `number`) return true;
+	if (typeof str !== `string`) return false;
+	const trimmed = str.trim();
+	return trimmed !== `` && !Number.isNaN(Number(trimmed));
+}
+//#endregion
+//#region src/util/tooltip.ts
+var _TooltipElement;
+let TooltipElement = class TooltipElement extends LitElement {
+	static {
+		_TooltipElement = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.valueFormatTooltip = _TooltipElement.defaultFormatter;
+		this.orientation = `top`;
+		this.anchor = `--tooltip`;
+	}
+	static {
+		this.numberFormatter = (v) => Math.floor(v).toString();
+	}
+	static {
+		this.defaultFormatter = (v) => {
+			if (typeof v === `number`) {
+				if (Number.isInteger(v)) return v.toString();
+				return v.toFixed(2);
+			} else if (typeof v === `string`) return v;
+			else return JSON.stringify(v);
+		};
+	}
+	#renderIcon() {
+		if (!this.icon) return nothing;
+		if (this.icon.startsWith(`<svg`)) return html`<span class="tooltip-icon" style="display:inline-flex;align-items:center;margin-right:0.25em">${unsafeHTML(this.icon)}</span>`;
+		if (!getIcon(this.icon)) return nothing;
+		return html`<ixfx-icon class="tooltip-icon" style="margin-right:0.25em" name="${this.icon}"></ixfx-icon>`;
+	}
 	render() {
-		return html`
-      <div class="container">
-        <ul part="list">
-          <slot></slot>
-        </ul>
-        <div
-          class="search-overlay"
-          part="search-overlay"
-          ?hidden=${!this._searchVisible}
-        >
-          <input
-            type="text"
-            class="search-input"
-            placeholder="Search…"
-            .value=${this._searchQuery}
-            @input=${this._onSearchInput}
-            @keydown=${this._onSearchKeydown}
-          />
-          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
-        </div>
-      </div>
-    `;
+		const classes = {
+			"tooltip": true,
+			"tooltip-orientation-top": this.orientation === `top`,
+			"tooltip-orientation-bottom": this.orientation === `bottom`,
+			"tooltip-orientation-right": this.orientation === `right`,
+			"tooltip-orientation-left": this.orientation === `left`,
+			"tooltip-type-text": true,
+			"tooltip-type-number": false,
+			"tooltip-style-bubble": true
+		};
+		let value = ``;
+		switch (typeof this.value) {
+			case `number`:
+				classes[`tooltip-type-number`] = true;
+				value = this.valueFormatTooltip(this.value);
+				break;
+			case `string`:
+				if (isNumeric(this.value)) {
+					classes[`tooltip-type-number`] = true;
+					value = this.valueFormatTooltip(Number.parseFloat(this.value));
+				} else value = this.value;
+				break;
+			default: value = JSON.stringify(this.value);
+		}
+		return html`<output style="--anchor-id: ${this.anchor}" class=${classMap(classes)}>${this.#renderIcon()}${value}</output>`;
+	}
+	createRenderRoot() {
+		return this;
 	}
 };
-__decorate([property({
-	type: String,
-	attribute: `selection-mode`
-})], VerticalListElement.prototype, "selectionMode", void 0);
-__decorate([property({
-	type: String,
-	attribute: `interaction-mode`
-})], VerticalListElement.prototype, "interactionMode", void 0);
-__decorate([property({ attribute: false })], VerticalListElement.prototype, "filterPredicate", void 0);
-__decorate([state()], VerticalListElement.prototype, "_selectedItems", void 0);
-__decorate([state()], VerticalListElement.prototype, "_searchVisible", void 0);
-__decorate([state()], VerticalListElement.prototype, "_searchQuery", void 0);
-__decorate([query(`.search-input`)], VerticalListElement.prototype, "_searchInputEl", void 0);
-VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
+__decorate([property({ type: String })], TooltipElement.prototype, "orientation", void 0);
+__decorate([property({ type: String })], TooltipElement.prototype, "anchor", void 0);
+__decorate([property()], TooltipElement.prototype, "value", void 0);
+__decorate([property({ type: String })], TooltipElement.prototype, "icon", void 0);
+TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
 //#endregion
 //#region src/index.ts
 function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataDisplayComponent, EditableLabel, EditableNumber, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map