@ixfx/components 0.5.20 → 0.6.1

package/dist/index.js

@@ -1,981 +1,183 @@
 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-Bgo_Lpw-.js";
 import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.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-CK14NUcE.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { c as iconBus, i as ICON_CLOSE, l as registerIcon, n as ICON_CHECK, o as getIcon, r as ICON_CHEVRON_DOWN, s as hasIcon, t as ICON_CARET_RIGHT, u as svgToDataUri } from "./defaults-BCiDhZbF.js";
+import { t as IxfxIconElement } from "./icons-Bm2ByQ3s.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-CeERfijK.js";
-import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-BkWCPJFL.js";
-import "./icons.js";
+import { t as DataController } from "./data-controller-DOlmqNKb.js";
+import { n as createIncrSearch, r as createFuzzySearch, t as createElementIncrSearch } from "./element-search-Y8SRfPGM.js";
+import { n as createAcCompletionProvider, t as IncrSearchTreeController } from "./incr-search-vCzuao-2.js";
+import { AcTokenElement } from "./ac-token.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { n as buttonStyles, t as ButtonElement } from "./button-pcDaCemT.js";
-import "./interaction-_Y2qO3QI.js";
-import "./menu-item-yHSPV8nS.js";
+import { n as buttonStyles, t as ButtonElement } from "./button-Bn0BuLpO.js";
+import { t as menu_exports } from "./menu-DIfU70AA.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-D43Q96r0.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-0stHB90J.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-CqPhQRHo.js";
-import { n as scrollFadeStyles, t as CrumbNavigationElement } from "./crumb-navigation-Pif-kupA.js";
+import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BO6BXI2b.js";
+import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
+import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
+import { DataGridElement } from "./data-grid.js";
 import { EditableLabel } from "./editable-label.js";
 import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
-import { t as WheelNudgeMixin } from "./wheel-nudge-Dhzi5nHc.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
+import { t as FormElement } from "./form-CsXJX15p.js";
 import { PanelElement } from "./panel.js";
-import { t as IxfxHexEditorElement } from "./hex-editor-B-UI4OZu.js";
-import { t as RadialInputElement } from "./radial-input-C4f-2Bya.js";
+import { GroupedItemListerElement } from "./grouped-item-lister.js";
+import { VerticalListElement } from "./vertical-list.js";
+import { t as IxfxHexEditorElement } from "./hex-editor-Bk6rxhfg.js";
+import { t as RadialInputElement } from "./radial-input-Dk8Wydp5.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LedElement } from "./led.js";
-import { t as menu_exports } from "./menu-BiFarLUA.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
-import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-BpA2eJq6.js";
+import { NotificationPillElement } from "./notifier.js";
+import { a as PlotDataSeries, c as parseColourScaleAttr, i as PlotMultiAxis, l as readBaseColour, n as PlotSingleAxis, o as applyAgeModification, r as PlotHistogram, s as computeColour, t as PlotXyAxis } from "./xy-axis-B6yMjckW.js";
 import { PolarPad } from "./polar-pad.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";
-import { t as SliderInputElement } from "./slider-input-SW7e2Ac2.js";
+import { SelectHorizElement } from "./select-horiz.js";
+import { t as SliderInputElement } from "./slider-input-CT4gcF-o.js";
+import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
 import { SplitLayoutElement } from "./split-layout.js";
 import { SwipeElement } from "./swipe.js";
-import { t as TabListElement } from "./tab-list-CR0v53KJ.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-CdSI003L.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-B2fgDL4U.js";
+import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
-import { LitElement, css, html, nothing, render } from "lit";
-import { eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Trees } from "@ixfx/collections";
 import { clamper, scaler } from "@ixfx/numbers";
-import { repeat } from "lit/directives/repeat.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);
-		});
+import { classMap } from "lit/directives/class-map.js";
+//#region src/button/radio-group.ts
+let RadioGroup = class RadioGroup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = ``;
+		this.orientation = `horizontal`;
+		this.items = [];
+		this.name = ``;
+		this.mode = `compact`;
+		this.checked = false;
+		this.valueOff = ``;
+		this.iconName = ``;
+		this.iconNameOff = ``;
+		this.hideLabels = false;
+		this._computedItems = [];
+		this._icons = /* @__PURE__ */ new Map();
 	}
-	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();
-		}
+	get _isSingleToggle() {
+		return this._computedItems.length === 0 && Boolean(this.textContent?.trim());
 	}
-	#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;
+	get _singleToggleIconName() {
+		if (!this.iconName && !this.iconNameOff) return null;
+		return this.checked ? this.iconName : this.iconNameOff || this.iconName;
 	}
-	#handleError(err) {
-		this.#error = err;
-		this.#loading = false;
-		this.#opts.onError?.(err);
-		this.#host.requestUpdate();
+	firstUpdated() {
+		this.#updateComputedItems();
 	}
-};
-//#endregion
-//#region src/ac-token/ac-token.ts
-const DEFAULT_TOKENIZER = (text) => text.split(/[\s,;]+/);
-function makeLruCache(maxSize) {
-	const map = /* @__PURE__ */ new Map();
-	return {
-		get: (k) => map.get(k),
-		set: (k, v) => {
-			if (map.has(k)) map.delete(k);
-			map.set(k, v);
-			if (map.size > maxSize) map.delete(map.keys().next().value);
-		},
-		has: (k) => map.has(k),
-		clear: () => map.clear()
-	};
-}
-let AcTokenElement = class AcTokenElement extends LitElement {
-	#data;
-	#cache;
-	#debounceTimer;
-	#staticProvider;
-	#lastSuggestions;
-	constructor() {
-		super();
-		this.placeholder = ``;
-		this.cacheSize = 20;
-		this.debounceMs = 150;
-		this.strict = false;
-		this.allowDuplicates = false;
-		this._tokens = [];
-		this._draft = ``;
-		this._isOpen = false;
-		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();
-		};
-		this.#onFocus = () => {
-			this._selectedTokenIndex = void 0;
-			this.#scheduleSuggestionFetch(this._draft);
-		};
-		this.#onBlur = () => {
-			setTimeout(() => {
-				this._isOpen = false;
-				this._tickled.clearTickled();
-				this._selectedTokenIndex = void 0;
-			}, 120);
-		};
-		this.#onInput = (e) => {
-			const value = e.target.value;
-			this._selectedTokenIndex = void 0;
-			const parts = (this.tokenizer ?? DEFAULT_TOKENIZER)(value);
-			if (parts.length > 1) {
-				for (let i = 0; i < parts.length - 1; i++) {
-					const label = parts[i].trim();
-					if (label) this.#addToken({ label });
-				}
-				this._draft = parts[parts.length - 1] ?? ``;
-			} else this._draft = value;
-			this.#scheduleSuggestionFetch(this._draft);
-		};
-		this.#onKeyDown = (e) => {
-			const input = e.target;
-			if ((e.metaKey || e.ctrlKey) && e.key === `a`) {
-				e.preventDefault();
-				const parts = [...this._tokens.map((t) => t.label), this._draft.trim()].filter(Boolean);
-				navigator.clipboard.writeText(parts.join(` `)).catch(() => {});
-				return;
-			}
-			if (this._selectedTokenIndex !== void 0 && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
-				e.preventDefault();
-				this.#startEditingSelectedToken(e.key);
-				return;
-			}
-			this.#handleNavigationKey(e, input);
-		};
-		this.#onPaste = (e) => {
-			e.preventDefault();
-			const text = e.clipboardData?.getData(`text/plain`) ?? ``;
-			if (!text) return;
-			const parts = (this.tokenizer ?? DEFAULT_TOKENIZER)(this._draft + text).filter(Boolean);
-			if (parts.length === 0) return;
-			if (parts.length === 1) this._draft = parts[0];
-			else {
-				for (let i = 0; i < parts.length - 1; i++) {
-					const label = parts[i].trim();
-					if (label) this.#addToken({ label });
-				}
-				this._draft = parts[parts.length - 1] ?? ``;
+	updated(changedProperties) {
+		if (changedProperties.has(`checked`)) {
+			const input = this.shadowRoot?.querySelector(`.radio-toggle-input`);
+			if (input && input.checked !== this.checked) {
+				input.checked = this.checked;
+				const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
+				this.dispatchEvent(new CustomEvent(`change`, {
+					detail: {
+						checked: this.checked,
+						value: newValue
+					},
+					bubbles: true,
+					composed: true
+				}));
 			}
-			this.updateComplete.then(() => {
-				this.shadowRoot?.querySelector(`input.draft`)?.setSelectionRange(this._draft.length, this._draft.length);
-			});
-			this.#scheduleSuggestionFetch(this._draft);
-		};
-		this.#onSuggestionPointerDown = (e, item) => {
-			e.preventDefault();
-			this.#selectSuggestion(item);
-		};
-		this.#onChipPointerDown = (e, index) => {
-			if (e.button !== 0) return;
-			e.preventDefault();
-			const el = e.currentTarget;
-			const startY = e.clientY;
-			let dragged = false;
-			el.setPointerCapture(e.pointerId);
-			const cleanup = () => {
-				el.removeEventListener(`pointermove`, onMove);
-				el.removeEventListener(`pointerup`, onUp);
-			};
-			const onMove = (me) => {
-				if (Math.abs(me.clientY - startY) > 28) {
-					dragged = true;
-					el.releasePointerCapture(me.pointerId);
-					cleanup();
-					this.#removeToken(index);
-					this.shadowRoot?.querySelector(`input.draft`)?.focus();
-				}
-			};
-			const onUp = () => {
-				cleanup();
-				if (!dragged) {
-					this._selectedTokenIndex = this._selectedTokenIndex === index ? void 0 : index;
-					this.shadowRoot?.querySelector(`input.draft`)?.focus();
-				}
-			};
-			el.addEventListener(`pointermove`, onMove);
-			el.addEventListener(`pointerup`, onUp);
-		};
-		this.#cache = makeLruCache(this.cacheSize);
-	}
-	get tokens() {
-		return this._tokens;
-	}
-	set tokens(value) {
-		this._tokens = [...value];
-		this.#emitChange();
-	}
-	/**
-	* Set the token list programmatically. Unlike the `tokens` property setter,
-	* this does not dispatch `ac-token-change` — use it for initialisation or any
-	* other programmatic update that should not re-enter a parent's own
-	* `ac-token-change` handler.
-	*/
-	setTokens(value) {
-		this._tokens = [...value];
-	}
-	/** All committed token labels joined with commas. */
-	get value() {
-		return this._tokens.map((t) => t.label).join(`, `);
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.#buildStaticProvider();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		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;
-			if (this.#data.items.length > 0) this._tickled.setTickled(0);
-			else this._tickled.clearTickled();
-		}
-	}
-	#buildStaticProvider() {
-		const raw = this.getAttribute(`data-tokens`);
-		if (!raw || this.completionProvider) {
-			this.#staticProvider = void 0;
-			return;
 		}
