@vizejs/ui 0.426.3 → 0.427.0

package/dist/combobox-root-DORiYPqg.mjs

@@ -0,0 +1,1004 @@
+import './style.css';
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { a as createSelectValueEquality, c as includesSelectValue, d as serializeSelectValue, m as useSelectCollection, n as readBooleanProp, o as defaultSelectText, p as toggleInList, r as useSelectSelection, s as fromSelectList, u as removeFromList, v as selectContext } from "./select-keyboard-5_BwRI9c.mjs";
+import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, onMounted, onUnmounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useTemplateRef, watch } from "vue";
+//#region src/families/selection/combobox/combobox-context.ts
+const comboboxContext = createContext("Combobox");
+const comboboxChipContext = createContext("ComboboxChip");
+//#endregion
+//#region src/families/selection/combobox/combobox-input.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = [
+	"id",
+	"value",
+	"placeholder",
+	"autocomplete",
+	"spellcheck",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-autocomplete",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-required",
+	"aria-invalid",
+	"aria-errormessage",
+	"data-state",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/selection/combobox/combobox-input.vue
+var combobox_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "combobox-input",
+	props: {
+		placeholder: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaErrormessage: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		autocomplete: {
+			type: String,
+			required: false,
+			default: "off"
+		},
+		spellcheck: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = comboboxContext.use();
+		const element = useTemplateRef("element");
+		const handlers = computed(() => ({
+			onBlur: (event) => context.onBlur(event),
+			onFocus: (event) => context.onFocus(event),
+			onInput: (event) => context.onInput(event),
+			onKeydown: (event) => context.onKeydown(event)
+		}));
+		watch(() => __props.ariaLabelledby, (value) => {
+			context.labelledby.value = value;
+		}, { immediate: true });
+		onMounted(() => {
+			context.inputElement.value = element.value;
+		});
+		onUnmounted(() => {
+			if (context.inputElement.value === element.value) context.inputElement.value = null;
+		});
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			element,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", mergeProps({
+				id: unref(context).inputId.value,
+				ref_key: "element",
+				ref: element
+			}, handlers.value, {
+				type: "text",
+				role: "combobox",
+				value: unref(context).inputValue.value,
+				placeholder: __props.placeholder,
+				autocomplete: __props.autocomplete,
+				spellcheck: __props.spellcheck ? "true" : "false",
+				autocapitalize: "off",
+				disabled: unref(context).disabled.value,
+				readonly: unref(context).readonly.value,
+				required: unref(context).nativeRequired.value,
+				"aria-autocomplete": unref(context).autocomplete.value,
+				"aria-expanded": unref(context).open.value ? "true" : "false",
+				"aria-controls": unref(context).open.value ? unref(context).listboxId.value : void 0,
+				"aria-activedescendant": unref(context).activeDescendant.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-required": unref(context).required.value ? "true" : void 0,
+				"aria-invalid": unref(context).invalid.value ? "true" : void 0,
+				"aria-errormessage": unref(context).invalid.value ? __props.ariaErrormessage : void 0,
+				"data-vize-ui": "combobox-input",
+				part: "input",
+				"data-state": unref(context).open.value ? "open" : "closed",
+				"data-disabled": unref(context).disabled.value ? "true" : void 0
+			}), null, 16, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-949b67c6"]]);
+//#endregion
+//#region src/families/selection/combobox/combobox-empty.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["hidden"];
+//#endregion
+//#region src/families/selection/combobox/combobox-empty.vue
+var combobox_empty_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "combobox-empty",
+	setup(__props) {
+		const context = comboboxContext.use();
+		const visible = computed(() => context.empty.value && context.status.value !== "loading");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "presentation",
+				"data-vize-ui": "combobox-empty",
+				part: "empty",
+				hidden: visible.value ? void 0 : true
+			}, [visible.value ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				query: unref(context).query.value
+			}, void 0, true) : createCommentVNode("v-if", true)], 8, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-0f993b8a"]]);
+//#endregion
+//#region src/families/selection/combobox/combobox-loading.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["hidden"];
+//#endregion
+//#region src/families/selection/combobox/combobox-loading.vue
+var combobox_loading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "combobox-loading",
+	setup(__props) {
+		const context = comboboxContext.use();
+		const visible = computed(() => context.status.value === "loading");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "presentation",
+				"aria-busy": "true",
+				"data-vize-ui": "combobox-loading",
+				part: "loading",
+				hidden: visible.value ? void 0 : true
+			}, [visible.value ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				query: unref(context).query.value
+			}, void 0, true) : createCommentVNode("v-if", true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-6bec5bb7"]]);
+//#endregion
+//#region src/families/selection/combobox/combobox-filter.ts
+const combiningMarks = /\p{M}+/gu;
+/** Normalize text for accent- and case-insensitive comparison. */
+function normalizeComboboxText(text) {
+	return text.normalize("NFKD").replace(combiningMarks, "").toLocaleLowerCase().trim();
+}
+/** Default filter: the option text contains the query. */
+function containsComboboxFilter(value, query, text) {
+	const needle = normalizeComboboxText(query);
+	return needle.length === 0 || normalizeComboboxText(text).includes(needle);
+}
+/** Filter keeping options whose text starts with the query. */
+function startsWithComboboxFilter(value, query, text) {
+	const needle = normalizeComboboxText(query);
+	return needle.length === 0 || normalizeComboboxText(text).startsWith(needle);
+}
+/**
+* Inline completion for `query` against `text`, or `null` when `text` does
+* not start with it. The completion keeps the user's typed prefix verbatim
+* and appends the option's remaining characters.
+*/
+function inlineComboboxCompletion(query, text) {
+	if (query.length === 0 || text.length <= query.length) return null;
+	if (normalizeComboboxText(text.slice(0, query.length)) !== normalizeComboboxText(query)) return null;
+	return `${query}${text.slice(query.length)}`;
+}
+//#endregion
+//#region src/families/selection/combobox/combobox-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"dir",
+	"data-state",
+	"data-selection-mode",
+	"data-autocomplete",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-invalid",
+	"data-empty",
+	"data-loading"
+];
+const _hoisted_2 = {
+	key: 0,
+	role: "status",
+	"aria-live": "polite",
+	"data-vize-ui": "combobox-status"
+};
+const _hoisted_3 = [
+	"name",
+	"form",
+	"value",
+	"disabled"
+];
+//#endregion
+//#region src/families/selection/combobox/combobox-root.vue
+var combobox_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "combobox-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		multiple: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		items: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		loadItems: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		debounce: {
+			type: Number,
+			required: false,
+			default: 200
+		},
+		by: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		itemText: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		itemDisabled: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		formValue: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		filter: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		autocomplete: {
+			type: String,
+			required: false,
+			default: "list"
+		},
+		strict: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		createOption: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		inputValue: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		defaultInputValue: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		openOnFocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		autoHighlight: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		closeOnSelect: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		clearOnEscape: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		loop: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		form: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		ariaInvalid: {
+			type: [Boolean, String],
+			required: false,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:inputValue",
+		"update:open",
+		"open-change",
+		"create"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		/** Option entries stored in the shared collection: real values or the create option. */
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "combobox"
+		});
+		const inputId = computed(() => deriveDeterministicId(baseId.value, "input"));
+		const listboxId = computed(() => deriveDeterministicId(baseId.value, "listbox"));
+		const multipleState = computed(() => readBooleanProp(__props.multiple));
+		const disabledState = computed(() => __props.disabled);
+		const readonlyState = computed(() => __props.readonly);
+		const requiredState = computed(() => __props.required);
+		const autocompleteState = computed(() => __props.autocomplete);
+		const equals = computed(() => createSelectValueEquality(__props.by));
+		const userInvalid = shallowRef(false);
+		const query = shallowRef("");
+		const labelledby = shallowRef(void 0);
+		const selection = useSelectSelection({
+			defaultValue: () => __props.defaultValue,
+			equals: () => equals.value,
+			modelValue: () => __props.modelValue,
+			multiple: () => multipleState.value,
+			onChange: (next) => emit("update:modelValue", next)
+		});
+		const selected = computed(() => selection.value.value);
+		const collection = useSelectCollection({
+			disabled: disabledState,
+			loop: () => __props.loop,
+			typeahead: () => false,
+			typeaheadTimeout: () => 500
+		});
+		const textCache = shallowRef(/* @__PURE__ */ new Map());
+		function serialize(value) {
+			return __props.formValue?.(value) ?? serializeSelectValue(value, __props.by);
+		}
+		function registeredText(value) {
+			for (const item of collection.registry.items.value) {
+				const entry = item.value.value;
+				if (entry.kind === "value" && equals.value(entry.value, value)) return item.textValue.length > 0 ? item.textValue : void 0;
+			}
+		}
+		function textFor(value) {
+			return __props.itemText?.(value) ?? cachedText(value) ?? registeredText(value) ?? defaultSelectText(value, __props.by);
+		}
+		function cachedText(value) {
+			for (const [candidate, text] of textCache.value) if (equals.value(candidate, value)) return text;
+		}
+		function selectionLabel() {
+			const first = selection.value.value[0];
+			return multipleState.value || first === void 0 ? "" : textFor(first);
+		}
+		const textState = useControllableState({
+			value: () => __props.inputValue,
+			defaultValue: () => __props.defaultInputValue ?? selectionLabel(),
+			onChange: (next) => emit("update:inputValue", next)
+		});
+		const text = computed(() => textState.value.value);
+		const openState = useControllableState({
+			value: () => __props.open,
+			defaultValue: () => __props.defaultOpen
+		});
+		const isOpen = computed(() => openState.value.value && !disabledState.value);
+		const state = computed(() => isOpen.value ? "open" : "closed");
+		const invalid = computed(() => __props.ariaInvalid !== false || userInvalid.value);
+		const selectionMode = computed(() => multipleState.value ? "multiple" : "single");
+		const loaded = shallowRef(void 0);
+		const status = shallowRef("idle");
+		const loadError = shallowRef(void 0);
+		const sourceItems = computed(() => __props.loadItems === void 0 ? __props.items : loaded.value);
+		const filters = computed(() => __props.autocomplete === "list" || __props.autocomplete === "both");
+		const filterFunction = computed(() => {
+			if (__props.filter === false || !filters.value) return null;
+			return __props.filter ?? (__props.loadItems === void 0 ? containsComboboxFilter : null);
+		});
+		const filteredItems = computed(() => {
+			const source = sourceItems.value ?? [];
+			const match = currentFilter();
+			if (match === null || query.value.length === 0) return source;
+			return source.filter((value) => match(value, query.value, textFor(value)));
+		});
+		const visibleCount = computed(() => collection.registry.items.value.filter((item) => item.value.value.kind === "value").length);
+		const empty = computed(() => visibleCount.value === 0);
+		const activeEntry = computed(() => collection.activeItem.value?.value.value ?? null);
+		const activeDescendant = computed(() => isOpen.value ? collection.activeItem.value?.value.id.value : void 0);
+		const exactMatch = computed(() => {
+			const needle = normalizeComboboxText(query.value);
+			if (needle.length === 0) return false;
+			const source = currentSource();
+			if (source !== void 0) return source.some((value) => normalizeComboboxText(textFor(value)) === needle);
+			return collection.registry.items.value.some((item) => item.value.value.kind === "value" && normalizeComboboxText(item.textValue) === needle);
+		});
+		const canCreate = computed(() => !disabledState.value && !readonlyState.value && __props.createOption !== void 0 && query.value.trim().length > 0 && !exactMatch.value);
+		const createActive = computed(() => activeEntry.value?.kind === "create");
+		const selectedText = computed(() => selected.value.map(textFor));
+		const formEntries = computed(() => {
+			if (selected.value.length === 0) {
+				const fallback = !__props.strict ? text.value : "";
+				return multipleState.value && fallback === "" ? [] : [{
+					key: "empty",
+					value: fallback
+				}];
+			}
+			return selected.value.map((value, index) => ({
+				key: `${index}`,
+				value: serialize(value)
+			}));
+		});
+		const nativeRequired = computed(() => requiredState.value && selected.value.length === 0);
+		const loadAnnouncement = computed(() => {
+			if (status.value === "loading") return "Loading…";
+			if (status.value === "success") return `${filteredItems.value.length} results available.`;
+			if (status.value === "error") return "Results could not be loaded.";
+			return "";
+		});
+		const inputElement = shallowRef(null);
+		const anchorElement = shallowRef(null);
+		const toggleElement = shallowRef(null);
+		const contentElement = shallowRef(null);
+		const viewportElement = shallowRef(null);
+		function currentFilter() {
+			return filterFunction.value;
+		}
+		function currentSource() {
+			return sourceItems.value;
+		}
+		function currentLoader() {
+			return __props.loadItems;
+		}
+		function currentQueryText() {
+			return query.value;
+		}
+		function currentSelection() {
+			return selection.value.value;
+		}
+		function currentOpen() {
+			return isOpen.value;
+		}
+		function input() {
+			return inputElement.value;
+		}
+		function syncRequiredValidity() {
+			const element = input();
+			if (element === null) return;
+			const unselectedText = requiredState.value && __props.strict && selected.value.length === 0 && element.value.trim().length > 0;
+			element.setCustomValidity(unselectedText ? "Select an option from the list." : "");
+		}
+		function setText(next) {
+			textState.set(next);
+		}
+		function commit(next, nativeEvent) {
+			const previous = currentSelection();
+			const changed = selection.set(next);
+			if (changed) {
+				userInvalid.value = false;
+				if (nativeEvent !== null) emit("change", fromSelectList(next, multipleState.value), fromSelectList(previous, multipleState.value), nativeEvent);
+			}
+			return changed;
+		}
+		let nextOpenIntent = "selected";
+		function setOpen(value, nativeEvent = null) {
+			const previous = currentOpen();
+			const next = value && !disabledState.value;
+			const changed = openState.set(next);
+			if (changed || previous !== next) {
+				emit("update:open", next);
+				emit("open-change", next, previous, nativeEvent);
+			}
+			return changed || previous !== next;
+		}
+		function openWith(intent, nativeEvent) {
+			nextOpenIntent = intent;
+			setOpen(true, nativeEvent);
+			nextOpenIntent = "selected";
+		}
+		function isSelectedEntry(entry) {
+			return entry.kind === "value" && includesSelectValue(selected.value, entry.value, equals.value);
+		}
+		watch(isOpen, (next) => {
+			if (next) {
+				const intent = nextOpenIntent;
+				if (intent !== null) collection.focusOnOpen(intent, isSelectedEntry, null, null);
+				if (__props.loadItems !== void 0 && loaded.value === void 0) scheduleLoad(true);
+				return;
+			}
+			collection.cancelOpenFocus();
+			collection.setActiveKey(null);
+		}, { flush: "sync" });
+		function choose(value, nativeEvent) {
+			if (disabledState.value || readonlyState.value) return false;
+			const changed = commit(toggleInList(currentSelection(), value, multipleState.value, equals.value), nativeEvent);
+			query.value = "";
+			setText(multipleState.value ? "" : textFor(value));
+			if (__props.closeOnSelect ?? !multipleState.value) setOpen(false, nativeEvent);
+			return changed;
+		}
+		function create(nativeEvent) {
+			const typed = query.value.trim();
+			if (disabledState.value || readonlyState.value || __props.createOption === void 0 || typed.length === 0) return false;
+			const value = __props.createOption(typed);
+			emit("create", value, typed);
+			return choose(value, nativeEvent);
+		}
+		function remove(value, nativeEvent = null) {
+			if (disabledState.value || readonlyState.value) return false;
+			return commit(removeFromList(currentSelection(), value, equals.value), nativeEvent);
+		}
+		function chooseActive(nativeEvent) {
+			const item = collection.activeItem.value;
+			if (item === null || item.disabled) return false;
+			const entry = item.value.value;
+			if (entry.kind === "create") create(nativeEvent);
+			else choose(entry.value, nativeEvent);
+			return true;
+		}
+		function syncTextToSelection() {
+			query.value = "";
+			setText(selectionLabel());
+		}
+		function highlightFirst() {
+			if (!__props.autoHighlight) return;
+			collection.focusOnOpen("first", null, null, null);
+		}
+		function completeInline(typed) {
+			nextTick(() => {
+				if (query.value !== typed) return;
+				for (const item of collection.registry.navigableItems.value) {
+					const entry = item.value.value;
+					if (entry.kind !== "value") continue;
+					const completion = inlineComboboxCompletion(typed, textFor(entry.value));
+					if (completion === null) continue;
+					collection.setActiveKey(item.key);
+					setText(completion);
+					nextTick(() => input()?.setSelectionRange(typed.length, completion.length));
+					return;
+				}
+			});
+		}
+		function onInput(event) {
+			const target = event.target;
+			if (!(target instanceof HTMLInputElement) || disabledState.value || readonlyState.value) return;
+			const typed = target.value;
+			query.value = typed;
+			setText(typed);
+			if (typed.length === 0 && !multipleState.value && __props.strict) commit(Object.freeze([]), event);
+			syncRequiredValidity();
+			if (!isOpen.value) openWith(null, event);
+			const deleting = event instanceof InputEvent && event.inputType.startsWith("delete");
+			if ((__props.autocomplete === "inline" || __props.autocomplete === "both") && !deleting) {
+				completeInline(typed);
+				return;
+			}
+			if (__props.autocomplete !== "none") highlightFirst();
+		}
+		function onKeydown(event) {
+			if (disabledState.value || event.defaultPrevented || event.isComposing) return;
+			const { key } = event;
+			switch (key) {
+				case "ArrowDown":
+					if (readonlyState.value) return;
+					event.preventDefault();
+					if (!isOpen.value) {
+						openWith(event.altKey ? null : "selected", event);
+						return;
+					}
+					collection.navigate("next", event);
+					return;
+				case "ArrowUp":
+					if (readonlyState.value) return;
+					event.preventDefault();
+					if (!isOpen.value) {
+						openWith("last", event);
+						return;
+					}
+					if (event.altKey) {
+						setOpen(false, event);
+						return;
+					}
+					collection.navigate("previous", event);
+					return;
+				case "PageDown":
+				case "PageUp":
+					if (!isOpen.value) return;
+					event.preventDefault();
+					collection.navigate(key === "PageDown" ? "page-next" : "page-previous", event);
+					return;
+				case "Enter":
+					if (isOpen.value && collection.activeItem.value !== null) {
+						event.preventDefault();
+						chooseActive(event);
+						return;
+					}
+					if (canCreate.value) {
+						event.preventDefault();
+						create(event);
+						return;
+					}
+					if (isOpen.value) {
+						event.preventDefault();
+						if (__props.strict) syncTextToSelection();
+						setOpen(false, event);
+					}
+					return;
+				case "Escape":
+					if (isOpen.value) {
+						event.preventDefault();
+						setOpen(false, event);
+						return;
+					}
+					if (__props.clearOnEscape && !readonlyState.value && (text.value !== "" || !multipleState.value && selected.value.length > 0)) {
+						event.preventDefault();
+						query.value = "";
+						setText("");
+						if (!multipleState.value) commit(Object.freeze([]), event);
+					}
+					return;
+				case "Backspace": {
+					const element = input();
+					const last = selected.value.at(-1);
+					if (multipleState.value && !readonlyState.value && text.value === "" && last !== void 0 && (element === null || element.selectionStart === 0)) {
+						event.preventDefault();
+						commit(removeFromList(currentSelection(), last, equals.value), event);
+					}
+					return;
+				}
+				case "Tab":
+					if (isOpen.value) setOpen(false, event);
+					return;
+				default:
+			}
+		}
+		function onFocus(event) {
+			if (__props.openOnFocus && !readonlyState.value && !isOpen.value) openWith("selected", event);
+		}
+		function isInside(target) {
+			if (!(target instanceof Node)) return false;
+			return [
+				contentElement.value,
+				anchorElement.value,
+				toggleElement.value
+			].some((element) => element?.contains(target) === true);
+		}
+		function onBlur(event) {
+			if (isInside(event.relatedTarget)) return;
+			if (__props.strict) syncTextToSelection();
+			else query.value = "";
+		}
+		let controller = null;
+		let timer = null;
+		let mounted = false;
+		function runLoad(currentQuery) {
+			const loader = currentLoader();
+			if (loader === void 0) return;
+			controller?.abort();
+			const request = new AbortController();
+			controller = request;
+			status.value = "loading";
+			Promise.resolve().then(() => loader(currentQuery, { signal: request.signal })).then((result) => {
+				if (request.signal.aborted) return;
+				loaded.value = Object.freeze([...result]);
+				loadError.value = void 0;
+				status.value = "success";
+			}, (error) => {
+				if (request.signal.aborted) return;
+				loadError.value = error;
+				status.value = "error";
+			});
+		}
+		function scheduleLoad(immediate) {
+			if (__props.loadItems === void 0 || !mounted) return;
+			if (timer !== null) clearTimeout(timer);
+			timer = null;
+			controller?.abort();
+			const currentQuery = currentQueryText();
+			if (immediate || __props.debounce <= 0) {
+				runLoad(currentQuery);
+				return;
+			}
+			timer = setTimeout(() => {
+				timer = null;
+				runLoad(currentQuery);
+			}, __props.debounce);
+		}
+		watch(query, () => scheduleLoad(false));
+		watch([
+			inputElement,
+			text,
+			selected,
+			requiredState
+		], syncRequiredValidity, {
+			flush: "post",
+			immediate: true
+		});
+		watch(filteredItems, () => {
+			if (isOpen.value && query.value.length > 0 && __props.autocomplete !== "none") highlightFirst();
+		});
+		watch(selected, () => {
+			if (!multipleState.value && query.value === "") setText(selectionLabel());
+		});
+		function rememberText(value, next) {
+			if (next.length === 0) return;
+			if (cachedText(value) === next) return;
+			const map = new Map(textCache.value);
+			map.set(value, next);
+			textCache.value = map;
+		}
+		function onFormReset() {
+			selection.reset();
+			query.value = "";
+			userInvalid.value = false;
+			setText(__props.defaultInputValue ?? selectionLabel());
+		}
+		let observedForm = null;
+		function onInvalid() {
+			userInvalid.value = true;
+		}
+		onMounted(() => {
+			mounted = true;
+			observedForm = input()?.form ?? null;
+			observedForm?.addEventListener("reset", onFormReset);
+			input()?.addEventListener("invalid", onInvalid);
+			if (isOpen.value && __props.loadItems !== void 0) scheduleLoad(true);
+		});
+		onUnmounted(() => {
+			mounted = false;
+			controller?.abort();
+			if (timer !== null) clearTimeout(timer);
+			observedForm?.removeEventListener("reset", onFormReset);
+			input()?.removeEventListener("invalid", onInvalid);
+		});
+		const popupContext = {
+			activeDescendant,
+			activeKey: collection.activeKey,
+			anchorElement: () => null,
+			baseId,
+			choose,
+			contentElement,
+			direction: computed(() => __props.dir),
+			disabled: disabledState,
+			dismissBranches: computed(() => [
+				inputElement.value,
+				anchorElement.value,
+				toggleElement.value
+			].filter((element) => element !== null)),
+			highlight: (key) => collection.setActiveKey(key),
+			invalid,
+			isItemVisible: (value, itemTextValue) => {
+				const match = currentFilter();
+				if (sourceItems.value !== void 0 || match === null || query.value.length === 0) return true;
+				return match(value, query.value, itemTextValue());
+			},
+			isSelected: (value) => includesSelectValue(selected.value, value, equals.value),
+			isValueDisabled: (value) => __props.itemDisabled?.(value) === true,
+			items: filteredItems,
+			listboxId,
+			listboxLabelledby: computed(() => labelledby.value),
+			multiple: multipleState,
+			onTriggerKeydown: onKeydown,
+			open: isOpen,
+			partPrefix: "combobox",
+			placeholder: computed(() => void 0),
+			referenceElement: computed(() => anchorElement.value ?? inputElement.value),
+			registerItem: (registration) => collection.register({
+				...registration,
+				value: {
+					kind: "value",
+					value: registration.value
+				}
+			}),
+			rememberText,
+			required: requiredState,
+			selected,
+			selectedText,
+			setOpen,
+			setVirtualAdapter: (adapter) => collection.setVirtualAdapter(adapter),
+			state,
+			textOf: textFor,
+			triggerElement: inputElement,
+			triggerId: inputId,
+			viewportElement
+		};
+		selectContext.provide(popupContext);
+		const context = {
+			activeDescendant,
+			anchorElement,
+			autocomplete: autocompleteState,
+			canCreate,
+			create,
+			createActive,
+			disabled: disabledState,
+			empty,
+			highlightCreateOption: () => {
+				const key = collection.findKey((entry) => entry.kind === "create");
+				if (key !== null) collection.setActiveKey(key);
+			},
+			inputElement,
+			inputId,
+			inputValue: text,
+			invalid,
+			isValueDisabled: (value) => __props.itemDisabled?.(value) === true,
+			labelledby,
+			listboxId,
+			multiple: multipleState,
+			nativeRequired,
+			onBlur,
+			onFocus,
+			onInput,
+			onKeydown,
+			open: isOpen,
+			query: computed(() => query.value),
+			readonly: readonlyState,
+			registerCreateOption: ({ element, id: optionId }) => collection.register({
+				disabled: false,
+				element,
+				id: optionId,
+				index: void 0,
+				textValue: "",
+				value: { kind: "create" }
+			}),
+			remove,
+			required: requiredState,
+			setOpen,
+			status: computed(() => status.value),
+			textOf: textFor,
+			toggleElement
+		};
+		comboboxContext.provide(context);
+		const slotState = computed(() => ({
+			disabled: disabledState.value,
+			empty: empty.value,
+			error: loadError.value,
+			filteredItems: filteredItems.value,
+			inputValue: text.value,
+			loading: status.value === "loading",
+			open: isOpen.value,
+			query: query.value,
+			remove,
+			selected: selected.value,
+			selectedText: selectedText.value,
+			selectionMode: selectionMode.value,
+			state: state.value,
+			status: status.value
+		}));
+		__expose({
+			clear: () => {
+				query.value = "";
+				setText("");
+				return commit(Object.freeze([]), null);
+			},
+			deselect: remove,
+			focus: (options) => input()?.focus(options),
+			inputValue: text,
+			open: isOpen,
+			reload: () => scheduleLoad(true),
+			reset: onFormReset,
+			select: (value) => choose(value, null),
+			selected,
+			setInputValue: (next) => {
+				query.value = next;
+				setText(next);
+			},
+			setOpen: (value, nativeEvent) => setOpen(value, nativeEvent ?? null)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				"data-vize-ui": "combobox",
+				part: "root",
+				dir: __props.dir,
+				"data-state": state.value,
+				"data-selection-mode": selectionMode.value,
+				"data-autocomplete": autocompleteState.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-readonly": readonlyState.value ? "true" : void 0,
+				"data-required": requiredState.value ? "true" : void 0,
+				"data-invalid": invalid.value ? "true" : void 0,
+				"data-empty": selected.value.length === 0 ? "true" : void 0,
+				"data-loading": status.value === "loading" ? "true" : void 0
+			}, [
+				renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true),
+				__props.loadItems !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(loadAnnouncement.value), 1)) : createCommentVNode("v-if", true),
+				__props.name !== void 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(formEntries.value, (entry) => {
+					return openBlock(), createElementBlock("input", {
+						key: entry.key,
+						type: "hidden",
+						"data-vize-ui": "combobox-native",
+						part: "native",
+						name: __props.name,
+						form: __props.form,
+						value: entry.value,
+						disabled: disabledState.value
+					}, null, 8, _hoisted_3);
+				}), 128)) : createCommentVNode("v-if", true)
+			], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-d5a8b468"]]);
+//#endregion
+export { startsWithComboboxFilter as a, combobox_input_default as c, normalizeComboboxText as i, comboboxChipContext as l, containsComboboxFilter as n, combobox_loading_default as o, inlineComboboxCompletion as r, combobox_empty_default as s, combobox_root_default as t, comboboxContext as u };