@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/cascade-select/index.js

@@ -0,0 +1,1419 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { E as isEditableElement, L as ariaAttr, f as queryAll, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { r as getEventKey, v as isSelfTarget } from "../../event-bTItRgiw.js";
+import { n as dispatchInputValueEvent, o as setElementValue, s as trackFormControl } from "../../form-B1DW_w_3.js";
+import { n as isValidTabEvent } from "../../initial-focus-BrN5tT2X.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as observeAttributes } from "../../mutation-observer-qObPUo3D.js";
+import { t as createScope } from "../../scope-D1873Mzi.js";
+import { n as scrollIntoView } from "../../scroll-CVJ40w2e.js";
+import { d as isEmpty, f as last } from "../../array-C4KbHsha.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { t as TreeCollection } from "../../collection-CJU0oDtX.js";
+import { n as createGuards, r as createMachine } 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 { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-DzBZzAe4.js";
+import { c as createRect, s as createPoint, u as getRectCorners } from "../../rect-utils-d_3gZVsc.js";
+import { n as closestSideToPoint } from "../../closest-Clo6ODcK.js";
+import { r as isPointInPolygon } from "../../polygon-BvdwYRBw.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/cascade-select/anatomy.ts
+const anatomy = createAnatomy("cascade-select").parts("root", "label", "control", "trigger", "indicator", "valueText", "clearTrigger", "positioner", "content", "list", "item", "itemText", "itemIndicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/cascade-select/collection.ts
+const collection = (options) => {
+	return new TreeCollection(options);
+};
+collection.empty = () => {
+	return new TreeCollection({ rootNode: {
+		value: "ROOT",
+		children: []
+	} });
+};
+//#endregion
+//#region src/machines/cascade-select/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `cascade-select:${ctx.id}`,
+	getLabelId: (ctx) => ctx.ids?.label ?? `cascade-select:${ctx.id}:label`,
+	getControlId: (ctx) => ctx.ids?.control ?? `cascade-select:${ctx.id}:control`,
+	getTriggerId: (ctx) => ctx.ids?.trigger ?? `cascade-select:${ctx.id}:trigger`,
+	getIndicatorId: (ctx) => ctx.ids?.indicator ?? `cascade-select:${ctx.id}:indicator`,
+	getClearTriggerId: (ctx) => ctx.ids?.clearTrigger ?? `cascade-select:${ctx.id}:clear-trigger`,
+	getPositionerId: (ctx) => ctx.ids?.positioner ?? `cascade-select:${ctx.id}:positioner`,
+	getContentId: (ctx) => ctx.ids?.content ?? `cascade-select:${ctx.id}:content`,
+	getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `cascade-select:${ctx.id}:hidden-input`,
+	getListId: (ctx, value) => ctx.ids?.list?.(value) ?? `cascade-select:${ctx.id}:list:${value}`,
+	getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `cascade-select:${ctx.id}:item:${value}`,
+	getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+	getLabelEl: (ctx) => dom.getById(ctx, dom.getLabelId(ctx)),
+	getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+	getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+	getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
+	getClearTriggerEl: (ctx) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
+	getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+	getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+	getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+	getListEl: (ctx, value) => dom.getById(ctx, dom.getListId(ctx, value)),
+	getListEls: (ctx) => queryAll(dom.getContentEl(ctx), `[data-part="list"]`),
+	getItemEl: (ctx, value) => dom.getById(ctx, dom.getItemId(ctx, value)),
+	dispatchInputEvent: (ctx, value) => {
+		const inputEl = dom.getHiddenInputEl(ctx);
+		if (!inputEl) return;
+		dispatchInputValueEvent(inputEl, { value });
+	}
+});
+//#endregion
+//#region src/machines/cascade-select/connect.ts
+function connect(service, normalize) {
+	const { send, context, prop, scope, computed, state } = service;
+	const collection = prop("collection");
+	const value = context.get("value");
+	const open = state.hasTag("open");
+	const focused = state.matches("focused");
+	const highlightedIndexPath = context.get("highlightedIndexPath");
+	const highlightedValue = context.get("highlightedValue");
+	const currentPlacement = context.get("currentPlacement");
+	const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
+	const disabled = prop("disabled") || context.get("fieldsetDisabled");
+	const interactive = computed("isInteractive");
+	const valueAsString = computed("valueAsString");
+	const highlightedItems = context.get("highlightedItems");
+	const selectedItems = context.get("selectedItems");
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	const getItemState = (props) => {
+		const { item, indexPath, value: itemValue } = props;
+		const depth = indexPath ? indexPath.length : 0;
+		const highlighted = itemValue.every((v, i) => v === highlightedValue[i]);
+		const selected = value.some((v) => isEqual(v, itemValue));
+		const highlightedChild = collection.getNodeChildren(collection.at(indexPath))[highlightedIndexPath[depth]];
+		const highlightedIndex = highlightedIndexPath[depth];
+		return {
+			value: itemValue,
+			disabled: collection.getNodeDisabled(item),
+			highlighted,
+			selected,
+			hasChildren: collection.isBranchNode(item),
+			depth,
+			highlightedChild,
+			highlightedIndex
+		};
+	};
+	const hasSelectedItems = value.length > 0;
+	const empty = value.length === 0;
+	return {
+		collection,
+		open,
+		focused,
+		multiple: !!prop("multiple"),
+		disabled,
+		value,
+		highlightedValue,
+		highlightedItems,
+		selectedItems,
+		hasSelectedItems,
+		empty,
+		valueAsString,
+		reposition(options = {}) {
+			send({
+				type: "POSITIONING.SET",
+				options
+			});
+		},
+		focus() {
+			dom.getTriggerEl(scope)?.focus({ preventScroll: true });
+		},
+		setOpen(nextOpen) {
+			if (nextOpen === open) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		setHighlightValue(value) {
+			send({
+				type: "HIGHLIGHTED_VALUE.SET",
+				value
+			});
+		},
+		clearHighlightValue() {
+			send({ type: "HIGHLIGHTED_VALUE.CLEAR" });
+		},
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		selectValue(value) {
+			send({
+				type: "ITEM.SELECT",
+				value
+			});
+		},
+		clearValue(value) {
+			if (value) send({
+				type: "ITEM.CLEAR",
+				value
+			});
+			else send({ type: "VALUE.CLEAR" });
+		},
+		getItemState,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: dom.getRootId(scope),
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(prop("readOnly")),
+				"data-invalid": dataAttr(prop("invalid")),
+				"data-state": open ? "open" : "closed"
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				id: dom.getLabelId(scope),
+				dir: prop("dir"),
+				htmlFor: dom.getHiddenInputId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(prop("readOnly")),
+				"data-invalid": dataAttr(prop("invalid")),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					dom.getTriggerEl(scope)?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: dom.getControlId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-focus": dataAttr(focused),
+				"data-readonly": dataAttr(prop("readOnly")),
+				"data-invalid": dataAttr(prop("invalid")),
+				"data-state": open ? "open" : "closed"
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				id: dom.getTriggerId(scope),
+				type: "button",
+				role: "combobox",
+				"aria-controls": dom.getContentId(scope),
+				"aria-expanded": open,
+				"aria-haspopup": "listbox",
+				"aria-labelledby": dom.getLabelId(scope),
+				"data-state": open ? "open" : "closed",
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(prop("readOnly")),
+				"data-invalid": dataAttr(prop("invalid")),
+				"data-focus": dataAttr(focused),
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				"data-placeholder-shown": dataAttr(!hasSelectedItems),
+				disabled,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({ type: "TRIGGER.CLICK" });
+				},
+				onFocus() {
+					send({ type: "TRIGGER.FOCUS" });
+				},
+				onBlur() {
+					send({ type: "TRIGGER.BLUR" });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const exec = {
+						ArrowUp() {
+							send({ type: "TRIGGER.ARROW_UP" });
+						},
+						ArrowDown(event) {
+							send({ type: event.altKey ? "OPEN" : "TRIGGER.ARROW_DOWN" });
+						},
+						ArrowLeft() {
+							send({ type: "TRIGGER.ARROW_LEFT" });
+						},
+						ArrowRight() {
+							send({ type: "TRIGGER.ARROW_RIGHT" });
+						},
+						Enter() {
+							send({ type: "TRIGGER.ENTER" });
+						},
+						Space() {
+							send({ type: "TRIGGER.ENTER" });
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		},
+		getClearTriggerProps() {
+			return normalize.button({
+				...parts.clearTrigger.attrs,
+				dir: prop("dir"),
+				id: dom.getClearTriggerId(scope),
+				type: "button",
+				"aria-label": "Clear value",
+				hidden: !hasSelectedItems,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(prop("readOnly")),
+				"data-invalid": dataAttr(prop("invalid")),
+				disabled,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({ type: "CLEAR_TRIGGER.CLICK" });
+				}
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				id: dom.getPositionerId(scope),
+				style: popperStyles.floating
+			});
+		},
+		getContentProps() {
+			const highlightedItemId = highlightedValue ? dom.getItemId(scope, highlightedValue.toString()) : void 0;
+			return normalize.element({
+				...parts.content.attrs,
+				id: dom.getContentId(scope),
+				role: "listbox",
+				"aria-labelledby": dom.getLabelId(scope),
+				"aria-activedescendant": highlightedItemId,
+				"data-activedescendant": highlightedItemId,
+				"data-state": open ? "open" : "closed",
+				"aria-multiselectable": prop("multiple"),
+				"aria-required": prop("required"),
+				"aria-readonly": prop("readOnly"),
+				hidden: !open,
+				tabIndex: 0,
+				onKeyDown(event) {
+					if (!interactive) return;
+					if (!isSelfTarget(event)) return;
+					if (event.key === "Tab") {
+						if (!isValidTabEvent(event)) {
+							event.preventDefault();
+							return;
+						}
+					}
+					const exec = {
+						ArrowDown() {
+							send({ type: "CONTENT.ARROW_DOWN" });
+						},
+						ArrowUp() {
+							send({ type: "CONTENT.ARROW_UP" });
+						},
+						ArrowRight() {
+							send({ type: "CONTENT.ARROW_RIGHT" });
+						},
+						ArrowLeft() {
+							send({ type: "CONTENT.ARROW_LEFT" });
+						},
+						Home() {
+							send({ type: "CONTENT.HOME" });
+						},
+						End() {
+							send({ type: "CONTENT.END" });
+						},
+						Enter() {
+							send({ type: "CONTENT.ENTER" });
+						},
+						" "() {
+							send({ type: "CONTENT.ENTER" });
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec();
+						event.preventDefault();
+						return;
+					}
+					if (isEditableElement(event.target)) return;
+				},
+				onPointerMove(event) {
+					if (!interactive) return;
+					send({
+						type: "POINTER_MOVE",
+						clientX: event.clientX,
+						clientY: event.clientY,
+						target: event.target
+					});
+				}
+			});
+		},
+		getListProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.list.attrs,
+				id: dom.getListId(scope, itemState.value.toString()),
+				dir: prop("dir"),
+				"data-depth": itemState.depth,
+				"aria-level": itemState.depth,
+				role: "group"
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				id: dom.getIndicatorId(scope),
+				dir: prop("dir"),
+				"aria-hidden": true,
+				"data-state": open ? "open" : "closed",
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(prop("readOnly")),
+				"data-invalid": dataAttr(prop("invalid"))
+			});
+		},
+		getItemProps(props) {
+			const { indexPath } = props;
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.item.attrs,
+				id: dom.getItemId(scope, itemState.value.toString()),
+				dir: prop("dir"),
+				role: "treeitem",
+				"aria-haspopup": itemState.hasChildren ? "menu" : void 0,
+				"aria-expanded": itemState.hasChildren ? itemState.highlighted : false,
+				"aria-controls": itemState.hasChildren ? dom.getListId(scope, itemState.value.toString()) : void 0,
+				"aria-owns": itemState.hasChildren ? dom.getListId(scope, itemState.value.toString()) : void 0,
+				"aria-disabled": ariaAttr(itemState.disabled),
+				"data-value": itemState.value.toString(),
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-selected": dataAttr(itemState.selected),
+				"data-depth": itemState.depth,
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				"data-type": itemState.hasChildren ? "branch" : "leaf",
+				"data-index-path": indexPath.toString(),
+				onDoubleClick() {
+					if (itemState.disabled) return;
+					send({ type: "CLOSE" });
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (itemState.disabled) return;
+					send({
+						type: "ITEM.CLICK",
+						value: itemState.value,
+						indexPath
+					});
+				},
+				onPointerEnter(event) {
+					if (!interactive) return;
+					if (itemState.disabled) return;
+					send({
+						type: "ITEM.POINTER_ENTER",
+						value: itemState.value,
+						indexPath,
+						clientX: event.clientX,
+						clientY: event.clientY
+					});
+				},
+				onPointerLeave(event) {
+					if (!interactive) return;
+					if (itemState.disabled) return;
+					if (event.pointerType !== "mouse") return;
+					if (!service.event.previous()?.type.includes("POINTER")) return;
+					send({
+						type: "ITEM.POINTER_LEAVE",
+						value: itemState.value,
+						indexPath,
+						clientX: event.clientX,
+						clientY: event.clientY
+					});
+				}
+			});
+		},
+		getItemTextProps(props) {
+			const { item } = props;
+			const itemValue = collection.getNodeValue(item);
+			const itemState = getItemState(props);
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.itemText.attrs,
+				"data-value": itemValue,
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				"data-disabled": dataAttr(itemState.disabled)
+			});
+		},
+		getItemIndicatorProps(props) {
+			const { item } = props;
+			const itemValue = collection.getNodeValue(item);
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.itemIndicator.attrs,
+				dir: prop("dir"),
+				"data-value": itemValue,
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-type": itemState.hasChildren ? "branch" : "leaf",
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				hidden: !itemState.selected
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(prop("invalid")),
+				"data-focus": dataAttr(focused)
+			});
+		},
+		getHiddenInputProps() {
+			const defaultValue = context.hash("value");
+			return normalize.input({
+				name: prop("name"),
+				form: prop("form"),
+				disabled,
+				multiple: prop("multiple"),
+				required: prop("required"),
+				readOnly: prop("readOnly"),
+				hidden: true,
+				"aria-hidden": true,
+				id: dom.getHiddenInputId(scope),
+				defaultValue,
+				"aria-labelledby": dom.getLabelId(scope)
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/cascade-select/utils.ts
+function createGraceArea(exitPoint, triggerRect, targetRect, options = {}) {
+	const { padding = 5 } = options;
+	const paddedExitPoints = getPaddedExitPoints(exitPoint, closestSideToPoint(createRect({
+		x: triggerRect.left,
+		y: triggerRect.top,
+		width: triggerRect.width,
+		height: triggerRect.height
+	}), exitPoint), padding);
+	const targetPoints = domRectToPoints(targetRect);
+	return getConvexHull([...paddedExitPoints, ...targetPoints]);
+}
+function isPointerInGraceArea(point, graceArea) {
+	return isPointInPolygon(graceArea, point);
+}
+function getPaddedExitPoints(exitPoint, exitSide, padding) {
+	const { x, y } = exitPoint;
+	switch (exitSide) {
+		case "top": return [createPoint(x - padding, y + padding), createPoint(x + padding, y + padding)];
+		case "bottom": return [createPoint(x - padding, y - padding), createPoint(x + padding, y - padding)];
+		case "left": return [createPoint(x + padding, y - padding), createPoint(x + padding, y + padding)];
+		case "right": return [createPoint(x - padding, y - padding), createPoint(x - padding, y + padding)];
+		default: return [];
+	}
+}
+function domRectToPoints(rect) {
+	const corners = getRectCorners(createRect({
+		x: rect.left,
+		y: rect.top,
+		width: rect.width,
+		height: rect.height
+	}));
+	return [
+		corners.top,
+		corners.right,
+		corners.bottom,
+		corners.left
+	];
+}
+function getConvexHull(points) {
+	if (points.length <= 1) return points.slice();
+	const sortedPoints = points.slice().sort((a, b) => {
+		if (a.x !== b.x) return a.x - b.x;
+		return a.y - b.y;
+	});
+	const lower = [];
+	for (const point of sortedPoints) {
+		while (lower.length >= 2 && crossProduct(lower[lower.length - 2], lower[lower.length - 1], point) <= 0) lower.pop();
+		lower.push(point);
+	}
+	const upper = [];
+	for (let i = sortedPoints.length - 1; i >= 0; i--) {
+		const point = sortedPoints[i];
+		while (upper.length >= 2 && crossProduct(upper[upper.length - 2], upper[upper.length - 1], point) <= 0) upper.pop();
+		upper.push(point);
+	}
+	lower.pop();
+	upper.pop();
+	return lower.concat(upper);
+}
+function crossProduct(o, a, b) {
+	return (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+}
+//#endregion
+//#region src/machines/cascade-select/machine.ts
+const { or, and, not } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			closeOnSelect: true,
+			loopFocus: false,
+			defaultValue: [],
+			defaultHighlightedValue: [],
+			defaultOpen: false,
+			multiple: false,
+			highlightTrigger: "click",
+			allowParentSelection: false,
+			positioning: {
+				placement: "bottom-start",
+				gutter: 8,
+				...props.positioning
+			},
+			...props,
+			collection: props.collection ?? collection.empty()
+		};
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				isEqual,
+				hash(value) {
+					return value.join(", ");
+				}
+			})),
+			highlightedValue: bindable(() => ({
+				defaultValue: prop("defaultHighlightedValue"),
+				value: prop("highlightedValue"),
+				isEqual
+			})),
+			valueIndexPath: bindable(() => {
+				return { defaultValue: (prop("value") ?? prop("defaultValue") ?? []).map((v) => prop("collection").getIndexPath(v)) };
+			}),
+			highlightedIndexPath: bindable(() => {
+				const value = prop("highlightedValue") ?? prop("defaultHighlightedValue") ?? null;
+				return { defaultValue: value ? prop("collection").getIndexPath(value) : [] };
+			}),
+			highlightedItems: bindable(() => ({ defaultValue: [] })),
+			selectedItems: bindable(() => ({ defaultValue: [] })),
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+			graceArea: bindable(() => ({ defaultValue: null })),
+			isPointerInTransit: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: {
+		isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+		valueAsString: ({ prop, context }) => {
+			const collection = prop("collection");
+			const items = context.get("selectedItems");
+			const multiple = prop("multiple");
+			const formatMultipleMode = (items) => collection.stringifyNode(items.at(-1)) ?? collection.getNodeValue(items.at(-1));
+			const formatSingleMode = (items) => {
+				return items.map((item) => {
+					return collection.stringifyNode(item) ?? collection.getNodeValue(item);
+				}).join(" / ");
+			};
+			const defaultFormatValue = (items) => items.map(multiple ? formatMultipleMode : formatSingleMode).join(", ");
+			return (prop("formatValue") ?? defaultFormatValue)(items);
+		}
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "idle";
+	},
+	watch({ context, prop, track, action }) {
+		track([() => context.get("value")?.toString()], () => {
+			action(["syncInputValue", "dispatchChangeEvent"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"VALUE.CLEAR": { actions: ["clearValue"] },
+		"CLEAR_TRIGGER.CLICK": { actions: ["clearValue", "focusTriggerEl"] },
+		"HIGHLIGHTED_VALUE.SET": { actions: ["setHighlightedValue"] },
+		"HIGHLIGHTED_VALUE.CLEAR": { actions: ["clearHighlightedValue"] },
+		"ITEM.SELECT": { actions: ["selectItem"] },
+		"ITEM.CLEAR": { actions: ["clearItem"] }
+	},
+	effects: ["trackFormControlState"],
+	states: {
+		idle: {
+			tags: ["closed"],
+			on: {
+				"CONTROLLED.OPEN": [{
+					guard: "isTriggerClickEvent",
+					target: "open",
+					actions: ["setInitialFocus", "highlightFirstSelectedItem"]
+				}, {
+					target: "open",
+					actions: ["setInitialFocus"]
+				}],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"invokeOnOpen",
+						"setInitialFocus",
+						"highlightFirstSelectedItem"
+					]
+				}],
+				"TRIGGER.FOCUS": { target: "focused" },
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setInitialFocus", "invokeOnOpen"]
+				}]
+			}
+		},
+		focused: {
+			tags: ["closed"],
+			on: {
+				"CONTROLLED.OPEN": [
+					{
+						guard: "isTriggerClickEvent",
+						target: "open",
+						actions: ["setInitialFocus", "highlightFirstSelectedItem"]
+					},
+					{
+						guard: "isTriggerArrowUpEvent",
+						target: "open",
+						actions: ["setInitialFocus", "highlightLastItem"]
+					},
+					{
+						guard: or("isTriggerArrowDownEvent", "isTriggerEnterEvent", ""),
+						target: "open",
+						actions: ["setInitialFocus", "highlightFirstItem"]
+					},
+					{
+						target: "open",
+						actions: ["setInitialFocus"]
+					}
+				],
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setInitialFocus", "invokeOnOpen"]
+				}],
+				"TRIGGER.BLUR": { target: "idle" },
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"setInitialFocus",
+						"invokeOnOpen",
+						"highlightFirstSelectedItem"
+					]
+				}],
+				"TRIGGER.ENTER": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"setInitialFocus",
+						"invokeOnOpen",
+						"highlightFirstItem"
+					]
+				}],
+				"TRIGGER.ARROW_UP": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"setInitialFocus",
+						"invokeOnOpen",
+						"highlightLastItem"
+					]
+				}],
+				"TRIGGER.ARROW_DOWN": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"setInitialFocus",
+						"invokeOnOpen",
+						"highlightFirstItem"
+					]
+				}],
+				"TRIGGER.ARROW_LEFT": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}],
+				"TRIGGER.ARROW_RIGHT": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen", "highlightFirstItem"]
+				}]
+			}
+		},
+		open: {
+			tags: ["open"],
+			exit: ["scrollContentToTop"],
+			effects: [
+				"trackDismissableElement",
+				"trackFocusVisible",
+				"computePlacement",
+				"scrollToHighlightedItems"
+			],
+			on: {
+				"CONTROLLED.CLOSE": [{
+					guard: "restoreFocus",
+					target: "focused",
+					actions: ["focusTriggerEl", "clearHighlightedValue"]
+				}, {
+					target: "idle",
+					actions: ["clearHighlightedValue"]
+				}],
+				CLOSE: [
+					{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					},
+					{
+						guard: "restoreFocus",
+						target: "focused",
+						actions: [
+							"invokeOnClose",
+							"focusTriggerEl",
+							"clearHighlightedValue"
+						]
+					},
+					{
+						target: "idle",
+						actions: ["invokeOnClose", "clearHighlightedValue"]
+					}
+				],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: [
+						"invokeOnClose",
+						"focusTriggerEl",
+						"clearHighlightedValue"
+					]
+				}],
+				"ITEM.CLICK": [
+					{
+						guard: and("canSelectItem", and("shouldCloseOnSelect", not("multiple")), "isOpenControlled"),
+						actions: ["selectItem", "invokeOnClose"]
+					},
+					{
+						guard: and("canSelectItem", and("shouldCloseOnSelect", not("multiple"))),
+						target: "focused",
+						actions: [
+							"selectItem",
+							"invokeOnClose",
+							"focusTriggerEl",
+							"clearHighlightedValue"
+						]
+					},
+					{
+						guard: "canSelectItem",
+						actions: ["selectItem"]
+					},
+					{ actions: ["setHighlightedValue"] }
+				],
+				"ITEM.POINTER_ENTER": [{
+					guard: "isHoverHighlight",
+					actions: ["setHighlightingForHoveredItem"]
+				}],
+				"ITEM.POINTER_LEAVE": [{
+					guard: and("isHoverHighlight", "shouldHighlightOnHover"),
+					actions: ["createGraceArea"]
+				}],
+				POINTER_MOVE: [{
+					guard: and("isHoverHighlight", "hasGraceArea", "isPointerOutsideGraceArea", "isPointerNotInAnyItem", "hasHighlightedValue"),
+					actions: ["clearGraceArea"]
+				}],
+				"GRACE_AREA.CLEAR": [{
+					guard: "isHoverHighlight",
+					actions: ["clearGraceArea"]
+				}],
+				"CONTENT.HOME": { actions: ["highlightFirstItem"] },
+				"CONTENT.END": { actions: ["highlightLastItem"] },
+				"CONTENT.ARROW_DOWN": [{
+					guard: or(not("hasHighlightedValue"), and("loop", "isHighlightedLastItem")),
+					actions: ["highlightFirstItem"]
+				}, { actions: ["highlightNextItem"] }],
+				"CONTENT.ARROW_UP": [{
+					guard: or(not("hasHighlightedValue"), and("loop", "isHighlightedFirstItem")),
+					actions: ["highlightLastItem"]
+				}, { actions: ["highlightPreviousItem"] }],
+				"CONTENT.ARROW_RIGHT": [{
+					guard: "canNavigateToChild",
+					actions: ["highlightFirstChild"]
+				}],
+				"CONTENT.ARROW_LEFT": [
+					{
+						guard: and("isAtRootLevel", "isOpenControlled"),
+						actions: ["invokeOnClose", "focusTriggerEl"]
+					},
+					{
+						guard: and("isAtRootLevel", "restoreFocus"),
+						target: "focused",
+						actions: [
+							"invokeOnClose",
+							"focusTriggerEl",
+							"clearHighlightedValue"
+						]
+					},
+					{
+						guard: "isAtRootLevel",
+						target: "idle",
+						actions: ["invokeOnClose", "clearHighlightedValue"]
+					},
+					{
+						guard: "canNavigateToParent",
+						actions: ["highlightParent"]
+					}
+				],
+				"CONTENT.ENTER": [
+					{
+						guard: and("canSelectHighlightedItem", and("shouldCloseOnSelectHighlighted", not("multiple")), "isOpenControlled"),
+						actions: ["selectHighlightedItem", "invokeOnClose"]
+					},
+					{
+						guard: and("canSelectHighlightedItem", and("shouldCloseOnSelectHighlighted", not("multiple"))),
+						target: "focused",
+						actions: [
+							"selectHighlightedItem",
+							"invokeOnClose",
+							"focusTriggerEl",
+							"clearHighlightedValue"
+						]
+					},
+					{
+						guard: "canSelectHighlightedItem",
+						actions: ["selectHighlightedItem"]
+					}
+				],
+				"POSITIONING.SET": { actions: ["reposition"] }
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			restoreFocus: ({ event }) => restoreFocusFn(event),
+			multiple: ({ prop }) => !!prop("multiple"),
+			loop: ({ prop }) => !!prop("loopFocus"),
+			isOpenControlled: ({ prop }) => !!prop("open"),
+			isTriggerClickEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.CLICK",
+			isTriggerArrowUpEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_UP",
+			isTriggerArrowDownEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_DOWN",
+			isTriggerEnterEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ENTER",
+			isTriggerArrowRightEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_RIGHT",
+			hasHighlightedValue: ({ context }) => context.get("highlightedValue").length > 0,
+			isHighlightedFirstItem: ({ context }) => context.get("highlightedIndexPath").at(-1) === 0,
+			isHighlightedLastItem: ({ prop, context }) => {
+				const path = context.get("highlightedIndexPath");
+				const itemIndex = path.at(-1);
+				if (!itemIndex && itemIndex !== 0) return false;
+				const parentIndexPath = path.slice(0, -1);
+				return !prop("collection").at([...parentIndexPath, itemIndex + 1]);
+			},
+			shouldCloseOnSelect: ({ prop, event }) => {
+				const collection = prop("collection");
+				const node = collection.at(event.indexPath);
+				return prop("closeOnSelect") && node && !collection.isBranchNode(node);
+			},
+			shouldCloseOnSelectHighlighted: ({ prop, context }) => {
+				const collection = prop("collection");
+				const node = last(context.get("highlightedItems"));
+				return prop("closeOnSelect") && node != null && !collection.isBranchNode(node);
+			},
+			canSelectItem: ({ prop, event }) => {
+				const collection = prop("collection");
+				const node = collection.at(event.indexPath);
+				if (!node) return false;
+				return prop("allowParentSelection") || !collection.isBranchNode(node);
+			},
+			canSelectHighlightedItem: ({ prop, context }) => {
+				const collection = prop("collection");
+				const node = collection.at(context.get("highlightedIndexPath"));
+				if (!node) return false;
+				return prop("allowParentSelection") || !collection.isBranchNode(node);
+			},
+			canNavigateToChild: ({ prop, context }) => {
+				const highlightedIndexPath = context.get("highlightedIndexPath");
+				if (!highlightedIndexPath.length) return false;
+				const collection = prop("collection");
+				const node = collection.at(highlightedIndexPath);
+				return node && collection.isBranchNode(node);
+			},
+			canNavigateToParent: ({ context }) => context.get("highlightedIndexPath").length > 1,
+			isAtRootLevel: ({ context }) => context.get("highlightedIndexPath").length <= 1,
+			isHoverHighlight: ({ prop }) => prop("highlightTrigger") === "hover",
+			shouldHighlightOnHover: ({ prop, event }) => {
+				const collection = prop("collection");
+				const node = collection.at(event.indexPath);
+				return node && collection.isBranchNode(node);
+			},
+			shouldUpdateHighlightedIndexPath: ({ prop, context, event }) => {
+				const collection = prop("collection");
+				const currentHighlightedIndexPath = context.get("highlightedIndexPath");
+				if (!currentHighlightedIndexPath || currentHighlightedIndexPath.length === 0) return false;
+				const node = collection.at(event.indexPath);
+				if (!node || collection.isBranchNode(node)) return false;
+				const indexPath = event.indexPath;
+				if (!indexPath) return false;
+				const minLength = Math.min(indexPath.length, currentHighlightedIndexPath.length);
+				let commonPrefixLength = 0;
+				for (let i = 0; i < minLength; i++) if (indexPath[i] === currentHighlightedIndexPath[i]) commonPrefixLength = i + 1;
+				else break;
+				return commonPrefixLength > 0 && (commonPrefixLength < currentHighlightedIndexPath.length || commonPrefixLength < indexPath.length);
+			},
+			hasGraceArea: ({ context }) => {
+				return context.get("graceArea") != null;
+			},
+			isPointerOutsideGraceArea: ({ context, event }) => {
+				const graceArea = context.get("graceArea");
+				if (!graceArea) return false;
+				return !isPointerInGraceArea({
+					x: event.clientX,
+					y: event.clientY
+				}, graceArea);
+			},
+			isPointerNotInAnyItem: ({ event }) => {
+				const target = event.target;
+				const itemElement = target.closest("[data-part=\"item\"]");
+				const contentElement = target.closest("[data-part=\"content\"]");
+				return !contentElement || !itemElement && !!contentElement;
+			}
+		},
+		effects: {
+			trackFormControlState({ context, scope, prop }) {
+				return trackFormControl(dom.getTriggerEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						context.set("value", prop("defaultValue") ?? []);
+					}
+				});
+			},
+			trackFocusVisible({ scope }) {
+				return trackFocusVisible({ root: scope.getRootNode?.() });
+			},
+			trackDismissableElement({ scope, send, prop }) {
+				const contentEl = () => dom.getContentEl(scope);
+				let restoreFocus = true;
+				return trackDismissableElement(contentEl, {
+					defer: true,
+					exclude: [dom.getTriggerEl(scope), dom.getClearTriggerEl(scope)],
+					onFocusOutside: prop("onFocusOutside"),
+					onPointerDownOutside: prop("onPointerDownOutside"),
+					onInteractOutside(event) {
+						prop("onInteractOutside")?.(event);
+						restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+					},
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside",
+							restoreFocus
+						});
+					}
+				});
+			},
+			computePlacement({ context, prop, scope }) {
+				const triggerEl = () => dom.getTriggerEl(scope);
+				const positionerEl = () => dom.getPositionerEl(scope);
+				return getPlacement(triggerEl, positionerEl, {
+					...prop("positioning"),
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			scrollToHighlightedItems({ context, prop, scope }) {
+				let cleanups = [];
+				const exec = (immediate) => {
+					const highlightedValue = context.get("highlightedValue");
+					const highlightedIndexPath = context.get("highlightedIndexPath");
+					if (!highlightedIndexPath.length) return;
+					if (getInteractionModality() === "pointer") return;
+					dom.getListEls(scope).forEach((listEl, index) => {
+						const itemPath = highlightedIndexPath.slice(0, index + 1);
+						const itemEl = dom.getItemEl(scope, highlightedValue.toString());
+						const scrollToIndexFn = prop("scrollToIndexFn");
+						if (scrollToIndexFn) {
+							const itemIndexInList = itemPath[itemPath.length - 1];
+							scrollToIndexFn({
+								index: itemIndexInList,
+								immediate,
+								depth: index
+							});
+							return;
+						}
+						const raf_cleanup = raf(() => {
+							scrollIntoView(itemEl, {
+								rootEl: listEl,
+								block: "nearest"
+							});
+						});
+						cleanups.push(raf_cleanup);
+					});
+				};
+				raf(() => {
+					setInteractionModality("virtual");
+					exec(true);
+				});
+				const rafCleanup = raf(() => exec(true));
+				cleanups.push(rafCleanup);
+				const observerCleanup = observeAttributes(dom.getContentEl(scope), {
+					attributes: ["data-activedescendant"],
+					callback: () => exec(false)
+				});
+				cleanups.push(observerCleanup);
+				return () => {
+					cleanups.forEach((cleanup) => cleanup());
+				};
+			}
+		},
+		actions: {
+			setValue(params) {
+				set.value(params, params.event.value);
+			},
+			clearValue(params) {
+				set.value(params, []);
+			},
+			setHighlightedValue(params) {
+				const { event } = params;
+				set.highlightedValue(params, event.value);
+			},
+			clearHighlightedValue(params) {
+				set.highlightedValue(params, []);
+			},
+			reposition({ context, prop, scope, event }) {
+				const positionerEl = () => dom.getPositionerEl(scope);
+				getPlacement(dom.getTriggerEl(scope), positionerEl, {
+					...prop("positioning"),
+					...event.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			selectItem(params) {
+				const { context, prop, event } = params;
+				const collection = prop("collection");
+				const multiple = prop("multiple");
+				const value = context.get("value");
+				const itemValue = event.value;
+				const indexPath = event.indexPath ?? collection.getIndexPath(itemValue);
+				const node = collection.at(indexPath);
+				const hasChildren = collection.isBranchNode(node);
+				if (prop("allowParentSelection")) {
+					if (multiple) {
+						const filteredValue = value.filter((v) => {
+							const shortPath = v.length < itemValue.length ? v : itemValue;
+							return !(v.length < itemValue.length ? itemValue : v).slice(0, shortPath.length).every((val, i) => val === shortPath[i]) && !isEqual(v, itemValue);
+						});
+						set.value(params, [...filteredValue, itemValue]);
+					} else set.value(params, [itemValue]);
+					if (hasChildren) set.highlightedValue(params, itemValue);
+				} else if (hasChildren) {
+					if (multiple && value.length > 0) set.value(params, [...value.slice(0, -1), itemValue]);
+					else set.value(params, [itemValue]);
+					set.highlightedValue(params, itemValue);
+				} else if (multiple) {
+					const existingIndex = value.findIndex((path) => isEqual(path, itemValue));
+					if (existingIndex >= 0) {
+						const newValues = [...value];
+						newValues.splice(existingIndex, 1);
+						set.value(params, newValues);
+					} else set.value(params, [...value, itemValue]);
+				} else set.value(params, [itemValue]);
+			},
+			clearItem(params) {
+				const { context, event } = params;
+				const newValue = context.get("value").filter((v) => !isEqual(v, event.value));
+				set.value(params, newValue);
+			},
+			selectHighlightedItem({ context, send }) {
+				const indexPath = context.get("highlightedIndexPath");
+				const value = context.get("highlightedValue");
+				if (value) send({
+					type: "ITEM.SELECT",
+					value,
+					indexPath
+				});
+			},
+			highlightFirstItem(params) {
+				const { context, prop } = params;
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				let parentNode;
+				if (!highlightedValue.length) parentNode = collection.rootNode;
+				else {
+					const indexPath = context.get("highlightedIndexPath");
+					parentNode = collection.getParentNode(indexPath) ?? collection.rootNode;
+				}
+				const firstChild = collection.getNodeChildren(parentNode).find((child) => !collection.getNodeDisabled(child));
+				if (!firstChild) return;
+				const firstValue = collection.getNodeValue(firstChild);
+				if (!highlightedValue.length) set.highlightedValue(params, [firstValue]);
+				else {
+					const parentPath = highlightedValue.slice(0, -1);
+					set.highlightedValue(params, [...parentPath, firstValue]);
+				}
+			},
+			highlightLastItem(params) {
+				const { context, prop } = params;
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				let parentNode;
+				if (!highlightedValue.length) parentNode = collection.rootNode;
+				else {
+					const indexPath = context.get("highlightedIndexPath");
+					parentNode = collection.getParentNode(indexPath) ?? collection.rootNode;
+				}
+				const lastChild = collection.getNodeChildren(parentNode).findLast((child) => !collection.getNodeDisabled(child));
+				if (!lastChild) return;
+				const lastValue = collection.getNodeValue(lastChild);
+				if (!highlightedValue.length) set.highlightedValue(params, [lastValue]);
+				else {
+					const parentPath = highlightedValue.slice(0, -1);
+					set.highlightedValue(params, [...parentPath, lastValue]);
+				}
+			},
+			highlightNextItem(params) {
+				const { context, prop } = params;
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				if (!highlightedValue.length) return;
+				const indexPath = context.get("highlightedIndexPath");
+				const nextSibling = collection.getNextSibling(indexPath);
+				if (!nextSibling) return;
+				const nextValue = collection.getNodeValue(nextSibling);
+				if (highlightedValue.length === 1) set.highlightedValue(params, [nextValue]);
+				else {
+					const parentPath = highlightedValue.slice(0, -1);
+					set.highlightedValue(params, [...parentPath, nextValue]);
+				}
+			},
+			highlightPreviousItem(params) {
+				const { context, prop } = params;
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				if (!highlightedValue.length) return;
+				const indexPath = context.get("highlightedIndexPath");
+				const previousSibling = collection.getPreviousSibling(indexPath);
+				if (!previousSibling) return;
+				const prevValue = collection.getNodeValue(previousSibling);
+				if (highlightedValue.length === 1) set.highlightedValue(params, [prevValue]);
+				else {
+					const parentPath = highlightedValue.slice(0, -1);
+					set.highlightedValue(params, [...parentPath, prevValue]);
+				}
+			},
+			highlightFirstChild(params) {
+				const { context, prop } = params;
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				if (!highlightedValue.length) return;
+				const indexPath = context.get("highlightedIndexPath");
+				const node = collection.getFirstNode(collection.at(indexPath));
+				if (!node) return;
+				const childValue = collection.getNodeValue(node);
+				set.highlightedValue(params, [...highlightedValue, childValue]);
+			},
+			highlightParent(params) {
+				const { context } = params;
+				const highlightedValue = context.get("highlightedValue");
+				if (!highlightedValue.length) return;
+				const parentPath = highlightedValue.slice(0, -1);
+				set.highlightedValue(params, parentPath);
+			},
+			setInitialFocus({ scope }) {
+				raf(() => {
+					dom.getContentEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			focusTriggerEl({ event, scope }) {
+				if (!restoreFocusFn(event)) return;
+				raf(() => {
+					dom.getTriggerEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			invokeOnOpen({ prop, context }) {
+				prop("onOpenChange")?.({
+					open: true,
+					value: context.get("value")
+				});
+			},
+			invokeOnClose({ prop, context }) {
+				prop("onOpenChange")?.({
+					open: false,
+					value: context.get("value")
+				});
+			},
+			toggleVisibility({ send, prop }) {
+				if (prop("open") != null) send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" });
+			},
+			highlightFirstSelectedItem(params) {
+				const { context } = params;
+				const value = context.get("value");
+				if (isEmpty(value)) return;
+				const mostRecentSelection = last(value);
+				if (mostRecentSelection) set.highlightedValue(params, mostRecentSelection);
+			},
+			createGraceArea({ context, event, scope }) {
+				const value = event.value.toString();
+				const triggerElement = dom.getItemEl(scope, value);
+				if (!triggerElement) return;
+				const exitPoint = {
+					x: event.clientX,
+					y: event.clientY
+				};
+				const triggerRect = triggerElement.getBoundingClientRect();
+				const nextLevelEl = dom.getListEl(scope, value);
+				if (!nextLevelEl) return;
+				const graceArea = createGraceArea(exitPoint, triggerRect, nextLevelEl.getBoundingClientRect());
+				context.set("graceArea", graceArea);
+				setTimeout(() => {
+					context.set("graceArea", null);
+				}, 300);
+			},
+			clearGraceArea({ context }) {
+				context.set("graceArea", null);
+			},
+			setHighlightingForHoveredItem(params) {
+				const { prop, event } = params;
+				const collection = prop("collection");
+				const node = collection.at(event.indexPath);
+				let newHighlightedValue;
+				if (node && collection.isBranchNode(node)) newHighlightedValue = event.value;
+				else newHighlightedValue = event.value.slice(0, -1);
+				set.highlightedValue(params, newHighlightedValue);
+			},
+			syncInputValue({ context, scope }) {
+				const inputEl = dom.getHiddenInputEl(scope);
+				if (!inputEl) return;
+				setElementValue(inputEl, context.hash("value"));
+			},
+			dispatchChangeEvent({ scope, context }) {
+				dispatchInputValueEvent(dom.getHiddenInputEl(scope), { value: context.hash("value") });
+			},
+			scrollContentToTop({ scope, prop }) {
+				const scrollToIndexFn = prop("scrollToIndexFn");
+				raf(() => {
+					(dom.getContentEl(scope)?.querySelectorAll("[data-part=\"list\"]"))?.forEach((listEl, index) => {
+						if (scrollToIndexFn) scrollToIndexFn({
+							index: 0,
+							immediate: true,
+							depth: index
+						});
+						else listEl.scrollTop = 0;
+					});
+				});
+			}
+		}
+	}
+});
+const set = {
+	value({ context, prop }, value) {
+		const collection = prop("collection");
+		context.set("value", value);
+		const valueIndexPath = value.map((v) => collection.getIndexPath(v));
+		context.set("valueIndexPath", valueIndexPath);
+		const selectedItems = valueIndexPath.map((indexPath) => {
+			return indexPath.map((_, index) => {
+				const partialPath = indexPath.slice(0, index + 1);
+				return collection.at(partialPath);
+			});
+		});
+		context.set("selectedItems", selectedItems);
+		prop("onValueChange")?.({
+			value,
+			items: selectedItems
+		});
+	},
+	highlightedValue({ context, prop }, value) {
+		const collection = prop("collection");
+		context.set("highlightedValue", value);
+		const highlightedIndexPath = (value == null ? [] : collection.getIndexPath(value)) ?? [];
+		context.set("highlightedIndexPath", highlightedIndexPath);
+		const highlightedItems = highlightedIndexPath.map((_, index) => {
+			const partialPath = highlightedIndexPath.slice(0, index + 1);
+			return collection.at(partialPath);
+		});
+		context.set("highlightedItems", highlightedItems);
+		prop("onHighlightChange")?.({
+			highlightedValue: value,
+			highlightedItems
+		});
+	}
+};
+function restoreFocusFn(event) {
+	const v = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+	return v == null || !!v;
+}
+//#endregion
+//#region src/machines/cascade-select/props.ts
+const props = createProps()([
+	"allowParentSelection",
+	"closeOnSelect",
+	"collection",
+	"defaultOpen",
+	"defaultValue",
+	"defaultHighlightedValue",
+	"dir",
+	"disabled",
+	"formatValue",
+	"form",
+	"getRootNode",
+	"highlightedValue",
+	"highlightTrigger",
+	"id",
+	"ids",
+	"invalid",
+	"loopFocus",
+	"multiple",
+	"name",
+	"onFocusOutside",
+	"onHighlightChange",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onValueChange",
+	"open",
+	"positioning",
+	"readOnly",
+	"required",
+	"scrollToIndexFn",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, collection, connect, machine, parts, props, splitProps };