-		const items = raw.trim().split(/[\s,;]+/).filter(Boolean).map((label) => ({ label }));
-		this.#staticProvider = createAcCompletionProvider(items);
-	}
-	#onWrapperClick;
-	#onFocus;
-	#onBlur;
-	#onInput;
-	#onKeyDown;
-	#handleNavigationKey(e, input) {
-		switch (e.key) {
-			case `ArrowLeft`:
-				if (input.selectionStart === 0 && input.selectionEnd === 0) {
-					e.preventDefault();
-					if (this._selectedTokenIndex === void 0) {
-						if (this._tokens.length > 0) this._selectedTokenIndex = this._tokens.length - 1;
-					} else if (this._selectedTokenIndex > 0) this._selectedTokenIndex--;
-				}
-				break;
-			case `ArrowRight`:
-				if (this._selectedTokenIndex !== void 0) {
-					e.preventDefault();
-					if (this._selectedTokenIndex < this._tokens.length - 1) this._selectedTokenIndex++;
-					else this._selectedTokenIndex = void 0;
-				}
-				break;
-			case `Backspace`:
-				if (input.selectionStart === 0 && input.selectionEnd === 0) {
-					e.preventDefault();
-					if (this._selectedTokenIndex !== void 0) this.#removeToken(this._selectedTokenIndex);
-					else if (this._tokens.length > 0) this.#removeToken(this._tokens.length - 1);
-				}
-				break;
-			case `Enter`: {
-				const tickledIdx = this._tickled.tickledId;
-				if (this._isOpen && tickledIdx !== void 0 && this.#data.items[tickledIdx]) {
-					e.preventDefault();
-					this.#selectSuggestion(this.#data.items[tickledIdx]);
-				} else if (!this.strict && this._draft.trim()) {
-					e.preventDefault();
-					this.#addToken({ label: this._draft.trim() });
-					this._draft = ``;
-					this.#closePopup();
-				}
-				break;
+		if (changedProperties.has(`value`) && !this._isSingleToggle) {
+			const inputs = this.shadowRoot?.querySelectorAll(`.radio-input`);
+			if (inputs) {
+				for (const input of inputs) if (input.checked !== (input.value === this.value)) input.checked = input.value === this.value;
 			}
-			case `ArrowDown`:
-				if (!this._isOpen) return;
-				e.preventDefault();
-				this._tickled.handleKeyboardNavigation(`next`);
-				this.#scrollSuggestionIntoView();
-				break;
-			case `ArrowUp`:
-				if (!this._isOpen) return;
-				e.preventDefault();
-				this._tickled.handleKeyboardNavigation(`previous`);
-				this.#scrollSuggestionIntoView();
-				break;
-			case `Escape`:
-				e.preventDefault();
-				this.#closePopup();
-				this._selectedTokenIndex = void 0;
-				break;
 		}
 	}
-	#onPaste;
-	#onSuggestionPointerDown;
-	#onChipPointerDown;
-	#startEditingSelectedToken(key) {
-		const idx = this._selectedTokenIndex;
-		if (idx === void 0) return;
-		const token = this._tokens[idx];
-		if (!token) return;
-		const newDraft = token.label + key;
-		this.#removeToken(idx);
-		this._selectedTokenIndex = void 0;
-		this._draft = newDraft;
-		this.updateComplete.then(() => {
-			const inp = this.shadowRoot?.querySelector(`input.draft`);
-			if (!inp) return;
-			inp.setSelectionRange(inp.value.length, inp.value.length);
-		});
-		this.#scheduleSuggestionFetch(newDraft);
+	#updateComputedItems() {
+		const options = this.querySelectorAll(`option`);
+		const icons = /* @__PURE__ */ new Map();
+		if (options.length > 0) {
+			this._computedItems = Array.from(options, (el) => {
+				const tempDiv = document.createElement(`div`);
+				tempDiv.innerHTML = el.innerHTML;
+				const iconEl = tempDiv.querySelector(`svg`);
+				if (iconEl) icons.set(el.getAttribute(`value`) || ``, iconEl.outerHTML);
+				return {
+					value: el.getAttribute(`value`) || ``,
+					label: el.textContent?.trim() || ``,
+					disabled: el.hasAttribute(`disabled`),
+					iconName: el.getAttribute(`icon-name`) || void 0,
+					iconNameOff: el.getAttribute(`icon-name-off`) || void 0
+				};
+			});
+			this._icons = icons;
+		} else this._computedItems = [...this.items];
 	}
-	#addToken(item) {
-		const index = this._tokens.length;
-		this._tokens = [...this._tokens, item];
-		this.dispatchEvent(new CustomEvent(`ac-token-add`, {
+	#handleRadioChange(e) {
+		e.stopImmediatePropagation();
+		const input = e.target;
+		this.value = input.value;
+		this.dispatchEvent(new CustomEvent(`change`, {
 			detail: {
-				item,
-				index
+				checked: true,
+				value: input.value
 			},
 			bubbles: true,
 			composed: true
 		}));
-		this.#emitChange();
-	}
-	#removeToken(index) {
-		const item = this._tokens[index];
-		if (!item) return;
-		this._tokens = this._tokens.filter((_, i) => i !== index);
-		if (this._selectedTokenIndex !== void 0) {
-			if (this._selectedTokenIndex === index) this._selectedTokenIndex = void 0;
-			else if (this._selectedTokenIndex > index) this._selectedTokenIndex--;
-		}
-		this.dispatchEvent(new CustomEvent(`ac-token-remove`, {
+	}
+	#handleToggleChange(e) {
+		e.stopImmediatePropagation();
+		const input = e.target;
+		this.checked = input.checked;
+		const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
+		this.dispatchEvent(new CustomEvent(`change`, {
 			detail: {
-				item,
-				index
+				checked: this.checked,
+				value: newValue
 			},
 			bubbles: true,
 			composed: true
 		}));
-		this.#emitChange();
-	}
-	#selectSuggestion(item) {
-		this.#addToken(item);
-		this._draft = ``;
-		this.#closePopup();
-	}
-	#emitChange() {
-		this.dispatchEvent(new CustomEvent(`ac-token-change`, {
-			detail: { tokens: this._tokens },
-			bubbles: true,
-			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();
-	}
-	#cancelPending() {
-		if (this.#debounceTimer !== void 0) {
-			clearTimeout(this.#debounceTimer);
-			this.#debounceTimer = void 0;
-		}
-		this.#data.cancel();
-	}
-	#scheduleSuggestionFetch(query) {
-		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.#data.provider = cachedProvider;
-			this.#data.request(query);
-		}, this.debounceMs);
-	}
-	#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 new 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(`.item.tickled`)?.scrollIntoView({ block: `nearest` });
-		});
-	}
-	#renderChip(item, index) {
-		return html`
-      <span
-        class="token-chip ${this._selectedTokenIndex === index ? `selected` : ``}"
-        title=${item.subLabel ?? nothing}
-        @pointerdown=${(e) => this.#onChipPointerDown(e, index)}
-      >
-        ${item.icon ? html`<ixfx-icon class="chip-icon" name=${item.icon}></ixfx-icon>` : nothing}
-        <span class="chip-label">${item.label}</span>
-      </span>
-    `;
-	}
-	#renderSuggestion(item, index) {
-		const isTickled = this._tickled.isTickled(index);
-		return html`
-      <div
-        class="item ${isTickled ? `tickled` : ``}"
-        role="option"
-        id="ac-token-sugg-${index}"
-        aria-selected=${isTickled}
-        @pointerenter=${() => this._tickled.handlePointerEnter(index)}
-        @pointerdown=${(e) => this.#onSuggestionPointerDown(e, item)}
-      >
-        ${item.icon ? html`<ixfx-icon class="sugg-icon" name=${item.icon}></ixfx-icon>` : nothing}
-        <span class="sugg-label">${item.label}</span>
-        ${item.subLabel ? html`<span class="sugg-sublabel">${item.subLabel}</span>` : nothing}
-      </div>
-    `;
 	}
