@sprawlify/primitives 0.0.111 → 0.0.113

package/dist/machines/angle-slider/index.cjs

@@ -19,11 +19,24 @@ const getLabelId = (ctx) => ctx.ids?.label ?? `angle-slider:${ctx.id}:label`;
 const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 const getThumbEl = (ctx) => ctx.getById(getThumbId(ctx));
-function getAngle(controlEl, point, angularOffset) {
-	const angle = require_rect_utils.getPointAngle(require_rect_utils.createRect(controlEl.getBoundingClientRect()), point);
+function mirrorAngle(angle) {
+	return (360 - angle) % 360;
+}
+function getAngle(controlEl, point, angularOffset, dir) {
+	let angle = require_rect_utils.getPointAngle(require_rect_utils.createRect(controlEl.getBoundingClientRect()), point);
 	if (angularOffset != null) return angle - angularOffset;
+	if (dir === "rtl") angle = mirrorAngle(angle);
 	return angle;
 }
+function getPointerValue(controlEl, point, angularOffset, value, dir) {
+	if (angularOffset == null) return getAngle(controlEl, point, null, dir);
+	const angle = getAngle(controlEl, point);
+	const clickAngle = value + angularOffset;
+	return dir === "rtl" ? value + clickAngle - angle : angle - angularOffset;
+}
+function getDisplayAngle(value, dir) {
+	return dir === "rtl" ? mirrorAngle(value) : value;
+}
 function clampAngle(degree) {
 	return Math.min(Math.max(degree, 0), 359);
 }
@@ -43,6 +56,8 @@ function connect(service, normalize) {
 	const dragging = state.matches("dragging");
 	const value = context.get("value");
 	const valueAsDegree = computed("valueAsDegree");
+	const dir = prop("dir");
+	const displayAngle = getDisplayAngle(value, dir);
 	const disabled = prop("disabled");
 	const invalid = prop("invalid");
 	const readOnly = prop("readOnly");
@@ -63,12 +78,13 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.root.attrs,
 				id: getRootId(scope),
+				dir: prop("dir"),
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-invalid": require_dom_query.dataAttr(invalid),
 				"data-readonly": require_dom_query.dataAttr(readOnly),
 				style: {
 					"--value": value,
-					"--angle": valueAsDegree
+					"--angle": `${displayAngle}deg`
 				}
 			});
 		},
