@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/combobox/index.js

@@ -0,0 +1,1542 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { n as setCaretToEnd } from "../../caret-aiDJ6mAS.js";
+import { L as ariaAttr, d as query, w as isAnchorElement, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { i as isApple } from "../../platform-BDB0wXUk.js";
+import { f as isDownloadingEvent, g as isOpeningInNewTab, l as isComposingEvent, m as isLeftClick, r as getEventKey, u as isContextMenuEvent } from "../../event-bTItRgiw.js";
+import { i as raf, n as nextTick } from "../../raf-Dhvm7f1e.js";
+import { t as observeAttributes } from "../../mutation-observer-qObPUo3D.js";
+import { t as clickIfLink } from "../../navigate-CJOaL3vx.js";
+import { n as scrollIntoView } from "../../scroll-CVJ40w2e.js";
+import { n as addOrRemove, v as remove } from "../../array-C4KbHsha.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { H as match, X as isBoolean, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { t as ensure } from "../../warning-CrzBpWT1.js";
+import { s as ListCollection } from "../../collection-CJU0oDtX.js";
+import { n as deriveSelectionState, r as resolveSelectedItems, t as createSelectedItemMap } from "../../selection-map-962WvX2k.js";
+import { i as setup } from "../../core-CJ0MZr3D.js";
+import { n as trackDismissableElement } from "../../dismissable-KM1jPtNQ.js";
+import { a as setInteractionModality, o as trackFocusVisible, t as getInteractionModality } from "../../focus-visible-DWdQf__4.js";
+import { t as createLiveRegion } from "../../live-region-F8YMmbrY.js";
+import { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-DzBZzAe4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/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/collection.ts
+const collection = (options) => {
+	return new ListCollection(options);
+};
+collection.empty = () => {
+	return new ListCollection({ items: [] });
+};
+//#endregion
+//#region src/machines/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)) inputEl?.focus({ preventScroll: true });
+	setCaretToEnd(inputEl);
+};
+const focusTriggerEl = (ctx) => {
+	const triggerEl = getTriggerEl(ctx);
+	if (ctx.isActiveElement(triggerEl)) return;
+	triggerEl?.focus({ preventScroll: true });
+};
+//#endregion
+//#region src/machines/combobox/connect.ts
+function connect(service, normalize) {
+	const { context, prop, state, send, scope, computed, event } = service;
+	const translations = prop("translations");
+	const collection = 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 currentPlacement = context.get("currentPlacement");
+	const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	function getItemState(props) {
+		const itemDisabled = collection.getItemDisabled(props.item);
+		const value = collection.getItemValue(props.item);
+		ensure(value, () => `[wirekyt] No value found for item ${JSON.stringify(props.item)}`);
+		return {
+			value,
+			disabled: Boolean(disabled || itemDisabled),
+			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: computed("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) {
+					if (composite) return;
+					event.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) {
+					if (event.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) {
+					send({
+						type: "INPUT.CHANGE",
+						value: event.currentTarget.value,
+						src: "input-change"
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (event.ctrlKey || event.shiftKey || isComposingEvent(event)) return;
+					const openOnKeyPress = prop("openOnKeyPress");
+					const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
+					const keypress = true;
+					const exec = {
+						ArrowDown(event) {
+							if (!openOnKeyPress && !open) return;
+							send({
+								type: event.altKey ? "OPEN" : "INPUT.ARROW_DOWN",
+								keypress,
+								src: "arrow-key"
+							});
+							event.preventDefault();
+						},
+						ArrowUp() {
+							if (!openOnKeyPress && !open) return;
+							send({
+								type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP",
+								keypress,
+								src: "arrow-key"
+							});
+							event.preventDefault();
+						},
+						Home(event) {
+							if (isModifierKey) return;
+							send({
+								type: "INPUT.HOME",
+								keypress
+							});
+							if (open) event.preventDefault();
+						},
+						End(event) {
+							if (isModifierKey) return;
+							send({
+								type: "INPUT.END",
+								keypress
+							});
+							if (open) event.preventDefault();
+						},
+						Enter(event) {
+							send({
+								type: "INPUT.ENTER",
+								keypress,
+								src: "item-select"
+							});
+							const hasHighlight = highlightedValue != null;
+							const alwaysSubmit = prop("alwaysSubmitOnEnter");
+							const willBeRejected = computed("isCustomValue") && !prop("allowCustomValue");
+							if (open && !alwaysSubmit && (hasHighlight || willBeRejected)) event.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.preventDefault();
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					exec?.(event);
+				}
+			});
+		},
+		getTriggerProps(props = {}) {
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				id: getTriggerId(scope),
+				"aria-haspopup": composite ? "listbox" : "dialog",
+				type: "button",
+				tabIndex: props.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.focusable),
+				"data-readonly": dataAttr(readOnly),
+				"data-disabled": dataAttr(disabled),
+				onFocus() {
+					if (!props.focusable) return;
+					send({
+						type: "INPUT.FOCUS",
+						src: "trigger"
+					});
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					send({
+						type: "TRIGGER.CLICK",
+						src: "trigger-click"
+					});
+				},
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (event.pointerType === "touch") return;
+					if (!isLeftClick(event)) return;
+					event.preventDefault();
+					queueMicrotask(() => {
+						focusInputEl(scope);
+					});
+				},
+				onKeyDown(event) {
+					if (event.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, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						event.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": currentPlacement,
+				"data-side": currentPlacementSide,
+				"aria-labelledby": getLabelId(scope),
+				"aria-multiselectable": prop("multiple") && composite ? true : void 0,
+				"data-empty": dataAttr(collection.size === 0),
+				onPointerDown(event) {
+					if (!isLeftClick(event)) return;
+					event.preventDefault();
+				}
+			});
+		},
+		getListProps() {
+			return normalize.element({
+				...parts.list.attrs,
+				role: !composite ? "listbox" : void 0,
+				"data-empty": dataAttr(collection.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) {
+					if (!isLeftClick(event)) return;
+					event.preventDefault();
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "VALUE.CLEAR",
+						src: "clear-trigger"
+					});
+				}
+			});
+		},
+		getItemState,
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			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.selected),
+				"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.persistFocus) return;
+					if (itemState.disabled) return;
+					if (!event.previous()?.type.includes("POINTER")) return;
+					send({
+						type: "ITEM.POINTER_LEAVE",
+						value
+					});
+				},
+				onClick(event) {
+					if (isDownloadingEvent(event)) return;
+					if (isOpeningInNewTab(event)) return;
+					if (isContextMenuEvent(event)) return;
+					if (itemState.disabled) return;
+					send({
+						type: "ITEM.CLICK",
+						src: "item-select",
+						value
+					});
+				}
+			});
+		},
+		getItemTextProps(props) {
+			const itemState = getItemState(props);
+			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) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				"aria-hidden": true,
+				...parts.itemIndicator.attrs,
+				dir: prop("dir"),
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				hidden: !itemState.selected
+			});
+		},
+		getItemGroupProps(props) {
+			const { id } = props;
+			return normalize.element({
+				...parts.itemGroup.attrs,
+				dir: prop("dir"),
+				id: getItemGroupId(scope, id),
+				"aria-labelledby": getItemGroupLabelId(scope, id),
+				"data-empty": dataAttr(collection.size === 0),
+				role: "group"
+			});
+		},
+		getItemGroupLabelProps(props) {
+			const { htmlFor } = props;
+			return normalize.element({
+				...parts.itemGroupLabel.attrs,
+				dir: prop("dir"),
+				id: getItemGroupLabelId(scope, htmlFor),
+				role: "presentation"
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/combobox/machine.ts
+const { guards, createMachine, choose } = setup();
+const { and, not } = guards;
+const machine = createMachine({
+	props({ props }) {
+		return {
+			loopFocus: true,
+			openOnClick: false,
+			defaultValue: [],
+			defaultInputValue: "",
+			closeOnSelect: !props.multiple,
+			allowCustomValue: false,
+			alwaysSubmitOnEnter: false,
+			inputBehavior: "none",
+			selectionBehavior: props.multiple ? "clear" : "replace",
+			openOnKeyPress: true,
+			openOnChange: true,
+			composite: true,
+			navigate({ node }) {
+				clickIfLink(node);
+			},
+			collection: collection.empty(),
+			...props,
+			positioning: {
+				placement: "bottom",
+				sameWidth: true,
+				...props.positioning
+			},
+			translations: {
+				triggerLabel: "Toggle suggestions",
+				clearTriggerLabel: "Clear value",
+				...props.translations
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open.suggesting" : "closed.idle";
+	},
+	context({ prop, bindable, getContext, getEvent }) {
+		const initialValue = prop("value") ?? prop("defaultValue") ?? [];
+		const initialSelectedItems = prop("collection").findMany(initialValue);
+		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 collection = prop("collection");
+					const proposed = deriveSelectionState({
+						values: value,
+						collection,
+						selectedItemMap: context.get("selectedItemMap")
+					});
+					const effectiveValue = prop("value") ?? value;
+					const effective = effectiveValue === value ? proposed : deriveSelectionState({
+						values: effectiveValue,
+						collection,
+						selectedItemMap: proposed.nextSelectedItemMap
+					});
+					context.set("selectedItemMap", effective.nextSelectedItemMap);
+					prop("onValueChange")?.({
+						value,
+						items: proposed.selectedItems
+					});
+				}
+			})),
+			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) {
+						const event = getEvent();
+						const reason = (event.previousEvent || event).src;
+						prop("onInputValueChange")?.({
+							inputValue: value,
+							reason
+						});
+					}
+				};
+			}),
+			highlightedItem: bindable(() => {
+				const highlightedValue = prop("highlightedValue");
+				return { defaultValue: prop("collection").find(highlightedValue) };
+			}),
+			selectedItemMap: bindable(() => {
+				return { defaultValue: createSelectedItemMap({
+					selectedItems: initialSelectedItems,
+					collection: prop("collection")
+				}) };
+			})
+		};
+	},
+	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,
+		selectedItems: ({ context, prop }) => resolveSelectedItems({
+			values: context.get("value"),
+			collection: prop("collection"),
+			selectedItemMap: context.get("selectedItemMap")
+		}),
+		valueAsString: ({ computed, prop }) => prop("collection").stringifyItems(computed("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",
+				"announceHighlightedItem"
+			]);
+		});
+		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: {
+		closed: {
+			tags: ["closed"],
+			initial: "idle",
+			states: {
+				idle: {
+					tags: ["idle"],
+					entry: ["scrollContentToTop", "clearHighlightedValue"],
+					on: {
+						"CONTROLLED.OPEN": { target: "open.interacting" },
+						"TRIGGER.CLICK": [{
+							guard: "isOpenControlled",
+							actions: [
+								"setInitialFocus",
+								"highlightFirstSelectedItem",
+								"invokeOnOpen"
+							]
+						}, {
+							target: "open.interacting",
+							actions: [
+								"setInitialFocus",
+								"highlightFirstSelectedItem",
+								"invokeOnOpen"
+							]
+						}],
+						"INPUT.CLICK": [{
+							guard: "isOpenControlled",
+							actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+						}, {
+							target: "open.interacting",
+							actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+						}],
+						"INPUT.FOCUS": { target: "focused" },
+						OPEN: [{
+							guard: "isOpenControlled",
+							actions: ["invokeOnOpen"]
+						}, {
+							target: "open.interacting",
+							actions: ["invokeOnOpen"]
+						}],
+						"VALUE.CLEAR": {
+							target: "focused",
+							actions: [
+								"clearInputValue",
+								"clearSelectedItems",
+								"setInitialFocus"
+							]
+						}
+					}
+				},
+				focused: {
+					tags: ["focused"],
+					entry: ["scrollContentToTop", "clearHighlightedValue"],
+					on: {
+						"CONTROLLED.OPEN": [{
+							guard: "isChangeEvent",
+							target: "open.suggesting"
+						}, { target: "open.interacting" }],
+						"INPUT.CHANGE": [
+							{
+								guard: and("isOpenControlled", "openOnChange"),
+								actions: [
+									"setInputValue",
+									"invokeOnOpen",
+									"highlightFirstItemIfNeeded"
+								]
+							},
+							{
+								guard: "openOnChange",
+								target: "open.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: "open.interacting",
+							actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+						}],
+						"TRIGGER.CLICK": [{
+							guard: "isOpenControlled",
+							actions: [
+								"setInitialFocus",
+								"highlightFirstSelectedItem",
+								"invokeOnOpen"
+							]
+						}, {
+							target: "open.interacting",
+							actions: [
+								"setInitialFocus",
+								"highlightFirstSelectedItem",
+								"invokeOnOpen"
+							]
+						}],
+						"INPUT.ARROW_DOWN": [
+							{
+								guard: and("isOpenControlled", "autoComplete"),
+								actions: ["invokeOnOpen"]
+							},
+							{
+								guard: "autoComplete",
+								target: "open.interacting",
+								actions: ["invokeOnOpen"]
+							},
+							{
+								guard: "isOpenControlled",
+								actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+							},
+							{
+								target: "open.interacting",
+								actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+							}
+						],
+						"INPUT.ARROW_UP": [
+							{
+								guard: and("isOpenControlled", "autoComplete"),
+								actions: ["invokeOnOpen"]
+							},
+							{
+								guard: "autoComplete",
+								target: "open.interacting",
+								actions: ["invokeOnOpen"]
+							},
+							{
+								guard: "isOpenControlled",
+								actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+							},
+							{
+								target: "open.interacting",
+								actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+							}
+						],
+						OPEN: [{
+							guard: "isOpenControlled",
+							actions: ["invokeOnOpen"]
+						}, {
+							target: "open.interacting",
+							actions: ["invokeOnOpen"]
+						}],
+						"VALUE.CLEAR": { actions: ["clearInputValue", "clearSelectedItems"] }
+					}
+				}
+			}
+		},
+		open: {
+			tags: ["open", "focused"],
+			entry: ["setInitialFocus"],
+			effects: [
+				"trackFocusVisible",
+				"scrollToHighlightedItem",
+				"trackDismissableLayer",
+				"trackPlacement",
+				"trackLiveRegion"
+			],
+			on: {
+				"CONTROLLED.CLOSE": [{
+					guard: "restoreFocus",
+					target: "closed.focused",
+					actions: ["setFinalFocus"]
+				}, { target: "closed.idle" }],
+				"INPUT.ENTER": [
+					{
+						guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+						target: "closed.focused",
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isOpenControlled", "closeOnSelect"),
+						actions: ["selectHighlightedItem", "invokeOnClose"]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "closed.focused",
+						actions: [
+							"selectHighlightedItem",
+							"invokeOnClose",
+							"setFinalFocus"
+						]
+					},
+					{ actions: ["selectHighlightedItem"] }
+				],
+				"ITEM.CLICK": [
+					{
+						guard: and("isOpenControlled", "closeOnSelect"),
+						actions: ["selectItem", "invokeOnClose"]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "closed.focused",
+						actions: [
+							"selectItem",
+							"invokeOnClose",
+							"setFinalFocus"
+						]
+					},
+					{ actions: ["selectItem"] }
+				],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed.focused",
+					actions: ["invokeOnClose"]
+				}],
+				"LAYER.INTERACT_OUTSIDE": [
+					{
+						guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: and("isCustomValue", not("allowCustomValue")),
+						target: "closed.idle",
+						actions: ["revertInputValue", "invokeOnClose"]
+					},
+					{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					},
+					{
+						target: "closed.idle",
+						actions: ["invokeOnClose"]
+					}
+				],
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed.focused",
+					actions: ["invokeOnClose", "setFinalFocus"]
+				}],
+				"VALUE.CLEAR": [{
+					guard: "isOpenControlled",
+					actions: [
+						"clearInputValue",
+						"clearSelectedItems",
+						"invokeOnClose"
+					]
+				}, {
+					target: "closed.focused",
+					actions: [
+						"clearInputValue",
+						"clearSelectedItems",
+						"invokeOnClose",
+						"setFinalFocus"
+					]
+				}]
+			},
+			initial: "interacting",
+			states: {
+				interacting: { on: {
+					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.CHANGE": [{
+						guard: "autoComplete",
+						target: "suggesting",
+						actions: ["setInputValue"]
+					}, {
+						target: "suggesting",
+						actions: ["clearHighlightedValue", "setInputValue"]
+					}],
+					"ITEM.POINTER_MOVE": { actions: ["setHighlightedValue"] },
+					"ITEM.POINTER_LEAVE": { actions: ["clearHighlightedValue"] },
+					"LAYER.ESCAPE": [
+						{
+							guard: and("isOpenControlled", "autoComplete"),
+							actions: ["syncInputValue", "invokeOnClose"]
+						},
+						{
+							guard: "autoComplete",
+							target: "closed.focused",
+							actions: ["syncInputValue", "invokeOnClose"]
+						},
+						{
+							guard: "isOpenControlled",
+							actions: ["invokeOnClose"]
+						},
+						{
+							target: "closed.focused",
+							actions: ["invokeOnClose", "setFinalFocus"]
+						}
+					]
+				} },
+				suggesting: { on: {
+					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.CHANGE": { actions: ["setInputValue"] },
+					"LAYER.ESCAPE": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					}, {
+						target: "closed.focused",
+						actions: ["invokeOnClose"]
+					}],
+					"ITEM.POINTER_MOVE": {
+						target: "interacting",
+						actions: ["setHighlightedValue"]
+					},
+					"ITEM.POINTER_LEAVE": { actions: ["clearHighlightedValue"] }
+				} }
+			}
+		}
+	},
+	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: {
+			trackFocusVisible({ scope }) {
+				return trackFocusVisible({ root: scope.getRootNode?.() });
+			},
+			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
+						});
+					}
+				});
+			},
+			trackLiveRegion({ refs, scope }) {
+				const liveRegion = createLiveRegion({
+					level: "assertive",
+					document: scope.getDoc()
+				});
+				refs.set("liveRegion", liveRegion);
+				return () => liveRegion.destroy();
+			},
+			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 }) {
+				const inputEl = getInputEl(scope);
+				let cleanups = [];
+				const exec = (immediate) => {
+					if (getInteractionModality() === "pointer") return;
+					const highlightedValue = context.get("highlightedValue");
+					if (!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(() => {
+					setInteractionModality("virtual");
+					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 = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				if (!highlightedValue || !collection.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.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 = prop("collection");
+				if (highlightedValue) {
+					value = collection.getNextValue(highlightedValue);
+					if (!value && prop("loopFocus")) value = collection.firstValue;
+				} else value = collection.firstValue;
+				if (value) context.set("highlightedValue", value);
+			},
+			highlightPrevItem({ context, prop }) {
+				let value = null;
+				const highlightedValue = context.get("highlightedValue");
+				const collection = prop("collection");
+				if (highlightedValue) {
+					value = collection.getPreviousValue(highlightedValue);
+					if (!value && prop("loopFocus")) value = collection.lastValue;
+				} else value = collection.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 = prop("collection");
+					let value = null;
+					if (computed("hasSelectedItems")) value = collection.sort(context.get("value"))[0];
+					else value = collection.lastValue;
+					if (value) context.set("highlightedValue", value);
+				});
+			},
+			autofillInputValue({ context, computed, prop, event, scope }) {
+				const inputEl = getInputEl(scope);
+				const collection = prop("collection");
+				if (!computed("autoComplete") || !inputEl || !event.keypress) return;
+				const valueText = collection.stringify(context.get("highlightedValue"));
+				raf(() => {
+					inputEl.value = valueText || context.get("inputValue");
+				});
+			},
+			syncSelectedItems(params) {
+				queueMicrotask(() => {
+					const { context, prop } = params;
+					const collection = prop("collection");
+					const value = context.get("value");
+					const next = deriveSelectionState({
+						values: value,
+						collection,
+						selectedItemMap: context.get("selectedItemMap")
+					});
+					context.set("selectedItemMap", next.nextSelectedItemMap);
+					const inputValue = match(prop("selectionBehavior"), {
+						preserve: context.get("inputValue"),
+						replace: collection.stringifyMany(value),
+						clear: ""
+					});
+					context.set("inputValue", inputValue);
+				});
+			},
+			syncHighlightedItem({ context, prop }) {
+				const item = prop("collection").find(context.get("highlightedValue"));
+				context.set("highlightedItem", item);
+			},
+			announceHighlightedItem({ context, prop, refs }) {
+				if (!isApple()) return;
+				const value = context.get("highlightedValue");
+				const optionText = value ? prop("collection").stringifyItem(prop("collection").find(value)) : null;
+				if (!optionText) return;
+				const isSelected = value ? context.get("value").includes(value) : false;
+				refs.get("liveRegion")?.announce(isSelected ? `${optionText}, selected` : optionText);
+			},
+			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/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 };