@ixfx/components 0.5.20 → 0.6.0

package/dist/vertical-list.js

@@ -0,0 +1,737 @@
+import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as createElementIncrSearch } from "./element-search-Y8SRfPGM.js";
+import { LitElement, css, html, render } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#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();
+			}
+		};
+		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 = /* @__PURE__ */ 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);
+		}
+	}
+	_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) {
+					const renderer = typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer;
+					render(renderer(checked), cb);
+				}
+			} else {
+				const input = cb.querySelector(`input.ixfx-list-checkbox`);
+				if (input) input.checked = checked;
+			}
+		}
+	}
+	/**
+	* Native checkbox cell: a span that stretches to the row's full cross-axis
+	* (so the entire column height is a click target) with a real `<input>`
+	* centred inside. The span owns the click; the input is purely visual and
+	* has `pointer-events:none` so a single click produces one toggle.
+	*/
+	_createNativeCheckboxCell(el) {
+		const cell = document.createElement(`span`);
+		cell.className = `ixfx-list-checkbox ixfx-list-checkbox-native`;
+		cell.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:18px;margin:0 6px 0 0;cursor:pointer;pointer-events:auto`;
+		cell.tabIndex = -1;
+		cell.setAttribute(`role`, `checkbox`);
+		cell.setAttribute(`part`, `checkbox`);
+		cell.addEventListener(`click`, (e) => {
+			e.stopPropagation();
+			this._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);
+//#endregion
+export { VerticalListElement };
+
+//# sourceMappingURL=vertical-list.js.map