@@ -77,6 +93,7 @@ function connect(service, normalize) {
 				...parts.label.attrs,
 				id: getLabelId(scope),
 				htmlFor: getHiddenInputId(scope),
+				dir: prop("dir"),
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-invalid": require_dom_query.dataAttr(invalid),
 				"data-readonly": require_dom_query.dataAttr(readOnly),
@@ -92,7 +109,8 @@ function connect(service, normalize) {
 				type: "hidden",
 				value,
 				name: prop("name"),
-				id: getHiddenInputId(scope)
+				id: getHiddenInputId(scope),
+				dir: prop("dir")
 			});
 		},
 		getControlProps() {
@@ -100,6 +118,7 @@ function connect(service, normalize) {
 				...parts.control.attrs,
 				role: "presentation",
 				id: getControlId(scope),
+				dir: prop("dir"),
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-invalid": require_dom_query.dataAttr(invalid),
 				"data-readonly": require_dom_query.dataAttr(readOnly),
@@ -132,6 +151,7 @@ function connect(service, normalize) {
 				...parts.thumb.attrs,
 				id: getThumbId(scope),
 				role: "slider",
+				dir: prop("dir"),
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledBy ?? getLabelId(scope),
 				"aria-valuemax": 360,
@@ -150,32 +170,44 @@ function connect(service, normalize) {
 				onKeyDown(event) {
 					if (!interactive) return;
 					const step = require_dom_query.getEventStep(event) * prop("step");
-					switch (event.key) {
-						case "ArrowLeft":
-						case "ArrowUp":
-							event.preventDefault();
+					const exec = {
+						ArrowLeft() {
+							send({
+								type: "THUMB.ARROW_DEC",
+								step
+							});
+						},
+						ArrowUp() {
 							send({
 								type: "THUMB.ARROW_DEC",
 								step
 							});
-							break;
-						case "ArrowRight":
-						case "ArrowDown":
-							event.preventDefault();
+						},
+						ArrowRight() {
 							send({
 								type: "THUMB.ARROW_INC",
 								step
 							});
-							break;
-						case "Home":
-							event.preventDefault();
+						},
+						ArrowDown() {
+							send({
+								type: "THUMB.ARROW_INC",
+								step
+							});
+						},
+						Home() {
 							send({ type: "THUMB.HOME" });
-							break;
-						case "End":
-							event.preventDefault();
+						},
+						End() {
 							send({ type: "THUMB.END" });
-							break;
-						default: break;
+						}
+					}[require_dom_query.getEventKey(event, {
+						dir: prop("dir"),
+						orientation: "horizontal"
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
 					}
 				},
 				style: { rotate: `var(--angle)` }
@@ -184,25 +216,32 @@ function connect(service, normalize) {
 		getValueTextProps() {
 			return normalize.element({
 				...parts.valueText.attrs,
-				id: getValueTextId(scope)
+				id: getValueTextId(scope),
+				dir: prop("dir")
 			});
 		},
 		getMarkerGroupProps() {
-			return normalize.element({ ...parts.markerGroup.attrs });
+			return normalize.element({
+				...parts.markerGroup.attrs,
+				dir: prop("dir")
+			});
 		},
 		getMarkerProps(props) {
 			let markerState;
 			if (props.value < value) markerState = "under-value";
 			else if (props.value > value) markerState = "over-value";
 			else markerState = "at-value";
+			const markerDisplayAngle = getDisplayAngle(props.value, dir);
 			return normalize.element({
 				...parts.marker.attrs,
+				dir: prop("dir"),
 				"data-value": props.value,
 				"data-state": markerState,
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				style: {
 					"--marker-value": props.value,
-					rotate: `calc(var(--marker-value) * 1deg)`
+					"--marker-display-value": markerDisplayAngle,
+					rotate: `calc(var(--marker-display-value) * 1deg)`
 				}
 			});
 		}
@@ -313,7 +352,8 @@ const machine = require_core.createMachine({
 				const controlEl = getControlEl(scope);
 				if (!controlEl) return;
 				const angularOffset = refs.get("thumbDragOffset");
-				const deg = getAngle(controlEl, event.point, angularOffset);
+				const value = context.get("value");
+				const deg = getPointerValue(controlEl, event.point, angularOffset, value, prop("dir"));
 				context.set("value", constrainAngle(deg, prop("step")));
 			},
 			setValueToMin({ context }) {

package/dist/machines/angle-slider/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-B24gMT
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/angle-slider/angle-slider.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "track" | "thumb" | "valueText" | "markerGroup" | "marker">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "control" | "markerGroup" | "marker">;
 //#endregion
 //#region src/machines/angle-slider/angle-slider.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/angle-slider/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DUM9rz
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/angle-slider/angle-slider.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "track" | "thumb" | "valueText" | "markerGroup" | "marker">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "control" | "markerGroup" | "marker">;
 //#endregion
 //#region src/machines/angle-slider/angle-slider.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/angle-slider/index.mjs

@@ -1,5 +1,5 @@
 import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
-import { E as trackPointerMove, St as isLeftClick, W as raf, ct as setElementValue, gt as getNativeEvent, mt as getEventStep, pt as getEventPoint, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
+import { E as trackPointerMove, St as isLeftClick, W as raf, ct as setElementValue, ft as getEventKey, gt as getNativeEvent, mt as getEventStep, pt as getEventPoint, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
 import { B as snapValueToStep, u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
 import { a as createMachine } from "../../core-Ci9Yu6QI.mjs";
 import { R as createRect, q as getPointAngle } from "../../rect-utils-B5xqFvKC.mjs";
@@ -18,11 +18,24 @@ const getLabelId = (ctx) => ctx.ids?.label ?? `angle-slider:${ctx.id}:label`;
 const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 const getThumbEl = (ctx) => ctx.getById(getThumbId(ctx));
-function getAngle(controlEl, point, angularOffset) {
-	const angle = getPointAngle(createRect(controlEl.getBoundingClientRect()), point);
+function mirrorAngle(angle) {
+	return (360 - angle) % 360;
+}
+function getAngle(controlEl, point, angularOffset, dir) {
+	let angle = getPointAngle(createRect(controlEl.getBoundingClientRect()), point);
 	if (angularOffset != null) return angle - angularOffset;
+	if (dir === "rtl") angle = mirrorAngle(angle);
 	return angle;
 }
+function getPointerValue(controlEl, point, angularOffset, value, dir) {
+	if (angularOffset == null) return getAngle(controlEl, point, null, dir);
+	const angle = getAngle(controlEl, point);
+	const clickAngle = value + angularOffset;
+	return dir === "rtl" ? value + clickAngle - angle : angle - angularOffset;
+}
+function getDisplayAngle(value, dir) {
+	return dir === "rtl" ? mirrorAngle(value) : value;
+}
 function clampAngle(degree) {
 	return Math.min(Math.max(degree, 0), 359);
 }
@@ -42,6 +55,8 @@ function connect(service, normalize) {
 	const dragging = state.matches("dragging");
 	const value = context.get("value");
 	const valueAsDegree = computed("valueAsDegree");
+	const dir = prop("dir");
+	const displayAngle = getDisplayAngle(value, dir);
 	const disabled = prop("disabled");
 	const invalid = prop("invalid");
 	const readOnly = prop("readOnly");
@@ -62,12 +77,13 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.root.attrs,
 				id: getRootId(scope),
+				dir: prop("dir"),
 				"data-disabled": dataAttr(disabled),
 				"data-invalid": dataAttr(invalid),
 				"data-readonly": dataAttr(readOnly),
 				style: {
 					"--value": value,
-					"--angle": valueAsDegree
+					"--angle": `${displayAngle}deg`
 				}
 			});
 		},
@@ -76,6 +92,7 @@ function connect(service, normalize) {
 				...parts.label.attrs,
 				id: getLabelId(scope),
 				htmlFor: getHiddenInputId(scope),
+				dir: prop("dir"),
 				"data-disabled": dataAttr(disabled),
 				"data-invalid": dataAttr(invalid),
 				"data-readonly": dataAttr(readOnly),
@@ -91,7 +108,8 @@ function connect(service, normalize) {
 				type: "hidden",
 				value,
 				name: prop("name"),
-				id: getHiddenInputId(scope)
+				id: getHiddenInputId(scope),
+				dir: prop("dir")
 			});
 		},
 		getControlProps() {
@@ -99,6 +117,7 @@ function connect(service, normalize) {
 				...parts.control.attrs,
 				role: "presentation",
 				id: getControlId(scope),
+				dir: prop("dir"),
 				"data-disabled": dataAttr(disabled),
 				"data-invalid": dataAttr(invalid),
 				"data-readonly": dataAttr(readOnly),
@@ -131,6 +150,7 @@ function connect(service, normalize) {
 				...parts.thumb.attrs,
 				id: getThumbId(scope),
 				role: "slider",
+				dir: prop("dir"),
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledBy ?? getLabelId(scope),
 				"aria-valuemax": 360,
@@ -149,32 +169,44 @@ function connect(service, normalize) {
 				onKeyDown(event) {
 					if (!interactive) return;
 					const step = getEventStep(event) * prop("step");
-					switch (event.key) {
-						case "ArrowLeft":
-						case "ArrowUp":
-							event.preventDefault();
+					const exec = {
+						ArrowLeft() {
+							send({
+								type: "THUMB.ARROW_DEC",
+								step
+							});
+						},
+						ArrowUp() {
 							send({
 								type: "THUMB.ARROW_DEC",
 								step
 							});
-							break;
-						case "ArrowRight":
-						case "ArrowDown":
-							event.preventDefault();
+						},
+						ArrowRight() {
 							send({
 								type: "THUMB.ARROW_INC",
 								step
 							});
-							break;
-						case "Home":
-							event.preventDefault();
+						},
+						ArrowDown() {
+							send({
+								type: "THUMB.ARROW_INC",
+								step
+							});
+						},
+						Home() {
 							send({ type: "THUMB.HOME" });
-							break;
-						case "End":
-							event.preventDefault();
+						},
+						End() {
 							send({ type: "THUMB.END" });
-							break;
-						default: break;
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation: "horizontal"
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
 					}
 				},
 				style: { rotate: `var(--angle)` }
@@ -183,25 +215,32 @@ function connect(service, normalize) {
 		getValueTextProps() {
 			return normalize.element({
 				...parts.valueText.attrs,
-				id: getValueTextId(scope)
+				id: getValueTextId(scope),
+				dir: prop("dir")
 			});
 		},
 		getMarkerGroupProps() {
-			return normalize.element({ ...parts.markerGroup.attrs });
+			return normalize.element({
+				...parts.markerGroup.attrs,
+				dir: prop("dir")
+			});
 		},
 		getMarkerProps(props) {
 			let markerState;
 			if (props.value < value) markerState = "under-value";
 			else if (props.value > value) markerState = "over-value";
 			else markerState = "at-value";
+			const markerDisplayAngle = getDisplayAngle(props.value, dir);
 			return normalize.element({
 				...parts.marker.attrs,
+				dir: prop("dir"),
 				"data-value": props.value,
 				"data-state": markerState,
 				"data-disabled": dataAttr(disabled),
 				style: {
 					"--marker-value": props.value,
-					rotate: `calc(var(--marker-value) * 1deg)`
+					"--marker-display-value": markerDisplayAngle,
+					rotate: `calc(var(--marker-display-value) * 1deg)`
 				}
 			});
 		}
@@ -312,7 +351,8 @@ const machine = createMachine({
 				const controlEl = getControlEl(scope);
 				if (!controlEl) return;
 				const angularOffset = refs.get("thumbDragOffset");
-				const deg = getAngle(controlEl, event.point, angularOffset);
+				const value = context.get("value");
+				const deg = getPointerValue(controlEl, event.point, angularOffset, value, prop("dir"));
 				context.set("value", constrainAngle(deg, prop("step")));
 			},
 			setValueToMin({ context }) {

package/dist/machines/carousel/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-B24gMT
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/carousel/carousel.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "indicator" | "item" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
+declare const anatomy: AnatomyInstance<"root" | "control" | "item" | "indicator" | "nextTrigger" | "prevTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
 //#endregion
 //#region src/machines/carousel/carousel.types.d.ts
 interface PageChangeDetails {

package/dist/machines/carousel/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DUM9rz
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/carousel/carousel.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "indicator" | "item" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
+declare const anatomy: AnatomyInstance<"root" | "control" | "item" | "indicator" | "nextTrigger" | "prevTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
 //#endregion
 //#region src/machines/carousel/carousel.types.d.ts
 interface PageChangeDetails {

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

@@ -6,6 +6,7 @@ const require_collection = require("../../collection-BBgC8xCb.cjs");
 const require_core = require("../../core-DwdPztGA.cjs");
 require("../../interact-outside-Bg-QSXqp.cjs");
 const require_dismissable = require("../../dismissable-DxjbwsOf.cjs");
+const require_focus_visible = require("../../focus-visible-Co_9bW09.cjs");
 const require_popper = require("../../popper-viCrafLC.cjs");
 const require_rect_utils = require("../../rect-utils-D3RkAaHK.cjs");
 const require_create_props = require("../../create-props-DP39rHnH.cjs");
@@ -69,7 +70,7 @@ function connect(service, normalize) {
 	const disabled = prop("disabled") || context.get("fieldsetDisabled");
 	const interactive = computed("isInteractive");
 	const valueAsString = computed("valueAsString");
-	const highlightedItem = context.get("highlightedItem");
+	const highlightedItems = context.get("highlightedItems");
 	const selectedItems = context.get("selectedItems");
 	const popperStyles = require_popper.getPlacementStyles({
 		...prop("positioning"),
@@ -94,6 +95,7 @@ function connect(service, normalize) {
 		};
 	};
 	const hasSelectedItems = value.length > 0;
+	const empty = value.length === 0;
 	return {
 		collection,
 		open,
@@ -102,9 +104,10 @@ function connect(service, normalize) {
 		disabled,
 		value,
 		highlightedValue,
-		highlightedItem,
+		highlightedItems,
 		selectedItems,
 		hasSelectedItems,
+		empty,
 		valueAsString,
 		reposition(options = {}) {
 			send({
@@ -119,12 +122,15 @@ function connect(service, normalize) {
 			if (nextOpen === open) return;
 			send({ type: nextOpen ? "OPEN" : "CLOSE" });
 		},
-		highlightValue(value) {
+		setHighlightValue(value) {
 			send({
 				type: "HIGHLIGHTED_VALUE.SET",
 				value
 			});
 		},
+		clearHighlightValue() {
+			send({ type: "HIGHLIGHTED_VALUE.CLEAR" });
+		},
 		setValue(value) {
 			send({
 				type: "VALUE.SET",
@@ -178,7 +184,7 @@ function connect(service, normalize) {
 				dir: prop("dir"),
 				id: dom.getControlId(scope),
 				"data-disabled": require_dom_query.dataAttr(disabled),
-				"data-focused": require_dom_query.dataAttr(focused),
+				"data-focus": require_dom_query.dataAttr(focused),
 				"data-readonly": require_dom_query.dataAttr(prop("readOnly")),
 				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
 				"data-state": open ? "open" : "closed"
@@ -199,8 +205,9 @@ function connect(service, normalize) {
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-readonly": require_dom_query.dataAttr(prop("readOnly")),
 				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
-				"data-focused": require_dom_query.dataAttr(focused),
+				"data-focus": require_dom_query.dataAttr(focused),
 				"data-placement": currentPlacement,
+				"data-placeholder-shown": require_dom_query.dataAttr(!hasSelectedItems),
 				disabled,
 				onClick(event) {
 					if (event.defaultPrevented) return;
@@ -448,6 +455,15 @@ function connect(service, normalize) {
 				hidden: !itemState.selected
 			});
 		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
+				"data-focus": require_dom_query.dataAttr(focused)
+			});
+		},
 		getHiddenInputProps() {
 			const defaultValue = context.hash("value");
 			return normalize.input({
@@ -575,7 +591,7 @@ const machine = require_core.createMachine({
 				const value = prop("highlightedValue") ?? prop("defaultHighlightedValue") ?? null;
 				return { defaultValue: value ? prop("collection").getIndexPath(value) : [] };
 			}),
-			highlightedItem: bindable(() => ({ defaultValue: null })),
+			highlightedItems: bindable(() => ({ defaultValue: [] })),
 			selectedItems: bindable(() => ({ defaultValue: [] })),
 			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
 			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
@@ -615,6 +631,7 @@ const machine = require_core.createMachine({
 		"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"] }
 	},
@@ -749,6 +766,7 @@ const machine = require_core.createMachine({
 			exit: ["clearHighlightedValue", "scrollContentToTop"],
 			effects: [
 				"trackDismissableElement",
+				"trackFocusVisible",
 				"computePlacement",
 				"scrollToHighlightedItems"
 			],
@@ -900,8 +918,8 @@ const machine = require_core.createMachine({
 			},
 			shouldCloseOnSelectHighlighted: ({ prop, context }) => {
 				const collection = prop("collection");
-				const node = context.get("highlightedItem");
-				return prop("closeOnSelect") && !collection.isBranchNode(node);
+				const node = require_utils.last(context.get("highlightedItems"));
+				return prop("closeOnSelect") && node != null && !collection.isBranchNode(node);
 			},
 			canSelectItem: ({ prop, event }) => {
 				const collection = prop("collection");
@@ -973,6 +991,9 @@ const machine = require_core.createMachine({
 					}
 				});
 			},
+			trackFocusVisible({ scope }) {
+				return require_focus_visible.trackFocusVisible({ root: scope.getRootNode?.() });
+			},
 			trackDismissableElement({ scope, send, prop }) {
 				const contentEl = () => dom.getContentEl(scope);
 				let restoreFocus = true;
@@ -1004,13 +1025,13 @@ const machine = require_core.createMachine({
 					}
 				});
 			},
-			scrollToHighlightedItems({ context, prop, scope, event }) {
+			scrollToHighlightedItems({ context, prop, scope }) {
 				let cleanups = [];
 				const exec = (immediate) => {
 					const highlightedValue = context.get("highlightedValue");
 					const highlightedIndexPath = context.get("highlightedIndexPath");
 					if (!highlightedIndexPath.length) return;
-					if (event.current().type.includes("POINTER")) return;
+					if (require_focus_visible.getInteractionModality() === "pointer") return;
 					dom.getListEls(scope).forEach((listEl, index) => {
 						const itemPath = highlightedIndexPath.slice(0, index + 1);
 						const itemEl = dom.getItemEl(scope, highlightedValue.toString());
@@ -1033,7 +1054,10 @@ const machine = require_core.createMachine({
 						cleanups.push(raf_cleanup);
 					});
 				};
-				require_dom_query.raf(() => exec(true));
+				require_dom_query.raf(() => {
+					require_focus_visible.setInteractionModality("virtual");
+					exec(true);
+				});
 				const rafCleanup = require_dom_query.raf(() => exec(true));
 				cleanups.push(rafCleanup);
 				const observerCleanup = require_dom_query.observeAttributes(dom.getContentEl(scope), {
@@ -1214,11 +1238,17 @@ const machine = require_core.createMachine({
 					dom.getTriggerEl(scope)?.focus({ preventScroll: true });
 				});
 			},
-			invokeOnOpen({ prop }) {
-				prop("onOpenChange")?.({ open: true });
+			invokeOnOpen({ prop, context }) {
+				prop("onOpenChange")?.({
+					open: true,
+					value: context.get("value")
+				});
 			},
-			invokeOnClose({ prop }) {
-				prop("onOpenChange")?.({ open: false });
+			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" });
@@ -1304,16 +1334,16 @@ const set = {
 	highlightedValue({ context, prop }, value) {
 		const collection = prop("collection");
 		context.set("highlightedValue", value);
-		const highlightedIndexPath = value == null ? [] : collection.getIndexPath(value);
+		const highlightedIndexPath = (value == null ? [] : collection.getIndexPath(value)) ?? [];
 		context.set("highlightedIndexPath", highlightedIndexPath);
-		const highlightedItem = highlightedIndexPath.map((_, index) => {
+		const highlightedItems = highlightedIndexPath.map((_, index) => {
 			const partialPath = highlightedIndexPath.slice(0, index + 1);
 			return collection.at(partialPath);
 		});
-		context.set("highlightedItem", highlightedItem);
+		context.set("highlightedItems", highlightedItems);
 		prop("onHighlightChange")?.({
-			value,
-			items: highlightedItem
+			highlightedValue: value,
+			highlightedItems
 		});
 	}
 };