@ixfx/components 0.7.3 → 0.7.4

package/dist/vertical-list-B4w_ksJk.js

@@ -1,814 +0,0 @@
-import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
-import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.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/interaction/list-selection-controller.ts
-/** Whether the interaction mode allows building a multi-item selection. */
-function isMultiMode(mode) {
-	return mode === `checked` || mode === `sticky` || mode === `vscode` || mode === `standard`;
-}
-/**
-* Generic selection state machine shared by list components.
-*
-* Owns the selected set plus the range-selection anchor, the selection
-* primitives (`replace` / `toggle` / `rangeTo` / `clear` / `selectAll` /
-* `selectMany` / `deselect`) and the per-interactionMode gesture routers
-* (`handleClick` / `handleSpace`).
-*
-* Identity is generic: both `ixfx-vertical-list` and `ixfx-detail-list` use
-* `ListSelectionController<Element>`.
-*
-* @example
-* ```ts
-* const selection = new ListSelectionController<Element>({
-*   getOrderedItems: () => this.getVisibleItems(),
-*   isSelectable: el => !el.hasAttribute(`not-checked`),
-*   getModes: () => ({ selectionMode: this.selectionMode, interactionMode: this.interactionMode }),
-*   onChange: (selected, previous) => {
-*     this.syncItemStates();
-*     this.dispatchEvent(new CustomEvent(`list-select`, { detail: { selected, previous } }));
-*   },
-* });
-* ```
-*/
-var ListSelectionController = class {
-	#config;
-	#selected = /* @__PURE__ */ new Set();
-	#anchor;
-	constructor(config) {
-		this.#config = config;
-	}
-	/** The current selection set (read-only). */
-	get selected() {
-		return this.#selected;
-	}
-	/** Anchor for range (shift) selection — the last plainly-selected item. */
-	get anchor() {
-		return this.#anchor;
-	}
-	/** Whether "select all" (Cmd/Ctrl+A) is currently permitted. */
-	canSelectAll() {
-		return this.canSelectMultiple() && this.#config.getModes().selectionMode !== `none`;
-	}
-	/** Whether a multi-item selection can be built in the current modes. */
-	canSelectMultiple() {
-		const { selectionMode, interactionMode } = this.#config.getModes();
-		return selectionMode === `multiple` || isMultiMode(interactionMode);
-	}
-	/** Replace the entire selection with a single item; updates the anchor. */
-	replace(item) {
-		if (this.#config.getModes().selectionMode === `none`) return;
-		if (!this.#config.isSelectable(item)) return;
-		this.#anchor = item;
-		this.#apply(/* @__PURE__ */ new Set([item]));
-	}
-	/** Toggle a single item in/out of the selection without replacing it. Anchor unchanged. */
-	toggle(item) {
-		const { selectionMode, interactionMode } = this.#config.getModes();
-		if (!this.#config.isSelectable(item)) return;
-		if (selectionMode === `none` && interactionMode !== `checked` && interactionMode !== `sticky`) return;
-		const next = new Set(this.#selected);
-		if (next.has(item)) next.delete(item);
-		else {
-			if (!this.canSelectMultiple()) next.clear();
-			next.add(item);
-		}
-		this.#apply(next);
-	}
-	/** Select the contiguous ordered range from the anchor to `item`. Anchor unchanged. */
-	rangeTo(item) {
-		if (this.#config.getModes().selectionMode === `none`) return;
-		if (this.#anchor === void 0) {
-			this.replace(item);
-			return;
-		}
-		const ordered = this.#config.getOrderedItems();
-		const anchorIdx = ordered.indexOf(this.#anchor);
-		const targetIdx = ordered.indexOf(item);
-		if (anchorIdx === -1 || targetIdx === -1) {
-			this.replace(item);
-			return;
-		}
-		const start = Math.min(anchorIdx, targetIdx);
-		const end = Math.max(anchorIdx, targetIdx);
-		this.#apply(new Set(ordered.slice(start, end + 1).filter((t) => this.#config.isSelectable(t))));
-	}
-	/** Clear the selection. No change event when the selection is already empty. */
-	clear() {
-		if (this.#selected.size === 0) return;
-		this.#apply(/* @__PURE__ */ new Set());
-	}
-	/** Select every ordered item that passes `isSelectable`. */
-	selectAll() {
-		const ordered = this.#config.getOrderedItems();
-		if (ordered.length === 0) return;
-		const next = new Set(ordered.filter((t) => this.#config.isSelectable(t)));
-		if (next.size === 0) return;
-		this.#apply(next);
-	}
-	/**
-	* Replace the selection with many items at once. Requires
-	* `selectionMode="multiple"`, throws otherwise. Updates the anchor.
-	*/
-	selectMany(items) {
-		const { selectionMode } = this.#config.getModes();
-		if (selectionMode !== `multiple`) throw new Error(`selectMany requires selectionMode="multiple" (current: "${selectionMode}")`);
-		const next = new Set([...items].filter((t) => this.#config.isSelectable(t)));
-		if (next.size === 0) return;
-		this.#anchor = [...next].at(-1);
-		this.#apply(next);
-	}
-	/** Remove a single item from the selection. */
-	deselect(item) {
-		if (!this.#selected.has(item)) return;
-		const next = new Set(this.#selected);
-		next.delete(item);
-		this.#apply(next);
-	}
-	/** Route a click on `item` according to the current interaction mode. */
-	handleClick(item, gesture) {
-		const { selectionMode, interactionMode: mode } = this.#config.getModes();
-		if (mode === `manual`) return;
-		if (selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
-		switch (mode) {
-			case `implicit`:
-				this.replace(item);
-				break;
-			case `standard`:
-			case `vscode`:
-				if (gesture.ctrlKey || gesture.metaKey) {
-					if (selectionMode === `multiple` || mode === `vscode`) this.toggle(item);
-				} else if (gesture.shiftKey && (selectionMode === `multiple` || mode === `vscode`)) this.rangeTo(item);
-				else this.replace(item);
-				break;
-			case `checked`: break;
-			case `sticky`: this.toggle(item);
-		}
-	}
-	/** Route a Space keypress on `item` according to the current interaction mode. */
-	handleSpace(item) {
-		const mode = this.#config.getModes().interactionMode;
-		if (mode === `manual`) return;
-		if (mode === `implicit`) this.replace(item);
-		else this.toggle(item);
-	}
-	/** Drop the range-selection anchor (e.g. when the interaction mode changes). */
-	clearAnchor() {
-		this.#anchor = void 0;
-	}
-	/**
-	* Re-key the selection across an identity boundary — e.g. when items are
-	* wrapped/unwrapped and the selected Element references change. Silent:
-	* no `onChange` is fired.
-	*/
-	remap(fn) {
-		if (this.#selected.size === 0) return;
-		this.#selected = new Set([...this.#selected].map(fn));
-	}
-	/**
-	* Hard reset: empty the selection and clear the anchor without firing
-	* `onChange` (e.g. when all items are removed).
-	*/
-	reset() {
-		this.#selected = /* @__PURE__ */ new Set();
-		this.#anchor = void 0;
-	}
-	/**
-	* Replace the selection and anchor silently (no `onChange`). Used to
-	* re-key the selection when items are rebuilt from data — e.g. matching
-	* new elements to previously selected keys.
-	*/
-	seed(items, anchor) {
-		this.#selected = new Set(items);
-		this.#anchor = anchor;
-	}
-	#apply(next) {
-		const previous = this.#selected;
-		this.#selected = next;
-		this.#config.onChange(next, previous);
-	}
-};
-//#endregion
-//#region src/vertical-list/vertical-list.ts
-const ITEM_SELECTOR = `li, [data-list-item]`;
-let VerticalListElement = class VerticalListElement extends LitElement {
-	constructor(..._args2) {
-		super(..._args2);
-		this.selectionMode = `single`;
-		this.interactionMode = `standard`;
-		this.itemWrap = `stop`;
-		this._searchVisible = false;
-		this._searchQuery = ``;
-		this.#customWrappers = /* @__PURE__ */ new Map();
-		this.#wrappedElements = /* @__PURE__ */ new Set();
-		this.selection = new ListSelectionController({
-			getOrderedItems: () => this._getVisibleItems(),
-			isSelectable: (el) => this._isCheckable(el),
-			getModes: () => ({
-				selectionMode: this.selectionMode,
-				interactionMode: this.interactionMode
-			}),
-			onChange: (selected, previous) => {
-				this._syncItemStates();
-				this._dispatch(`list-select`, {
-					selected,
-					previous
-				});
-			}
-		});
-		this.tickled = new TickledController(this, {
-			getItems: () => this._getVisibleItems().map((el) => ({
-				id: el,
-				enabled: !el.hasAttribute(`not-checked`)
-			})),
-			onTickle: (id) => {
-				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
-			},
-			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.itemWrap
-		});
-		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.selection.canSelectAll()) {
-					e.preventDefault();
-					this.selection.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.selection.rangeTo(cur);
-					}
-					break;
-				case `ArrowUp`:
-					e.preventDefault();
-					this.tickled.handleKeyboardNavigation(`previous`);
-					if (e.shiftKey && this.interactionMode === `vscode`) {
-						const cur = this.tickled.tickledId;
-						if (cur) this.selection.rangeTo(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.selection.handleSpace(id);
-					}
-					break;
-				}
-				case `Escape`: this.selection.clear();
-			}
-		};
-		this._onClick = (e) => {
-			const item = this._findListItem(e.composedPath());
-			if (!item) return;
-			this._dispatch(`list-item-click`, { item });
-			this.selection.handleClick(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;
-	#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.selection.clearAnchor();
-			const previousSelected = this.selection.selected;
-			const savedWrappers = changed.get(`interactionMode`) === `checked` ? new Map(this.#customWrappers) : null;
-			this._syncCheckboxes();
-			if (previousSelected.size > 0) {
-				if (savedWrappers && savedWrappers.size > 0) this.selection.remap((el) => savedWrappers.get(el) ?? el);
-				else if (this.#customWrappers.size > 0) {
-					const innerToWrapper = new Map([...this.#customWrappers].map(([w, i]) => [i, w]));
-					this.selection.remap((el) => innerToWrapper.get(el) ?? el);
-				}
-			}
-			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.selection.selected].at(-1);
-	}
-	/** The full current selection set (read-only). */
-	get selectedItems() {
-		return this.selection.selected;
-	}
-	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.selection.reset();
-		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.selection.replace(item);
-	}
-	selectMany(items) {
-		this.selection.selectMany(items);
-	}
-	deselect(item) {
-		this.selection.deselect(item);
-	}
-	clearSelection() {
-		this.selection.clear();
-	}
-	selectAll() {
-		if (this.selection.canSelectAll()) this.selection.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;
-		}
-	}
-	_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.selection.selected.has(el));
-			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !item.hasAttribute(`not-checked`) && this.selection.selected.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.selection.selected.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.selection.toggle(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.selection.toggle(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.selection.replace(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({
-	type: String,
-	attribute: `item-wrap`
-})], VerticalListElement.prototype, "itemWrap", void 0);
-__decorate([property({ attribute: false })], VerticalListElement.prototype, "checkboxRenderer", 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 { ListSelectionController as n, isMultiMode as r, VerticalListElement as t };
-
-//# sourceMappingURL=vertical-list-B4w_ksJk.js.map