@ixfx/components 0.6.2 → 0.7.0

package/dist/vertical-list.js

@@ -1,737 +1,2 @@
-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
+import { t as VerticalListElement } from "./vertical-list-ClnqTkF3.js";
 export { VerticalListElement };
-
-//# sourceMappingURL=vertical-list.js.map