-	#renderPopup() {
-		const showEmpty = !this.#data.loading && this.#data.items.length === 0;
-		return html`
-      <div
-        class="popup"
-        role="listbox"
-        aria-label="Suggestions"
-        data-input-mode=${this._tickled.inputMode}
-        @pointerleave=${(e) => this._tickled.handlePointerLeave(e)}
-      >
-        ${showEmpty ? html`<div class="no-results">No matching results</div>` : this.#data.items.map((item, i) => this.#renderSuggestion(item, i))}
-      </div>
-    `;
+	#renderIcon(item) {
+		const iconName = item.value === this.value ? item.iconName || null : item.iconNameOff || item.iconName || null;
+		if (iconName) return html`<ixfx-icon class="radio-icon" name="${iconName}"></ixfx-icon>`;
+		const iconHtml = this._icons.get(item.value);
+		if (!iconHtml) return null;
+		return html`<span class="radio-icon">${unsafeHTML(iconHtml)}</span>`;
 	}
 	render() {
-		const tickledIdx = this._tickled.tickledId ?? -1;
-		const activeDescendant = tickledIdx >= 0 ? `ac-token-sugg-${tickledIdx}` : void 0;
-		const showPlaceholder = this._tokens.length === 0 ? this.placeholder || nothing : nothing;
-		return html`
-      <div class="wrapper" @click=${this.#onWrapperClick}>
-        ${this._tokens.map((t, i) => this.#renderChip(t, i))}
-        <input
-          type="text"
-          class="draft"
-          .value=${this._draft}
-          placeholder=${showPlaceholder}
-          autocomplete="off"
-          spellcheck="false"
-          role="combobox"
-          aria-autocomplete="list"
-          aria-expanded=${this._isOpen}
-          aria-activedescendant=${activeDescendant ?? nothing}
-          @input=${this.#onInput}
-          @keydown=${this.#onKeyDown}
-          @focus=${this.#onFocus}
-          @blur=${this.#onBlur}
-          @paste=${this.#onPaste}
-        >
-        ${this.#data.loading ? html`<span class="spinner" aria-hidden="true"></span>` : nothing}
-      </div>
-      ${this._isOpen ? this.#renderPopup() : nothing}
-    `;
-	}
-	static {
-		this.styles = [
-			themeFallbacks,
-			tickledStyles,
-			tickledItemStyles,
-			css`
-    :host {
-      display: block;
-      position: relative;
-      font-family: var(--font-family, system-ui, sans-serif);
-      font-size: var(--text-m, 12px);
-      color: var(--surface-2-text);
-    }
-
-    /* ---- Wrapper (looks like a text input) ---- */
-
-    .wrapper {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ac-token-chip-gap, var(--space-xs, 3px));
-      padding: var(--ac-token-input-padding, var(--space-xs, 3px) var(--space-m, 8px));
-      background: var(--ac-token-input-background, var(--surface-3, var(--surface-2)));
-      color: var(--surface-2-text);
-      border: var(--ac-token-input-border, var(--border));
-      border-radius: var(--ac-token-input-border-radius, var(--radius-m, 4px));
-      cursor: text;
-      min-height: 32px;
-      box-sizing: border-box;
-      transition: border-color var(--transition, 0.15s ease-out);
-    }
-
-    .wrapper:focus-within {
-      border-color: var(--accent);
-    }
-
-    /* ---- Token chips ---- */
-
-    .token-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-xs, 3px);
-      padding: 1px var(--space-m, 8px);
-      background: var(--ac-token-chip-background, var(--surface-4));
-      border: var(--ac-token-chip-border, var(--border));
-      border-radius: var(--ac-token-chip-border-radius, var(--radius-s, 3px));
-      user-select: none;
-      cursor: default;
-      font-size: var(--text-s, 11px);
-      white-space: nowrap;
-      touch-action: none;
-      transition:
-        background var(--transition, 0.1s ease-out),
-        border-color var(--transition, 0.1s ease-out),
-        color var(--transition, 0.1s ease-out);
-    }
-
-    .token-chip.selected {
-      background: var(--ac-token-chip-selected-background, var(--accent));
-      color: var(--ac-token-chip-selected-color, var(--accent-text, #fff));
-      border-color: var(--accent);
-    }
-
-    .chip-icon {
-      flex-shrink: 0;
-      width: 1em;
-      height: 1em;
-    }
-
-    /* ---- Draft input ---- */
-
-    input.draft {
-      flex: 1;
-      min-width: 60px;
-      border: none;
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      outline: none;
-      caret-color: var(--accent);
-      padding: 1px 0;
-      anchor-name: --ac-token-draft;
-    }
-
-    input.draft::placeholder {
-      color: var(--surface-muted-text);
-    }
-
-    /* ---- Spinner ---- */
-
-    .spinner {
-      width: 12px;
-      height: 12px;
-      border: 2px solid var(--surface-5);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: ac-token-spin 0.7s linear infinite;
-      flex-shrink: 0;
-      pointer-events: none;
-      margin-left: var(--space-xs, 3px);
-    }
-
-    @keyframes ac-token-spin {
-      to { transform: rotate(360deg); }
-    }
-
-    /* ---- Popup ---- */
-
-    .popup {
-      position: fixed;
-      position-anchor: --ac-token-draft;
-      top: anchor(bottom);
-      left: anchor(left);
-      margin-top: 2px;
-      position-try-fallbacks: --ac-token-popup-above;
-      z-index: 200;
-      background: var(--surface-3, var(--surface-2));
-      border: var(--border);
-      border-radius: var(--radius-m, 4px);
-      box-shadow: var(--shadow-l, 0 4px 24px rgba(0, 0, 0, 0.5));
-      padding: var(--space-xs, 3px) 0;
-      max-height: 260px;
-      min-width: 160px;
-      overflow-y: auto;
-      font-size: var(--ac-token-popup-font-size, var(--text-s, 11px));
-    }
-
-    @position-try --ac-token-popup-above {
-      top: auto;
-      bottom: anchor(top);
-      left: anchor(left);
-      margin-top: 0;
-      margin-bottom: 2px;
-    }
-
-    /* ---- Suggestion items ---- */
-
-    .item {
-      /* tickledItemStyles provides base; override layout for popup context */
-      display: flex;
-      padding: var(--item-padding, var(--space-xs, 3px) var(--space-l, 12px));
-      gap: var(--space-m, 8px);
-      cursor: pointer;
-      margin: 0 var(--space-xs, 3px);
-      white-space: nowrap;
-      min-height: 28px;
-      user-select: none;
-    }
-
-    .sugg-icon {
-      flex-shrink: 0;
-      width: 1em;
-      height: 1em;
-    }
-
-    .sugg-label {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .sugg-sublabel {
-      flex-shrink: 0;
-      margin-left: auto;
-      color: var(--surface-muted-text);
-      font-size: var(--text-s, 11px);
-    }
-
-    /* ---- Empty state ---- */
-
-    .no-results {
-      padding: var(--space-m, 8px) var(--space-l, 12px);
-      color: var(--surface-muted-text);
-      font-style: italic;
-    }
-  `
-		];
-	}
-};
-__decorate([property({ type: Object })], AcTokenElement.prototype, "completionProvider", void 0);
-__decorate([property({ type: Object })], AcTokenElement.prototype, "tokenizer", void 0);
-__decorate([property({ type: String })], AcTokenElement.prototype, "placeholder", void 0);
-__decorate([property({
-	type: Number,
-	attribute: `cache-size`
-})], AcTokenElement.prototype, "cacheSize", void 0);
-__decorate([property({
-	type: Number,
-	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, "_isOpen", void 0);
-AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
-//#endregion
-//#region src/button/radio-group.ts
-let RadioGroup = class RadioGroup extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.value = ``;
-		this.orientation = `horizontal`;
-		this.items = [];
-		this.name = ``;
-		this.mode = `compact`;
-		this.checked = false;
-		this.valueOff = ``;
-		this.iconName = ``;
-		this.iconNameOff = ``;
-		this.hideLabels = false;
-		this._computedItems = [];
-		this._icons = /* @__PURE__ */ new Map();
-	}
-	get _isSingleToggle() {
-		return this._computedItems.length === 0 && Boolean(this.textContent?.trim());
-	}
-	get _singleToggleIconName() {
-		if (!this.iconName && !this.iconNameOff) return null;
-		return this.checked ? this.iconName : this.iconNameOff || this.iconName;
-	}
-	firstUpdated() {
-		this.#updateComputedItems();
-	}
-	updated(changedProperties) {
-		if (changedProperties.has(`checked`)) {
-			const input = this.shadowRoot?.querySelector(`.radio-toggle-input`);
-			if (input && input.checked !== this.checked) {
-				input.checked = this.checked;
-				const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
-				this.dispatchEvent(new CustomEvent(`change`, {
-					detail: {
-						checked: this.checked,
-						value: newValue
-					},
-					bubbles: true,
-					composed: true
-				}));
-			}
-		}
-		if (changedProperties.has(`value`) && !this._isSingleToggle) {
-			const inputs = this.shadowRoot?.querySelectorAll(`.radio-input`);
-			if (inputs) {
-				for (const input of inputs) if (input.checked !== (input.value === this.value)) input.checked = input.value === this.value;
-			}
-		}
-	}
-	#updateComputedItems() {
-		const options = this.querySelectorAll(`option`);
-		const icons = /* @__PURE__ */ new Map();
-		if (options.length > 0) {
-			this._computedItems = Array.from(options, (el) => {
-				const tempDiv = document.createElement(`div`);
-				tempDiv.innerHTML = el.innerHTML;
-				const iconEl = tempDiv.querySelector(`svg`);
-				if (iconEl) icons.set(el.getAttribute(`value`) || ``, iconEl.outerHTML);
-				return {
-					value: el.getAttribute(`value`) || ``,
-					label: el.textContent?.trim() || ``,
-					disabled: el.hasAttribute(`disabled`),
-					iconName: el.getAttribute(`icon-name`) || void 0,
-					iconNameOff: el.getAttribute(`icon-name-off`) || void 0
-				};
-			});
-			this._icons = icons;
-		} else this._computedItems = [...this.items];
-	}
-	#handleRadioChange(e) {
-		e.stopImmediatePropagation();
-		const input = e.target;
-		this.value = input.value;
-		this.dispatchEvent(new CustomEvent(`change`, {
-			detail: {
-				checked: true,
-				value: input.value
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	#handleToggleChange(e) {
-		e.stopImmediatePropagation();
-		const input = e.target;
-		this.checked = input.checked;
-		const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
-		this.dispatchEvent(new CustomEvent(`change`, {
-			detail: {
-				checked: this.checked,
-				value: newValue
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	#renderIcon(item) {
-		const iconName = item.value === this.value ? item.iconName || null : item.iconNameOff || item.iconName || null;
-		if (iconName) return html`<ixfx-icon class="radio-icon" name="${iconName}"></ixfx-icon>`;
-		const iconHtml = this._icons.get(item.value);
-		if (!iconHtml) return null;
-		return html`<span class="radio-icon">${unsafeHTML(iconHtml)}</span>`;
-	}
-	render() {
-		if (this._isSingleToggle) {
-			const iconName = this._singleToggleIconName;
-			const iconPart = iconName || this.hideLabels ? html`<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>` : null;
-			const labelPart = !this.hideLabels ? html`<span class="radio-label" data-text="${this.textContent?.trim()}">${this.textContent?.trim()}</span>` : null;
-			return html`
-        <label class="radio-item ${this.checked ? `selected` : ``}">
-          <input
-            type="checkbox"
-            class="radio-toggle-input"
-            ?checked=${this.checked}
-            @change=${this.#handleToggleChange}
-          />
-          ${iconPart}
-          ${labelPart}
-        </label>
-      `;
-		}
+		if (this._isSingleToggle) {
+			const iconName = this._singleToggleIconName;
+			const iconPart = iconName || this.hideLabels ? html`<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>` : null;
+			const labelPart = !this.hideLabels ? html`<span class="radio-label" data-text="${this.textContent?.trim()}">${this.textContent?.trim()}</span>` : null;
+			return html`
+        <label class="radio-item ${this.checked ? `selected` : ``}">
+          <input
+            type="checkbox"
+            class="radio-toggle-input"
+            ?checked=${this.checked}
+            @change=${this.#handleToggleChange}
+          />
+          ${iconPart}
+          ${labelPart}
+        </label>
+      `;
+		}
 		return html`
       <slot @slotchange=${this.#updateComputedItems} style="display: none;"></slot>
       <div class="radio-group ${this.orientation} ${this.mode}" role="radiogroup" aria-label=${this.name}>
@@ -1605,9 +807,11 @@ var CrumbPathController = class {
 	#pathed;
 	#separator;
 	#onQuery;
+	#sortCompare;
 	constructor(options = {}) {
 		this.#separator = options.separator ?? `/`;
 		this.#onQuery = options.onQuery;
+		this.#sortCompare = options.sortCompare;
 		this.#pathed = new Trees.Pathed.Pathed({ separator: this.#separator });
 		if (options.paths) this.addPaths(options.paths);
 	}
@@ -1645,18 +849,22 @@ var CrumbPathController = class {
 	async #siblingLookup(pathSegments, _index, signal) {
 		const currentPath = pathSegments.join(this.#separator);
 		const children = [...this.#pathed.children(currentPath)];
-		if (children.length > 0) return children.map((node) => node.value).filter((v) => v !== void 0).map((v) => {
-			if (`value` in v) return v.value ?? { label: v.label };
-			return { label: v.label };
-		});
+		if (children.length > 0) {
+			const mapped = children.map((node) => node.value).filter((v) => v !== void 0).map((v) => {
+				if (`value` in v) return v.value ?? { label: v.label };
+				return { label: v.label };
+			});
+			return this.#sortCompare ? [...mapped].sort(this.#sortCompare) : mapped;
+		}
 		if (this.#onQuery) {
 			const newChildren = await this.#onQuery(pathSegments);
-			for (const child of newChildren) {
+			const sorted = this.#sortCompare ? [...newChildren].sort(this.#sortCompare) : newChildren;
+			for (const child of sorted) {
 				const childPath = currentPath.length > 0 ? `${currentPath}${this.#separator}${child.label}` : child.label;
 				this.#pathed.add(child, childPath);
 			}
 			if (signal.aborted) return [];
-			return newChildren;
+			return sorted;
 		}
 		return [];
 	}
@@ -1717,7 +925,6 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 				case `Escape`:
 					e.preventDefault();
 					this.#closeDropdown();
-					break;
 			}
 		};
 		this.#onHostKeyDown = (e) => {
@@ -2056,9 +1263,11 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#onHostKeyDown;
 	render() {
 		const segments = this.#getSegments();
-		if (this._editing) return html`
+		if (this._editing) {
+			const editValue = this.path;
+			return html`
         <ixfx-ac-text
-          .value=${this.path}
+          .value=${editValue}
           .tabSuffix=${this.separator}
           .completionProvider=${this.#makeCompletionProvider()}
           @change=${this.#onAcChange}
@@ -2066,6 +1275,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
           @keydown=${this.#onAcKeyDown}
         ></ixfx-ac-text>
       `;
+		}
 		const rootSegments = this.#getRootSegments();
 		const leadingCaret = this.siblingLookup && rootSegments.length === 0 ? html`
       <div class="caret ${this._openIdx === -1 ? `open` : ``} ${this._confirmedLeafIndices.has(``) ? `disabled` : ``}"
@@ -2547,14 +1757,15 @@ let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel)
 		this.style.setProperty(`--value`, String(normalized));
 		let valueStart = 0;
 		let valueEnd = normalized;
-		if (this.linearStyle === `bipolar`) if (normalized <= .5) {
-			valueStart = normalized;
-			valueEnd = .5;
-		} else {
-			valueStart = .5;
-			valueEnd = normalized;
-		}
-		else if (this.linearStyle === `unipolar`) {
+		if (this.linearStyle === `bipolar`) {
+			if (normalized <= .5) {
+				valueStart = normalized;
+				valueEnd = .5;
+			} else {
+				valueStart = .5;
+				valueEnd = normalized;
+			}
+		} else if (this.linearStyle === `unipolar`) {
 			valueStart = .5 - normalized * .5;
 			valueEnd = .5 + normalized * .5;
 		}
@@ -2617,7 +1828,6 @@ let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel)
 			case `End`:
 				delta = (this.max ?? 0) - this._parseValue();
 				handled = true;
-				break;
 		}
 		if (handled) {
 			e.preventDefault();
@@ -2960,231 +2170,6 @@ let FormPartElement = class FormPartElement extends LitElement {
 __decorate([property({ type: String })], FormPartElement.prototype, "label", void 0);
 FormPartElement = __decorate([safeCustomElement(`ixfx-form-part`)], FormPartElement);
 //#endregion
-//#region src/form/form-values.ts
-function collectFormValues(root) {
-	const values = {};
-	root.querySelectorAll(`[name]`).forEach((el) => {
-		const name = el.getAttribute(`name`);
-		if (!name) return;
-		if (el instanceof HTMLInputElement) if (el.type === `radio`) {
-			if (el.checked) values[name] = el.value;
-		} else if (el.type === `checkbox`) values[name] = el.checked;
-		else values[name] = el.value;
-		else if (el instanceof HTMLSelectElement) if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
-		else values[name] = el.value;
-		else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
-		else if (`value` in el) values[name] = el.value;
-	});
-	return values;
-}
-function applyFormValues(root, data) {
-	root.querySelectorAll(`[name]`).forEach((el) => {
-		const name = el.getAttribute(`name`);
-		if (!name || !(name in data)) return;
-		const value = data[name];
-		if (el instanceof HTMLInputElement) {
-			if (el.type === `radio`) el.checked = el.value === value;
-			else if (el.type === `checkbox`) el.checked = Boolean(value);
-			else el.value = String(value ?? ``);
-			el.dispatchEvent(new Event(`input`, { bubbles: true }));
-			el.dispatchEvent(new Event(`change`, { bubbles: true }));
-		} else if (el instanceof HTMLSelectElement) {
-			if (el.multiple && Array.isArray(value)) Array.from(el.options).forEach((opt) => {
-				opt.selected = value.includes(opt.value);
-			});
-			else el.value = String(value ?? ``);
-			el.dispatchEvent(new Event(`input`, { bubbles: true }));
-			el.dispatchEvent(new Event(`change`, { bubbles: true }));
-		} else if (el instanceof HTMLTextAreaElement) {
-			el.value = String(value ?? ``);
-			el.dispatchEvent(new Event(`input`, { bubbles: true }));
-			el.dispatchEvent(new Event(`change`, { bubbles: true }));
-		} else if (`value` in el) el.value = value;
-	});
-}
-//#endregion
-//#region src/form/form.ts
-let FormElement = class FormElement extends LitElement {
-	createRenderRoot() {
-		return this;
-	}
-	getValues() {
-		return collectFormValues(this);
-	}
-	setValues(data) {
-		applyFormValues(this, data);
-	}
-};
-FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
-//#endregion
-//#region src/grouped-item-lister/grouped-item-lister.ts
-const UNGROUPED_KEY = `__ungrouped__`;
-let GroupedItemListerElement = class GroupedItemListerElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		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
-			}));
-		};
-	}
-	#groupBy;
-	#factory;
-	#subComponents;
-	#renderedGroups;
-	#clearingSelection;
-	#data;
-	get groupBy() {
-		return this.#groupBy;
-	}
-	set groupBy(value) {
-		this.#groupBy = value;
-		this.requestUpdate();
-	}
-	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(`grouped`)) this.#clearSubComponents();
-		this.#syncSubComponents();
-	}
-	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;
-	}
-	#clearSubComponents() {
-		for (const subEl of this.#subComponents.values()) subEl.remove();
-		this.#subComponents.clear();
-	}
-	#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: Boolean,
-	reflect: true
-})], GroupedItemListerElement.prototype, "grouped", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `cross-group-selection`,
-	reflect: true
-})], GroupedItemListerElement.prototype, "crossGroupSelection", void 0);
-GroupedItemListerElement = __decorate([safeCustomElement(`ixfx-grouped-item-lister`)], GroupedItemListerElement);
-//#endregion
 //#region src/grouped-item-lister/tree-list-adapter.ts
 /**
 * Creates an `HTMLElement` that implements `IGroupedSubComponent<T>` by wrapping
@@ -3301,779 +2286,50 @@ function createTreeListAdapter(toTreeItem, options) {
 			const tree = getOrCreateTree();
 			tree.root = {
 				item: {
-					key: `__adapter_root__`,
-					label: ``,
-					isLeaf: false
-				},
-				children: items.map(buildNode)
-			};
-		},
-		clearSelection() {
-			treeEl?.clearSelection();
-		},
-		dispatch(commandId, args) {
-			options?.onDispatch?.(commandId, args, treeEl);
-		}
-	});
-	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/vertical-list/vertical-list.ts
-const ITEM_SELECTOR = `li, [data-list-item]`;
-function isMultiMode(mode) {
-	return mode === `checked` || mode === `sticky` || mode === `vscode` || mode === `standard`;
-}
-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.#wrappedElements = /* @__PURE__ */ new Set();
-		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;
-			}
-			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
-				if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) {
-					e.preventDefault();
-					this._selectAll();
-				}
-				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);
-					}
-					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;
-				}
-				case ` `: {
-					const id = this.tickled.tickledId;
-					if (id) {
-						e.preventDefault();
-						this._handleSpaceKey(id);
-					}
-					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();
-				}
-			}
-		};
-	}
-	#search;
-	#selectionAnchor;
-	#customWrappers;
-	#wrappedElements;
-	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);
-	}
-	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`
-		});
-	}
-	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();
-		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
-	}
-	/** The most recently selected item, or `undefined` if nothing is selected. */
-	get selectedItem() {
-		return [...this._selectedItems].at(-1);
-	}
-	/** The full current selection set (read-only). */
-	get selectedItems() {
-		return this._selectedItems;
-	}
-	addItem(item, options) {
-		let el;
-		if (typeof item === `string`) {
-			const li = document.createElement(`li`);
-			li.textContent = item;
-			el = li;
-		} else el = item;
-		if (options?.notChecked) el.setAttribute(`not-checked`, ``);
-		this.appendChild(el);
-		if (this.interactionMode === `checked`) this._syncCheckboxes();
-	}
-	removeItem(item) {
-		item.remove();
-	}
-	clearItems() {
-		this.#customWrappers.clear();
-		this.replaceChildren();
-		this.#selectionAnchor = void 0;
-		this._selectedItems = /* @__PURE__ */ new Set();
-		this._syncItemStates();
-	}
-	/**
-	* 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();
-	}
-	/**
-	* 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);
-	}
-	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].filter((el) => this._isCheckable(el)));
-		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
-		});
-	}
-	clearSelection() {
-		this._clearSelection();
-	}
-	selectAll() {
-		if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) this._selectAll();
-	}
-	*selectedFilter(kind) {
-		const wanted = (el) => {
-			switch (kind) {
-				case `selected`: return el.hasAttribute(`data-selected`);
-				case `checked`: return el.hasAttribute(`data-checked`);
-				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
-			}
-		};
-		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
-			if (this.#wrappedElements.has(el)) continue;
-			if (el.hidden) continue;
-			if (wanted(el)) yield el;
-		}
-	}
-	_replaceSelection(item) {
-		if (this.selectionMode === `none`) return;
-		if (!this._isCheckable(item)) 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
-		});
-	}
-	_toggleItem(item) {
-		if (!this._isCheckable(item)) return;
-		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
-		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) 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
-		});
-	}
-	_rangeSelectTo(item) {
-		if (this.selectionMode === `none`) return;
-		if (!this.#selectionAnchor) {
-			this._replaceSelection(item);
-			return;
-		}
-		const visible = this._getVisibleItems();
-		const anchorIdx = visible.indexOf(this.#selectionAnchor);
-		const targetIdx = visible.indexOf(item);
-		if (anchorIdx === -1 || targetIdx === -1) {
-			this._replaceSelection(item);
-			return;
-		}
-		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).filter((el) => this._isCheckable(el)));
-		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.filter((el) => this._isCheckable(el)));
-		if (next.size === 0) return;
-		this._selectedItems = next;
-		this._syncItemStates();
-		this._dispatch(`list-select`, {
-			selected: next,
-			previous
-		});
-	}
-	_handleClickSelection(item, e) {
-		const mode = this.interactionMode;
-		if (mode === `manual`) return;
-		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) 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;
-			case `sticky`:
-				this._toggleItem(item);
-				break;
-		}
-	}
-	_handleSpaceKey(item) {
-		const mode = this.interactionMode;
-		if (mode === `manual`) return;
-		if (mode === `implicit`) this._replaceSelection(item);
-		else this._toggleItem(item);
-	}
-	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
-			if (this.#wrappedElements.has(el)) return false;
-			if (el.hidden) return false;
-			if (this.filterPredicate && !this.filterPredicate(el)) return false;
-			return true;
-		});
-	}
-	_isCheckable(item) {
-		if (this.interactionMode !== `checked`) return true;
-		return !(this.#customWrappers.get(item) ?? item).hasAttribute(`not-checked`);
-	}
-	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
-			if (this.#wrappedElements.has(el)) continue;
-			const item = this.#customWrappers.get(el) ?? el;
-			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
-			el.toggleAttribute(`data-selected`, this._selectedItems.has(el));
-			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !item.hasAttribute(`not-checked`) && this._selectedItems.has(el));
-			else el.removeAttribute(`data-checked`);
-		}
-		this.dataset.inputMode = this.tickled.inputMode;
-		this._syncCheckboxes();
-	}
-	_syncCheckboxes() {
-		const inCheckedMode = this.interactionMode === `checked`;
-		const wantsCustom = typeof this.checkboxRenderer === `function`;
-		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);
-			this.#wrappedElements.add(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();
-			this.#wrappedElements.clear();
-		}
-		for (const el of this.querySelectorAll(`li`)) {
-			const existing = el.querySelector(`.ixfx-list-checkbox`);
-			if (!inCheckedMode) {
-				if (existing) existing.remove();
-				continue;
-			}
-			if ((this.#customWrappers.get(el) ?? el).hasAttribute(`not-checked`)) {
-				if (existing) existing.remove();
-				continue;
-			}
-			const existingIsCustom = existing?.classList.contains(`ixfx-list-checkbox-custom`) ?? false;
-			if (existing && existingIsCustom !== wantsCustom) existing.remove();
-			let cb = el.querySelector(`.ixfx-list-checkbox`);
-			if (!cb) {
-				if (wantsCustom) {
-					const opts = this.checkboxRenderer;
-					const margin = opts.margin ?? `0`;
-					const width = opts.width ?? `24px`;
-					cb = this._createCustomCheckbox(el, margin, width);
-				} else cb = this._createNativeCheckboxCell(el);
-				el.prepend(cb);
-			}
-			const checked = this._selectedItems.has(el);
-			if (wantsCustom) {
-				cb.setAttribute(`aria-checked`, String(checked));
-				cb.toggleAttribute(`data-checked`, checked);
-				if (this.checkboxRenderer) render((typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer)(checked), cb);
-			} else {
-				const input = cb.querySelector(`input.ixfx-list-checkbox`);
-				if (input) input.checked = checked;
-			}
-		}
-	}
-	/**
-	* Native checkbox cell: a span that stretches to the row's full cross-axis
-	* (so the entire column height is a click target) with a real `<input>`
-	* centred inside. The span owns the click; the input is purely visual and
-	* has `pointer-events:none` so a single click produces one toggle.
-	*/
-	_createNativeCheckboxCell(el) {
-		const cell = document.createElement(`span`);
-		cell.className = `ixfx-list-checkbox ixfx-list-checkbox-native`;
-		cell.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:18px;margin:0 6px 0 0;cursor:pointer;pointer-events:auto`;
-		cell.tabIndex = -1;
-		cell.setAttribute(`role`, `checkbox`);
-		cell.setAttribute(`part`, `checkbox`);
-		cell.addEventListener(`click`, (e) => {
-			e.stopPropagation();
-			this._toggleItem(el);
-		});
-		const input = document.createElement(`input`);
-		input.type = `checkbox`;
-		input.className = `ixfx-list-checkbox`;
-		input.style.cssText = `pointer-events:none;cursor:pointer;margin:0`;
-		cell.appendChild(input);
-		return cell;
-	}
-	/**
-	* Custom checkbox cell: same shape as the native cell (a stretching span)
-	* so behaviour is identical. The renderer's content goes inside.
-	*/
-	_createCustomCheckbox(el, margin, width) {
-		const span = document.createElement(`span`);
-		span.className = `ixfx-list-checkbox ixfx-list-checkbox-custom`;
-		span.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:${width};margin:${margin};cursor:pointer;pointer-events:auto`;
-		span.tabIndex = -1;
-		span.setAttribute(`role`, `checkbox`);
-		span.setAttribute(`part`, `checkbox`);
-		span.addEventListener(`click`, (e) => {
-			e.stopPropagation();
-			this._toggleItem(el);
-		});
-		return span;
-	}
-	_findListItem(path) {
-		for (const target of path) {
-			if (!(target instanceof Element)) continue;
-			if (target === this) break;
-			if (target.parentElement === this && target.matches(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 = [themeFallbacks, 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%;
-      overflow: hidden;
-      box-sizing: border-box;
-      outline: none;
-      --ixfx-list-item-padding: var(--ixfx-list-item-padding, var(--list-item-padding, 4px var(--space-m, 8px)));
-    }
-
-    :host(:focus-visible) {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
-    }
-
-    .container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      box-sizing: border-box;
-      /* Scrollbar theming: end users override these CSS variables to control
-         the native scrollbar (scrollbar-width, scrollbar-gutter, scrollbar-color). */
-      scrollbar-width: var(--list-scrollbar-width, auto);
-      scrollbar-gutter: var(--list-scrollbar-gutter, auto);
-      scrollbar-color: var(--list-scrollbar-color, auto);
-    }
-
-    ::slotted([hidden]) {
-      display: none !important;
-    }
-
-    ::slotted(li) {
-      display: flex;
-      align-items: center;
-      padding: var(--ixfx-list-item-padding);
-      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;
-    }
-
-    /* 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;
-    }
-
-    /* In checked mode, only the checkbox column is clickable; the row body
-       gets a default cursor so it doesn't suggest otherwise. */
-    :host([interaction-mode="checked"]) ::slotted(li),
-    :host([interaction-mode="checked"]) ::slotted([data-list-item]) {
-      cursor: default;
-    }
-
-    /* Wrapper inserted around custom [data-list-item] elements in checked mode.
-       Provides the flex layout so the injected checkbox can stretch to the
-       row's full height via align-self:stretch. */
-    .ixfx-custom-row {
-      display: flex;
-      align-items: center;
-      min-height: var(--list-item-height, 28px);
-      box-sizing: border-box;
-      cursor: default;
-      user-select: none;
-    }
-
-    ::slotted([data-tickled]) {
-      background: var(--item-bg-tickled);
-      outline: var(--item-border-tickled);
-    }
-
-    ::slotted([data-selected]) {
-      background: var(--item-bg-selected);
-      color: var(--item-text-selected);
-      outline: 1px solid transparent;
-    }
-
-    ::slotted([data-selected][data-tickled]) {
-      background: var(--item-bg-selected-tickled);
-      outline: 2px dashed var(--surface-3);
-      outline-offset: -2px;
-    }
-
-    /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
-    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
-      background: transparent;
-      color: inherit;
-      outline: 1px solid transparent;
-    }
-
-    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
-      background: var(--item-bg-tickled);
-      color: inherit;
-      outline: var(--item-border-tickled);
-    }
-
-    .search-overlay {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      background: var(--surface-4, #2a2a2a);
-      border: 1px solid var(--border, #444);
-      border-radius: var(--radius-m, 4px);
-      padding: 4px 6px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-
-    .search-overlay[hidden] {
-      display: none;
-    }
-
-    .search-input {
-      background: transparent;
-      border: none;
-      outline: none;
-      color: inherit;
-      font-size: var(--text-m, 0.875em);
-      min-width: 140px;
-    }
-
-    .search-close {
-      background: transparent;
-      border: none;
-      color: var(--surface-muted-text, #888);
-      cursor: pointer;
-      font-size: 1.1em;
-      line-height: 1;
-      padding: 0 2px;
-    }
-
-    .search-close:hover {
-      color: inherit;
-    }
-  `];
-	}
-	render() {
-		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([property({ attribute: false })], VerticalListElement.prototype, "checkboxRenderer", 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);
+					key: `__adapter_root__`,
+					label: ``,
+					isLeaf: false
+				},
+				children: items.map(buildNode)
+			};
+		},
+		clearSelection() {
+			treeEl?.clearSelection();
+		},
+		dispatch(commandId, args) {
+			options?.onDispatch?.(commandId, args, treeEl);
+		}
+	});
+	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/grouped-item-lister/vertical-list-adapter.ts
 /**
@@ -4204,143 +2460,6 @@ function createVerticalListAdapter(renderItem, options) {
 	return adapter;
 }
 //#endregion
-//#region src/notifier/notification-pill.ts
-let NotificationPillElement = class NotificationPillElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.notificationType = `info`;
-		this.message = ``;
-		this.dismissing = false;
-		this.notificationId = ``;
-	}
-	#handleClick() {
-		this.#emitTap();
-	}
-	#handleKeyDown(e) {
-		if (e.key === `Enter` || e.key === ` `) {
-			e.preventDefault();
-			this.#emitTap();
-		}
-	}
-	#emitTap() {
-		this.dispatchEvent(new CustomEvent(`pill-tap`, {
-			detail: { id: this.notificationId },
-			bubbles: true,
-			composed: true
-		}));
-	}
-	#renderIcon() {
-		if (!this.icon) return nothing;
-		if (this.icon.startsWith(`<svg`)) return html`<span class="pill-icon">${unsafeHTML(this.icon)}</span>`;
-		if (!getIcon(this.icon)) return nothing;
-		return html`<ixfx-icon class="pill-icon" name="${this.icon}"></ixfx-icon>`;
-	}
-	render() {
-		return html`
-      <button
-        type="button"
-        class="pill"
-        notification-type="${this.notificationType}"
-        @click=${this.#handleClick}
-        @keydown=${this.#handleKeyDown}
-        aria-label="${this.message}"
-      >
-        ${this.#renderIcon()}
-        <span class="pill-message">${this.message}</span>
-      </button>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, css`
-      :host {
-        display: block;
-      }
-
-      .pill {
-        appearance: none;
-        cursor: pointer;
-        font-family: var(--font-family, inherit);
-        font-size: var(--text-m, 12px);
-        padding: var(--space-s, 4px) var(--space-m, 8px);
-        border-radius: var(--radius-l, 6px);
-        border: 1px solid var(--surface-6, #666);
-        display: inline-flex;
-        align-items: center;
-        gap: var(--space-s, 4px);
-        max-width: 300px;
-        box-shadow: var(--shadow-m);
-        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
-        pointer-events: auto;
-      }
-
-      :host([dismissing]) .pill {
-        opacity: 0;
-        transform: translateX(20px);
-      }
-
-      .pill[notification-type="info"] {
-        background: var(--surface-5, #555);
-        color: var(--surface-5-text, #fff);
-      }
-
-      .pill[notification-type="warning"] {
-        background: color-mix(in oklch, oklch(65% 0.18 70) 30%, var(--surface-5));
-        border-color: oklch(65% 0.18 70);
-        color: var(--surface-5-text, #fff);
-      }
-
-      .pill[notification-type="error"] {
-        background: var(--error, #c00);
-        border-color: var(--error, #c00);
-        color: var(--error-text, #fff);
-      }
-
-      .pill-icon {
-        display: inline-flex;
-        align-items: center;
-        flex-shrink: 0;
-      }
-
-      .pill-icon ixfx-icon {
-        font-size: var(--text-m, 12px);
-      }
-
-      .pill-message {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .pill:focus-visible {
-        outline: 2px solid var(--accent, #4a9);
-        outline-offset: 2px;
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        .pill {
-          transition: opacity 0.1s ease-out;
-          transform: none !important;
-        }
-      }
-    `];
-	}
-};
-__decorate([property({
-	type: String,
-	attribute: `notification-type`
-})], NotificationPillElement.prototype, "notificationType", void 0);
-__decorate([property({ type: String })], NotificationPillElement.prototype, "message", void 0);
-__decorate([property({ type: String })], NotificationPillElement.prototype, "icon", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], NotificationPillElement.prototype, "dismissing", void 0);
-__decorate([property({
-	type: String,
-	attribute: `notification-id`
-})], NotificationPillElement.prototype, "notificationId", void 0);
-NotificationPillElement = __decorate([safeCustomElement(`ixfx-notification-pill`)], NotificationPillElement);
-//#endregion
 //#region src/notifier/pill-renderer.ts
 const ROW_SPACING = 8;
 const DEFAULT_ROW_HEIGHT = 40;
@@ -4554,7 +2673,7 @@ function clearTimer(managed) {
 function startTimer(managed) {
 	const base = managed.type === `error` ? options.timeoutError : options.timeout;
 	const duration = managed.wasQueued ? base / options.queueSize : base;
-	managed.timer = window.setTimeout(() => dismiss(managed.id), duration);
+	managed.timer = window.setTimeout(dismiss, duration, managed.id);
 }
 function ensureFrontTimer() {
 	const front = visible[0];
@@ -4727,6 +2846,108 @@ __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/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 _baseStylesInjected = false;
+function ensureBaseTooltipStyles() {
+	if (_baseStylesInjected) return;
+	_baseStylesInjected = true;
+	const style = document.createElement(`style`);
+	style.textContent = `
+    ixfx-tooltip {
+      display: inline-block;
+      background: var(--surface-5);
+      color: var(--surface-5-text);
+      border: var(--border);
+      border-radius: var(--radius-l, 6px);
+      box-shadow: var(--shadow-m);
+      padding: var(--space-s, 4px);
+      font-size: 10px;
+      font-family: var(--font-family, inherit);
+    }
+    ixfx-tooltip .tooltip-type-number {
+      font-family: var(--font-mono, ui-monospace, monospace);
+    }
+  `;
+	document.head.appendChild(style);
+}
+let TooltipElement = class TooltipElement extends LitElement {
+	static {
+		_TooltipElement = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.valueFormatTooltip = _TooltipElement.defaultFormatter;
+		this.orientation = `top`;
+		this.anchor = `--tooltip`;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		ensureBaseTooltipStyles();
+	}
+	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() {
+		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 })], 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/util/drag.ts
 function getCoordinates(event) {
 	return {
@@ -4873,11 +3094,13 @@ let RangeMultiElement = class RangeMultiElement extends LitElement {
 			}
 			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}'`);
+		} 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) {
@@ -4936,63 +3159,65 @@ let RangeMultiElement = class RangeMultiElement extends LitElement {
 					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 (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);
 						}
-						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;
+					} 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);
 						}
-						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`) {
+					} else if (resizeMode === `bipolar`) {
 						const calcA = startA + amt;
 						const calcB = startB + amt;
 						if (calcA < min || calcB > max) return;
@@ -5241,514 +3466,475 @@ __decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onI
 __decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
 RangeMultiElement = __decorate([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
 //#endregion
-//#region src/select-horiz/select-horiz.ts
-let SelectHorizElement = class SelectHorizElement extends WheelNudgeMixin(LitElement) {
+//#region src/rating/rating.ts
+let RatingElement = class RatingElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this._selectedIndex = -1;
-		this._slottedItems = [];
-		this.tickled = new TickledController(this, {
-			getItems: () => this._slottedItems.map((_, i) => ({
-				id: i,
-				enabled: true
-			})),
-			onStateChange: () => this._syncTickled()
-		});
-		this._onSlotChange = () => {
-			this._slottedItems = Array.from(this.shadowRoot?.querySelector(`slot`)?.assignedElements() ?? []);
-			const declaredIndex = this._slottedItems.findIndex((item) => item.hasAttribute(`selected`));
-			let resolvedIndex = declaredIndex >= 0 ? declaredIndex : this._selectedIndex;
-			if (resolvedIndex >= this._slottedItems.length) resolvedIndex = this._slottedItems.length - 1;
-			if (resolvedIndex < 0 && this._slottedItems.length > 0) resolvedIndex = 0;
-			this.selectedIndex = resolvedIndex;
-		};
-		this._syncTickled = () => {
-			this._slottedItems.forEach((item, i) => {
-				const isTickled = this.tickled.isTickled(i);
-				item.classList.toggle(`tickled`, isTickled);
-				item.tabIndex = isTickled && this.tickled.inputMode === `keyboard` ? 0 : -1;
-			});
-		};
-		this._findSlottedItem = (target) => {
-			let el = target instanceof Element ? target : null;
-			while (el) {
-				if (this._slottedItems.includes(el)) return el;
-				el = el.parentElement;
-			}
-		};
-		this._handlePointerOver = (e) => {
-			const item = this._findSlottedItem(e.target);
-			if (item) this.tickled.handlePointerEnter(this._slottedItems.indexOf(item));
-		};
-		this._handleKeyDown = (e) => {
-			if (e.key === `ArrowLeft`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`previous`);
-				this._applyTickledSelection();
-			} else if (e.key === `ArrowRight`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`next`);
-				this._applyTickledSelection();
-			} else if (e.key === `Home`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`first`);
-				this._applyTickledSelection();
-			} else if (e.key === `End`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`last`);
-				this._applyTickledSelection();
-			}
-		};
-		this._applyTickledSelection = () => {
-			const id = this.tickled.tickledId;
-			if (id !== void 0 && id !== this._selectedIndex) this.selectedIndex = id;
-		};
-		this._wheelCooldown = false;
-		this._handleClick = (e) => {
-			e.currentTarget.focus();
-			const item = this._findSlottedItem(e.target);
-			const index = item ? this._slottedItems.indexOf(item) : -1;
-			if (index >= 0 && index !== this._selectedIndex) this.selectedIndex = index;
-		};
-		this._updateSelectedAttribute = () => {
-			this._slottedItems.forEach((item, i) => {
-				if (i === this._selectedIndex) item.setAttribute(`selected`, ``);
-				else item.removeAttribute(`selected`);
-			});
-		};
-		this._scrollSelectedIntoView = () => {
-			const item = this._slottedItems[this._selectedIndex];
-			if (item) item.scrollIntoView({
-				inline: `center`,
-				behavior: `smooth`
-			});
-		};
-		this._emitChange = () => {
-			this.dispatchEvent(new CustomEvent(`change`, {
-				detail: {
-					selectedIndex: this._selectedIndex,
-					selectedItem: this.selectedItem,
-					selectedValue: this.selectedValue
-				},
-				bubbles: true,
-				composed: true
-			}));
-		};
+		this.value = 0;
+		this.max = 5;
+		this.allowHalf = false;
+		this.disabled = false;
+		this.readonly = false;
+		this.variant = `star`;
+		this._preview = null;
 	}
 	static {
-		this.styles = [
-			themeFallbacks,
-			tickledStyles,
-			tickledItemStyles,
-			scrollFadeStyles(`x`),
-			css`
-      :host {
-        --select-horiz-item-width: 80%;
-        --select-horiz-gap: var(--space-s);
-        --select-horiz-bg: var(--surface-3);
-        --select-horiz-border: var(--border);
-        --select-horiz-radius: var(--radius-l);
-        display: flex;
-        width: 100%;
-              background: var(--select-horiz-bg);
-        border: var(--select-horiz-border);
-        border-radius: var(--select-horiz-radius);
-      }
-
-      /* Edge fade (the scroll-fade-x class, see ../styles/scroll-fade.ts) must sit on
-       * the element that actually scrolls - its mask is sized to this element's own
-       * box, and content overflowing a *different*, non-scrolling ancestor gets the
-       * mask tiled across it instead of fading correctly. */
-      .items {
-        display: flex;
-        align-items: center;
-        gap: var(--select-horiz-gap);
-        padding: var(--space-xs) var(--scroll-fade-width, 30px);
-        width: 100%;
-        min-height: 48px;
-        overflow-x: scroll;
-        overflow-y: hidden;
-        scrollbar-width: none;
-        scroll-snap-type: x mandatory;
-        -webkit-overflow-scrolling: touch;
-        cursor: grab;
-  
-        box-sizing: border-box;
-      }
-
-      .items:focus-within {
-        cursor: default;
-      }
-
-      .spacer {
-        flex: 0 0 var(--select-horiz-spacer-width, 10%);
-        pointer-events: none;
-        user-select: none;
-      }
-
-      ::slotted(*) {
-        flex: 0 0 var(--select-horiz-item-width);
-        scroll-snap-align: center;
-        user-select: none;
-        min-height: 100%;
-        box-sizing: border-box;
-        transition: opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
-        background: var(--item-bg);
-        border: var(--item-border);
-        border-radius: var(--item-border-radius);
-        padding: var(--item-padding);
-        display: grid;
-        align-content: center;
-        justify-content: center;
-      }
-
-      ::slotted(.tickled) {
-        background: var(--item-bg-tickled);
-        border: var(--item-border-tickled);
-        color: var(--item-text-tickled);
-      }
-
-      ::slotted([selected]) {
-        background: var(--item-bg-selected);
-        border: var(--item-border-selected);
-        color: var(--item-text-selected);
-      }
-
-      ::slotted([selected].tickled) {
-        background: var(--item-bg-selected-tickled);
-        outline: 2px dashed var(--surface-3);
-        outline-offset: -2px;
-      }
-
-      ::-webkit-scrollbar {
-        display: none;
-      }
-    `
-		];
-	}
-	get selectedIndex() {
-		return this._selectedIndex;
-	}
-	set selectedIndex(value) {
-		const oldValue = this._selectedIndex;
-		if (value < -1 || this._slottedItems.length > 0 && value >= this._slottedItems.length) return;
-		this._selectedIndex = value;
-		this._updateSelectedAttribute();
-		this._scrollSelectedIntoView();
-		this.tickled.setTickled(value === -1 ? void 0 : value);
-		if (oldValue !== value) this._emitChange();
-	}
-	get selectedValue() {
-		return this._slottedItems[this._selectedIndex]?.getAttribute(`value`) ?? null;
+		this.styles = [prominenceStyles, css`
+    :host {
+      --ixfx-rating-size: 1.5rem;
+      --ixfx-rating-gap: 0.2rem;
+      --ixfx-rating-color: var(--surface-4);
+      --ixfx-rating-color-active: var(--accent);
+      --ixfx-rating-color-hover: var(--accent);
+      display: inline-flex;
+      gap: var(--ixfx-rating-gap);
+      align-items: center;
+      user-select: none;
+      --transition: 0.15s ease;
+    }
+    :host([readonly]) { pointer-events: none; filter: none; }
+    :host(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
+    .glyph {
+      width: var(--ixfx-rating-size);
+      height: var(--ixfx-rating-size);
+      position: relative;
+      cursor: pointer;
+      flex-shrink: 0;
+      color: var(--ixfx-rating-glyph-color, var(--ixfx-rating-color));
+      transition: color var(--transition), transform var(--transition);
+    }
+    .glyph.filled { color: var(--ixfx-rating-glyph-color-active, var(--ixfx-rating-color-active)); }
+    .glyph.preview { color: var(--ixfx-rating-glyph-color-hover, var(--ixfx-rating-color-hover)); }
+    .glyph.half .fill { clip-path: inset(0 50% 0 0); }
+    .glyph svg { width: 100%; height: 100%; display: block; }
+    .glyph .fill { position: absolute; inset: 0; color: var(--ixfx-rating-glyph-color-active, var(--ixfx-rating-color-active)); }
+    .glyph.preview .fill { color: var(--ixfx-rating-glyph-color-hover, var(--ixfx-rating-color-hover)); }
+    .glyph .bg { color: var(--ixfx-rating-glyph-color, var(--ixfx-rating-color)); }
+    /* per-rank vars: consumer sets --ixfx-rating-1-color etc outside shadow, we map via inline style fallback */
+  `];
 	}
-	set selectedValue(value) {
-		if (value === null) return;
-		const index = this._slottedItems.findIndex((item) => item.getAttribute(`value`) === value);
-		if (index >= 0) this.selectedIndex = index;
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute(`role`, `slider`);
+		this.tabIndex = this.disabled || this.readonly ? -1 : 0;
 	}
-	get selectedItem() {
-		return this._slottedItems[this._selectedIndex] ?? null;
+	updated(changed) {
+		if (changed.has(`disabled`) || changed.has(`readonly`)) {
+			this.tabIndex = this.disabled || this.readonly ? -1 : 0;
+			this.setAttribute(`aria-disabled`, String(this.disabled));
+		}
+		this.setAttribute(`aria-valuenow`, String(this.value));
+		this.setAttribute(`aria-valuemin`, `0`);
+		this.setAttribute(`aria-valuemax`, String(this.max));
+		this.setAttribute(`aria-readonly`, String(this.readonly));
+	}
+	_path(v) {
+		if (v === `heart`) return `M12 21s-6.5-4.2-8.5-8.2A4.5 4.5 0 0 1 12 5a4.5 4.5 0 0 1 8.5 7.8C18.5 16.8 12 21 12 21z`;
+		if (v === `square`) return `M3 3h18v18H3z`;
+		return `M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z`;
+	}
+	_effective() {
+		return this._preview ?? this.value;
+	}
+	_commit(newVal) {
+		if (this.disabled || this.readonly) return;
+		const oldValue = this.value;
+		if (newVal === oldValue) newVal = 0;
+		if (newVal === oldValue) return;
+		this.value = newVal;
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail: {
+				value: newVal,
+				oldValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				value: newVal,
+				oldValue
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
-	get items() {
-		return this._slottedItems;
+	_calc(e, index) {
+		if (!this.allowHalf) return index + 1;
+		const rect = e.currentTarget.getBoundingClientRect();
+		return e.clientX - rect.left < rect.width / 2 ? index + .5 : index + 1;
 	}
 	render() {
-		return html`
-      <div
-        class="items scroll-fade-x"
-        tabindex="0"
-        data-input-mode=${this.tickled.inputMode}
-        @pointerover=${this._handlePointerOver}
-        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
-        @keydown=${this._handleKeyDown}
-        @click=${this._handleClick}
-      >
-        <div class="spacer"></div>
-        <slot @slotchange=${this._onSlotChange}></slot>
-        <div class="spacer"></div>
-      </div>
-    `;
+		const eff = this._effective();
+		const hovering = this._preview !== null;
+		return html`${Array.from({ length: this.max }, (_, i) => {
+			const rank = i + 1;
+			const filled = eff >= rank;
+			const half = !filled && eff >= rank - .5;
+			const cls = `glyph ${filled ? `filled` : ``} ${half ? `half` : ``} ${hovering && (filled || half) ? `preview` : ``}`;
+			const style = `--ixfx-rating-glyph-color:var(--ixfx-rating-${rank}-color, var(--ixfx-rating-color));--ixfx-rating-glyph-color-active:var(--ixfx-rating-${rank}-color-active, var(--ixfx-rating-color-active));--ixfx-rating-glyph-color-hover:var(--ixfx-rating-${rank}-color-hover, var(--ixfx-rating-color-hover));${half || filled ? `` : ``}`;
+			const d = this._path(this.variant);
+			return html`<span class=${cls} style=${style}
+        @pointermove=${(e) => {
+				if (this.disabled || this.readonly) return;
+				this._preview = this._calc(e, i);
+			}}
+        @pointerleave=${() => this._preview = null}
+        @click=${(e) => this._commit(this._calc(e, i))}>
+        <svg viewBox="0 0 24 24" class="bg" fill="currentColor"><path d=${d}></path></svg>
+        ${filled || half ? html`<svg viewBox="0 0 24 24" class="fill" fill="currentColor"><path d=${d}></path></svg>` : ``}
+      </span>`;
+		})}`;
 	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
-	}
-	_applyWheelDelta(direction, _event) {
-		if (this._wheelCooldown) return;
-		this._wheelCooldown = true;
-		this.tickled.handleKeyboardNavigation(direction === 1 ? `next` : `previous`);
-		this._applyTickledSelection();
-		setTimeout(() => {
-			this._wheelCooldown = false;
-		}, 250);
+	firstUpdated() {
+		this.addEventListener(`pointerleave`, () => this._preview = null);
+		this.addEventListener(`keydown`, (e) => {
+			if (this.disabled || this.readonly) return;
+			const step = this.allowHalf ? .5 : 1;
+			if (e.key === `ArrowRight` || e.key === `ArrowUp`) {
+				e.preventDefault();
+				this._commit(Math.min(this.max, this.value + step));
+			} else if (e.key === `ArrowLeft` || e.key === `ArrowDown`) {
+				e.preventDefault();
+				this._commit(Math.max(0, this.value - step));
+			} else if (e.key === `Home`) {
+				e.preventDefault();
+				this._commit(0);
+			} else if (e.key === `End`) {
+				e.preventDefault();
+				this._commit(this.max);
+			} else if (/^\d$/.test(e.key)) {
+				e.preventDefault();
+				const n = parseInt(e.key, 10);
+				this._commit(Math.min(n, this.max));
+			}
+		});
 	}
 };
-__decorate([state()], SelectHorizElement.prototype, "_selectedIndex", void 0);
-__decorate([state()], SelectHorizElement.prototype, "_slottedItems", void 0);
+__decorate([property({ type: Number })], RatingElement.prototype, "value", void 0);
+__decorate([property({ type: Number })], RatingElement.prototype, "max", void 0);
 __decorate([property({
-	type: Number,
-	reflect: true,
-	attribute: `selected-index`
-})], SelectHorizElement.prototype, "selectedIndex", null);
-__decorate([property({ type: String })], SelectHorizElement.prototype, "selectedValue", null);
-SelectHorizElement = __decorate([safeCustomElement(`ixfx-select-horiz`)], SelectHorizElement);
+	type: Boolean,
+	attribute: `allow-half`
+})], RatingElement.prototype, "allowHalf", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], RatingElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], RatingElement.prototype, "readonly", void 0);
+__decorate([property({ type: String })], RatingElement.prototype, "variant", void 0);
+__decorate([state()], RatingElement.prototype, "_preview", void 0);
+RatingElement = __decorate([customElement(`ixfx-rating`)], RatingElement);
 //#endregion
-//#region src/snackbar/snackbar.ts
-let _instanceCounter = 0;
-let SnackbarElement = class SnackbarElement extends LitElement {
+//#region src/toolbar/toolbar.ts
+var _ToolbarElement;
+let ToolbarElement = class ToolbarElement extends LitElement {
+	static {
+		_ToolbarElement = this;
+	}
 	constructor(..._args) {
 		super(..._args);
-		this.for = ``;
-		this.mode = `explicit`;
-		this.placement = `top`;
-		this.dismiss = `auto`;
-		this.showDelay = 150;
-		this.hideDelay = 500;
-		this._isOpen = false;
-		this._anchorName = `--ixfx-snackbar-anchor-${++_instanceCounter}`;
-		this._addedTabindex = false;
-		this._addedRole = false;
-		this._onTargetClick = () => this.toggle();
-		this._onTargetKeydown = (e) => {
-			if (e.key !== `Enter` && e.key !== ` `) return;
-			e.preventDefault();
-			this.toggle();
-		};
-		this._onTickleIn = () => this._scheduleShow();
-		this._onTickleOut = () => this._scheduleHide();
-		this._onPanelClick = () => {
-			if (this.dismiss === `auto`) this.hide();
-		};
-		this._onToggle = (e) => {
-			const { newState } = e;
-			this._isOpen = newState === `open`;
-			if (newState === `closed` && this.contains(document.activeElement)) this._target?.focus();
-		};
-		this._onBeforeToggle = (e) => {
-			const { newState } = e;
-			this._recentCloseAt = newState === `closed` ? performance.now() : void 0;
-		};
-	}
-	get isOpen() {
-		return this._isOpen;
-	}
-	show() {
-		if (!this.popover) return;
-		try {
-			this.showPopover();
-		} catch {}
+		this.orientation = `horizontal`;
+		this.layout = `one-line`;
+		this.verticalWriting = `auto`;
+		this.showGroupLabels = false;
+		this.invisibleGroups = false;
+		this._overflowCount = 0;
+		this._ro = null;
+		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
+		this._sizes = /* @__PURE__ */ new WeakMap();
+		this._measureQueued = false;
 	}
-	hide() {
-		if (!this.popover) return;
-		try {
-			this.hidePopover();
-		} catch {}
+	static {
+		this._cnt = 0;
 	}
-	toggle() {
-		if (!this.popover) return;
-		if (this._recentCloseAt !== void 0 && performance.now() - this._recentCloseAt < 50) {
-			this._recentCloseAt = void 0;
-			return;
-		}
-		try {
-			this.togglePopover();
-		} catch {}
+	static {
+		this.styles = [
+			themeFallbacks,
+			popupSurfaceStyles,
+			css`
+    :host {
+      --toolbar-gap: var(--space-s);
+      --toolbar-group-gap: var(--space-m);
+      display: block;
+      container-type: inline-size;
+    }
+    :host([orientation="vertical-left"]),
+    :host([orientation="vertical-right"]) {
+      container-type: normal;
+      width: max-content;
+    }
+    :host([orientation="vertical-left"]),
+    :host([orientation="vertical-right"]) { height: 100%; }
+    :host([orientation="vertical-left"]) .inner,
+    :host([orientation="vertical-right"]) .inner { height: 100%; box-sizing: border-box; width: max-content; }
+    .inner {
+      display: flex;
+      gap: var(--toolbar-gap);
+      background: var(--toolbar-bg, var(--surface-2));
+      padding: var(--toolbar-padding, var(--space-s));
+      border: var(--toolbar-border, var(--border-subtle));
+      border-radius: var(--radius-s);
+      align-items: center;
+    }
+    :host([orientation="horizontal"]) .inner { flex-direction: row; justify-content: flex-start; }
+    :host([orientation="vertical-left"]) .inner { flex-direction: column-reverse; align-items: stretch; }
+    :host([orientation="vertical-right"]) .inner { flex-direction: column; align-items: stretch; }
+    :host([layout="wrap"]) .inner { flex-wrap: wrap; }
+    :host([layout="one-line"]) .inner { flex-wrap: nowrap; overflow: hidden; }
+    :host([orientation="vertical-left"][vertical-writing="auto"]) ::slotted(*) { writing-mode: sideways-lr; }
+    :host([orientation="vertical-right"][vertical-writing="auto"]) ::slotted(*) { writing-mode: vertical-lr; }
+    :host([vertical-writing="up"]) ::slotted(*) { writing-mode: vertical-rl; text-orientation: upright; }
+    :host([vertical-writing="down"]) ::slotted(*) { writing-mode: vertical-lr; }
+    :host([vertical-writing="none"]) ::slotted(*) { writing-mode: horizontal-tb; }
+    ::slotted(*) { flex: 0 0 auto; }
+    ::slotted([grow]), ::slotted(ixfx-toolbar-group[grow]) { flex: 1 1 auto; }
+    ::slotted([hidden]) { display: none !important; }
+    :host([invisible-groups]) ::slotted(ixfx-toolbar-group) { --toolbar-group-border: none; }
+    .overflow-btn {
+      anchor-name: var(--anchor-name);
+      flex-shrink: 0;
+      background: var(--surface-3);
+      border: var(--border);
+      border-radius: var(--radius-s);
+      padding: var(--space-xs) var(--space-s);
+      cursor: pointer;
+      display: none;
+    }
+    .overflow-btn[visible] { display: inline-flex; }
+    .overflow-popover {
+      position: fixed;
+      top: anchor(bottom);
+      left: anchor(right);
+      position-anchor: var(--anchor-name);
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+      margin: 8px;
+      max-height: min(60vh, 400px);
+      max-width: min(90vw, 320px);
+      overflow: auto;
+      overscroll-behavior: contain;
+      z-index: 100;
+      padding: var(--space-s);
+      flex-direction: column;
+      gap: var(--space-s);
+    }
+    .overflow-popover:popover-open { display: flex; }
+    .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
+  `
+		];
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.hasAttribute(`popover`)) this.popover = `auto`;
-		this.classList.add(`popup-surface`);
-		this.addEventListener(`toggle`, this._onToggle);
-		this.addEventListener(`beforetoggle`, this._onBeforeToggle);
-		this.addEventListener(`click`, this._onPanelClick);
-		this.style.setProperty(`position-anchor`, this._anchorName);
-		this._attachToTarget();
+		this.style.setProperty(`--anchor-name`, this._anchor);
 	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener(`toggle`, this._onToggle);
-		this.removeEventListener(`beforetoggle`, this._onBeforeToggle);
-		this.removeEventListener(`click`, this._onPanelClick);
-		this._detachFromTarget();
-		this._cancelShow();
-		this._cancelHide();
+	firstUpdated() {
+		this._slot.addEventListener(`slotchange`, () => this._scheduleMeasure());
+		this._ro = new ResizeObserver(() => this._scheduleMeasure());
+		this._ro.observe(this._inner);
+		this._scheduleMeasure();
+		this._updateGroupLabels();
 	}
 	updated(changed) {
-		super.updated(changed);
-		if (changed.has(`for`) || changed.has(`mode`)) this._attachToTarget();
+		if (changed.has(`showGroupLabels`)) this._updateGroupLabels();
 	}
-	_resolveTarget() {
-		if (!this.for) return void 0;
-		return this.getRootNode().getElementById(this.for) ?? void 0;
-	}
-	_attachToTarget() {
-		this._detachFromTarget();
-		const target = this._resolveTarget();
-		if (!target) {
-			if (this.for) console.warn(`ixfx-snackbar: no element found with id "${this.for}"`);
-			return;
+	_updateGroupLabels() {
+		for (const child of Array.from(this.children)) if (child.tagName === `IXFX-TOOLBAR-GROUP`) {
+			if (this.showGroupLabels) child.setAttribute(`show-label`, ``);
+			else child.removeAttribute(`show-label`);
 		}
-		this._target = target;
-		target.style.setProperty(`anchor-name`, this._anchorName);
-		if (this.mode === `explicit`) {
-			const alreadyFocusable = target.tabIndex >= 0;
-			if (!alreadyFocusable) {
-				target.setAttribute(`tabindex`, `0`);
-				this._addedTabindex = true;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._ro?.disconnect();
+	}
+	/** Coalesce measure passes into one per frame; prevents slotchange feedback loops. */
+	_scheduleMeasure() {
+		if (this._measureQueued) return;
+		this._measureQueued = true;
+		requestAnimationFrame(() => {
+			this._measureQueued = false;
+			this._measure();
+		});
+	}
+	_measure() {
+		const children = Array.from(this.children);
+		const isGrow = (el) => el.hasAttribute(`grow`) || el.matches(`[grow]`);
+		const overflowable = children.filter((el) => !isGrow(el));
+		const isHoriz = this.orientation === `horizontal`;
+		if (this.layout !== `one-line`) {
+			let mutated = false;
+			for (const el of children) {
+				if (el.getAttribute(`slot`) === `overflow`) {
+					el.removeAttribute(`slot`);
+					mutated = true;
+				}
+				if (el.hasAttribute(`hidden`)) {
+					el.removeAttribute(`hidden`);
+					mutated = true;
+				}
 			}
-			if (!target.hasAttribute(`role`) && !alreadyFocusable) {
-				target.setAttribute(`role`, `button`);
-				this._addedRole = true;
+			if (this._overflowCount !== 0) {
+				this._overflowCount = 0;
+				mutated = true;
 			}
-			target.setAttribute(`aria-haspopup`, `true`);
-			target.addEventListener(`click`, this._onTargetClick);
-			if (!alreadyFocusable) target.addEventListener(`keydown`, this._onTargetKeydown);
-		} else if (this.mode === `implicit`) {
-			target.addEventListener(`pointerenter`, this._onTickleIn);
-			target.addEventListener(`focus`, this._onTickleIn);
-			target.addEventListener(`pointerleave`, this._onTickleOut);
-			target.addEventListener(`blur`, this._onTickleOut);
-			this.addEventListener(`pointerenter`, this._onTickleIn);
-			this.addEventListener(`focusin`, this._onTickleIn);
-			this.addEventListener(`pointerleave`, this._onTickleOut);
-			this.addEventListener(`focusout`, this._onTickleOut);
+			if (mutated) this.requestUpdate();
+			return;
 		}
-	}
-	_detachFromTarget() {
-		const target = this._target;
-		if (!target) return;
-		target.style.removeProperty(`anchor-name`);
-		if (this._addedTabindex) {
-			target.removeAttribute(`tabindex`);
-			this._addedTabindex = false;
+		if (!this._inner) return;
+		const cs = getComputedStyle(this._inner);
+		const gap = (isHoriz ? Number.parseFloat(cs.columnGap) : Number.parseFloat(cs.rowGap)) || 0;
+		const available = isHoriz ? this._inner.clientWidth : this._inner.clientHeight;
+		const btnSize = 36;
+		const inMain = overflowable.filter((el) => el.getAttribute(`slot`) !== `overflow`);
+		const inOverflow = overflowable.filter((el) => el.getAttribute(`slot`) === `overflow`);
+		let cum = 0;
+		inMain.forEach((el, i) => {
+			const s = isHoriz ? el.offsetWidth : el.offsetHeight;
+			if (s > 0) this._sizes.set(el, s);
+			cum += (i ? gap : 0) + (this._sizes.get(el) ?? s);
+		});
+		const btnAllowance = inOverflow.length > 0 ? gap + btnSize : 0;
+		let mutated = false;
+		while (inMain.length > 0 && cum + btnAllowance > available) {
+			const last = inMain[inMain.length - 1];
+			const s = this._sizes.get(last) ?? 0;
+			last.setAttribute(`slot`, `overflow`);
+			inMain.pop();
+			inOverflow.unshift(last);
+			cum -= (inMain.length ? gap : 0) + s;
+			mutated = true;
 		}
-		if (this._addedRole) {
-			target.removeAttribute(`role`);
-			this._addedRole = false;
+		while (inOverflow.length > 0) {
+			const first = inOverflow[0];
+			const s = this._sizes.get(first);
+			if (s === void 0) break;
+			const addGap = inMain.length ? gap : 0;
+			const nextBtnAllowance = inOverflow.length > 1 ? gap + btnSize : 0;
+			if (cum + addGap + s + nextBtnAllowance > available) break;
+			first.removeAttribute(`slot`);
+			inOverflow.shift();
+			inMain.push(first);
+			cum += addGap + s;
+			mutated = true;
 		}
-		target.removeAttribute(`aria-haspopup`);
-		target.removeEventListener(`click`, this._onTargetClick);
-		target.removeEventListener(`keydown`, this._onTargetKeydown);
-		target.removeEventListener(`pointerenter`, this._onTickleIn);
-		target.removeEventListener(`focus`, this._onTickleIn);
-		target.removeEventListener(`pointerleave`, this._onTickleOut);
-		target.removeEventListener(`blur`, this._onTickleOut);
-		this.removeEventListener(`pointerenter`, this._onTickleIn);
-		this.removeEventListener(`focusin`, this._onTickleIn);
-		this.removeEventListener(`pointerleave`, this._onTickleOut);
-		this.removeEventListener(`focusout`, this._onTickleOut);
-		this._target = void 0;
-	}
-	_scheduleShow() {
-		this._cancelHide();
-		this._cancelShow();
-		if (this.showDelay <= 0) {
-			this.show();
-			return;
+		const newCount = inOverflow.length;
+		if (newCount !== this._overflowCount) {
+			this._overflowCount = newCount;
+			mutated = true;
 		}
-		this._showTimeout = window.setTimeout(() => this.show(), this.showDelay);
+		if (mutated) this.requestUpdate();
 	}
-	_scheduleHide() {
-		this._cancelShow();
-		this._cancelHide();
-		if (this.hideDelay <= 0) {
-			this.hide();
-			return;
+	_toggleOverflow() {
+		try {
+			this._popover.togglePopover();
+		} catch {
+			this._popover.showPopover();
 		}
-		this._hideTimeout = window.setTimeout(() => this.hide(), this.hideDelay);
 	}
-	_cancelShow() {
-		if (this._showTimeout !== void 0) {
-			window.clearTimeout(this._showTimeout);
-			this._showTimeout = void 0;
-		}
+	render() {
+		const hasOverflow = this._overflowCount > 0;
+		return html`
+      <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
+        <slot></slot>
+        <button class="overflow-btn" ?visible=${hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</button>
+      </div>
+      <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
+        <slot name="overflow"></slot>
+      </div>
+    `;
 	}
-	_cancelHide() {
-		if (this._hideTimeout !== void 0) {
-			window.clearTimeout(this._hideTimeout);
-			this._hideTimeout = void 0;
-		}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], ToolbarElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], ToolbarElement.prototype, "layout", void 0);
+__decorate([property({
+	type: String,
+	attribute: `vertical-writing`,
+	reflect: true
+})], ToolbarElement.prototype, "verticalWriting", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `show-group-labels`,
+	reflect: true
+})], ToolbarElement.prototype, "showGroupLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `invisible-groups`,
+	reflect: true
+})], ToolbarElement.prototype, "invisibleGroups", void 0);
+__decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
+__decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
+__decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
+ToolbarElement = _ToolbarElement = __decorate([safeCustomElement(`ixfx-toolbar`)], ToolbarElement);
+//#endregion
+//#region src/toolbar/toolbar-group.ts
+let ToolbarGroupElement = class ToolbarGroupElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = ``;
+		this.grow = false;
 	}
 	static {
-		this.styles = [
-			themeFallbacks,
-			popupSurfaceStyles,
-			css`
+		this.styles = [themeFallbacks, css`
     :host {
       display: flex;
-      align-items: center;
-      gap: var(--space-s);
-      padding: var(--space-s);
-
-      position: fixed;
-      inset: unset;
-      margin: 0;
-      z-index: 100;
-      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-
-      opacity: 0;
-      scale: 0.97;
-      pointer-events: none;
-      transition: opacity 0.12s ease-out, scale 0.12s ease-out,
-                  display 0.12s allow-discrete, overlay 0.12s allow-discrete;
-    }
-
-    :host(:popover-open) {
-      opacity: 1;
-      scale: 1;
-      pointer-events: auto;
-    }
-
-    @starting-style {
-      :host(:popover-open) {
-        opacity: 0;
-        scale: 0.97;
-      }
-    }
-
-    :host([placement="top"]) {
-      position-area: block-start;
-      margin-block-end: var(--space-s);
-    }
-
-    :host([placement="bottom"]) {
-      position-area: block-end;
-      margin-block-start: var(--space-s);
-    }
-
-    :host([placement="left"]) {
-      position-area: inline-start;
-      margin-inline-end: var(--space-s);
+      flex-direction: column;
+      align-items: var(--toolbar-group-align-items, center);
+      justify-content: var(--toolbar-group-justify-content, flex-start);
+      gap: var(--toolbar-gap, var(--space-s));
+      padding: var(--space-xs);
+      border: 1px solid var(--border-subtle, var(--border));
+      border-radius: var(--radius-s);
+      background: var(--surface-3);
+      min-width: 0;
     }
-
-    :host([placement="right"]) {
-      position-area: inline-end;
-      margin-inline-start: var(--space-s);
+    :host(:not([label])) {
+      border: none;
+      background: transparent;
+      padding: 0;
     }
-  `
-		];
+    .label-row {
+      display: none;
+      font-size: var(--text-s, 12px);
+      color: var(--surface-muted-text);
+      padding-inline: var(--space-xs);
+      white-space: nowrap;
+      border-bottom: 1px solid var(--border-subtle);
+      margin-bottom: var(--space-xs);
+    }
+    :host([label][show-label]) .label-row { display: block; }
+    :host(:not([label])) .label-row { display: none; }
+    :host([grow]) { flex: 1 1 auto; min-width: 0; }
+    :host([hidden]) { display: none !important; }
+    .components { display: flex; }
+    ::slotted(*) { flex: 0 0 auto; }
+    ::slotted([grow]) { flex: 1 1 auto; }
+  `];
 	}
 	render() {
-		return html`<slot></slot>`;
+		return html`
+      <div class="label-row">${this.label}</div>
+      <div class="components">
+        <slot></slot>
+      </div>
+    `;
 	}
 };
-__decorate([property({ type: String })], SnackbarElement.prototype, "for", void 0);
-__decorate([property({ type: String })], SnackbarElement.prototype, "mode", void 0);
+__decorate([property({ type: String })], ToolbarGroupElement.prototype, "label", void 0);
 __decorate([property({
-	type: String,
+	type: Boolean,
 	reflect: true
-})], SnackbarElement.prototype, "placement", void 0);
-__decorate([property({ type: String })], SnackbarElement.prototype, "dismiss", void 0);
-__decorate([property({
-	type: Number,
-	attribute: `show-delay`
-})], SnackbarElement.prototype, "showDelay", void 0);
-__decorate([property({
-	type: Number,
-	attribute: `hide-delay`
-})], SnackbarElement.prototype, "hideDelay", void 0);
-__decorate([state()], SnackbarElement.prototype, "_isOpen", void 0);
-SnackbarElement = __decorate([safeCustomElement(`ixfx-snackbar`)], SnackbarElement);
+})], ToolbarGroupElement.prototype, "grow", void 0);
+ToolbarGroupElement = __decorate([safeCustomElement(`ixfx-toolbar-group`)], ToolbarGroupElement);
 //#endregion
 //#region src/tabs/tab-list-item.ts
 let TabListItemElement = class TabListItemElement extends LitElement {
@@ -6396,248 +4582,6 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
 __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();
-		};
-	}
-	setText(msg, effect) {
-		this._pendingEffect = effect;
-		this.text = msg;
-	}
-	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);
-		}
-	}
-	_startTransition(newText, effect) {
-		const prevText = this._currentText;
-		this._currentText = newText;
-		this._outgoingText = prevText;
-		if (prevText !== ``) {
-			this._transitionId++;
-			this._activeEffect = effect;
-		}
-	}
-	_onTransitionEnd() {
-		this._outgoingText = ``;
-		this._activeEffect = void 0;
-		if (this._queue.length > 0) {
-			const next = this._queue.shift();
-			this._startTransition(next.text, next.effect);
-		}
-	}
-	#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}
-    `;
-	}
-	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: inline-block;
-      --transitory-label-easing: ease;
-    }
-
-    .container {
-      display: inline-grid;
-      overflow: hidden;
-    }
-
-    .layer {
-      grid-area: 1 / 1;
-      white-space: nowrap;
-    }
-
-    .layer.outgoing {
-      pointer-events: none;
-    }
-
-    /* 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;
-    }
-
-    @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%); }
-    }
-
-    /* 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;
-    }
-
-    @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%); }
-    }
-
-    /* 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%); }
-    }
-
-    /* slide-down */
-    .layer.current.slide-down {
-      transform: translateY(-100%);
-      animation: tl-slide-in-top var(--transitory-label-easing) forwards;
-    }
-    .layer.outgoing.slide-down {
-      animation: tl-slide-out-bottom var(--transitory-label-easing) forwards;
-    }
-
-    @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%); }
-    }
-
-    /* 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;
-    }
-
-    @keyframes tl-fade-in {
-      from { opacity: 0; }
-      to   { opacity: 1; }
-    }
-    @keyframes tl-fade-out {
-      from { opacity: 1; }
-      to   { opacity: 0; }
-    }
-
-    /* character-swap */
-    .char {
-      display: inline-block;
-    }
-
-    .char.in {
-      opacity: 0;
-      animation: tl-char-in var(--transitory-label-easing) forwards;
-    }
-
-    .char.out {
-      animation: tl-char-out var(--transitory-label-easing) forwards;
-    }
-
-    @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;
@@ -6695,6 +4639,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizElement, SelectHorizontalElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, 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, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map