@ixfx/components 0.2.5 → 0.3.0

package/dist/index.js

@@ -1,32 +1,33 @@
-import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-CAjwQ4GE.js";
-import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as getIcon } from "./registry-CZEB1YI9.js";
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
-import { t as IxfxIconElement } from "./icon-BR5aTIiP.js";
+import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-TPbSHruI.js";
+import { n as tickledStyles, r as TickledController } from "./tickled-styles-Bg3QbcrD.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
+import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as getIcon } from "./registry-Q2gYQCHM.js";
+import { t as IxfxIconElement } from "./icon-9NWTXtE1.js";
 import { AcTextElement } from "./ac-text.js";
-import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-FEZaGiYZ.js";
+import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearchTreeController, r as createIncrSearch, t as createElementIncrSearch } from "./incr-search-DSKKsk6w.js";
+import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-C7elhuyJ.js";
 import "./icons.js";
-import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
-import { n as buttonStyles, t as ButtonElement } from "./button-DgKUzE5o.js";
-import { t as popupSurfaceStyles } from "./popup-Ddx9LCzY.js";
-import "./menu-item-DEzL_Yjk.js";
+import { t as prominenceStyles } from "./prominence--ic9uWBl.js";
+import { n as buttonStyles, t as ButtonElement } from "./button-DMt5XWUK.js";
+import { t as popupSurfaceStyles } from "./popup-ImtS9KnS.js";
+import "./menu-item-CKRfP0pN.js";
 import { Checkbox } from "./checkbox.js";
-import { C as resultThrow, E as throwIfFailed, d as scaler, h as without, n as clamper, p as containsDuplicateInstances, y as nullUndefTest } from "./dist-D7kJgnSE.js";
-import { a as computeColour, c as last, i as applyAgeModification, l as QueueMutable, n as PlotSingleAxis, o as parseColourScaleAttr, r as PlotDataSeries, s as readBaseColour, t as PlotXyAxis, u as __exportAll } from "./xy-axis-BANbgrI5.js";
-import { a as toStringAbbreviate, c as isEqualDefault, l as isEqualValueDefault, o as defaultComparer, r as isPrimitive, u as isEqualValueIgnoreOrder } from "./dist-By5URG0Y.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-Bw-AZoWx.js";
+import { C as resultThrow, E as throwIfFailed, d as scaler, h as without, n as clamper, p as containsDuplicateInstances, y as nullUndefTest } from "./dist-TAGYwaju.js";
+import { a as computeColour, c as last, i as applyAgeModification, l as QueueMutable, n as PlotSingleAxis, o as parseColourScaleAttr, r as PlotDataSeries, s as readBaseColour, t as PlotXyAxis, u as __exportAll } from "./xy-axis-DL0tfJDr.js";
+import { a as toStringAbbreviate, c as isEqualDefault, l as isEqualValueDefault, o as defaultComparer, r as isPrimitive, u as isEqualValueIgnoreOrder } from "./dist-BX0OVIm7.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-K6zu82lm.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
-import { t as TreeDataModel } from "./tree-data-model-DGvRVOFY.js";
-import { a as createFuzzySearch, i as createIncrSearch, n as createAcCompletionProvider, r as createElementIncrSearch, t as IncrSearchTreeController } from "./incr-search-BjCNClnC.js";
+import { i as TreeDataModel, n as TreeController, r as TreeBaseElement, t as TreeListElement } from "./tree-CvvKbO-f.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { EditableLabel } from "./editable-label.js";
 import { t as resolveStep } from "./keyboard-De_vOHLg.js";
-import { t as IxfxHexEditorElement } from "./hex-editor-Wd6ZtZA2.js";
-import { t as RadialInputElement } from "./radial-input-CNJ8asY2.js";
+import { t as IxfxHexEditorElement } from "./hex-editor-CsN_ySkH.js";
+import { t as RadialInputElement } from "./radial-input-DZA6WaFu.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LedElement } from "./led.js";
-import { t as menu_exports } from "./menu-BV6UFx_z.js";
+import { t as menu_exports } from "./menu-DJJuCm-5.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
 import { PanelElement } from "./panel.js";
 import { PolarPad } from "./polar-pad.js";
