@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/listbox/index.js

@@ -0,0 +1,860 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { E as isEditableElement, L as ariaAttr, p as contains, t as getByTypeahead, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { c as getNativeEvent, d as isCtrlOrMetaKey, f as isDownloadingEvent, g as isOpeningInNewTab, l as isComposingEvent, r as getEventKey, s as getEventTarget, u as isContextMenuEvent } from "../../event-bTItRgiw.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as observeAttributes } from "../../mutation-observer-qObPUo3D.js";
+import { n as scrollIntoView } from "../../scroll-CVJ40w2e.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { t as ensure } from "../../warning-CrzBpWT1.js";
+import { a as GridCollection, i as Selection, o as isGridCollection, 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 { a as setInteractionModality, o as trackFocusVisible, t as getInteractionModality } from "../../focus-visible-DWdQf__4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/listbox/anatomy.ts
+const anatomy = createAnatomy("listbox").parts("label", "input", "item", "itemText", "itemIndicator", "itemGroup", "itemGroupLabel", "content", "root", "valueText");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/listbox/collection.ts
+const collection = (options) => {
+	return new ListCollection(options);
+};
+collection.empty = () => {
+	return new ListCollection({ items: [] });
+};
+const gridCollection = (options) => {
+	return new GridCollection(options);
+};
+gridCollection.empty = () => {
+	return new GridCollection({
+		items: [],
+		columnCount: 0
+	});
+};
+//#endregion
+//#region src/machines/listbox/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `listbox:${ctx.id}`;
+const getContentId = (ctx) => ctx.ids?.content ?? `listbox:${ctx.id}:content`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `listbox:${ctx.id}:label`;
+const getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `listbox:${ctx.id}:item:${id}`;
+const getItemGroupId = (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `listbox:${ctx.id}:item-group:${id}`;
+const getItemGroupLabelId = (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `listbox:${ctx.id}:item-group-label:${id}`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getItemEl = (ctx, id) => ctx.getById(getItemId(ctx, id));
+//#endregion
+//#region src/machines/listbox/connect.ts
+function connect(service, normalize) {
+	const { context, prop, scope, computed, send, refs } = service;
+	const disabled = prop("disabled");
+	const collection = prop("collection");
+	const layout = isGridCollection(collection) ? "grid" : "list";
+	const focused = context.get("focused");
+	const focusVisible = refs.get("focusVisible") && focused;
+	const inputState = refs.get("inputState");
+	const value = context.get("value");
+	const selectedItems = computed("selectedItems");
+	const highlightedValue = context.get("highlightedValue");
+	const highlightedItem = context.get("highlightedItem");
+	const isTypingAhead = computed("isTypingAhead");
+	const interactive = computed("isInteractive");
+	const ariaActiveDescendant = highlightedValue ? getItemId(scope, highlightedValue) : void 0;
+	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)}`);
+		const highlighted = highlightedValue === value;
+		return {
+			value,
+			disabled: Boolean(disabled || itemDisabled),
+			focused: highlighted && focused,
+			focusVisible: highlighted && focusVisible,
+			highlighted: highlighted && (inputState.focused ? focused : focusVisible),
+			selected: context.get("value").includes(value)
+		};
+	}
+	return {
+		empty: value.length === 0,
+		highlightedItem,
+		highlightedValue,
+		clearHighlightedValue() {
+			send({
+				type: "HIGHLIGHTED_VALUE.SET",
+				value: null
+			});
+		},
+		selectedItems,
+		hasSelectedItems: computed("hasSelectedItems"),
+		value,
+		valueAsString: computed("valueAsString"),
+		collection,
+		disabled: !!disabled,
+		selectValue(value) {
+			send({
+				type: "ITEM.SELECT",
+				value
+			});
+		},
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		selectAll() {
+			if (!computed("multiple")) throw new Error("[wirekyt] Cannot select all items in a single-select listbox");
+			send({
+				type: "VALUE.SET",
+				value: collection.getValues()
+			});
+		},
+		highlightValue(value) {
+			send({
+				type: "HIGHLIGHTED_VALUE.SET",
+				value
+			});
+		},
+		highlightFirst() {
+			send({ type: "HIGHLIGHT.FIRST" });
+		},
+		highlightLast() {
+			send({ type: "HIGHLIGHT.LAST" });
+		},
+		highlightNext() {
+			send({ type: "HIGHLIGHT.NEXT" });
+		},
+		highlightPrevious() {
+			send({ type: "HIGHLIGHT.PREV" });
+		},
+		clearValue(value) {
+			if (value) send({
+				type: "ITEM.CLEAR",
+				value
+			});
+			else send({ type: "VALUE.CLEAR" });
+		},
+		getItemState,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				"data-orientation": prop("orientation"),
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getInputProps(props = {}) {
+			const keyboardPriority = props.keyboardPriority ?? "caret";
+			return normalize.input({
+				...parts.input.attrs,
+				dir: prop("dir"),
+				disabled,
+				"data-disabled": dataAttr(disabled),
+				autoComplete: "off",
+				autoCorrect: "off",
+				"aria-haspopup": "listbox",
+				"aria-controls": getContentId(scope),
+				"aria-autocomplete": "list",
+				"aria-activedescendant": ariaActiveDescendant,
+				spellCheck: false,
+				enterKeyHint: "go",
+				onFocus() {
+					queueMicrotask(() => {
+						send({
+							type: "INPUT.FOCUS",
+							autoHighlight: !!props?.autoHighlight
+						});
+					});
+				},
+				onBlur() {
+					send({
+						type: "CONTENT.BLUR",
+						src: "input"
+					});
+				},
+				onInput(event) {
+					if (!props?.autoHighlight) return;
+					if (event.currentTarget.value.trim()) return;
+					queueMicrotask(() => {
+						send({
+							type: "HIGHLIGHTED_VALUE.SET",
+							value: null
+						});
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (isComposingEvent(event)) return;
+					const nativeEvent = getNativeEvent(event);
+					const forwardEvent = () => {
+						event.preventDefault();
+						const keyboardEvent = new (scope.getWin()).KeyboardEvent(nativeEvent.type, nativeEvent);
+						getContentEl(scope)?.dispatchEvent(keyboardEvent);
+					};
+					switch (nativeEvent.key) {
+						case "ArrowLeft":
+						case "ArrowRight":
+							if (!isGridCollection(collection)) return;
+							if (event.ctrlKey) return;
+							if (keyboardPriority !== "navigate") return;
+							forwardEvent();
+							break;
+						case "Home":
+						case "End":
+							if (keyboardPriority !== "navigate") return;
+							if (highlightedValue == null && event.shiftKey) return;
+							forwardEvent();
+							break;
+						case "ArrowDown":
+						case "ArrowUp":
+							forwardEvent();
+							break;
+						case "Enter":
+							if (highlightedValue != null) {
+								event.preventDefault();
+								send({
+									type: "ITEM.CLICK",
+									value: highlightedValue
+								});
+							}
+							break;
+						default: break;
+					}
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getLabelId(scope),
+				...parts.label.attrs,
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				id: getItemId(scope, itemState.value),
+				role: "option",
+				...parts.item.attrs,
+				dir: prop("dir"),
+				"data-value": itemState.value,
+				"aria-selected": itemState.selected,
+				"data-selected": dataAttr(itemState.selected),
+				"data-layout": layout,
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				"data-orientation": prop("orientation"),
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-disabled": dataAttr(itemState.disabled),
+				"aria-disabled": ariaAttr(itemState.disabled),
+				onPointerMove(event) {
+					if (!props.highlightOnHover) return;
+					if (itemState.disabled || event.pointerType !== "mouse") return;
+					if (itemState.highlighted) return;
+					send({
+						type: "ITEM.POINTER_MOVE",
+						value: itemState.value
+					});
+				},
+				onMouseDown(event) {
+					event.preventDefault();
+					getContentEl(scope)?.focus();
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (isDownloadingEvent(event)) return;
+					if (isOpeningInNewTab(event)) return;
+					if (isContextMenuEvent(event)) return;
+					if (itemState.disabled) return;
+					send({
+						type: "ITEM.CLICK",
+						value: itemState.value,
+						shiftKey: event.shiftKey,
+						anchorValue: highlightedValue,
+						metaKey: isCtrlOrMetaKey(event)
+					});
+				}
+			});
+		},
+		getItemTextProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.itemText.attrs,
+				"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({
+				...parts.itemIndicator.attrs,
+				"aria-hidden": true,
+				"data-state": itemState.selected ? "checked" : "unchecked",
+				hidden: !itemState.selected
+			});
+		},
+		getItemGroupLabelProps(props) {
+			const { htmlFor } = props;
+			return normalize.element({
+				...parts.itemGroupLabel.attrs,
+				id: getItemGroupLabelId(scope, htmlFor),
+				dir: prop("dir"),
+				role: "presentation"
+			});
+		},
+		getItemGroupProps(props) {
+			const { id } = props;
+			return normalize.element({
+				...parts.itemGroup.attrs,
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-empty": dataAttr(collection.size === 0),
+				id: getItemGroupId(scope, id),
+				"aria-labelledby": getItemGroupLabelId(scope, id),
+				role: "group",
+				dir: prop("dir")
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getContentId(scope),
+				role: "listbox",
+				...parts.content.attrs,
+				"data-activedescendant": ariaActiveDescendant,
+				"aria-activedescendant": ariaActiveDescendant,
+				"data-orientation": prop("orientation"),
+				"aria-multiselectable": computed("multiple") ? true : void 0,
+				"aria-labelledby": getLabelId(scope),
+				tabIndex: 0,
+				"data-layout": layout,
+				"data-empty": dataAttr(collection.size === 0),
+				style: { "--column-count": isGridCollection(collection) ? collection.columnCount : 1 },
+				onFocus() {
+					send({ type: "CONTENT.FOCUS" });
+				},
+				onBlur() {
+					send({ type: "CONTENT.BLUR" });
+				},
+				onKeyDown(event) {
+					if (!interactive) return;
+					const target = getEventTarget(event);
+					if (!contains(event.currentTarget, getEventTarget(event))) return;
+					const shiftKey = event.shiftKey;
+					const keyMap = {
+						ArrowUp(event) {
+							let nextValue = null;
+							if (isGridCollection(collection) && highlightedValue) nextValue = collection.getPreviousRowValue(highlightedValue);
+							else if (highlightedValue) nextValue = collection.getPreviousValue(highlightedValue);
+							if (!nextValue && (prop("loopFocus") || !highlightedValue)) nextValue = collection.lastValue;
+							if (!nextValue) return;
+							event.preventDefault();
+							send({
+								type: "NAVIGATE",
+								value: nextValue,
+								shiftKey,
+								anchorValue: highlightedValue
+							});
+						},
+						ArrowDown(event) {
+							let nextValue = null;
+							if (isGridCollection(collection) && highlightedValue) nextValue = collection.getNextRowValue(highlightedValue);
+							else if (highlightedValue) nextValue = collection.getNextValue(highlightedValue);
+							if (!nextValue && (prop("loopFocus") || !highlightedValue)) nextValue = collection.firstValue;
+							if (!nextValue) return;
+							event.preventDefault();
+							send({
+								type: "NAVIGATE",
+								value: nextValue,
+								shiftKey,
+								anchorValue: highlightedValue
+							});
+						},
+						ArrowLeft() {
+							if (!isGridCollection(collection) && prop("orientation") === "vertical") return;
+							let nextValue = highlightedValue ? collection.getPreviousValue(highlightedValue) : null;
+							if (!nextValue && prop("loopFocus")) nextValue = collection.lastValue;
+							if (!nextValue) return;
+							event.preventDefault();
+							send({
+								type: "NAVIGATE",
+								value: nextValue,
+								shiftKey,
+								anchorValue: highlightedValue
+							});
+						},
+						ArrowRight() {
+							if (!isGridCollection(collection) && prop("orientation") === "vertical") return;
+							let nextValue = highlightedValue ? collection.getNextValue(highlightedValue) : null;
+							if (!nextValue && prop("loopFocus")) nextValue = collection.firstValue;
+							if (!nextValue) return;
+							event.preventDefault();
+							send({
+								type: "NAVIGATE",
+								value: nextValue,
+								shiftKey,
+								anchorValue: highlightedValue
+							});
+						},
+						Home(event) {
+							if (isEditableElement(target)) return;
+							event.preventDefault();
+							let nextValue = collection.firstValue;
+							send({
+								type: "NAVIGATE",
+								value: nextValue,
+								shiftKey,
+								anchorValue: highlightedValue
+							});
+						},
+						End(event) {
+							if (isEditableElement(target)) return;
+							event.preventDefault();
+							let nextValue = collection.lastValue;
+							send({
+								type: "NAVIGATE",
+								value: nextValue,
+								shiftKey,
+								anchorValue: highlightedValue
+							});
+						},
+						Enter() {
+							send({
+								type: "ITEM.CLICK",
+								value: highlightedValue
+							});
+						},
+						a(event) {
+							if (isCtrlOrMetaKey(event) && computed("multiple") && !prop("disallowSelectAll")) {
+								event.preventDefault();
+								send({
+									type: "VALUE.SET",
+									value: collection.getValues()
+								});
+							}
+						},
+						Space(event) {
+							if (isTypingAhead && prop("typeahead")) send({
+								type: "CONTENT.TYPEAHEAD",
+								key: event.key
+							});
+							else keyMap.Enter?.(event);
+						},
+						Escape(event) {
+							if (prop("deselectable") && value.length > 0) {
+								event.preventDefault();
+								event.stopPropagation();
+								send({ type: "VALUE.CLEAR" });
+							}
+						}
+					};
+					const exec = keyMap[getEventKey(event)];
+					if (exec) {
+						exec(event);
+						return;
+					}
+					if (isEditableElement(target)) return;
+					if (getByTypeahead.isValidEvent(event) && prop("typeahead")) {
+						send({
+							type: "CONTENT.TYPEAHEAD",
+							key: event.key
+						});
+						event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/listbox/machine.ts
+const { guards, createMachine } = setup();
+const { or } = guards;
+const machine = createMachine({
+	props({ props }) {
+		return {
+			loopFocus: false,
+			composite: true,
+			defaultValue: [],
+			multiple: false,
+			typeahead: true,
+			collection: collection.empty(),
+			orientation: "vertical",
+			selectionMode: "single",
+			...props
+		};
+	},
+	context({ prop, bindable, getContext }) {
+		const initialValue = prop("value") ?? prop("defaultValue") ?? [];
+		const initialSelectedItems = prop("collection").findMany(initialValue);
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				isEqual,
+				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);
+					return prop("onValueChange")?.({
+						value,
+						items: proposed.selectedItems
+					});
+				}
+			})),
+			highlightedValue: bindable(() => ({
+				defaultValue: prop("defaultHighlightedValue") || null,
+				value: prop("highlightedValue"),
+				sync: true,
+				onChange(value) {
+					prop("onHighlightChange")?.({
+						highlightedValue: value,
+						highlightedItem: prop("collection").find(value),
+						highlightedIndex: prop("collection").indexOf(value)
+					});
+				}
+			})),
+			highlightedItem: bindable(() => ({ defaultValue: null })),
+			selectedItemMap: bindable(() => {
+				return { defaultValue: createSelectedItemMap({
+					selectedItems: initialSelectedItems,
+					collection: prop("collection")
+				}) };
+			}),
+			focused: bindable(() => ({
+				sync: true,
+				defaultValue: false
+			}))
+		};
+	},
+	refs() {
+		return {
+			typeahead: { ...getByTypeahead.defaultOptions },
+			focusVisible: false,
+			inputState: {
+				autoHighlight: false,
+				focused: false
+			}
+		};
+	},
+	computed: {
+		hasSelectedItems: ({ context }) => context.get("value").length > 0,
+		isTypingAhead: ({ refs }) => refs.get("typeahead").keysSoFar !== "",
+		isInteractive: ({ prop }) => !prop("disabled"),
+		selection: ({ context, prop }) => {
+			const selection = new Selection(context.get("value"));
+			selection.selectionMode = prop("selectionMode");
+			selection.deselectable = !!prop("deselectable");
+			return selection;
+		},
+		multiple: ({ prop }) => prop("selectionMode") === "multiple" || prop("selectionMode") === "extended",
+		selectedItems: ({ context, prop }) => resolveSelectedItems({
+			values: context.get("value"),
+			collection: prop("collection"),
+			selectedItemMap: context.get("selectedItemMap")
+		}),
+		valueAsString: ({ computed, prop }) => prop("collection").stringifyItems(computed("selectedItems"))
+	},
+	initialState() {
+		return "idle";
+	},
+	watch({ context, prop, track, action }) {
+		track([() => context.get("value").toString()], () => {
+			action(["syncSelectedItems"]);
+		});
+		track([() => context.get("highlightedValue")], () => {
+			action(["syncHighlightedItem"]);
+		});
+		track([() => prop("collection").toString()], () => {
+			action(["syncHighlightedValue"]);
+		});
+	},
+	effects: ["trackFocusVisible"],
+	on: {
+		"HIGHLIGHTED_VALUE.SET": { actions: ["setHighlightedItem"] },
+		"ITEM.SELECT": { actions: ["selectItem"] },
+		"ITEM.CLEAR": { actions: ["clearItem"] },
+		"VALUE.SET": { actions: ["setSelectedItems"] },
+		"VALUE.CLEAR": { actions: ["clearSelectedItems"] },
+		"HIGHLIGHT.FIRST": { actions: ["highlightFirstValue"] },
+		"HIGHLIGHT.LAST": { actions: ["highlightLastValue"] },
+		"HIGHLIGHT.NEXT": { actions: ["highlightNextValue"] },
+		"HIGHLIGHT.PREV": { actions: ["highlightPreviousValue"] }
+	},
+	states: { idle: {
+		effects: ["scrollToHighlightedItem"],
+		on: {
+			"INPUT.FOCUS": { actions: ["setFocused", "setInputState"] },
+			"CONTENT.FOCUS": [{
+				guard: or("hasSelectedValue", "hasHighlightedValue"),
+				actions: ["setFocused"]
+			}, { actions: ["setFocused", "setDefaultHighlightedValue"] }],
+			"CONTENT.BLUR": { actions: ["clearFocused", "clearInputState"] },
+			"ITEM.CLICK": { actions: ["setHighlightedItem", "selectHighlightedItem"] },
+			"CONTENT.TYPEAHEAD": { actions: ["setFocused", "highlightMatchingItem"] },
+			"ITEM.POINTER_MOVE": { actions: ["highlightItem"] },
+			"ITEM.POINTER_LEAVE": { actions: ["clearHighlightedItem"] },
+			NAVIGATE: { actions: [
+				"setFocused",
+				"setHighlightedItem",
+				"selectWithKeyboard"
+			] }
+		}
+	} },
+	implementations: {
+		guards: {
+			hasSelectedValue: ({ context }) => context.get("value").length > 0,
+			hasHighlightedValue: ({ context }) => context.get("highlightedValue") != null
+		},
+		effects: {
+			trackFocusVisible: ({ scope, refs }) => {
+				return trackFocusVisible({
+					root: scope.getRootNode?.(),
+					onChange(details) {
+						refs.set("focusVisible", details.isFocusVisible);
+					}
+				});
+			},
+			scrollToHighlightedItem({ context, prop, scope }) {
+				const exec = (immediate) => {
+					const highlightedValue = context.get("highlightedValue");
+					if (highlightedValue == null) return;
+					if (getInteractionModality() === "pointer") return;
+					const contentEl = getContentEl(scope);
+					const scrollToIndexFn = prop("scrollToIndexFn");
+					if (scrollToIndexFn) {
+						const highlightedIndex = prop("collection").indexOf(highlightedValue);
+						scrollToIndexFn?.({
+							index: highlightedIndex,
+							immediate,
+							getElement() {
+								return getItemEl(scope, highlightedValue);
+							}
+						});
+						return;
+					}
+					scrollIntoView(getItemEl(scope, highlightedValue), {
+						rootEl: contentEl,
+						block: "nearest"
+					});
+				};
+				raf(() => {
+					setInteractionModality("virtual");
+					exec(true);
+				});
+				const contentEl = () => getContentEl(scope);
+				return observeAttributes(contentEl, {
+					defer: true,
+					attributes: ["data-activedescendant"],
+					callback() {
+						exec(false);
+					}
+				});
+			}
+		},
+		actions: {
+			selectHighlightedItem({ context, prop, event, computed }) {
+				const value = event.value ?? context.get("highlightedValue");
+				const collection = prop("collection");
+				if (value == null || !collection.has(value)) return;
+				const selection = computed("selection");
+				if (event.shiftKey && computed("multiple") && event.anchorValue) {
+					const next = selection.extendSelection(collection, event.anchorValue, value);
+					invokeOnSelect(selection, next, prop("onSelect"));
+					context.set("value", Array.from(next));
+				} else {
+					const next = selection.select(collection, value, event.metaKey);
+					invokeOnSelect(selection, next, prop("onSelect"));
+					context.set("value", Array.from(next));
+				}
+			},
+			selectWithKeyboard({ context, prop, event, computed }) {
+				const selection = computed("selection");
+				const collection = prop("collection");
+				if (event.shiftKey && computed("multiple") && event.anchorValue) {
+					const next = selection.extendSelection(collection, event.anchorValue, event.value);
+					invokeOnSelect(selection, next, prop("onSelect"));
+					context.set("value", Array.from(next));
+					return;
+				}
+				if (prop("selectOnHighlight")) {
+					const next = selection.replaceSelection(collection, event.value);
+					invokeOnSelect(selection, next, prop("onSelect"));
+					context.set("value", Array.from(next));
+				}
+			},
+			highlightItem({ context, event }) {
+				context.set("highlightedValue", event.value);
+			},
+			highlightMatchingItem({ context, prop, event, refs }) {
+				const value = prop("collection").search(event.key, {
+					state: refs.get("typeahead"),
+					currentValue: context.get("highlightedValue")
+				});
+				if (value == null) return;
+				context.set("highlightedValue", value);
+			},
+			setHighlightedItem({ context, event }) {
+				context.set("highlightedValue", event.value);
+			},
+			highlightFirstValue({ context, prop }) {
+				context.set("highlightedValue", prop("collection").firstValue ?? null);
+			},
+			highlightLastValue({ context, prop }) {
+				context.set("highlightedValue", prop("collection").lastValue ?? null);
+			},
+			highlightNextValue({ context, prop }) {
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				let nextValue = null;
+				if (isGridCollection(collection) && highlightedValue) nextValue = collection.getNextRowValue(highlightedValue);
+				else if (highlightedValue) nextValue = collection.getNextValue(highlightedValue);
+				if (!nextValue && (prop("loopFocus") || !highlightedValue)) nextValue = collection.firstValue;
+				if (!nextValue) return;
+				context.set("highlightedValue", nextValue);
+			},
+			highlightPreviousValue({ context, prop }) {
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				let nextValue = null;
+				if (isGridCollection(collection) && highlightedValue) nextValue = collection.getPreviousRowValue(highlightedValue);
+				else if (highlightedValue) nextValue = collection.getPreviousValue(highlightedValue);
+				if (!nextValue && (prop("loopFocus") || !highlightedValue)) nextValue = collection.lastValue;
+				if (!nextValue) return;
+				context.set("highlightedValue", nextValue);
+			},
+			clearHighlightedItem({ context }) {
+				context.set("highlightedValue", null);
+			},
+			selectItem({ context, prop, event, computed }) {
+				const collection = prop("collection");
+				const selection = computed("selection");
+				const next = selection.select(collection, event.value);
+				invokeOnSelect(selection, next, prop("onSelect"));
+				context.set("value", Array.from(next));
+			},
+			clearItem({ context, event, computed }) {
+				const value = computed("selection").deselect(event.value);
+				context.set("value", Array.from(value));
+			},
+			setSelectedItems({ context, event }) {
+				context.set("value", event.value);
+			},
+			clearSelectedItems({ context }) {
+				context.set("value", []);
+			},
+			syncSelectedItems({ context, prop }) {
+				const next = deriveSelectionState({
+					values: context.get("value"),
+					collection: prop("collection"),
+					selectedItemMap: context.get("selectedItemMap")
+				});
+				context.set("selectedItemMap", next.nextSelectedItemMap);
+			},
+			syncHighlightedItem({ context, prop }) {
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				const highlightedItem = highlightedValue ? collection.find(highlightedValue) : null;
+				context.set("highlightedItem", highlightedItem);
+			},
+			syncHighlightedValue({ context, prop, refs }) {
+				const collection = prop("collection");
+				const highlightedValue = context.get("highlightedValue");
+				const { autoHighlight } = refs.get("inputState");
+				if (autoHighlight) {
+					queueMicrotask(() => {
+						context.set("highlightedValue", prop("collection").firstValue ?? null);
+					});
+					return;
+				}
+				if (highlightedValue != null && !collection.has(highlightedValue)) queueMicrotask(() => {
+					context.set("highlightedValue", null);
+				});
+			},
+			setFocused({ context }) {
+				context.set("focused", true);
+			},
+			setDefaultHighlightedValue({ context, prop }) {
+				const firstValue = prop("collection").firstValue;
+				if (firstValue != null) context.set("highlightedValue", firstValue);
+			},
+			clearFocused({ context }) {
+				context.set("focused", false);
+			},
+			setInputState({ refs, event }) {
+				refs.set("inputState", {
+					autoHighlight: !!event.autoHighlight,
+					focused: true
+				});
+			},
+			clearInputState({ refs }) {
+				refs.set("inputState", {
+					autoHighlight: false,
+					focused: false
+				});
+			}
+		}
+	}
+});
+const diff = (a, b) => {
+	const result = new Set(a);
+	for (const item of b) result.delete(item);
+	return result;
+};
+function invokeOnSelect(current, next, onSelect) {
+	const added = diff(next, current);
+	for (const item of added) onSelect?.({ value: item });
+}
+//#endregion
+//#region src/machines/listbox/props.ts
+const props = createProps()([
+	"collection",
+	"defaultHighlightedValue",
+	"defaultValue",
+	"dir",
+	"disabled",
+	"deselectable",
+	"disallowSelectAll",
+	"getRootNode",
+	"highlightedValue",
+	"id",
+	"ids",
+	"loopFocus",
+	"onHighlightChange",
+	"onSelect",
+	"onValueChange",
+	"orientation",
+	"scrollToIndexFn",
+	"selectionMode",
+	"selectOnHighlight",
+	"typeahead",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["item", "highlightOnHover"]);
+const splitItemProps = createSplitProps(itemProps);
+const itemGroupProps = createProps()(["id"]);
+const splitItemGroupProps = createSplitProps(itemGroupProps);
+const itemGroupLabelProps = createProps()(["htmlFor"]);
+const splitItemGroupLabelProps = createSplitProps(itemGroupLabelProps);
+//#endregion
+export { anatomy, collection, connect, gridCollection, itemGroupLabelProps, itemGroupProps, itemProps, machine, props, splitItemGroupLabelProps, splitItemGroupProps, splitItemProps, splitProps };