@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/shared/use-listbox.js

@@ -0,0 +1,1076 @@
+import { dataAttrs } from "./data-attrs.js";
+import { useControlled } from "./use-controlled.js";
+import { createContext } from "./context.js";
+import { anchoredStateAttrs } from "./popup-state-attrs.js";
+import { useTransitionStatus } from "./use-transition-status.js";
+import { useExitAnimation } from "./use-exit-animation.js";
+import { useFieldValue, useOptionalFieldContext } from "./use-field.js";
+import { provideSurface } from "./surface.js";
+import { usePositioning } from "./use-positioning.js";
+import { useDismiss } from "./use-dismiss.js";
+import { scrollIntoViewWithin } from "./focus.js";
+import { useScrollLock } from "./use-scroll-lock.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { useVirtualList } from "../composables/use-virtual-list.js";
+import { measureItemAlignment } from "./align-item-with-trigger.js";
+import { computed, nextTick, onScopeDispose, reactive, ref, toValue, useId, watch } from "vue";
+//#region src/shared/use-listbox.ts
+function isListboxGroup(item) {
+	return typeof item === "object" && Array.isArray(item.options);
+}
+function gatherLoose(items, label) {
+	const isGroup = (item) => "presets" in item;
+	const first = items.findIndex((item) => !isGroup(item));
+	if (!label || first === -1) return items;
+	const groups = items.filter(isGroup);
+	const loose = items.filter((item) => !isGroup(item));
+	return [
+		...groups.slice(0, first),
+		{
+			label,
+			presets: loose
+		},
+		...groups.slice(first)
+	];
+}
+var isResolvedGroup = (item) => Array.isArray(item.options);
+/** Drops repeats by string, keeping the first: `1` and `'1'` are one value. */
+var uniqueValues = (values) => {
+	const seen = /* @__PURE__ */ new Set();
+	return values.filter((entry) => !seen.has(String(entry)) && Boolean(seen.add(String(entry))));
+};
+function useListbox(options = {}) {
+	const field = useOptionalFieldContext();
+	const generatedId = useId();
+	const baseId = useId();
+	const listboxId = `${baseId}-listbox`;
+	const triggerEl = ref(null);
+	const searchEl = ref(null);
+	const listboxEl = ref(null);
+	const surfaceEl = ref(null);
+	const positionerEl = ref(null);
+	const valueEl = ref(null);
+	const query = ref("");
+	const typed = ref(false);
+	const multiple = () => toValue(options.multiple) ?? false;
+	const mode = () => toValue(options.mode) ?? "select";
+	const combobox = () => mode() === "combobox";
+	const searchable = () => combobox() || (toValue(options.searchable) ?? false);
+	const readOnly = () => (toValue(options.readOnly) ?? false) || (field?.state.value.readOnly ?? false);
+	const required = () => (toValue(options.required) ?? false) || (field?.state.value.required ?? false);
+	const loop = () => toValue(options.loop) ?? true;
+	const valueKey = () => toValue(options.valueKey) ?? "value";
+	const labelKey = () => toValue(options.labelKey) ?? "label";
+	const disabled = () => (toValue(options.disabled) ?? false) || (field?.state.value.disabled ?? false);
+	const maxHeight = () => {
+		const value = toValue(options.maxHeight);
+		return typeof value === "number" ? `${value}px` : value;
+	};
+	const invalid = () => (toValue(options.invalid) ?? false) || (field?.state.value.invalid ?? false);
+	const closeOnSelect = () => toValue(options.closeOnSelect) ?? !multiple();
+	const value = useControlled({
+		value: () => toValue(options.value),
+		defaultValue: () => toValue(options.defaultValue) ?? (multiple() ? [] : null),
+		prop: "modelValue",
+		empty: () => multiple() ? [] : null,
+		onChange: options.onChange,
+		name: "useListbox",
+		label: "value"
+	});
+	useFieldValue(field, () => value.value);
+	const open = useControlled({
+		value: () => toValue(options.open),
+		defaultValue: () => false,
+		onChange: options.onOpenChange,
+		prop: "open",
+		empty: false,
+		name: "useListbox",
+		label: "open"
+	});
+	function close() {
+		open.value = false;
+	}
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(() => open.value);
+	const alignFellBack = ref(false);
+	const alignPlaced = ref(false);
+	const alignStyle = ref(null);
+	const alignRequested = () => (toValue(options.alignWithTrigger) ?? false) && !searchable() && !toValue(options.virtual);
+	const alignActive = computed(() => alignRequested() && !alignFellBack.value);
+	const positioning = usePositioning({
+		...options,
+		side: () => toValue(options.side) ?? "bottom",
+		align: () => toValue(options.align) ?? "start",
+		sideOffset: () => toValue(options.sideOffset) ?? 4,
+		fallbackAxis: () => toValue(options.fallbackAxis) ?? false,
+		enabled: () => mounted.value && !alignActive.value
+	});
+	const placed = computed(() => alignActive.value ? alignPlaced.value : positioning.isPositioned.value);
+	useScrollLock(() => mounted.value && alignActive.value);
+	useExitAnimation({
+		open: () => open.value,
+		mounted,
+		setMounted,
+		element: surfaceEl
+	});
+	useDismiss({
+		enabled: () => open.value,
+		elements: () => [positioning.popupRef.value, triggerEl.value],
+		onDismiss: close
+	});
+	const valueOf = (option) => option[valueKey()];
+	const labelOf = (option) => {
+		const label = option[labelKey()];
+		return label == null ? String(valueOf(option)) : String(label);
+	};
+	/** A bare value becomes an option keyed by `valueKey`, so `valueKey` still rules. */
+	const toOption = (item) => typeof item === "object" ? item : { [valueKey()]: item };
+	const resolvedOptions = computed(() => (toValue(options.options) ?? []).map((item) => {
+		if (!isListboxGroup(item)) return toOption(item);
+		return item.options.every((option) => typeof option === "object") ? item : {
+			...item,
+			options: item.options.map(toOption)
+		};
+	}));
+	const selectedValues = computed(() => {
+		const current = value.value;
+		if (Array.isArray(current)) return current;
+		return current == null || current === "" ? [] : [current];
+	});
+	const selectedKeys = computed(() => new Set(selectedValues.value.map(String)));
+	const pinned = ref(/* @__PURE__ */ new Set());
+	watch(() => open.value, (isOpen) => {
+		if (isOpen) pinned.value = toValue(options.order) === "selected-first" ? new Set(selectedKeys.value) : /* @__PURE__ */ new Set();
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const activeQuery = computed(() => typed.value ? query.value : "");
+	const normalizedQuery = computed(() => activeQuery.value.trim().toLowerCase());
+	function matches(option) {
+		if (options.filter) return options.filter(option, activeQuery.value);
+		if (!normalizedQuery.value) return true;
+		return labelOf(option).toLowerCase().includes(normalizedQuery.value);
+	}
+	const sections = computed(() => {
+		const result = [];
+		let index = 0;
+		let loose = null;
+		const render = (option, groupDisabled) => {
+			const optionValue = valueOf(option);
+			const rendered = {
+				option,
+				value: optionValue,
+				label: labelOf(option),
+				disabled: Boolean(option.disabled) || groupDisabled,
+				selected: selectedKeys.value.has(String(optionValue)),
+				index,
+				id: `${baseId}-o${index}`
+			};
+			index += 1;
+			return rendered;
+		};
+		const runs = [];
+		let run = null;
+		for (const item of resolvedOptions.value) {
+			if (isResolvedGroup(item)) {
+				const kept = item.options.filter(matches);
+				if (kept.length > 0) runs.push({
+					label: item.label,
+					disabled: Boolean(item.disabled),
+					items: kept
+				});
+				run = null;
+				continue;
+			}
+			if (!matches(item)) continue;
+			if (!run) {
+				run = {
+					disabled: false,
+					items: []
+				};
+				runs.push(run);
+			}
+			run.items.push(item);
+		}
+		for (const { label, disabled: groupDisabled, items } of runs) {
+			const rendered = (pinned.value.size ? [...items.filter((item) => pinned.value.has(String(valueOf(item)))), ...items.filter((item) => !pinned.value.has(String(valueOf(item))))] : items).map((option) => render(option, groupDisabled));
+			if (label === void 0) {
+				loose = { options: rendered };
+				result.push(loose);
+			} else result.push({
+				label,
+				labelId: `${baseId}-g${result.length}`,
+				options: rendered
+			});
+		}
+		if (createCandidate.value !== null) {
+			const coined = { [valueKey()]: createCandidate.value };
+			result.push({
+				create: true,
+				options: [{
+					option: coined,
+					value: createCandidate.value,
+					label: createCandidate.value,
+					disabled: false,
+					selected: false,
+					create: true,
+					index,
+					id: `${baseId}-o${index}`
+				}]
+			});
+			index += 1;
+		}
+		return result;
+	});
+	const flatOptions = computed(() => sections.value.flatMap((section) => section.options));
+	const optionIndex = computed(() => {
+		const all = /* @__PURE__ */ new Map();
+		for (const item of resolvedOptions.value) {
+			const list = isResolvedGroup(item) ? item.options : [item];
+			for (const option of list) all.set(String(valueOf(option)), option);
+		}
+		return all;
+	});
+	const selectedOptions = computed(() => {
+		return selectedValues.value.map((selected, position) => {
+			const option = optionIndex.value.get(String(selected)) ?? { [valueKey()]: selected };
+			return {
+				option,
+				value: selected,
+				label: labelOf(option),
+				disabled: Boolean(option.disabled),
+				selected: true,
+				index: position,
+				id: `${baseId}-s${position}`
+			};
+		});
+	});
+	const createCandidate = computed(() => {
+		const rule = toValue(options.creatable) ?? false;
+		if (rule === false) return null;
+		const raw = activeQuery.value.trim();
+		if (!raw) return null;
+		if (typeof rule === "function" && !rule(raw)) return null;
+		const lowered = raw.toLowerCase();
+		for (const option of optionIndex.value.values()) if (String(valueOf(option)).toLowerCase() === lowered || labelOf(option).toLowerCase() === lowered) return null;
+		if (selectedValues.value.some((entry) => String(entry).toLowerCase() === lowered)) return null;
+		return raw;
+	});
+	const flatten = computed(() => toValue(options.flatten));
+	const visibleOptions = computed(() => {
+		const limit = flatten.value;
+		if (limit === void 0 || limit < 0) return selectedOptions.value;
+		return selectedOptions.value.slice(0, limit);
+	});
+	const hiddenCount = computed(() => selectedOptions.value.length - visibleOptions.value.length);
+	const collapsed = computed(() => hiddenCount.value > 0);
+	const summary = computed(() => {
+		const named = visibleOptions.value.map((option) => option.label).join(", ");
+		if (hiddenCount.value === 0) return named;
+		if (!named) return `${hiddenCount.value} selected`;
+		return `${named} and ${hiddenCount.value} more`;
+	});
+	const clearable = () => toValue(options.clearable) ?? true;
+	const showClear = computed(() => clearable() && !disabled() && !readOnly() && selectedValues.value.length > 0);
+	const grouped = computed(() => sections.value.some((section) => section.label));
+	const isVirtual = computed(() => (toValue(options.virtual) ?? false) && !grouped.value);
+	const rowHeight = ref(32);
+	const windowing = useVirtualList({
+		items: flatOptions,
+		itemHeight: rowHeight,
+		enabled: () => isVirtual.value && listboxEl.value !== null,
+		scroller: listboxEl,
+		overscan: 10
+	});
+	const virtualRows = computed(() => isVirtual.value ? {
+		options: windowing.visible.value,
+		before: windowing.before.value,
+		after: windowing.after.value
+	} : null);
+	watch(listboxEl, (list) => {
+		const option = isVirtual.value ? list?.querySelector("[role=\"option\"]") : null;
+		if (!option) return;
+		const style = getComputedStyle(option);
+		const px = (value) => parseFloat(value) || 0;
+		const box = style.boxSizing === "border-box" ? 0 : px(style.paddingTop) + px(style.paddingBottom) + px(style.borderTopWidth) + px(style.borderBottomWidth);
+		const height = px(style.height) + box;
+		if (height > 0) rowHeight.value = height;
+		else if (option.offsetHeight) rowHeight.value = option.offsetHeight;
+	}, { flush: "post" });
+	const activeId = ref(void 0);
+	const activeIndex = ref(-1);
+	const enabledIndices = computed(() => flatOptions.value.filter((option) => !option.disabled).map((option) => option.index));
+	/**
+	* `center` is for opening on the selection; the keyboard scrolls only as far as it must.
+	* Our windowing's rows share one height, so it scrolls by the row's place; otherwise to the
+	* option as it is rendered. One an app's virtualizer left out is the app's to reach, from
+	* `activeIndex`.
+	*/
+	function activateAt(index, scroll = true) {
+		activeIndex.value = index;
+		activeId.value = flatOptions.value[index]?.id;
+		const list = listboxEl.value;
+		if (!scroll || index < 0 || !list) return;
+		if (!isVirtual.value) {
+			const element = activeId.value ? list.querySelector(`[id="${activeId.value}"]`) : null;
+			if (element) scrollIntoViewWithin(element, list);
+			return;
+		}
+		const inset = parseFloat(getComputedStyle(list).paddingTop) || 0;
+		const top = inset + index * rowHeight.value;
+		if (scroll === "center") list.scrollTop = top + rowHeight.value / 2 - list.clientHeight / 2;
+		else if (top < list.scrollTop + inset) list.scrollTop = top - inset;
+		else if (top + rowHeight.value > list.scrollTop + list.clientHeight - inset) list.scrollTop = top + rowHeight.value - list.clientHeight + inset;
+	}
+	function navigate(event) {
+		const list = enabledIndices.value;
+		const position = list.indexOf(activeIndex.value);
+		const last = list.length - 1;
+		let next;
+		if (event.key === "ArrowDown") next = position + 1;
+		else if (event.key === "ArrowUp") next = position < 0 ? last : position - 1;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = last;
+		else return false;
+		event.preventDefault();
+		if (list.length === 0) return true;
+		if (next > last) next = loop() ? 0 : last;
+		if (next < 0) next = loop() ? last : 0;
+		activateAt(list[next]);
+		return true;
+	}
+	const typeahead = useTypeahead({
+		items: () => flatOptions.value.filter((option) => !option.disabled),
+		getText: (option) => option.label,
+		getActive: () => flatOptions.value[activeIndex.value] ?? null,
+		onMatch: (option) => activateAt(option.index)
+	});
+	function activateInitial(edge) {
+		const selected = flatOptions.value.find((option) => option.selected && !option.disabled);
+		if (selected) {
+			activateAt(selected.index, "center");
+			return;
+		}
+		const list = enabledIndices.value;
+		activateAt(list[edge === "last" ? list.length - 1 : 0] ?? -1);
+	}
+	function selectActive() {
+		commit(flatOptions.value[activeIndex.value]);
+	}
+	function commit(option) {
+		if (!option || option.disabled) return;
+		if (option.create) options.onCreate?.(String(option.value));
+		toggle(option.value);
+		if (combobox()) resetInput();
+	}
+	function resetInput() {
+		typed.value = false;
+		query.value = combobox() && !multiple() ? selectedOptions.value[0]?.label ?? "" : "";
+	}
+	function toggle(next) {
+		if (disabled() || readOnly()) return;
+		if (multiple()) {
+			const current = selectedValues.value;
+			value.value = selectedKeys.value.has(String(next)) ? current.filter((entry) => String(entry) !== String(next)) : [...current, next];
+		} else value.value = next;
+		if (closeOnSelect()) close();
+	}
+	function deselect(target) {
+		if (disabled() || readOnly()) return;
+		value.value = multiple() ? selectedValues.value.filter((entry) => String(entry) !== String(target)) : null;
+	}
+	function clear() {
+		if (disabled() || readOnly()) return;
+		value.value = multiple() ? [] : null;
+		resetInput();
+	}
+	const presetsOpen = reactive(/* @__PURE__ */ new Map());
+	const presetSections = computed(() => {
+		if (!multiple()) return [];
+		const search = normalizedQuery.value;
+		const hit = (text) => !search || text.toLowerCase().includes(search);
+		const render = (preset) => ({
+			preset,
+			label: preset.label,
+			active: preset.values.length > 0 && preset.values.every((entry) => selectedKeys.value.has(String(entry))),
+			disabled: Boolean(preset.disabled)
+		});
+		const result = [];
+		let loose = null;
+		for (const item of gatherLoose(toValue(options.presets) ?? [], toValue(options.presetsLabel))) if ("presets" in item) {
+			const kept = item.presets.filter((preset) => hit(preset.label) || hit(item.label));
+			if (kept.length) result.push({
+				label: item.label,
+				labelId: `${baseId}-p${result.length}`,
+				open: Boolean(search) || (presetsOpen.get(item.label) ?? !item.collapsed),
+				presets: kept.map(render)
+			});
+			loose = null;
+		} else if (hit(item.label)) {
+			if (!loose) result.push(loose = {
+				open: true,
+				presets: []
+			});
+			loose.presets.push(render(item));
+		}
+		return result;
+	});
+	function applyPreset({ preset, active, disabled: off }, replace) {
+		if (disabled() || readOnly() || off) return;
+		const current = selectedValues.value;
+		const presetKeys = new Set(preset.values.map(String));
+		value.value = replace ? uniqueValues(preset.values) : active ? current.filter((entry) => !presetKeys.has(String(entry))) : uniqueValues([...current, ...preset.values]);
+	}
+	const keepFocus = (event) => event.preventDefault();
+	const presetsProps = computed(() => ({
+		...hooks.value,
+		"data-part": "presets"
+	}));
+	const getPresetItemProps = (preset) => ({
+		"data-part": "preset-item",
+		"data-active": preset.active ? "" : void 0,
+		"data-disabled": preset.disabled ? "" : void 0
+	});
+	function getPresetProps(preset) {
+		return {
+			"data-part": "preset",
+			type: "button",
+			"aria-pressed": preset.active,
+			"data-active": preset.active ? "" : void 0,
+			"data-disabled": preset.disabled ? "" : void 0,
+			disabled: preset.disabled || void 0,
+			onMousedown: keepFocus,
+			onClick: () => applyPreset(preset, false)
+		};
+	}
+	function getPresetReplaceProps(preset) {
+		return {
+			"data-part": "preset-replace",
+			type: "button",
+			"aria-label": `Replace with ${preset.label}`,
+			disabled: preset.disabled || void 0,
+			onMousedown: keepFocus,
+			onClick: () => applyPreset(preset, true)
+		};
+	}
+	const getPresetGroupProps = (section) => section.label ? {
+		"data-part": "preset-group",
+		role: "group",
+		"aria-labelledby": section.labelId,
+		...openAttrs(section.open)
+	} : { "data-part": "preset-group" };
+	const getPresetGroupLabelProps = (section) => ({
+		"data-part": "preset-group-label",
+		id: section.labelId
+	});
+	const openAttrs = (open) => ({
+		"data-open": open ? "" : void 0,
+		"data-closed": open ? void 0 : ""
+	});
+	const getPresetGroupTriggerProps = (section) => ({
+		"data-part": "preset-group-trigger",
+		type: "button",
+		"aria-expanded": section.open,
+		"aria-controls": `${section.labelId}-panel`,
+		...openAttrs(section.open),
+		disabled: Boolean(normalizedQuery.value) || void 0,
+		onMousedown: keepFocus,
+		onClick: () => section.label && presetsOpen.set(section.label, !section.open)
+	});
+	const getPresetGroupPanelProps = (section) => section.label ? {
+		"data-part": "preset-group-panel",
+		id: `${section.labelId}-panel`,
+		inert: !section.open || void 0
+	} : { "data-part": "preset-group-panel" };
+	function focusTarget() {
+		return combobox() ? searchEl.value ?? triggerEl.value : triggerEl.value;
+	}
+	function openMenu(edge = "first") {
+		if (disabled() || readOnly()) return;
+		open.value = true;
+		pendingEdge = edge;
+	}
+	let pendingEdge = "first";
+	function onOpenKeydown(event) {
+		if (navigate(event)) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			selectActive();
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if (searchable()) {
+			if (event.key === "Backspace" && query.value === "" && multiple()) {
+				const last = selectedValues.value.at(-1);
+				if (last !== void 0) deselect(last);
+			}
+			return;
+		}
+		if (event.key === " ") {
+			event.preventDefault();
+			selectActive();
+			return;
+		}
+		typeahead.onKeydown(event);
+	}
+	function onInputKeydown(event) {
+		if (disabled() || readOnly()) return;
+		if (!open.value) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				openMenu(event.key === "ArrowUp" ? "last" : "first");
+				return;
+			}
+			if (event.key === "Backspace" && query.value === "" && multiple()) {
+				const last = selectedValues.value.at(-1);
+				if (last !== void 0) deselect(last);
+			}
+			return;
+		}
+		onOpenKeydown(event);
+	}
+	function onTriggerKeydown(event) {
+		if (disabled() || readOnly()) return;
+		if (!open.value) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				openMenu(event.key === "ArrowUp" ? "last" : "first");
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				openMenu("first");
+			}
+			return;
+		}
+		onOpenKeydown(event);
+	}
+	function placeOverTrigger() {
+		const trigger = triggerEl.value;
+		const positioner = positionerEl.value;
+		const popup = surfaceEl.value;
+		const list = listboxEl.value;
+		if (!trigger || !positioner || !popup || !list) return;
+		const item = list.querySelector("[role=\"option\"][data-selected]") ?? list.querySelector("[role=\"option\"]");
+		const placement = item ? measureItemAlignment({
+			trigger,
+			positioner,
+			popup,
+			list,
+			item,
+			value: valueEl.value,
+			maxHeight: maxHeight()
+		}) : null;
+		if (!placement) {
+			list.style.removeProperty("max-height");
+			popup.style.removeProperty("--listbox-transform-origin");
+			alignPlaced.value = false;
+			alignFellBack.value = true;
+			return;
+		}
+		alignStyle.value = {
+			left: `${placement.left}px`,
+			top: `${placement.top}px`
+		};
+		list.style.maxHeight = `${placement.listMaxHeight}px`;
+		list.scrollTop = placement.scrollTop;
+		popup.style.setProperty("--listbox-transform-origin", `50% ${placement.originRatio}%`);
+		alignPlaced.value = true;
+	}
+	watch(mounted, (isMounted) => {
+		if (!isMounted) alignFellBack.value = false;
+	}, { flush: "post" });
+	watch(() => mounted.value && alignActive.value, async (on) => {
+		if (!on) {
+			alignPlaced.value = false;
+			alignStyle.value = null;
+			listboxEl.value?.style.removeProperty("max-height");
+			surfaceEl.value?.style.removeProperty("--listbox-transform-origin");
+			return;
+		}
+		await nextTick();
+		placeOverTrigger();
+	}, { flush: "post" });
+	watch(() => mounted.value && placed.value, async (ready) => {
+		if (!ready) return;
+		await nextTick();
+		if (searchable()) searchEl.value?.focus({ preventScroll: true });
+		activateInitial(pendingEdge);
+		pendingEdge = "first";
+	}, { flush: "post" });
+	watch(() => open.value, (isOpen) => {
+		if (isOpen) return;
+		const active = document.activeElement;
+		const hadFocus = !active || active === document.body || Boolean(positioning.popupRef.value?.contains(active));
+		resetInput();
+		activeId.value = void 0;
+		activeIndex.value = -1;
+		if (hadFocus) focusTarget()?.focus({ preventScroll: true });
+	}, { flush: "post" });
+	watch(() => mounted.value && alignActive.value, (on) => {
+		if (typeof window === "undefined") return;
+		if (on) window.addEventListener("resize", placeOverTrigger);
+		else window.removeEventListener("resize", placeOverTrigger);
+	}, { flush: "post" });
+	onScopeDispose(() => {
+		if (typeof window !== "undefined") window.removeEventListener("resize", placeOverTrigger);
+	});
+	watch(() => normalizedQuery.value, async () => {
+		if (!open.value) return;
+		await nextTick();
+		activateAt(enabledIndices.value[0] ?? -1);
+	}, { flush: "post" });
+	watch(() => selectedValues.value.length > 0, (filled) => field?.setFilled(filled), { immediate: true });
+	watch(() => combobox() && !multiple() ? selectedOptions.value[0]?.label ?? "" : null, (label) => {
+		if (label === null || open.value) return;
+		typed.value = false;
+		query.value = label;
+	}, { immediate: true });
+	const canScrollUp = ref(false);
+	const canScrollDown = ref(false);
+	const SCROLL_EDGE_TOLERANCE = 1;
+	function measureScrollEdges() {
+		const list = listboxEl.value;
+		if (!list) {
+			canScrollUp.value = false;
+			canScrollDown.value = false;
+			return;
+		}
+		const max = list.scrollHeight - list.clientHeight;
+		canScrollUp.value = list.scrollTop > SCROLL_EDGE_TOLERANCE;
+		canScrollDown.value = list.scrollTop < max - SCROLL_EDGE_TOLERANCE;
+	}
+	const SCROLL_ARROW_SPEED = 420;
+	let scrollFrame = 0;
+	function stopArrowScroll() {
+		if (scrollFrame) {
+			cancelAnimationFrame(scrollFrame);
+			scrollFrame = 0;
+		}
+	}
+	function startArrowScroll(direction) {
+		stopArrowScroll();
+		let last = null;
+		const step = (now) => {
+			const list = listboxEl.value;
+			if (!list) {
+				scrollFrame = 0;
+				return;
+			}
+			const elapsed = last === null ? 0 : Math.min(Math.max(now - last, 0), 64);
+			last = now;
+			if (elapsed > 0) {
+				const before = list.scrollTop;
+				list.scrollTop = before + elapsed / 1e3 * SCROLL_ARROW_SPEED * (direction === "up" ? -1 : 1);
+				measureScrollEdges();
+				if (list.scrollTop === before) {
+					scrollFrame = 0;
+					return;
+				}
+			}
+			scrollFrame = requestAnimationFrame(step);
+		};
+		scrollFrame = requestAnimationFrame(step);
+	}
+	watch(() => [
+		mounted.value,
+		placed.value,
+		sections.value
+	], async ([isMounted]) => {
+		if (!isMounted) stopArrowScroll();
+		await nextTick();
+		measureScrollEdges();
+	}, { flush: "post" });
+	onScopeDispose(stopArrowScroll);
+	const state = computed(() => ({
+		mode: mode(),
+		open: open.value,
+		disabled: disabled(),
+		readOnly: readOnly(),
+		required: required(),
+		invalid: invalid(),
+		multiple: multiple(),
+		searchable: searchable(),
+		creating: createCandidate.value !== null,
+		filled: selectedValues.value.length > 0,
+		empty: flatOptions.value.length === 0,
+		alignedToItem: alignActive.value && alignPlaced.value,
+		side: positioning.renderedSide.value,
+		align: positioning.renderedAlign.value,
+		transitionStatus: transitionStatus.value
+	}));
+	const hooks = computed(() => dataAttrs(state.value, {
+		...anchoredStateAttrs,
+		alignedToItem: (on) => on ? { "data-aligned-to-item": "" } : null
+	}));
+	const described = computed(() => {
+		if (!field) return {};
+		return {
+			"aria-labelledby": field.labelledBy.value,
+			"aria-describedby": field.describedBy.value
+		};
+	});
+	const triggerId = computed(() => toValue(options.id) ?? field?.controlId.value ?? generatedId);
+	const rootProps = computed(() => ({
+		...hooks.value,
+		"data-part": "root"
+	}));
+	function setTrigger(el) {
+		triggerEl.value = el ?? null;
+		positioning.anchorRef.value = el ?? null;
+	}
+	const comboboxTriggerProps = computed(() => ({
+		...hooks.value,
+		"data-part": "trigger",
+		ref: setTrigger,
+		onPointerdown(event) {
+			if (disabled() || readOnly()) return;
+			if (event.target?.closest("input, button, [role=\"button\"]")) return;
+			event.preventDefault();
+			searchEl.value?.focus({ preventScroll: true });
+			if (!open.value) openMenu("first");
+		}
+	}));
+	const selectTriggerProps = computed(() => ({
+		...hooks.value,
+		...described.value,
+		"data-part": "trigger",
+		id: triggerId.value,
+		tabindex: disabled() ? void 0 : 0,
+		"aria-haspopup": "listbox",
+		"aria-expanded": open.value,
+		"aria-controls": mounted.value ? listboxId : void 0,
+		"aria-disabled": disabled() || void 0,
+		"aria-required": required() || void 0,
+		"aria-invalid": invalid() || void 0,
+		...searchable() ? { role: "button" } : {
+			role: "combobox",
+			"aria-readonly": readOnly() || void 0,
+			"aria-activedescendant": open.value ? activeId.value : void 0
+		},
+		ref: setTrigger,
+		onClick() {
+			if (disabled() || readOnly()) return;
+			open.value = !open.value;
+		},
+		onKeydown: onTriggerKeydown,
+		onFocus() {
+			field?.setFocused(true);
+		},
+		onBlur() {
+			field?.setFocused(false);
+			field?.setTouched(true);
+		}
+	}));
+	const triggerProps = computed(() => combobox() ? comboboxTriggerProps.value : selectTriggerProps.value);
+	const clearProps = computed(() => ({
+		...hooks.value,
+		"data-part": "clear",
+		type: "button",
+		tabindex: -1,
+		"aria-label": "Clear selection",
+		onClick(event) {
+			event.stopPropagation();
+			clear();
+			focusTarget()?.focus({ preventScroll: true });
+		}
+	}));
+	const triggerWidth = ref(0);
+	function measureTrigger() {
+		if (triggerEl.value) triggerWidth.value = triggerEl.value.offsetWidth;
+	}
+	watch(mounted, (isMounted) => {
+		if (!isMounted) {
+			observer?.disconnect();
+			observer = null;
+			return;
+		}
+		measureTrigger();
+		if (typeof ResizeObserver !== "undefined" && triggerEl.value) {
+			observer = new ResizeObserver(measureTrigger);
+			observer.observe(triggerEl.value);
+		}
+	}, { flush: "post" });
+	let observer = null;
+	function setPositioner(el) {
+		const node = el ?? null;
+		positionerEl.value = node;
+		positioning.popupRef.value = node;
+	}
+	const positionerProps = computed(() => {
+		if (alignActive.value) return {
+			style: {
+				position: "fixed",
+				zIndex: 50,
+				"--listbox-trigger-width": `${triggerWidth.value}px`,
+				...alignStyle.value ?? {},
+				visibility: alignPlaced.value ? void 0 : "hidden"
+			},
+			"data-part": "positioner",
+			"data-side": "none",
+			"data-align": "item",
+			ref: setPositioner
+		};
+		const base = positioning.positionerProps.value;
+		return {
+			...base,
+			"data-part": "positioner",
+			style: {
+				...base.style,
+				"--listbox-trigger-width": `${triggerWidth.value}px`
+			},
+			ref: setPositioner
+		};
+	});
+	const valueProps = computed(() => ({
+		...hooks.value,
+		"data-part": "value",
+		ref: (el) => {
+			valueEl.value = el ?? null;
+		}
+	}));
+	const indicatorProps = computed(() => ({
+		...hooks.value,
+		"data-part": "indicator",
+		"aria-hidden": "true"
+	}));
+	const emptyProps = computed(() => ({
+		...hooks.value,
+		"data-part": "empty"
+	}));
+	const popupProps = computed(() => ({
+		...hooks.value,
+		"data-part": "popup",
+		ref: (el) => {
+			surfaceEl.value = el ?? null;
+		}
+	}));
+	function onQueryInput(event) {
+		query.value = event.target.value;
+		typed.value = true;
+	}
+	const textInputProps = computed(() => ({
+		...hooks.value,
+		type: "text",
+		role: "combobox",
+		autocomplete: "off",
+		autocorrect: "off",
+		spellcheck: false,
+		"aria-controls": listboxId,
+		"aria-autocomplete": "list",
+		"aria-activedescendant": activeId.value,
+		value: query.value,
+		ref: (el) => {
+			searchEl.value = el ?? null;
+		},
+		onInput: onQueryInput
+	}));
+	const searchProps = computed(() => ({
+		...textInputProps.value,
+		"data-part": "search",
+		"aria-expanded": true,
+		onKeydown: onOpenKeydown
+	}));
+	const inputProps = computed(() => ({
+		...textInputProps.value,
+		...described.value,
+		"data-part": "input",
+		id: triggerId.value,
+		disabled: disabled() || void 0,
+		readonly: readOnly() || void 0,
+		"aria-expanded": open.value,
+		"aria-controls": mounted.value ? listboxId : void 0,
+		"aria-activedescendant": open.value ? activeId.value : void 0,
+		"aria-required": required() || void 0,
+		"aria-invalid": invalid() || void 0,
+		onInput(event) {
+			onQueryInput(event);
+			if (!open.value) openMenu("first");
+		},
+		onKeydown: onInputKeydown,
+		onClick() {
+			if (!open.value) openMenu("first");
+		},
+		onFocus() {
+			field?.setFocused(true);
+		},
+		onBlur() {
+			field?.setFocused(false);
+			field?.setTouched(true);
+		}
+	}));
+	const chipsProps = computed(() => ({
+		...hooks.value,
+		"data-part": "chips"
+	}));
+	function getScrollProps(direction) {
+		return {
+			...hooks.value,
+			"data-part": "scroll",
+			"data-direction": direction,
+			"aria-hidden": "true",
+			onPointerenter(event) {
+				if (event.pointerType === "touch") return;
+				startArrowScroll(direction);
+			},
+			onPointerleave: stopArrowScroll,
+			onMousedown(event) {
+				event.preventDefault();
+			}
+		};
+	}
+	function getChipProps(option) {
+		return {
+			"data-part": "chip",
+			"data-value": String(option.value)
+		};
+	}
+	function getChipRemoveProps(option) {
+		return {
+			"data-part": "chip-remove",
+			type: "button",
+			tabindex: -1,
+			"aria-label": `Remove ${option.label}`,
+			onClick(event) {
+				event.stopPropagation();
+				deselect(option.value);
+				focusTarget()?.focus({ preventScroll: true });
+			},
+			onMousedown(event) {
+				event.preventDefault();
+			}
+		};
+	}
+	const listboxProps = computed(() => ({
+		...hooks.value,
+		"data-part": "listbox",
+		id: listboxId,
+		role: "listbox",
+		"aria-multiselectable": multiple() || void 0,
+		...searchable() ? {} : { "aria-labelledby": triggerId.value },
+		style: maxHeight() ? {
+			maxHeight: maxHeight(),
+			overflowY: "auto"
+		} : void 0,
+		onScroll: measureScrollEdges,
+		ref: (el) => {
+			listboxEl.value = el ?? null;
+		}
+	}));
+	function getOptionProps(option) {
+		return {
+			"data-part": "option",
+			id: option.id,
+			role: "option",
+			"data-index": option.index,
+			"aria-selected": option.selected,
+			"aria-disabled": option.disabled || void 0,
+			"data-selected": option.selected ? "" : void 0,
+			"data-disabled": option.disabled ? "" : void 0,
+			"data-active": activeId.value === option.id ? "" : void 0,
+			"data-create": option.create ? "" : void 0,
+			"aria-setsize": grouped.value ? void 0 : flatOptions.value.length,
+			"aria-posinset": grouped.value ? void 0 : option.index + 1,
+			onClick() {
+				commit(option);
+			},
+			onPointermove(event) {
+				if (event.movementX === 0 && event.movementY === 0) return;
+				if (option.disabled) return;
+				activateAt(option.index, false);
+			},
+			onMousedown(event) {
+				event.preventDefault();
+			}
+		};
+	}
+	function getGroupProps(section) {
+		return section.label ? {
+			"data-part": "group",
+			role: "group",
+			"aria-labelledby": section.labelId
+		} : {
+			"data-part": "group",
+			role: "none",
+			"data-create": section.create ? "" : void 0
+		};
+	}
+	function getGroupLabelProps(section) {
+		return {
+			"data-part": "group-label",
+			id: section.labelId,
+			role: "presentation"
+		};
+	}
+	const hiddenInputs = computed(() => {
+		const name = toValue(options.name) ?? field?.name();
+		if (!name) return [];
+		return selectedValues.value.map((entry) => ({
+			name,
+			value: entry
+		}));
+	});
+	provideSurface({
+		present: mounted,
+		state,
+		popupProps,
+		positionerProps
+	});
+	return {
+		value,
+		open,
+		query,
+		state,
+		present: mounted,
+		sections,
+		flatOptions,
+		activeIndex,
+		virtualRows,
+		selectedOptions,
+		visibleOptions,
+		hiddenCount,
+		summary,
+		collapsed,
+		showClear,
+		canScroll: (direction) => direction === "up" ? canScrollUp.value : canScrollDown.value,
+		rootProps,
+		triggerProps,
+		clearProps,
+		positionerProps,
+		popupProps,
+		searchProps,
+		inputProps,
+		chipsProps,
+		presetSections,
+		presetsProps,
+		getPresetItemProps,
+		getPresetProps,
+		getPresetReplaceProps,
+		getPresetGroupProps,
+		getPresetGroupLabelProps,
+		getPresetGroupTriggerProps,
+		getPresetGroupPanelProps,
+		getScrollProps,
+		valueProps,
+		indicatorProps,
+		emptyProps,
+		stateAttrs: hooks,
+		listboxProps,
+		getOptionProps,
+		getGroupProps,
+		getGroupLabelProps,
+		getChipProps,
+		getChipRemoveProps,
+		hiddenInputs,
+		deselect,
+		clear,
+		toggle,
+		close
+	};
+}
+var { provideContext: provideListboxContext, useContext: useListboxContext } = createContext("Listbox");
+//#endregion
+export { isListboxGroup, provideListboxContext, useListbox, useListboxContext };