@sprawlify/primitives 0.0.1

package/dist/machines/combobox/index.mjs

@@ -0,0 +1,1582 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { F as scrollIntoView, I as clickIfLink, R as observeAttributes, U as raf, V as nextTick, _n as ariaAttr, _t as isDownloadingEvent, an as isAnchorElement, bn as setCaretToEnd, ht as isContextMenuEvent, lt as getEventKey, mt as isComposingEvent, vn as dataAttr, x as query, xt as isOpeningInNewTab, yt as isLeftClick } from "../../dom-query-DFCRhyj1.mjs";
+import { J as match, dt as isEqual, kt as remove, nt as isBoolean, pt as addOrRemove, t as ensure, u as createSplitProps } from "../../utils-BZyrxWWR.mjs";
+import { s as ListCollection } from "../../collection-8XqaNHs_.mjs";
+import { o as setup } from "../../core-DCFNMTZF.mjs";
+import "../../interact-outside-BplxR9cR.mjs";
+import { n as trackDismissableElement } from "../../dismissable-DDrx0xnH.mjs";
+import { n as getPlacement, t as getPlacementStyles } from "../../popper-BPJeAtcA.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/combobox/combobox.anatomy.ts
+const anatomy = createAnatomy("combobox").parts("root", "clearTrigger", "content", "control", "input", "item", "itemGroup", "itemGroupLabel", "itemIndicator", "itemText", "label", "list", "positioner", "trigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/combobox/combobox.collection.ts
+const collection = (options) => {
+	return new ListCollection(options);
+};
+collection.empty = () => {
+	return new ListCollection({ items: [] });
+};
+
+//#endregion
+//#region src/machines/combobox/combobox.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`;
+const getControlId = (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`;
+const getInputId = (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`;
+const getContentId = (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`;
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`;
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`;
+const getClearTriggerId = (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`;
+const getItemGroupId = (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `combobox:${ctx.id}:optgroup:${id}`;
+const getItemGroupLabelId = (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`;
+const getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `combobox:${ctx.id}:option:${id}`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+const getClearTriggerEl = (ctx) => ctx.getById(getClearTriggerId(ctx));
+const getItemEl = (ctx, value) => {
+	if (value == null) return null;
+	const selector = `[role=option][data-value="${CSS.escape(value)}"]`;
+	return query(getContentEl(ctx), selector);
+};
+const focusInputEl = (ctx) => {
+	const inputEl = getInputEl(ctx);
+	if (ctx.isActiveElement(inputEl)) return;
+	inputEl?.focus({ preventScroll: true });
+};
+const focusTriggerEl = (ctx) => {
+	const triggerEl = getTriggerEl(ctx);
+	if (ctx.isActiveElement(triggerEl)) return;
+	triggerEl?.focus({ preventScroll: true });
+};
+
+//#endregion
+//#region src/machines/combobox/combobox.connect.ts
+function connect(service, normalize) {
+	const { context, prop, state, send, scope, computed, event } = service;
+	const translations = prop("translations");
+	const collection$1 = prop("collection");
+	const disabled = !!prop("disabled");
+	const interactive = computed("isInteractive");
+	const invalid = !!prop("invalid");
+	const required = !!prop("required");
+	const readOnly = !!prop("readOnly");
+	const open = state.hasTag("open");
+	const focused = state.hasTag("focused");
+	const composite = prop("composite");
+	const highlightedValue = context.get("highlightedValue");
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: context.get("currentPlacement")
+	});
+	function getItemState(props$1) {
+		const disabled$1 = collection$1.getItemDisabled(props$1.item);
+		const value = collection$1.getItemValue(props$1.item);
+		ensure(value, () => `[sprawlify-js] No value found for item ${JSON.stringify(props$1.item)}`);
+		return {
+			value,
+			disabled: Boolean(disabled$1 || disabled$1),
+			highlighted: highlightedValue === value,
+			selected: context.get("value").includes(value)
+		};
+	}
+	return {
+		focused,
+		open,
+		inputValue: context.get("inputValue"),
+		highlightedValue,
+		highlightedItem: context.get("highlightedItem"),
+		value: context.get("value"),
+		valueAsString: computed("valueAsString"),
+		hasSelectedItems: computed("hasSelectedItems"),
+		selectedItems: context.get("selectedItems"),
+		collection: prop("collection"),
+		multiple: !!prop("multiple"),
+		disabled: !!disabled,
+		syncSelectedItems() {
+			send({ type: "SELECTED_ITEMS.SYNC" });
+		},
+		reposition(options = {}) {
+			send({
+				type: "POSITIONING.SET",
+				options
+			});
+		},
+		setHighlightValue(value) {
+			send({
+				type: "HIGHLIGHTED_VALUE.SET",
+				value
+			});
+		},
+		clearHighlightValue() {
+			send({ type: "HIGHLIGHTED_VALUE.CLEAR" });
+		},
+		selectValue(value) {
+			send({
+				type: "ITEM.SELECT",
+				value
+			});
+		},
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		setInputValue(value, reason = "script") {
+			send({
+				type: "INPUT_VALUE.SET",
+				value,
+				src: reason
+			});
+		},
+		clearValue(value) {
+			if (value != null) send({
+				type: "ITEM.CLEAR",
+				value
+			});
+			else send({ type: "VALUE.CLEAR" });
+		},
+		focus() {
+			getInputEl(scope)?.focus();
+		},
+		setOpen(nextOpen, reason = "script") {
+			if (state.hasTag("open") === nextOpen) return;
+			send({
+				type: nextOpen ? "OPEN" : "CLOSE",
+				src: reason
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				htmlFor: getInputId(scope),
+				id: getLabelId(scope),
+				"data-readonly": dataAttr(readOnly),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-required": dataAttr(required),
+				"data-focus": dataAttr(focused),
+				onClick(event$1) {
+					if (composite) return;
+					event$1.preventDefault();
+					getTriggerEl(scope)?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: getControlId(scope),
+				"data-state": open ? "open" : "closed",
+				"data-focus": dataAttr(focused),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid)
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				id: getPositionerId(scope),
+				style: popperStyles.floating
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				dir: prop("dir"),
+				"aria-invalid": ariaAttr(invalid),
+				"data-invalid": dataAttr(invalid),
+				"data-autofocus": dataAttr(prop("autoFocus")),
+				name: prop("name"),
+				form: prop("form"),
+				disabled,
+				required: prop("required"),
+				autoComplete: "off",
+				autoCorrect: "off",
+				autoCapitalize: "none",
+				spellCheck: "false",
+				readOnly,
+				placeholder: prop("placeholder"),
+				id: getInputId(scope),
+				type: "text",
+				role: "combobox",
+				defaultValue: context.get("inputValue"),
+				"aria-autocomplete": computed("autoComplete") ? "both" : "list",
+				"aria-controls": getContentId(scope),
+				"aria-expanded": open,
+				"data-state": open ? "open" : "closed",
+				"aria-activedescendant": highlightedValue ? getItemId(scope, highlightedValue) : void 0,
+				onClick(event$1) {
+					if (event$1.defaultPrevented) return;
+					if (!prop("openOnClick")) return;
+					if (!interactive) return;
+					send({
+						type: "INPUT.CLICK",
+						src: "input-click"
+					});
+				},
+				onFocus() {
+					if (disabled) return;
+					send({ type: "INPUT.FOCUS" });
+				},
+				onBlur() {
+					if (disabled) return;
+					send({ type: "INPUT.BLUR" });
+				},
+				onChange(event$1) {
+					send({
+						type: "INPUT.CHANGE",
+						value: event$1.currentTarget.value,
+						src: "input-change"
+					});
+				},
+				onKeyDown(event$1) {
+					if (event$1.defaultPrevented) return;
+					if (!interactive) return;
+					if (event$1.ctrlKey || event$1.shiftKey || isComposingEvent(event$1)) return;
+					const openOnKeyPress = prop("openOnKeyPress");
+					const isModifierKey = event$1.ctrlKey || event$1.metaKey || event$1.shiftKey;
+					const keypress = true;
+					const exec = {
+						ArrowDown(event$2) {
+							if (!openOnKeyPress && !open) return;
+							send({
+								type: event$2.altKey ? "OPEN" : "INPUT.ARROW_DOWN",
+								keypress,
+								src: "arrow-key"
+							});
+							event$2.preventDefault();
+						},
+						ArrowUp() {
+							if (!openOnKeyPress && !open) return;
+							send({
+								type: event$1.altKey ? "CLOSE" : "INPUT.ARROW_UP",
+								keypress,
+								src: "arrow-key"
+							});
+							event$1.preventDefault();
+						},
+						Home(event$2) {
+							if (isModifierKey) return;
+							send({
+								type: "INPUT.HOME",
+								keypress
+							});
+							if (open) event$2.preventDefault();
+						},
+						End(event$2) {
+							if (isModifierKey) return;
+							send({
+								type: "INPUT.END",
+								keypress
+							});
+							if (open) event$2.preventDefault();
+						},
+						Enter(event$2) {
+							send({
+								type: "INPUT.ENTER",
+								keypress,
+								src: "item-select"
+							});
+							const submittable = computed("isCustomValue") && prop("allowCustomValue");
+							const hasHighlight = highlightedValue != null;
+							const alwaysSubmit = prop("alwaysSubmitOnEnter");
+							if (open && !submittable && !alwaysSubmit && hasHighlight) event$2.preventDefault();
+							if (highlightedValue == null) return;
+							const itemEl = getItemEl(scope, highlightedValue);
+							if (isAnchorElement(itemEl)) prop("navigate")?.({
+								value: highlightedValue,
+								node: itemEl,
+								href: itemEl.href
+							});
+						},
+						Escape() {
+							send({
+								type: "INPUT.ESCAPE",
+								keypress,
+								src: "escape-key"
+							});
+							event$1.preventDefault();
+						}
+					}[getEventKey(event$1, { dir: prop("dir") })];
+					exec?.(event$1);
+				}
+			});
+		},
+		getTriggerProps(props$1 = {}) {
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				id: getTriggerId(scope),
+				"aria-haspopup": composite ? "listbox" : "dialog",
+				type: "button",
+				tabIndex: props$1.focusable ? void 0 : -1,
+				"aria-label": translations.triggerLabel,
+				"aria-expanded": open,
+				"data-state": open ? "open" : "closed",
+				"aria-controls": open ? getContentId(scope) : void 0,
+				disabled,
+				"data-invalid": dataAttr(invalid),
+				"data-focusable": dataAttr(props$1.focusable),
+				"data-readonly": dataAttr(readOnly),
+				"data-disabled": dataAttr(disabled),
+				onFocus() {
+					if (!props$1.focusable) return;
+					send({
+						type: "INPUT.FOCUS",
+						src: "trigger"
+					});
+				},
+				onClick(event$1) {
+					if (event$1.defaultPrevented) return;
+					if (!interactive) return;
+					if (!isLeftClick(event$1)) return;
+					send({
+						type: "TRIGGER.CLICK",
+						src: "trigger-click"
+					});
+				},
+				onPointerDown(event$1) {
+					if (!interactive) return;
+					if (event$1.pointerType === "touch") return;
+					if (!isLeftClick(event$1)) return;
+					event$1.preventDefault();
+					queueMicrotask(() => {
+						getInputEl(scope)?.focus({ preventScroll: true });
+					});
+				},
+				onKeyDown(event$1) {
+					if (event$1.defaultPrevented) return;
+					if (composite) return;
+					const exec = {
+						ArrowDown() {
+							send({
+								type: "INPUT.ARROW_DOWN",
+								src: "arrow-key"
+							});
+						},
+						ArrowUp() {
+							send({
+								type: "INPUT.ARROW_UP",
+								src: "arrow-key"
+							});
+						}
+					}[getEventKey(event$1, { dir: prop("dir") })];
+					if (exec) {
+						exec(event$1);
+						event$1.preventDefault();
+					}
+				}
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				id: getContentId(scope),
+				role: !composite ? "dialog" : "listbox",
+				tabIndex: -1,
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				"data-placement": context.get("currentPlacement"),
+				"aria-labelledby": getLabelId(scope),
+				"aria-multiselectable": prop("multiple") && composite ? true : void 0,
+				"data-empty": dataAttr(collection$1.size === 0),
+				onPointerDown(event$1) {
+					if (!isLeftClick(event$1)) return;
+					event$1.preventDefault();
+				}
+			});
+		},
+		getListProps() {
+			return normalize.element({
+				...parts.list.attrs,
+				role: !composite ? "listbox" : void 0,
+				"data-empty": dataAttr(collection$1.size === 0),
+				"aria-labelledby": getLabelId(scope),
+				"aria-multiselectable": prop("multiple") && !composite ? true : void 0
+			});
+		},
+		getClearTriggerProps() {
+			return normalize.button({
+				...parts.clearTrigger.attrs,
+				dir: prop("dir"),
+				id: getClearTriggerId(scope),
+				type: "button",
+				tabIndex: -1,
+				disabled,
+				"data-invalid": dataAttr(invalid),
+				"aria-label": translations.clearTriggerLabel,
+				"aria-controls": getInputId(scope),
+				hidden: !context.get("value").length,
+				onPointerDown(event$1) {
+					if (!isLeftClick(event$1)) return;
+					event$1.preventDefault();
+				},
+				onClick(event$1) {
+					if (event$1.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "VALUE.CLEAR",
+						src: "clear-trigger"
+					});
+				}
+			});
+		},
+		getItemState,
+		getItemProps(props$1) {
+			const itemState = getItemState(props$1);
+			const value = itemState.value;
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				id: getItemId(scope, value),
+				role: "option",
+				tabIndex: -1,
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				"aria-selected": ariaAttr(itemState.highlighted),
+				"aria-disabled": ariaAttr(itemState.disabled),
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-value": itemState.value,
+				onPointerMove() {
+					if (itemState.disabled) return;
+					if (itemState.highlighted) return;
+					send({
+						type: "ITEM.POINTER_MOVE",
+						value
+					});
+				},
+				onPointerLeave() {
+					if (props$1.persistFocus) return;
+					if (itemState.disabled) return;
+					if (!event.previous()?.type.includes("POINTER")) return;
+					send({
+						type: "ITEM.POINTER_LEAVE",
+						value
+					});
+				},
+				onClick(event$1) {
+					if (isDownloadingEvent(event$1)) return;
+					if (isOpeningInNewTab(event$1)) return;
+					if (isContextMenuEvent(event$1)) return;
+					if (itemState.disabled) return;
+					send({
+						type: "ITEM.CLICK",
+						src: "item-select",
+						value
+					});
+				}
+			});
+		},
+		getItemTextProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				...parts.itemText.attrs,
+				dir: prop("dir"),
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-highlighted": dataAttr(itemState.highlighted)
+			});
+		},
+		getItemIndicatorProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				"aria-hidden": true,
+				...parts.itemIndicator.attrs,
+				dir: prop("dir"),
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				hidden: !itemState.selected
+			});
+		},
+		getItemGroupProps(props$1) {
+			const { id } = props$1;
+			return normalize.element({
+				...parts.itemGroup.attrs,
+				dir: prop("dir"),
+				id: getItemGroupId(scope, id),
+				"aria-labelledby": getItemGroupLabelId(scope, id),
+				"data-empty": dataAttr(collection$1.size === 0),
+				role: "group"
+			});
+		},
+		getItemGroupLabelProps(props$1) {
+			const { htmlFor } = props$1;
+			return normalize.element({
+				...parts.itemGroupLabel.attrs,
+				dir: prop("dir"),
+				id: getItemGroupLabelId(scope, htmlFor),
+				role: "presentation"
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/combobox/combobox.machine.ts
+const { guards, createMachine, choose } = setup();
+const { and, not } = guards;
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			loopFocus: true,
+			openOnClick: false,
+			defaultValue: [],
+			defaultInputValue: "",
+			closeOnSelect: !props$1.multiple,
+			allowCustomValue: false,
+			alwaysSubmitOnEnter: false,
+			inputBehavior: "none",
+			selectionBehavior: props$1.multiple ? "clear" : "replace",
+			openOnKeyPress: true,
+			openOnChange: true,
+			composite: true,
+			navigate({ node }) {
+				clickIfLink(node);
+			},
+			collection: collection.empty(),
+			...props$1,
+			positioning: {
+				placement: "bottom",
+				sameWidth: true,
+				...props$1.positioning
+			},
+			translations: {
+				triggerLabel: "Toggle suggestions",
+				clearTriggerLabel: "Clear value",
+				...props$1.translations
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "suggesting" : "idle";
+	},
+	context({ prop, bindable, getContext, getEvent }) {
+		return {
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				isEqual,
+				hash(value) {
+					return value.join(",");
+				},
+				onChange(value) {
+					const context = getContext();
+					const prevSelectedItems = context.get("selectedItems");
+					const collection$1 = prop("collection");
+					const nextItems = value.map((v) => {
+						return prevSelectedItems.find((item) => collection$1.getItemValue(item) === v) || collection$1.find(v);
+					});
+					context.set("selectedItems", nextItems);
+					prop("onValueChange")?.({
+						value,
+						items: nextItems
+					});
+				}
+			})),
+			highlightedValue: bindable(() => ({
+				defaultValue: prop("defaultHighlightedValue") || null,
+				value: prop("highlightedValue"),
+				onChange(value) {
+					const item = prop("collection").find(value);
+					prop("onHighlightChange")?.({
+						highlightedValue: value,
+						highlightedItem: item
+					});
+				}
+			})),
+			inputValue: bindable(() => {
+				let inputValue = prop("inputValue") || prop("defaultInputValue");
+				const value = prop("value") || prop("defaultValue");
+				if (!inputValue.trim() && !prop("multiple")) {
+					const valueAsString = prop("collection").stringifyMany(value);
+					inputValue = match(prop("selectionBehavior"), {
+						preserve: inputValue || valueAsString,
+						replace: valueAsString,
+						clear: ""
+					});
+				}
+				return {
+					defaultValue: inputValue,
+					value: prop("inputValue"),
+					onChange(value$1) {
+						const event = getEvent();
+						const reason = (event.previousEvent || event).src;
+						prop("onInputValueChange")?.({
+							inputValue: value$1,
+							reason
+						});
+					}
+				};
+			}),
+			highlightedItem: bindable(() => {
+				const highlightedValue = prop("highlightedValue");
+				return { defaultValue: prop("collection").find(highlightedValue) };
+			}),
+			selectedItems: bindable(() => {
+				const value = prop("value") || prop("defaultValue") || [];
+				return { defaultValue: prop("collection").findMany(value) };
+			})
+		};
+	},
+	computed: {
+		isInputValueEmpty: ({ context }) => context.get("inputValue").length === 0,
+		isInteractive: ({ prop }) => !(prop("readOnly") || prop("disabled")),
+		autoComplete: ({ prop }) => prop("inputBehavior") === "autocomplete",
+		autoHighlight: ({ prop }) => prop("inputBehavior") === "autohighlight",
+		hasSelectedItems: ({ context }) => context.get("value").length > 0,
+		valueAsString: ({ context, prop }) => prop("collection").stringifyItems(context.get("selectedItems")),
+		isCustomValue: ({ context, computed }) => context.get("inputValue") !== computed("valueAsString")
+	},
+	watch({ context, prop, track, action, send }) {
+		track([() => context.hash("value")], () => {
+			action(["syncSelectedItems"]);
+		});
+		track([() => context.get("inputValue")], () => {
+			action(["syncInputValue"]);
+		});
+		track([() => context.get("highlightedValue")], () => {
+			action(["syncHighlightedItem", "autofillInputValue"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+		track([() => prop("collection").toString()], () => {
+			send({ type: "CHILDREN_CHANGE" });
+		});
+	},
+	on: {
+		"SELECTED_ITEMS.SYNC": { actions: ["syncSelectedItems"] },
+		"HIGHLIGHTED_VALUE.SET": { actions: ["setHighlightedValue"] },
+		"HIGHLIGHTED_VALUE.CLEAR": { actions: ["clearHighlightedValue"] },
+		"ITEM.SELECT": { actions: ["selectItem"] },
+		"ITEM.CLEAR": { actions: ["clearItem"] },
+		"VALUE.SET": { actions: ["setValue"] },
+		"INPUT_VALUE.SET": { actions: ["setInputValue"] },
+		"POSITIONING.SET": { actions: ["reposition"] }
+	},
+	entry: choose([{
+		guard: "autoFocus",
+		actions: ["setInitialFocus"]
+	}]),
+	states: {
+		idle: {
+			tags: ["idle", "closed"],
+			entry: ["scrollContentToTop", "clearHighlightedValue"],
+			on: {
+				"CONTROLLED.OPEN": { target: "interacting" },
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: [
+						"setInitialFocus",
+						"highlightFirstSelectedItem",
+						"invokeOnOpen"
+					]
+				}, {
+					target: "interacting",
+					actions: [
+						"setInitialFocus",
+						"highlightFirstSelectedItem",
+						"invokeOnOpen"
+					]
+				}],
+				"INPUT.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+				}, {
+					target: "interacting",
+					actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+				}],
+				"INPUT.FOCUS": { target: "focused" },
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "interacting",
+					actions: ["invokeOnOpen"]
+				}],
+				"VALUE.CLEAR": {
+					target: "focused",
+					actions: [
+						"clearInputValue",
+						"clearSelectedItems",
+						"setInitialFocus"
+					]
+				}
+			}
+		},
+		focused: {
+			tags: ["focused", "closed"],
+			entry: ["scrollContentToTop", "clearHighlightedValue"],
+			on: {
+				"CONTROLLED.OPEN": [{
+					guard: "isChangeEvent",
+					target: "suggesting"
+				}, { target: "interacting" }],
+				"INPUT.CHANGE": [
+					{
+						guard: and("isOpenControlled", "openOnChange"),
+						actions: [
+							"setInputValue",
+							"invokeOnOpen",
+							"highlightFirstItemIfNeeded"
+						]
+					},
+					{
+						guard: "openOnChange",
+						target: "suggesting",
+						actions: [
+							"setInputValue",
+							"invokeOnOpen",
+							"highlightFirstItemIfNeeded"
+						]
+					},
+					{ actions: ["setInputValue"] }
+				],
+				"LAYER.INTERACT_OUTSIDE": { target: "idle" },
+				"INPUT.ESCAPE": {
+					guard: and("isCustomValue", not("allowCustomValue")),
+					actions: ["revertInputValue"]
+				},
+				"INPUT.BLUR": { target: "idle" },
+				"INPUT.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+				}, {
+					target: "interacting",
+					actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+				}],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: [
+						"setInitialFocus",
+						"highlightFirstSelectedItem",
+						"invokeOnOpen"
+					]
+				}, {
+					target: "interacting",
+					actions: [
+						"setInitialFocus",
+						"highlightFirstSelectedItem",
+						"invokeOnOpen"
+					]
+				}],
+				"INPUT.ARROW_DOWN": [
+					{
+						guard: and("isOpenControlled", "autoComplete"),
+						actions: ["invokeOnOpen"]
+					},
+					{
+						guard: "autoComplete",
+						target: "interacting",
+						actions: ["invokeOnOpen"]
+					},
+					{
+						guard: "isOpenControlled",
+						actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+					},
+					{
+						target: "interacting",
+						actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+					}
+				],
+				"INPUT.ARROW_UP": [
+					{
+						guard: "autoComplete",
+						target: "interacting",
+						actions: ["invokeOnOpen"]
+					},
+					{
+						guard: "autoComplete",
+						target: "interacting",
+						actions: ["invokeOnOpen"]
+					},
+					{
+						target: "interacting",
+						actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+					},
+					{
+						target: "interacting",
+						actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+					}
+				],
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "interacting",
+					actions: ["invokeOnOpen"]
+				}],
+				"VALUE.CLEAR": { actions: ["clearInputValue", "clearSelectedItems"] }
+			}
+		},
+		interacting: {
+			tags: ["open", "focused"],
+			entry: ["setInitialFocus"],
+			effects: [
+				"scrollToHighlightedItem",
+				"trackDismissableLayer",
+				"trackPlacement"
+			],
+			on: {
+				"CONTROLLED.CLOSE": [{
+					guard: "restoreFocus",
+					target: "focused",
+					actions: ["setFinalFocus"]
+				}, { target: "idle" }],
+				CHILDREN_CHANGE: [{
+					guard: "isHighlightedItemRemoved",
+					actions: ["clearHighlightedValue"]
+				}, { actions: ["scrollToHighlightedItem"] }],
+				"INPUT.HOME": { actions: ["highlightFirstItem"] },
+				"INPUT.END": { actions: ["highlightLastItem"] },
+				"INPUT.ARROW_DOWN": [{
+					guard: and("autoComplete", "isLastItemHighlighted"),
+					actions: ["clearHighlightedValue", "scrollContentToTop"]
+				}, { actions: ["highlightNextItem"] }],
+				"INPUT.ARROW_UP": [{
+					guard: and("autoComplete", "isFirstItemHighlighted"),
+					actions: ["clearHighlightedValue"]
+				}, { actions: ["highlightPrevItem"] }],
+				"INPUT.ENTER": [
+					{
+						guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+						target: "focused",
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isOpenControlled", "closeOnSelect"),
+						actions: ["selectHighlightedItem", "invokeOnClose"]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "focused",
+						actions: [
+							"selectHighlightedItem",
+							"invokeOnClose",
+							"setFinalFocus"
+						]
+					},
+					{ actions: ["selectHighlightedItem"] }
+				],
+				"INPUT.CHANGE": [{
+					guard: "autoComplete",
+					target: "suggesting",
+					actions: ["setInputValue"]
+				}, {
+					target: "suggesting",
+					actions: ["clearHighlightedValue", "setInputValue"]
+				}],
+				"ITEM.POINTER_MOVE": { actions: ["setHighlightedValue"] },
+				"ITEM.POINTER_LEAVE": { actions: ["clearHighlightedValue"] },
+				"ITEM.CLICK": [
+					{
+						guard: and("isOpenControlled", "closeOnSelect"),
+						actions: ["selectItem", "invokeOnClose"]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "focused",
+						actions: [
+							"selectItem",
+							"invokeOnClose",
+							"setFinalFocus"
+						]
+					},
+					{ actions: ["selectItem"] }
+				],
+				"LAYER.ESCAPE": [
+					{
+						guard: and("isOpenControlled", "autoComplete"),
+						actions: ["syncInputValue", "invokeOnClose"]
+					},
+					{
+						guard: "autoComplete",
+						target: "focused",
+						actions: ["syncInputValue", "invokeOnClose"]
+					},
+					{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					},
+					{
+						target: "focused",
+						actions: ["invokeOnClose", "setFinalFocus"]
+					}
+				],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: ["invokeOnClose"]
+				}],
+				"LAYER.INTERACT_OUTSIDE": [
+					{
+						guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isCustomValue", not("allowCustomValue")),
+						target: "idle",
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					},
+					{
+						target: "idle",
+						actions: ["invokeOnClose"]
+					}
+				],
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: ["invokeOnClose", "setFinalFocus"]
+				}],
+				"VALUE.CLEAR": [{
+					guard: "isOpenControlled",
+					actions: [
+						"clearInputValue",
+						"clearSelectedItems",
+						"invokeOnClose"
+					]
+				}, {
+					target: "focused",
+					actions: [
+						"clearInputValue",
+						"clearSelectedItems",
+						"invokeOnClose",
+						"setFinalFocus"
+					]
+				}]
+			}
+		},
+		suggesting: {
+			tags: ["open", "focused"],
+			effects: [
+				"trackDismissableLayer",
+				"scrollToHighlightedItem",
+				"trackPlacement"
+			],
+			entry: ["setInitialFocus"],
+			on: {
+				"CONTROLLED.CLOSE": [{
+					guard: "restoreFocus",
+					target: "focused",
+					actions: ["setFinalFocus"]
+				}, { target: "idle" }],
+				CHILDREN_CHANGE: [
+					{
+						guard: and("isHighlightedItemRemoved", "hasCollectionItems", "autoHighlight"),
+						actions: ["clearHighlightedValue", "highlightFirstItem"]
+					},
+					{
+						guard: "isHighlightedItemRemoved",
+						actions: ["clearHighlightedValue"]
+					},
+					{
+						guard: "autoHighlight",
+						actions: ["highlightFirstItem"]
+					}
+				],
+				"INPUT.ARROW_DOWN": {
+					target: "interacting",
+					actions: ["highlightNextItem"]
+				},
+				"INPUT.ARROW_UP": {
+					target: "interacting",
+					actions: ["highlightPrevItem"]
+				},
+				"INPUT.HOME": {
+					target: "interacting",
+					actions: ["highlightFirstItem"]
+				},
+				"INPUT.END": {
+					target: "interacting",
+					actions: ["highlightLastItem"]
+				},
+				"INPUT.ENTER": [
+					{
+						guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+						target: "focused",
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isOpenControlled", "closeOnSelect"),
+						actions: ["selectHighlightedItem", "invokeOnClose"]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "focused",
+						actions: [
+							"selectHighlightedItem",
+							"invokeOnClose",
+							"setFinalFocus"
+						]
+					},
+					{ actions: ["selectHighlightedItem"] }
+				],
+				"INPUT.CHANGE": { actions: ["setInputValue"] },
+				"LAYER.ESCAPE": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: ["invokeOnClose"]
+				}],
+				"ITEM.POINTER_MOVE": {
+					target: "interacting",
+					actions: ["setHighlightedValue"]
+				},
+				"ITEM.POINTER_LEAVE": { actions: ["clearHighlightedValue"] },
+				"LAYER.INTERACT_OUTSIDE": [
+					{
+						guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isCustomValue", not("allowCustomValue")),
+						target: "idle",
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					},
+					{
+						target: "idle",
+						actions: ["invokeOnClose"]
+					}
+				],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: ["invokeOnClose"]
+				}],
+				"ITEM.CLICK": [
+					{
+						guard: and("isOpenControlled", "closeOnSelect"),
+						actions: ["selectItem", "invokeOnClose"]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "focused",
+						actions: [
+							"selectItem",
+							"invokeOnClose",
+							"setFinalFocus"
+						]
+					},
+					{ actions: ["selectItem"] }
+				],
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: ["invokeOnClose", "setFinalFocus"]
+				}],
+				"VALUE.CLEAR": [{
+					guard: "isOpenControlled",
+					actions: [
+						"clearInputValue",
+						"clearSelectedItems",
+						"invokeOnClose"
+					]
+				}, {
+					target: "focused",
+					actions: [
+						"clearInputValue",
+						"clearSelectedItems",
+						"invokeOnClose",
+						"setFinalFocus"
+					]
+				}]
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			isInputValueEmpty: ({ computed }) => computed("isInputValueEmpty"),
+			autoComplete: ({ computed, prop }) => computed("autoComplete") && !prop("multiple"),
+			autoHighlight: ({ computed }) => computed("autoHighlight"),
+			isFirstItemHighlighted: ({ prop, context }) => prop("collection").firstValue === context.get("highlightedValue"),
+			isLastItemHighlighted: ({ prop, context }) => prop("collection").lastValue === context.get("highlightedValue"),
+			isCustomValue: ({ computed }) => computed("isCustomValue"),
+			allowCustomValue: ({ prop }) => !!prop("allowCustomValue"),
+			hasHighlightedItem: ({ context }) => context.get("highlightedValue") != null,
+			closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),
+			isOpenControlled: ({ prop }) => prop("open") != null,
+			openOnChange: ({ prop, context }) => {
+				const openOnChange = prop("openOnChange");
+				if (isBoolean(openOnChange)) return openOnChange;
+				return !!openOnChange?.({ inputValue: context.get("inputValue") });
+			},
+			restoreFocus: ({ event }) => {
+				const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+				return restoreFocus == null ? true : !!restoreFocus;
+			},
+			isChangeEvent: ({ event }) => event.previousEvent?.type === "INPUT.CHANGE",
+			autoFocus: ({ prop }) => !!prop("autoFocus"),
+			isHighlightedItemRemoved: ({ prop, context }) => !prop("collection").has(context.get("highlightedValue")),
+			hasCollectionItems: ({ prop }) => prop("collection").size > 0
+		},
+		effects: {
+			trackDismissableLayer({ send, prop, scope }) {
+				if (prop("disableLayer")) return;
+				const contentEl = () => getContentEl(scope);
+				return trackDismissableElement(contentEl, {
+					type: "listbox",
+					defer: true,
+					exclude: () => [
+						getInputEl(scope),
+						getTriggerEl(scope),
+						getClearTriggerEl(scope)
+					],
+					onFocusOutside: prop("onFocusOutside"),
+					onPointerDownOutside: prop("onPointerDownOutside"),
+					onInteractOutside: prop("onInteractOutside"),
+					onEscapeKeyDown(event) {
+						event.preventDefault();
+						event.stopPropagation();
+						send({
+							type: "LAYER.ESCAPE",
+							src: "escape-key"
+						});
+					},
+					onDismiss() {
+						send({
+							type: "LAYER.INTERACT_OUTSIDE",
+							src: "interact-outside",
+							restoreFocus: false
+						});
+					}
+				});
+			},
+			trackPlacement({ context, prop, scope }) {
+				const anchorEl = () => getControlEl(scope) || getTriggerEl(scope);
+				const positionerEl = () => getPositionerEl(scope);
+				context.set("currentPlacement", prop("positioning").placement);
+				return getPlacement(anchorEl, positionerEl, {
+					...prop("positioning"),
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			scrollToHighlightedItem({ context, prop, scope, event }) {
+				const inputEl = getInputEl(scope);
+				let cleanups = [];
+				const exec = (immediate) => {
+					const pointer = event.current().type.includes("POINTER");
+					const highlightedValue = context.get("highlightedValue");
+					if (pointer || !highlightedValue) return;
+					const contentEl = getContentEl(scope);
+					const scrollToIndexFn = prop("scrollToIndexFn");
+					if (scrollToIndexFn) {
+						scrollToIndexFn({
+							index: prop("collection").indexOf(highlightedValue),
+							immediate,
+							getElement: () => getItemEl(scope, highlightedValue)
+						});
+						return;
+					}
+					const itemEl = getItemEl(scope, highlightedValue);
+					const raf_cleanup = raf(() => {
+						scrollIntoView(itemEl, {
+							rootEl: contentEl,
+							block: "nearest"
+						});
+					});
+					cleanups.push(raf_cleanup);
+				};
+				const rafCleanup = raf(() => exec(true));
+				cleanups.push(rafCleanup);
+				const observerCleanup = observeAttributes(inputEl, {
+					attributes: ["aria-activedescendant"],
+					callback: () => exec(false)
+				});
+				cleanups.push(observerCleanup);
+				return () => {
+					cleanups.forEach((cleanup) => cleanup());
+				};
+			}
+		},
+		actions: {
+			reposition({ context, prop, scope, event }) {
+				const controlEl = () => getControlEl(scope);
+				const positionerEl = () => getPositionerEl(scope);
+				getPlacement(controlEl, positionerEl, {
+					...prop("positioning"),
+					...event.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			setHighlightedValue({ context, event }) {
+				if (event.value == null) return;
+				context.set("highlightedValue", event.value);
+			},
+			clearHighlightedValue({ context }) {
+				context.set("highlightedValue", null);
+			},
+			selectHighlightedItem(params) {
+				const { context, prop } = params;
+				const collection$1 = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				if (!highlightedValue || !collection$1.has(highlightedValue)) return;
+				const nextValue = prop("multiple") ? addOrRemove(context.get("value"), highlightedValue) : [highlightedValue];
+				prop("onSelect")?.({
+					value: nextValue,
+					itemValue: highlightedValue
+				});
+				context.set("value", nextValue);
+				const inputValue = match(prop("selectionBehavior"), {
+					preserve: context.get("inputValue"),
+					replace: collection$1.stringifyMany(nextValue),
+					clear: ""
+				});
+				context.set("inputValue", inputValue);
+			},
+			scrollToHighlightedItem({ context, prop, scope }) {
+				nextTick(() => {
+					const highlightedValue = context.get("highlightedValue");
+					if (highlightedValue == null) return;
+					const itemEl = getItemEl(scope, highlightedValue);
+					const contentEl = getContentEl(scope);
+					const scrollToIndexFn = prop("scrollToIndexFn");
+					if (scrollToIndexFn) {
+						scrollToIndexFn({
+							index: prop("collection").indexOf(highlightedValue),
+							immediate: true,
+							getElement: () => getItemEl(scope, highlightedValue)
+						});
+						return;
+					}
+					scrollIntoView(itemEl, {
+						rootEl: contentEl,
+						block: "nearest"
+					});
+				});
+			},
+			selectItem(params) {
+				const { context, event, flush, prop } = params;
+				if (event.value == null) return;
+				flush(() => {
+					const nextValue = prop("multiple") ? addOrRemove(context.get("value"), event.value) : [event.value];
+					prop("onSelect")?.({
+						value: nextValue,
+						itemValue: event.value
+					});
+					context.set("value", nextValue);
+					const inputValue = match(prop("selectionBehavior"), {
+						preserve: context.get("inputValue"),
+						replace: prop("collection").stringifyMany(nextValue),
+						clear: ""
+					});
+					context.set("inputValue", inputValue);
+				});
+			},
+			clearItem(params) {
+				const { context, event, flush, prop } = params;
+				if (event.value == null) return;
+				flush(() => {
+					const nextValue = remove(context.get("value"), event.value);
+					context.set("value", nextValue);
+					const inputValue = match(prop("selectionBehavior"), {
+						preserve: context.get("inputValue"),
+						replace: prop("collection").stringifyMany(nextValue),
+						clear: ""
+					});
+					context.set("inputValue", inputValue);
+				});
+			},
+			setInitialFocus({ scope }) {
+				raf(() => {
+					focusInputEl(scope);
+				});
+			},
+			setFinalFocus({ scope }) {
+				raf(() => {
+					if (getTriggerEl(scope)?.dataset.focusable == null) focusInputEl(scope);
+					else focusTriggerEl(scope);
+				});
+			},
+			syncInputValue({ context, scope, event }) {
+				const inputEl = getInputEl(scope);
+				if (!inputEl) return;
+				inputEl.value = context.get("inputValue");
+				queueMicrotask(() => {
+					if (event.current().type === "INPUT.CHANGE") return;
+					setCaretToEnd(inputEl);
+				});
+			},
+			setInputValue({ context, event }) {
+				context.set("inputValue", event.value);
+			},
+			clearInputValue({ context }) {
+				context.set("inputValue", "");
+			},
+			revertInputValue({ context, prop, computed }) {
+				const inputValue = match(prop("selectionBehavior"), {
+					replace: computed("hasSelectedItems") ? computed("valueAsString") : "",
+					preserve: context.get("inputValue"),
+					clear: ""
+				});
+				context.set("inputValue", inputValue);
+			},
+			setValue(params) {
+				const { context, flush, event, prop } = params;
+				flush(() => {
+					context.set("value", event.value);
+					const inputValue = match(prop("selectionBehavior"), {
+						preserve: context.get("inputValue"),
+						replace: prop("collection").stringifyMany(event.value),
+						clear: ""
+					});
+					context.set("inputValue", inputValue);
+				});
+			},
+			clearSelectedItems(params) {
+				const { context, flush, prop } = params;
+				flush(() => {
+					context.set("value", []);
+					const inputValue = match(prop("selectionBehavior"), {
+						preserve: context.get("inputValue"),
+						replace: prop("collection").stringifyMany([]),
+						clear: ""
+					});
+					context.set("inputValue", inputValue);
+				});
+			},
+			scrollContentToTop({ prop, scope }) {
+				const scrollToIndexFn = prop("scrollToIndexFn");
+				if (scrollToIndexFn) {
+					const firstValue = prop("collection").firstValue;
+					scrollToIndexFn({
+						index: 0,
+						immediate: true,
+						getElement: () => getItemEl(scope, firstValue)
+					});
+				} else {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					contentEl.scrollTop = 0;
+				}
+			},
+			invokeOnOpen({ prop, event, context }) {
+				const reason = getOpenChangeReason(event);
+				prop("onOpenChange")?.({
+					open: true,
+					reason,
+					value: context.get("value")
+				});
+			},
+			invokeOnClose({ prop, event, context }) {
+				const reason = getOpenChangeReason(event);
+				prop("onOpenChange")?.({
+					open: false,
+					reason,
+					value: context.get("value")
+				});
+			},
+			highlightFirstItem({ context, prop, scope }) {
+				(getContentEl(scope) ? queueMicrotask : raf)(() => {
+					const value = prop("collection").firstValue;
+					if (value) context.set("highlightedValue", value);
+				});
+			},
+			highlightFirstItemIfNeeded({ computed, action }) {
+				if (!computed("autoHighlight")) return;
+				action(["highlightFirstItem"]);
+			},
+			highlightLastItem({ context, prop, scope }) {
+				(getContentEl(scope) ? queueMicrotask : raf)(() => {
+					const value = prop("collection").lastValue;
+					if (value) context.set("highlightedValue", value);
+				});
+			},
+			highlightNextItem({ context, prop }) {
+				let value = null;
+				const highlightedValue = context.get("highlightedValue");
+				const collection$1 = prop("collection");
+				if (highlightedValue) {
+					value = collection$1.getNextValue(highlightedValue);
+					if (!value && prop("loopFocus")) value = collection$1.firstValue;
+				} else value = collection$1.firstValue;
+				if (value) context.set("highlightedValue", value);
+			},
+			highlightPrevItem({ context, prop }) {
+				let value = null;
+				const highlightedValue = context.get("highlightedValue");
+				const collection$1 = prop("collection");
+				if (highlightedValue) {
+					value = collection$1.getPreviousValue(highlightedValue);
+					if (!value && prop("loopFocus")) value = collection$1.lastValue;
+				} else value = collection$1.lastValue;
+				if (value) context.set("highlightedValue", value);
+			},
+			highlightFirstSelectedItem({ context, prop }) {
+				raf(() => {
+					const [value] = prop("collection").sort(context.get("value"));
+					if (value) context.set("highlightedValue", value);
+				});
+			},
+			highlightFirstOrSelectedItem({ context, prop, computed }) {
+				raf(() => {
+					let value = null;
+					if (computed("hasSelectedItems")) value = prop("collection").sort(context.get("value"))[0];
+					else value = prop("collection").firstValue;
+					if (value) context.set("highlightedValue", value);
+				});
+			},
+			highlightLastOrSelectedItem({ context, prop, computed }) {
+				raf(() => {
+					const collection$1 = prop("collection");
+					let value = null;
+					if (computed("hasSelectedItems")) value = collection$1.sort(context.get("value"))[0];
+					else value = collection$1.lastValue;
+					if (value) context.set("highlightedValue", value);
+				});
+			},
+			autofillInputValue({ context, computed, prop, event, scope }) {
+				const inputEl = getInputEl(scope);
+				const collection$1 = prop("collection");
+				if (!computed("autoComplete") || !inputEl || !event.keypress) return;
+				const valueText = collection$1.stringify(context.get("highlightedValue"));
+				raf(() => {
+					inputEl.value = valueText || context.get("inputValue");
+				});
+			},
+			syncSelectedItems(params) {
+				queueMicrotask(() => {
+					const { context, prop } = params;
+					const collection$1 = prop("collection");
+					const value = context.get("value");
+					const selectedItems = value.map((v) => {
+						return context.get("selectedItems").find((item) => collection$1.getItemValue(item) === v) || collection$1.find(v);
+					});
+					context.set("selectedItems", selectedItems);
+					const inputValue = match(prop("selectionBehavior"), {
+						preserve: context.get("inputValue"),
+						replace: collection$1.stringifyMany(value),
+						clear: ""
+					});
+					context.set("inputValue", inputValue);
+				});
+			},
+			syncHighlightedItem({ context, prop }) {
+				const item = prop("collection").find(context.get("highlightedValue"));
+				context.set("highlightedItem", item);
+			},
+			toggleVisibility({ event, send, prop }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+function getOpenChangeReason(event) {
+	return (event.previousEvent || event).src;
+}
+
+//#endregion
+//#region src/machines/combobox/combobox.props.ts
+const props = createProps()([
+	"allowCustomValue",
+	"autoFocus",
+	"closeOnSelect",
+	"collection",
+	"composite",
+	"defaultHighlightedValue",
+	"defaultInputValue",
+	"defaultOpen",
+	"defaultValue",
+	"dir",
+	"disabled",
+	"disableLayer",
+	"form",
+	"getRootNode",
+	"highlightedValue",
+	"id",
+	"ids",
+	"inputBehavior",
+	"inputValue",
+	"invalid",
+	"loopFocus",
+	"multiple",
+	"name",
+	"navigate",
+	"onFocusOutside",
+	"onHighlightChange",
+	"onInputValueChange",
+	"onInteractOutside",
+	"onOpenChange",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onSelect",
+	"onValueChange",
+	"open",
+	"openOnChange",
+	"openOnClick",
+	"openOnKeyPress",
+	"placeholder",
+	"positioning",
+	"readOnly",
+	"required",
+	"scrollToIndexFn",
+	"selectionBehavior",
+	"translations",
+	"value",
+	"alwaysSubmitOnEnter"
+]);
+const splitProps = createSplitProps(props);
+const itemGroupLabelProps = createProps()(["htmlFor"]);
+const splitItemGroupLabelProps = createSplitProps(itemGroupLabelProps);
+const itemGroupProps = createProps()(["id"]);
+const splitItemGroupProps = createSplitProps(itemGroupProps);
+const itemProps = createProps()(["item", "persistFocus"]);
+const splitItemProps = createSplitProps(itemProps);
+
+//#endregion
+export { anatomy, collection, connect, itemGroupLabelProps, itemGroupProps, itemProps, machine, props, splitItemGroupLabelProps, splitItemGroupProps, splitItemProps, splitProps };