@@ -38,13 +39,633 @@ import { SnapContainer } from "./snap-container.js";
 import { SplitLayoutElement } from "./split-layout.js";
 import { SwipeElement } from "./swipe.js";
 import { TabListElement } from "./tabs.js";
-import { a as attachTimelineInteractions, i as timelineStyles, n as IxfxTimelineElement, o as resolveCssVars, r as TimelineTrackTabElement, s as resolveGrid, t as TimelineController } from "./timeline-DBWJsSjd.js";
-import { TreeBaseElement, TreeController, TreeListElement } from "./tree.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-Cv75Th2U.js";
 import { XyPad } from "./xy-pad.js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { keyed } from "lit/directives/keyed.js";
 import { classMap } from "lit/directives/class-map.js";
+//#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 {
+	#cache;
+	#debounceTimer;
+	#abortController;
+	#staticProvider;
+	constructor() {
+		super();
+		this.placeholder = ``;
+		this.cacheSize = 20;
+		this.debounceMs = 150;
+		this.strict = false;
+		this._tokens = [];
+		this._draft = ``;
+		this._suggestions = [];
+		this._isOpen = false;
+		this._isLoading = false;
+		this._tickled = new TickledController(this, { getItems: () => this._suggestions.map((_, i) => ({
+			id: i,
+			enabled: true
+		})) });
+		this.#cache = makeLruCache(20);
+		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] ?? ``;
+			}
+			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();
+	}
+	/** 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();
+		this.#cancelPending();
+	}
+	updated(changedProps) {
+		if (changedProps.has(`completionProvider`) || changedProps.has(`cacheSize`)) this.#cache = makeLruCache(this.cacheSize);
+		if (changedProps.has(`completionProvider`)) this.#buildStaticProvider();
+	}
+	#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._suggestions[tickledIdx]) {
+					e.preventDefault();
+					this.#selectSuggestion(this._suggestions[tickledIdx]);
+				} else if (!this.strict && this._draft.trim()) {
+					e.preventDefault();
+					this.#addToken({ label: this._draft.trim() });
+					this._draft = ``;
+					this.#closePopup();
+				}
+				break;
+			}
+			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);
+	}
+	#addToken(item) {
+		const index = this._tokens.length;
+		this._tokens = [...this._tokens, item];
+		this.dispatchEvent(new CustomEvent(`ac-token-add`, {
+			detail: {
+				item,
+				index
+			},
+			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`, {
+			detail: {
+				item,
+				index
+			},
+			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
+		}));
+	}
+	#closePopup() {
+		this._isOpen = false;
+		this._tickled.clearTickled();
+	}
+	#cancelPending() {
+		if (this.#debounceTimer !== void 0) {
+			clearTimeout(this.#debounceTimer);
+			this.#debounceTimer = void 0;
+		}
+		this.#abortController?.abort();
+		this.#abortController = void 0;
+		this._isLoading = false;
+	}
+	#scheduleSuggestionFetch(query) {
+		const provider = this.completionProvider ?? this.#staticProvider;
+		if (!provider) {
+			this._isOpen = false;
+			return;
+		}
+		if (this.#debounceTimer !== void 0) clearTimeout(this.#debounceTimer);
+		this._isOpen = true;
+		this.#debounceTimer = setTimeout(() => {
+			this.#fetchSuggestions(query, provider);
+		}, this.debounceMs);
+	}
+	#fetchSuggestions(query, provider) {
+		const cached = this.#cache.get(query);
+		if (cached !== void 0) {
+			this._suggestions = cached;
+			this._tickled.clearTickled();
+			this._isLoading = false;
+			return;
+		}
+		this.#abortController?.abort();
+		this.#abortController = new AbortController();
+		const { signal } = this.#abortController;
+		this._isLoading = true;
+		Promise.resolve(provider(query, signal)).then((results) => {
+			if (signal.aborted) return;
+			this.#cache.set(query, results);
+			this._suggestions = results;
+			this._tickled.clearTickled();
+			this._isLoading = false;
+		}).catch((err) => {
+			if (signal.aborted) return;
+			console.error(`[ixfx-ac-token] completionProvider error:`, err);
+			this._suggestions = [];
+			this._isLoading = false;
+		});
+	}
+	#scrollSuggestionIntoView() {
+		this.updateComplete.then(() => {
+			this.shadowRoot?.querySelector(`.suggestion.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="suggestion ${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._isLoading && this._suggestions.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._suggestions.map((item, i) => this.#renderSuggestion(item, i))}
+      </div>
+    `;
+	}
+	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._isLoading ? html`<span class="spinner" aria-hidden="true"></span>` : nothing}
+      </div>
+      ${this._isOpen ? this.#renderPopup() : nothing}
+    `;
+	}
+	static {
+		this.styles = [tickledStyles, 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 ---- */
+
+    .suggestion {
+      display: flex;
+      align-items: center;
+      gap: var(--space-m, 8px);
+      padding: var(--space-xs, 3px) var(--space-l, 12px);
+      cursor: pointer;
+      border-radius: var(--radius-s, 3px);
+      margin: 0 var(--space-xs, 3px);
+      transition: background var(--transition, 0.1s ease-out);
+      user-select: none;
+      white-space: nowrap;
+      min-height: 28px;
+    }
+
+    .suggestion.tickled {
+      background: var(--_item-focused-bg, var(--accent));
+      color: var(--accent-text, #fff);
+    }
+
+    .suggestion.tickled .sugg-sublabel {
+      color: color-mix(in srgb, var(--accent-text, #fff) 70%, transparent);
+    }
+
+    .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([state()], AcTokenElement.prototype, "_tokens", void 0);
+__decorate([state()], AcTokenElement.prototype, "_draft", void 0);
+__decorate([state()], AcTokenElement.prototype, "_selectedTokenIndex", void 0);
+__decorate([state()], AcTokenElement.prototype, "_suggestions", void 0);
+__decorate([state()], AcTokenElement.prototype, "_isOpen", void 0);
+__decorate([state()], AcTokenElement.prototype, "_isLoading", void 0);
+AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
+//#endregion
 //#region src/button/radio-group.ts
 let RadioGroup = class RadioGroup extends LitElement {
 	constructor(..._args) {
@@ -371,7 +992,7 @@ __decorate([property({
 __decorate([state()], RadioGroup.prototype, "_computedItems", void 0);
 __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
-RadioGroup = __decorate([customElement(`ixfx-radio-group`)], RadioGroup);
+RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
 //#region src/button/split-button.ts
 let SplitButton = class SplitButton extends ButtonElement {
@@ -760,7 +1381,7 @@ __decorate([state()], SplitButton.prototype, "_switcherItems", void 0);
 __decorate([state()], SplitButton.prototype, "_dynamicItems", void 0);
 __decorate([state()], SplitButton.prototype, "_loadingItems", void 0);
 __decorate([state()], SplitButton.prototype, "_menuHasItems", void 0);
-SplitButton = __decorate([customElement(`ixfx-split-button`)], SplitButton);
+SplitButton = __decorate([safeCustomElement(`ixfx-split-button`)], SplitButton);
 //#endregion
 //#region node_modules/.pnpm/@ixfx+collections@0.56.12/node_modules/@ixfx/collections/dist/StackMutable-B9Qm32K8.js
 const trimStack = (opts, stack, toAdd) => {
@@ -4174,7 +4795,7 @@ __decorate([state()], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0
 __decorate([state()], CrumbPathElement.prototype, "_editingCancelled", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openCumPath", void 0);
-CrumbPathElement = __decorate([customElement(`ixfx-crumb-path`)], CrumbPathElement);
+CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/editable-label/editable-number.ts
 const DRAG_THRESHOLD_PX = 3;
@@ -4752,7 +5373,7 @@ __decorate([property({
 	attribute: `no-drag`
 })], EditableNumber.prototype, "noDrag", void 0);
 __decorate([property({ type: Number })], EditableNumber.prototype, "precision", void 0);
-EditableNumber = __decorate([customElement(`ixfx-editable-number`)], EditableNumber);
+EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
 //#endregion
 //#region src/panel/panel-group.ts
 let PanelGroupElement = class PanelGroupElement extends LitElement {
@@ -4840,7 +5461,7 @@ __decorate([property({
 })], PanelGroupElement.prototype, "allowMultiple", void 0);
 __decorate([property()], PanelGroupElement.prototype, "gap", void 0);
 __decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
-PanelGroupElement = __decorate([customElement(`ixfx-panel-group`)], PanelGroupElement);
+PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
 //#endregion
 //#region src/util/drag.ts
 function getCoordinates(event) {
@@ -5353,7 +5974,7 @@ __decorate([property({ type: Number })], RangeMultiElement.prototype, "max", nul
 __decorate([property({ type: Number })], RangeMultiElement.prototype, "min", null);
 __decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onInput", null);
 __decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
-RangeMultiElement = __decorate([customElement(`ixfx-range-multi`)], RangeMultiElement);
+RangeMultiElement = __decorate([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
 //#endregion
 //#region src/tabs/tab-list-item.ts
 let TabListItemElement = class TabListItemElement extends LitElement {
@@ -5515,7 +6136,7 @@ __decorate([property({
 })], TabListItemElement.prototype, "commandActive", void 0);
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
-TabListItemElement = __decorate([customElement(`ixfx-tab-list-item`)], TabListItemElement);
+TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
 let TabPanelElement = class TabPanelElement extends LitElement {
@@ -5537,7 +6158,7 @@ let TabPanelElement = class TabPanelElement extends LitElement {
   `;
 	}
 };
-TabPanelElement = __decorate([customElement(`ixfx-tab-panel`)], TabPanelElement);
+TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
 //#endregion
 //#region src/tabs/tab-panels.ts
 let TabPanelsElement = class TabPanelsElement extends LitElement {
@@ -5592,7 +6213,249 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
 	}
 };
 __decorate([queryAssignedElements()], TabPanelsElement.prototype, "_listItems", void 0);
-TabPanelsElement = __decorate([customElement(`ixfx-tab-panels`)], TabPanelsElement);
+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) {
@@ -5719,13 +6582,582 @@ __decorate([property({ type: String })], TooltipElement.prototype, "orientation"
 __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([customElement(`ixfx-tooltip`)], TooltipElement);
+TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
+//#endregion
+//#region src/vertical-list/vertical-list.ts
+const ITEM_SELECTOR = `li, [data-list-item]`;
+function isMultiMode(mode) {
+	return mode === `checked` || mode === `vscode` || mode === `standard`;
+}
+let VerticalListElement = class VerticalListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.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;
+	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;
+			this._clearSelection();
+		}
+	}
+	/** 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) {
+		if (typeof item === `string`) {
+			const li = document.createElement(`li`);
+			li.textContent = item;
+			this.appendChild(li);
+		} else this.appendChild(item);
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+	}
+	removeItem(item) {
+		item.remove();
+	}
+	clearItems() {
+		this.replaceChildren();
+		this.#selectionAnchor = void 0;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
+	}
+	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);
+		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();
+	}
+	_replaceSelection(item) {
+		if (this.selectionMode === `none`) return;
+		const previous = this._selectedItems;
+		const next = new Set([item]);
+		this._selectedItems = next;
+		this.#selectionAnchor = item;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_toggleItem(item) {
+		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
+		if (this.selectionMode === `none` && this.interactionMode !== `checked`) return;
+		const previous = this._selectedItems;
+		const next = new Set(this._selectedItems);
+		if (next.has(item)) next.delete(item);
+		else {
+			if (!effectiveMultiple) next.clear();
+			next.add(item);
+		}
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_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));
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_clearSelection() {
+		if (this._selectedItems.size === 0) return;
+		const previous = this._selectedItems;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: /* @__PURE__ */ new Set(),
+			previous
+		});
+	}
+	_selectAll() {
+		const visible = this._getVisibleItems();
+		if (visible.length === 0) return;
+		const previous = this._selectedItems;
+		const next = new Set(visible);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_handleClickSelection(item, e) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (this.selectionMode === `none` && mode !== `checked`) return;
+		switch (mode) {
+			case `implicit`:
+				this._replaceSelection(item);
+				break;
+			case `standard`:
+			case `vscode`:
+				if (e.ctrlKey || e.metaKey) {
+					if (this.selectionMode === `multiple` || mode === `vscode`) this._toggleItem(item);
+				} else if (e.shiftKey && (this.selectionMode === `multiple` || mode === `vscode`)) this._rangeSelectTo(item);
+				else this._replaceSelection(item);
+				break;
+			case `checked`: break;
+		}
+	}
+	_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 (el.hidden) return false;
+			if (this.filterPredicate && !this.filterPredicate(el)) return false;
+			return true;
+		});
+	}
+	_syncItemStates() {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this._selectedItems.has(el));
+			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, this._selectedItems.has(el));
+			else el.removeAttribute(`data-checked`);
+		}
+		this.dataset.inputMode = this.tickled.inputMode;
+		this._syncCheckboxes();
+	}
+	_syncCheckboxes() {
+		const inCheckedMode = this.interactionMode === `checked`;
+		for (const el of this.querySelectorAll(`li`)) {
+			let cb = el.querySelector(`input.ixfx-list-checkbox`);
+			if (inCheckedMode) {
+				if (!cb) {
+					cb = document.createElement(`input`);
+					cb.type = `checkbox`;
+					cb.className = `ixfx-list-checkbox`;
+					cb.style.cssText = `flex-shrink:0;margin:0 6px 0 0;cursor:pointer;accent-color:var(--accent,#60a5fa);pointer-events:auto`;
+					cb.tabIndex = -1;
+					cb.addEventListener(`click`, (e) => {
+						e.stopPropagation();
+						this._toggleItem(el);
+					});
+					el.prepend(cb);
+				}
+				cb.checked = this._selectedItems.has(el);
+			} else if (cb) cb.remove();
+		}
+	}
+	_findListItem(path) {
+		for (const target of path) {
+			if (!(target instanceof Element)) continue;
+			if (target === this) break;
+			if (target.parentElement === this && target.matches(ITEM_SELECTOR)) return target;
+		}
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_openSearch() {
+		this._searchVisible = true;
+		this.updateComplete.then(() => this._searchInputEl?.focus());
+	}
+	_closeSearch() {
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#search?.clearQuery();
+		this.focus();
+	}
+	_activateItem(item) {
+		if (this.interactionMode !== `manual`) this._replaceSelection(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	static {
+		this.styles = css`
+    :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;
+    }
+
+    :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-y: auto;
+      box-sizing: border-box;
+    }
+
+    ::slotted([hidden]) {
+      display: none !important;
+    }
+
+    ::slotted(li) {
+      display: flex;
+      align-items: center;
+      padding: var(--list-item-padding, 4px var(--space-m, 8px));
+      min-height: var(--list-item-height, 28px);
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      box-sizing: border-box;
+      outline: 1px solid transparent;
+    }
+
+    /* 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;
+    }
+
+    ::slotted([data-tickled]) {
+      background: var(--item-bg-tickled, rgba(0, 0, 0, 0.06));
+      outline: 1px solid var(--accent, #60a5fa);
+    }
+
+    ::slotted([data-selected]) {
+      background: var(--item-bg-selected, rgba(25, 118, 210, 1));
+      color: var(--item-text-selected, #fff);
+      outline: 1px solid transparent;
+    }
+
+    ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-selected-tickled, rgba(21, 101, 192, 1));
+      outline: 2px dashed var(--surface-3, #1e1e1e);
+      outline-offset: -2px;
+    }
+
+    /* 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, rgba(0, 0, 0, 0.06));
+      color: inherit;
+      outline: 1px solid var(--accent, #60a5fa);
+    }
+
+    /* checked mode: left-border indicator for custom shadow-DOM items (no checkbox injection possible) */
+    :host([interaction-mode="checked"]) ::slotted([data-list-item]) {
+      border-left: 3px solid transparent;
+      transition: background var(--transition, 0.1s ease-out),
+                  border-color var(--transition, 0.1s ease-out);
+    }
+
+    :host([interaction-mode="checked"]) ::slotted([data-list-item][data-checked]) {
+      border-left: 3px solid var(--accent, #60a5fa);
+    }
+
+    .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([state()], VerticalListElement.prototype, "_selectedItems", void 0);
+__decorate([state()], VerticalListElement.prototype, "_searchVisible", void 0);
+__decorate([state()], VerticalListElement.prototype, "_searchQuery", void 0);
+__decorate([query(`.search-input`)], VerticalListElement.prototype, "_searchInputEl", void 0);
+VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 //#region src/index.ts
 function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataDisplayComponent, EditableLabel, EditableNumber, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataDisplayComponent, EditableLabel, EditableNumber, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map