@sprawlify/primitives 0.0.111 → 0.0.113

package/dist/machines/cascade-select/index.d.cts

@@ -8,8 +8,8 @@ import { c as Placement, d as PositioningOptions } from "../../types-CZAtqGqH.cj
 import { a as Point } from "../../types-CLXYEgfm.cjs";
 
 //#region src/machines/cascade-select/cascade-select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "valueText" | "trigger" | "item" | "itemIndicator" | "content" | "positioner" | "itemText" | "list" | "clearTrigger">;
-declare const parts: Record<"root" | "label" | "control" | "indicator" | "valueText" | "trigger" | "item" | "itemIndicator" | "content" | "positioner" | "itemText" | "list" | "clearTrigger", AnatomyPart>;
+declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "control" | "clearTrigger" | "content" | "item" | "indicator" | "itemText" | "trigger" | "positioner" | "list" | "itemIndicator">;
+declare const parts: Record<"root" | "label" | "valueText" | "control" | "clearTrigger" | "content" | "item" | "indicator" | "itemText" | "trigger" | "positioner" | "list" | "itemIndicator", AnatomyPart>;
 //#endregion
 //#region src/machines/cascade-select/cascade-select.collection.d.ts
 declare const collection: {
@@ -23,11 +23,12 @@ interface ValueChangeDetails<T = TreeNode> {
   items: T[][];
 }
 interface HighlightChangeDetails<T = TreeNode> {
-  value: string[];
-  items: T[];
+  highlightedValue: string[];
+  highlightedItems: T[];
 }
 interface OpenChangeDetails {
   open: boolean;
+  value: string[][];
 }
 interface ScrollToIndexDetails {
   index: number;
@@ -44,8 +45,8 @@ type ElementIds = Partial<{
   positioner: string;
   content: string;
   hiddenInput: string;
-  list(value: number): string;
-  item(value: string): string;
+  list(valuePath: string): string;
+  item(valuePath: string): string;
 }>;
 interface CascadeSelectProps<T = any> extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
   collection?: TreeCollection<T> | undefined;
@@ -86,7 +87,7 @@ interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
     graceArea: Point[] | null;
     valueIndexPath: IndexPath[];
     highlightedIndexPath: IndexPath;
-    highlightedItem: T[] | null;
+    highlightedItems: T[];
     selectedItems: T[][];
   };
   computed: {
@@ -122,16 +123,17 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   multiple: boolean;
   disabled: boolean;
   highlightedValue: string[];
-  highlightedItem: V[] | null;
+  highlightedItems: V[];
   selectedItems: V[][];
   hasSelectedItems: boolean;
+  empty: boolean;
   value: string[][];
   valueAsString: string;
   focus(): void;
-  focus(): void;
   reposition(options?: Partial<PositioningOptions>): void;
   setOpen(open: boolean): void;
-  highlightValue(value: string): void;
+  setHighlightValue(value: string | string[]): void;
+  clearHighlightValue(): void;
   selectValue(value: string[]): void;
   setValue(value: string[][]): void;
   clearValue(value?: string[]): void;
@@ -148,6 +150,7 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   getItemProps(props: ItemProps<V>): T["element"];
   getItemTextProps(props: ItemProps<V>): T["element"];
   getItemIndicatorProps(props: ItemProps<V>): T["element"];
+  getValueTextProps(): T["element"];
   getHiddenInputProps(): T["input"];
 }
 //#endregion

package/dist/machines/cascade-select/index.d.mts

@@ -8,8 +8,8 @@ import { p as PositioningOptions, u as Placement } from "../../index-fMh0VDkR.mj
 import { a as Point } from "../../types-DU764tY_.mjs";
 
 //#region src/machines/cascade-select/cascade-select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "valueText" | "trigger" | "item" | "itemIndicator" | "content" | "positioner" | "itemText" | "list" | "clearTrigger">;
-declare const parts: Record<"root" | "label" | "control" | "indicator" | "valueText" | "trigger" | "item" | "itemIndicator" | "content" | "positioner" | "itemText" | "list" | "clearTrigger", AnatomyPart>;
+declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "control" | "clearTrigger" | "content" | "item" | "indicator" | "itemText" | "trigger" | "positioner" | "list" | "itemIndicator">;
+declare const parts: Record<"root" | "label" | "valueText" | "control" | "clearTrigger" | "content" | "item" | "indicator" | "itemText" | "trigger" | "positioner" | "list" | "itemIndicator", AnatomyPart>;
 //#endregion
 //#region src/machines/cascade-select/cascade-select.collection.d.ts
 declare const collection: {
@@ -23,11 +23,12 @@ interface ValueChangeDetails<T = TreeNode> {
   items: T[][];
 }
 interface HighlightChangeDetails<T = TreeNode> {
-  value: string[];
-  items: T[];
+  highlightedValue: string[];
+  highlightedItems: T[];
 }
 interface OpenChangeDetails {
   open: boolean;
+  value: string[][];
 }
 interface ScrollToIndexDetails {
   index: number;
@@ -44,8 +45,8 @@ type ElementIds = Partial<{
   positioner: string;
   content: string;
   hiddenInput: string;
-  list(value: number): string;
-  item(value: string): string;
+  list(valuePath: string): string;
+  item(valuePath: string): string;
 }>;
 interface CascadeSelectProps<T = any> extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
   collection?: TreeCollection<T> | undefined;
@@ -86,7 +87,7 @@ interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
     graceArea: Point[] | null;
     valueIndexPath: IndexPath[];
     highlightedIndexPath: IndexPath;
-    highlightedItem: T[] | null;
+    highlightedItems: T[];
     selectedItems: T[][];
   };
   computed: {
@@ -122,16 +123,17 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   multiple: boolean;
   disabled: boolean;
   highlightedValue: string[];
-  highlightedItem: V[] | null;
+  highlightedItems: V[];
   selectedItems: V[][];
   hasSelectedItems: boolean;
+  empty: boolean;
   value: string[][];
   valueAsString: string;
   focus(): void;
-  focus(): void;
   reposition(options?: Partial<PositioningOptions>): void;
   setOpen(open: boolean): void;
-  highlightValue(value: string): void;
+  setHighlightValue(value: string | string[]): void;
+  clearHighlightValue(): void;
   selectValue(value: string[]): void;
   setValue(value: string[][]): void;
   clearValue(value?: string[]): void;
@@ -148,6 +150,7 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   getItemProps(props: ItemProps<V>): T["element"];
   getItemTextProps(props: ItemProps<V>): T["element"];
   getItemIndicatorProps(props: ItemProps<V>): T["element"];
+  getValueTextProps(): T["element"];
   getHiddenInputProps(): T["input"];
 }
 //#endregion

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

@@ -5,6 +5,7 @@ import { t as TreeCollection } from "../../collection-DgzidRvr.mjs";
 import { a as createMachine, i as createGuards } from "../../core-Ci9Yu6QI.mjs";
 import "../../interact-outside-Ba50N1a5.mjs";
 import { n as trackDismissableElement } from "../../dismissable-B9k5K6f9.mjs";
+import { a as setInteractionModality, o as trackFocusVisible, t as getInteractionModality } from "../../focus-visible-BuLf8M9F.mjs";
 import { n as getPlacement, t as getPlacementStyles } from "../../popper-BlgbmdAn.mjs";
 import { B as getRectCorners, D as closestSideToPoint, L as createPoint, R as createRect, i as isPointInPolygon } from "../../rect-utils-B5xqFvKC.mjs";
 import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
@@ -68,7 +69,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 = getPlacementStyles({
 		...prop("positioning"),
@@ -93,6 +94,7 @@ function connect(service, normalize) {
 		};
 	};
 	const hasSelectedItems = value.length > 0;
+	const empty = value.length === 0;
 	return {
 		collection,
 		open,
@@ -101,9 +103,10 @@ function connect(service, normalize) {
 		disabled,
 		value,
 		highlightedValue,
-		highlightedItem,
+		highlightedItems,
 		selectedItems,
 		hasSelectedItems,
+		empty,
 		valueAsString,
 		reposition(options = {}) {
 			send({
@@ -118,12 +121,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",
@@ -177,7 +183,7 @@ function connect(service, normalize) {
 				dir: prop("dir"),
 				id: dom.getControlId(scope),
 				"data-disabled": dataAttr(disabled),
-				"data-focused": dataAttr(focused),
+				"data-focus": dataAttr(focused),
 				"data-readonly": dataAttr(prop("readOnly")),
 				"data-invalid": dataAttr(prop("invalid")),
 				"data-state": open ? "open" : "closed"
@@ -198,8 +204,9 @@ function connect(service, normalize) {
 				"data-disabled": dataAttr(disabled),
 				"data-readonly": dataAttr(prop("readOnly")),
 				"data-invalid": dataAttr(prop("invalid")),
-				"data-focused": dataAttr(focused),
+				"data-focus": dataAttr(focused),
 				"data-placement": currentPlacement,
+				"data-placeholder-shown": dataAttr(!hasSelectedItems),
 				disabled,
 				onClick(event) {
 					if (event.defaultPrevented) return;
@@ -447,6 +454,15 @@ function connect(service, normalize) {
 				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({
@@ -574,7 +590,7 @@ const machine = 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 })),
@@ -614,6 +630,7 @@ const machine = 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"] }
 	},
@@ -748,6 +765,7 @@ const machine = createMachine({
 			exit: ["clearHighlightedValue", "scrollContentToTop"],
 			effects: [
 				"trackDismissableElement",
+				"trackFocusVisible",
 				"computePlacement",
 				"scrollToHighlightedItems"
 			],
@@ -899,8 +917,8 @@ const machine = createMachine({
 			},
 			shouldCloseOnSelectHighlighted: ({ prop, context }) => {
 				const collection = prop("collection");
-				const node = context.get("highlightedItem");
-				return prop("closeOnSelect") && !collection.isBranchNode(node);
+				const node = last(context.get("highlightedItems"));
+				return prop("closeOnSelect") && node != null && !collection.isBranchNode(node);
 			},
 			canSelectItem: ({ prop, event }) => {
 				const collection = prop("collection");
@@ -972,6 +990,9 @@ const machine = createMachine({
 					}
 				});
 			},
+			trackFocusVisible({ scope }) {
+				return trackFocusVisible({ root: scope.getRootNode?.() });
+			},
 			trackDismissableElement({ scope, send, prop }) {
 				const contentEl = () => dom.getContentEl(scope);
 				let restoreFocus = true;
@@ -1003,13 +1024,13 @@ const machine = 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 (getInteractionModality() === "pointer") return;
 					dom.getListEls(scope).forEach((listEl, index) => {
 						const itemPath = highlightedIndexPath.slice(0, index + 1);
 						const itemEl = dom.getItemEl(scope, highlightedValue.toString());
@@ -1032,7 +1053,10 @@ const machine = createMachine({
 						cleanups.push(raf_cleanup);
 					});
 				};
-				raf(() => exec(true));
+				raf(() => {
+					setInteractionModality("virtual");
+					exec(true);
+				});
 				const rafCleanup = raf(() => exec(true));
 				cleanups.push(rafCleanup);
 				const observerCleanup = observeAttributes(dom.getContentEl(scope), {
@@ -1213,11 +1237,17 @@ const machine = 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" });
@@ -1303,16 +1333,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
 		});
 	}
 };

package/dist/machines/checkbox/index.cjs

@@ -3,7 +3,7 @@ const require_create_anatomy = require("../../create-anatomy-BnwEmNnc.cjs");
 const require_dom_query = require("../../dom-query-BUO7rGsg.cjs");
 const require_utils = require("../../utils-ByNiZU8f.cjs");
 const require_core = require("../../core-DwdPztGA.cjs");
-const require_focus_visible = require("../../focus-visible-JdJXqMic.cjs");
+const require_focus_visible = require("../../focus-visible-Co_9bW09.cjs");
 const require_create_props = require("../../create-props-DP39rHnH.cjs");
 //#region src/machines/checkbox/checkbox.anatomy.ts
 const anatomy = require_create_anatomy.createAnatomy("checkbox").parts("root", "label", "control", "indicator");

package/dist/machines/checkbox/index.mjs

@@ -2,7 +2,7 @@ import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
 import { T as trackPress, a as visuallyHiddenStyle, ht as getEventTarget, lt as trackFormControl, rt as dispatchInputCheckedEvent, st as setElementChecked, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
 import { u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
 import { a as createMachine, i as createGuards } from "../../core-Ci9Yu6QI.mjs";
-import { a as trackFocusVisible, n as isFocusVisible } from "../../focus-visible-GXKbbuiq.mjs";
+import { o as trackFocusVisible, r as isFocusVisible } from "../../focus-visible-BuLf8M9F.mjs";
 import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
 //#region src/machines/checkbox/checkbox.anatomy.ts
 const anatomy = createAnatomy("checkbox").parts("root", "label", "control", "indicator");

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

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-B24gMTKq.cjs";
 import { b as NormalizeProps, g as RequiredBy, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/clipboard/clipboard.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "trigger" | "input">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "input" | "indicator" | "trigger">;
 //#endregion
 //#region src/machines/clipboard/clipboard.types.d.ts
 interface CopyStatusDetails {

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

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-DUM9rzfD.mjs";
 import { b as NormalizeProps, g as RequiredBy, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/clipboard/clipboard.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "trigger" | "input">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "input" | "indicator" | "trigger">;
 //#endregion
 //#region src/machines/clipboard/clipboard.types.d.ts
 interface CopyStatusDetails {

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

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-B24gMTKq.cjs";
 import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/collapsible/collapsible.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "trigger" | "content">;
+declare const anatomy: AnatomyInstance<"root" | "content" | "indicator" | "trigger">;
 //#endregion
 //#region src/machines/collapsible/collapsible.types.d.ts
 interface OpenChangeDetails {

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

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-DUM9rzfD.mjs";
 import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/collapsible/collapsible.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "trigger" | "content">;
+declare const anatomy: AnatomyInstance<"root" | "content" | "indicator" | "trigger">;
 //#endregion
 //#region src/machines/collapsible/collapsible.types.d.ts
 interface OpenChangeDetails {

package/dist/machines/color-picker/index.d.cts

@@ -6,7 +6,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { d as PositioningOptions } from "../../types-CZAtqGqH.cjs";
 
 //#region src/machines/color-picker/color-picker.anatomy.d.ts
-declare const anatomy: Anatomy<"root" | "label" | "control" | "valueText" | "trigger" | "area" | "content" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: Anatomy<"root" | "label" | "valueText" | "control" | "area" | "content" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 //#endregion
 //#region src/machines/color-picker/color-picker.types.d.ts
 type ExtendedColorChannel = ColorChannel | "hex" | "css";

package/dist/machines/color-picker/index.d.mts

@@ -6,7 +6,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { p as PositioningOptions } from "../../index-fMh0VDkR.mjs";
 
 //#region src/machines/color-picker/color-picker.anatomy.d.ts
-declare const anatomy: Anatomy<"root" | "label" | "control" | "valueText" | "trigger" | "area" | "content" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: Anatomy<"root" | "label" | "valueText" | "control" | "area" | "content" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 //#endregion
 //#region src/machines/color-picker/color-picker.types.d.ts
 type ExtendedColorChannel = ColorChannel | "hex" | "css";

package/dist/machines/combobox/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_create_props = require("../../create-props-DP39rHnH.cjs");
 //#region src/machines/combobox/combobox.anatomy.ts
@@ -45,8 +46,8 @@ const getItemEl = (ctx, value) => {
 };
 const focusInputEl = (ctx) => {
 	const inputEl = getInputEl(ctx);
-	if (ctx.isActiveElement(inputEl)) return;
-	inputEl?.focus({ preventScroll: true });
+	if (!ctx.isActiveElement(inputEl)) inputEl?.focus({ preventScroll: true });
+	require_dom_query.setCaretToEnd(inputEl);
 };
 const focusTriggerEl = (ctx) => {
 	const triggerEl = getTriggerEl(ctx);
@@ -73,12 +74,12 @@ function connect(service, normalize) {
 		placement: context.get("currentPlacement")
 	});
 	function getItemState(props) {
-		const disabled = collection.getItemDisabled(props.item);
+		const itemDisabled = collection.getItemDisabled(props.item);
 		const value = collection.getItemValue(props.item);
 		require_utils.ensure(value, () => `[sprawlify-js] No value found for item ${JSON.stringify(props.item)}`);
 		return {
 			value,
-			disabled: Boolean(disabled || disabled),
+			disabled: Boolean(disabled || itemDisabled),
 			highlighted: highlightedValue === value,
 			selected: context.get("value").includes(value)
 		};
@@ -358,7 +359,7 @@ function connect(service, normalize) {
 					if (!require_dom_query.isLeftClick(event)) return;
 					event.preventDefault();
 					queueMicrotask(() => {
-						getInputEl(scope)?.focus({ preventScroll: true });
+						focusInputEl(scope);
 					});
 				},
 				onKeyDown(event) {
@@ -580,7 +581,7 @@ const machine = createMachine({
 					const context = getContext();
 					const prevSelectedItems = context.get("selectedItems");
 					const collection = prop("collection");
-					const nextItems = value.map((v) => {
+					const nextItems = (prop("value") || value).map((v) => {
 						return prevSelectedItems.find((item) => collection.getItemValue(item) === v) || collection.find(v);
 					});
 					context.set("selectedItems", nextItems);
@@ -798,8 +799,7 @@ const machine = createMachine({
 				],
 				"INPUT.ARROW_UP": [
 					{
-						guard: "autoComplete",
-						target: "interacting",
+						guard: and("isOpenControlled", "autoComplete"),
 						actions: ["invokeOnOpen"]
 					},
 					{
@@ -808,7 +808,7 @@ const machine = createMachine({
 						actions: ["invokeOnOpen"]
 					},
 					{
-						target: "interacting",
+						guard: "isOpenControlled",
 						actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
 					},
 					{
@@ -830,6 +830,7 @@ const machine = createMachine({
 			tags: ["open", "focused"],
 			entry: ["setInitialFocus"],
 			effects: [
+				"trackFocusVisible",
 				"scrollToHighlightedItem",
 				"trackDismissableLayer",
 				"trackPlacement"
@@ -978,6 +979,7 @@ const machine = createMachine({
 		suggesting: {
 			tags: ["open", "focused"],
 			effects: [
+				"trackFocusVisible",
 				"trackDismissableLayer",
 				"scrollToHighlightedItem",
 				"trackPlacement"
@@ -1152,6 +1154,9 @@ const machine = createMachine({
 			hasCollectionItems: ({ prop }) => prop("collection").size > 0
 		},
 		effects: {
+			trackFocusVisible({ scope }) {
+				return require_focus_visible.trackFocusVisible({ root: scope.getRootNode?.() });
+			},
 			trackDismissableLayer({ send, prop, scope }) {
 				if (prop("disableLayer")) return;
 				const contentEl = () => getContentEl(scope);
@@ -1195,13 +1200,13 @@ const machine = createMachine({
 					}
 				});
 			},
-			scrollToHighlightedItem({ context, prop, scope, event }) {
+			scrollToHighlightedItem({ context, prop, scope }) {
 				const inputEl = getInputEl(scope);
 				let cleanups = [];
 				const exec = (immediate) => {
-					const pointer = event.current().type.includes("POINTER");
+					if (require_focus_visible.getInteractionModality() === "pointer") return;
 					const highlightedValue = context.get("highlightedValue");
-					if (pointer || !highlightedValue) return;
+					if (!highlightedValue) return;
 					const contentEl = getContentEl(scope);
 					const scrollToIndexFn = prop("scrollToIndexFn");
 					if (scrollToIndexFn) {
@@ -1221,7 +1226,10 @@ const machine = createMachine({
 					});
 					cleanups.push(raf_cleanup);
 				};
-				const rafCleanup = require_dom_query.raf(() => exec(true));
+				const rafCleanup = require_dom_query.raf(() => {
+					require_focus_visible.setInteractionModality("virtual");
+					exec(true);
+				});
 				cleanups.push(rafCleanup);
 				const observerCleanup = require_dom_query.observeAttributes(inputEl, {
 					attributes: ["aria-activedescendant"],

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

@@ -1,13 +1,13 @@
 import { n as AnatomyInstance } from "../../create-anatomy-9eFQs7lO.cjs";
 import { r as CollectionOptions, t as CollectionItem } from "../../types-D-7AMgSE.cjs";
-import { t as ListCollection } from "../../list-collection-Cjgbx_9l.cjs";
+import { t as ListCollection } from "../../list-collection-B_8BN0XB.cjs";
 import { p as Machine, u as EventObject, y as Service } from "../../types-B24gMTKq.cjs";
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-DzWGFhcS.cjs";
 import { c as Placement, d as PositioningOptions } from "../../types-CZAtqGqH.cjs";
 
 //#region src/machines/combobox/combobox.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "trigger" | "input" | "item" | "itemIndicator" | "itemGroup" | "content" | "positioner" | "itemText" | "list" | "clearTrigger" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "input" | "clearTrigger" | "content" | "item" | "itemText" | "trigger" | "positioner" | "list" | "itemIndicator" | "itemGroup" | "itemGroupLabel">;
 //#endregion
 //#region src/machines/combobox/combobox.collection.d.ts
 declare const collection: {

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

@@ -1,13 +1,13 @@
 import { n as AnatomyInstance } from "../../create-anatomy-BedZVdg0.mjs";
 import { r as CollectionOptions, t as CollectionItem } from "../../types-9uw8LHpE.mjs";
-import { t as ListCollection } from "../../list-collection-IF510iNl.mjs";
+import { t as ListCollection } from "../../list-collection-DkRA5LOq.mjs";
 import { p as Machine, u as EventObject, y as Service } from "../../types-DUM9rzfD.mjs";
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-CGNNiDyE.mjs";
 import { p as PositioningOptions, u as Placement } from "../../index-fMh0VDkR.mjs";
 
 //#region src/machines/combobox/combobox.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "trigger" | "input" | "item" | "itemIndicator" | "itemGroup" | "content" | "positioner" | "itemText" | "list" | "clearTrigger" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "input" | "clearTrigger" | "content" | "item" | "itemText" | "trigger" | "positioner" | "list" | "itemIndicator" | "itemGroup" | "itemGroupLabel">;
 //#endregion
 //#region src/machines/combobox/combobox.collection.d.ts
 declare const collection: {