@sprawlify/primitives 0.1.6 → 0.1.8

package/dist/machines/carousel/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
 import { $t as contains, C as queryAll, E as trackPointerMove, St as isLeftClick, W as raf, bn as ariaAttr, et as getTabbables, ft as getEventKey, ht as getEventTarget, m as resizeObserverBorderBox, tt as isFocusable, ut as addDomEvent, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
 import { At as remove, Et as nextIndex, Nt as uniq, Q as throttle, W as callAll, ct as isObject, g as clampValue, kt as prevIndex, n as ensureProps, pt as add, u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
-import { a as createMachine } from "../../core-Ci9Yu6QI.mjs";
+import { a as createMachine } from "../../core-CTtbW9qh.mjs";
 import { n as getScrollSnapPositions, t as findSnapPoint } from "../../scroll-snap-CdneVP31.mjs";
 import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
 //#region src/machines/carousel/carousel.anatomy.ts
@@ -37,22 +37,23 @@ function connect(service, normalize) {
 	const autoSize = prop("autoSize");
 	const pageSnapPoints = Array.from(context.get("pageSnapPoints"));
 	const page = context.get("page");
+	const activePage = pageSnapPoints.length ? clampValue(page, 0, pageSnapPoints.length - 1) : 0;
 	const slidesPerPage = prop("slidesPerPage");
 	const padding = prop("padding");
 	const translations = prop("translations");
 	return {
 		isPlaying,
 		isDragging,
-		page,
+		page: activePage,
 		pageSnapPoints,
 		canScrollNext,
 		canScrollPrev,
 		getProgress() {
-			return page / pageSnapPoints.length;
+			return activePage / pageSnapPoints.length;
 		},
 		getProgressText() {
 			const details = {
-				page: page + 1,
+				page: activePage + 1,
 				totalPages: pageSnapPoints.length
 			};
 			return translations.progressText?.(details) ?? "";
@@ -302,7 +303,7 @@ function connect(service, normalize) {
 				"data-orientation": prop("orientation"),
 				"data-index": props.index,
 				"data-readonly": dataAttr(props.readOnly),
-				"data-current": dataAttr(props.index === page),
+				"data-current": dataAttr(props.index === activePage),
 				"aria-label": translations.indicator(props.index),
 				onClick(event) {
 					if (event.defaultPrevented) return;
@@ -443,7 +444,7 @@ const machine = createMachine({
 			target: "idle",
 			actions: ["clearScrollEndTimer", "setMatchingPage"]
 		},
-		"SNAP.REFRESH": { actions: ["setSnapPoints", "clampPage"] },
+		"SNAP.REFRESH": { actions: ["setSnapPoints"] },
 		"PAGE.SCROLL": { actions: ["scrollToPage"] }
 	},
 	effects: [
@@ -483,11 +484,36 @@ const machine = createMachine({
 			on: {
 				DRAGGING: { actions: ["scrollSlides", "invokeDragging"] },
 				"DRAGGING.END": {
-					target: "idle",
-					actions: ["endDragging", "invokeDraggingEnd"]
+					target: "settling",
+					actions: ["endDragging"]
 				}
 			}
 		},
+		settling: {
+			effects: ["trackSettlingScroll"],
+			on: {
+				"DRAGGING.START": {
+					target: "dragging",
+					actions: ["clearScrollEndTimer", "invokeDragStart"]
+				},
+				"SCROLL.END": [{
+					guard: "isFocused",
+					target: "focus",
+					actions: [
+						"clearScrollEndTimer",
+						"setClosestPage",
+						"invokeDraggingEnd"
+					]
+				}, {
+					target: "idle",
+					actions: [
+						"clearScrollEndTimer",
+						"setClosestPage",
+						"invokeDraggingEnd"
+					]
+				}]
+			}
+		},
 		userScroll: {
 			effects: ["trackScroll"],
 			on: {
@@ -552,7 +578,8 @@ const machine = createMachine({
 				return () => observer.disconnect();
 			},
 			trackSlideResize({ scope, send }) {
-				if (!getItemGroupEl(scope)) return;
+				const el = getItemGroupEl(scope);
+				if (!el) return;
 				const exec = () => {
 					send({
 						type: "SNAP.REFRESH",
@@ -570,7 +597,7 @@ const machine = createMachine({
 				});
 				const itemEls = getItemEls(scope);
 				itemEls.forEach(exec);
-				return callAll(...itemEls.map((el) => resizeObserverBorderBox.observe(el, exec)));
+				return callAll(...[resizeObserverBorderBox.observe(el, exec), ...itemEls.map((el) => resizeObserverBorderBox.observe(el, exec))]);
 			},
 			trackSlideIntersections({ scope, prop, context }) {
 				const el = getItemGroupEl(scope);
@@ -601,6 +628,27 @@ const machine = createMachine({
 				};
 				return addDomEvent(el, "scroll", onScroll, { passive: true });
 			},
+			trackSettlingScroll({ send, refs, scope }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const startTimer = () => {
+					clearTimeout(refs.get("timeoutRef"));
+					refs.set("timeoutRef", void 0);
+					refs.set("timeoutRef", setTimeout(() => {
+						send({ type: "SCROLL.END" });
+					}, 200));
+				};
+				startTimer();
+				const onScroll = () => {
+					startTimer();
+				};
+				const cleanup = addDomEvent(el, "scroll", onScroll, { passive: true });
+				return () => {
+					cleanup();
+					clearTimeout(refs.get("timeoutRef"));
+					refs.set("timeoutRef", void 0);
+				};
+			},
 			trackDocumentVisibility({ scope, send }) {
 				const doc = scope.getDoc();
 				const onVisibilityChange = () => {
@@ -679,8 +727,11 @@ const machine = createMachine({
 				const el = getItemGroupEl(scope);
 				if (!el) return;
 				const scrollPosition = computed("isHorizontal") ? el.scrollLeft : el.scrollTop;
-				const page = context.get("pageSnapPoints").findIndex((point) => Math.abs(point - scrollPosition) < 1);
-				if (page === -1) return;
+				const snapPoints = context.get("pageSnapPoints");
+				if (!snapPoints.length) return;
+				const page = snapPoints.reduce((closestIndex, snapPoint, index) => {
+					return Math.abs(snapPoint - scrollPosition) < Math.abs(snapPoints[closestIndex] - scrollPosition) ? index : closestIndex;
+				}, 0);
 				context.set("page", page);
 			},
 			setNextPage({ context, prop, state }) {
@@ -705,15 +756,15 @@ const machine = createMachine({
 				const page = event.index ?? context.get("page");
 				context.set("page", page);
 			},
-			clampPage({ context }) {
-				const index = clampValue(context.get("page"), 0, context.get("pageSnapPoints").length - 1);
-				context.set("page", index);
-			},
 			setSnapPoints({ context, computed, scope }) {
 				const el = getItemGroupEl(scope);
 				if (!el) return;
 				const scrollSnapPoints = getScrollSnapPositions(el);
-				context.set("pageSnapPoints", computed("isHorizontal") ? scrollSnapPoints.x : scrollSnapPoints.y);
+				const pageSnapPoints = computed("isHorizontal") ? scrollSnapPoints.x : scrollSnapPoints.y;
+				context.set("pageSnapPoints", pageSnapPoints);
+				if (!pageSnapPoints.length) return;
+				const index = clampValue(context.get("page"), 0, pageSnapPoints.length - 1);
+				context.set("page", index);
 			},
 			disableScrollSnap({ scope }) {
 				const el = getItemGroupEl(scope);
@@ -735,6 +786,7 @@ const machine = createMachine({
 				const isHorizontal = computed("isHorizontal");
 				const scrollPos = isHorizontal ? el.scrollLeft : el.scrollTop;
 				const snapPoints = context.get("pageSnapPoints");
+				if (!snapPoints.length) return;
 				const closest = snapPoints.reduce((closest, curr) => {
 					return Math.abs(curr - scrollPos) < Math.abs(closest - scrollPos) ? curr : closest;
 				}, snapPoints[0]);
@@ -744,7 +796,6 @@ const machine = createMachine({
 						top: isHorizontal ? el.scrollTop : closest,
 						behavior: "smooth"
 					});
-					context.set("page", snapPoints.indexOf(closest));
 					const scrollSnapType = el.dataset.scrollSnapType;
 					if (scrollSnapType) {
 						el.style.setProperty("scroll-snap-type", scrollSnapType);

package/dist/machines/cascade-select/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_collection = require("../../collection-BBgC8xCb.cjs");
-const require_core = require("../../core-DwdPztGA.cjs");
+const require_core = require("../../core-Bw_czdwX.cjs");
 require("../../interact-outside-Bg-QSXqp.cjs");
 const require_dismissable = require("../../dismissable-DxjbwsOf.cjs");
 const require_focus_visible = require("../../focus-visible-Co_9bW09.cjs");

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

@@ -1,15 +1,15 @@
 import { n as AnatomyInstance, r as AnatomyPart } from "../../create-anatomy-9eFQs7lO.cjs";
 import { f as TreeCollectionOptions, p as TreeNode, u as IndexPath } from "../../types-D-7AMgSE.cjs";
 import { t as TreeCollection } from "../../tree-collection-DlqV5kYO.cjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-B24gMTKq.cjs";
+import { b as Service, p as Machine, u as EventObject } from "../../types-u-LWCSDE.cjs";
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 import { i as InteractOutsideHandlers } from "../../index-DzWGFhcS.cjs";
 import { c as Placement, d as PositioningOptions } from "../../types-CZAtqGqH.cjs";
 import { a as Point } from "../../types-CLXYEgfm.cjs";
 
 //#region src/machines/cascade-select/cascade-select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "item" | "itemIndicator" | "control" | "trigger" | "indicator" | "label" | "itemText" | "list" | "content" | "clearTrigger" | "valueText" | "positioner">;
-declare const parts: Record<"root" | "item" | "itemIndicator" | "control" | "trigger" | "indicator" | "label" | "itemText" | "list" | "content" | "clearTrigger" | "valueText" | "positioner", AnatomyPart>;
+declare const anatomy: AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "content" | "label" | "valueText" | "control" | "clearTrigger" | "itemIndicator" | "itemText" | "positioner">;
+declare const parts: Record<"root" | "list" | "item" | "trigger" | "indicator" | "content" | "label" | "valueText" | "control" | "clearTrigger" | "itemIndicator" | "itemText" | "positioner", AnatomyPart>;
 //#endregion
 //#region src/machines/cascade-select/cascade-select.collection.d.ts
 declare const collection: {

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

@@ -1,15 +1,15 @@
 import { n as AnatomyInstance, r as AnatomyPart } from "../../create-anatomy-BedZVdg0.mjs";
 import { f as TreeCollectionOptions, p as TreeNode, u as IndexPath } from "../../types-9uw8LHpE.mjs";
 import { t as TreeCollection } from "../../tree-collection-Dlf9EUrT.mjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-DUM9rzfD.mjs";
+import { b as Service, p as Machine, u as EventObject } from "../../types-DvUmCWsb.mjs";
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 import { i as InteractOutsideHandlers } from "../../index-CGNNiDyE.mjs";
 import { p as PositioningOptions, u as Placement } from "../../index-fMh0VDkR.mjs";
 import { a as Point } from "../../types-DU764tY_.mjs";
 
 //#region src/machines/cascade-select/cascade-select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "item" | "itemIndicator" | "control" | "trigger" | "indicator" | "label" | "itemText" | "list" | "content" | "clearTrigger" | "valueText" | "positioner">;
-declare const parts: Record<"root" | "item" | "itemIndicator" | "control" | "trigger" | "indicator" | "label" | "itemText" | "list" | "content" | "clearTrigger" | "valueText" | "positioner", AnatomyPart>;
+declare const anatomy: AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "content" | "label" | "valueText" | "control" | "clearTrigger" | "itemIndicator" | "itemText" | "positioner">;
+declare const parts: Record<"root" | "list" | "item" | "trigger" | "indicator" | "content" | "label" | "valueText" | "control" | "clearTrigger" | "itemIndicator" | "itemText" | "positioner", AnatomyPart>;
 //#endregion
 //#region src/machines/cascade-select/cascade-select.collection.d.ts
 declare const collection: {

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

@@ -2,7 +2,7 @@ import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
 import { C as queryAll, Et as isSelfTarget, I as scrollIntoView, K as isValidTabEvent, W as raf, bn as ariaAttr, ct as setElementValue, ft as getEventKey, it as dispatchInputValueEvent, lt as trackFormControl, p as createScope, un as isEditableElement, xn as dataAttr, z as observeAttributes } from "../../dom-query-BFuRs3l4.mjs";
 import { Ct as isEmpty, ft as isEqual, u as createSplitProps, wt as last } from "../../utils-VVoZ_v29.mjs";
 import { t as TreeCollection } from "../../collection-DgzidRvr.mjs";
-import { a as createMachine, i as createGuards } from "../../core-Ci9Yu6QI.mjs";
+import { a as createMachine, i as createGuards } from "../../core-CTtbW9qh.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";

package/dist/machines/checkbox/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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_core = require("../../core-Bw_czdwX.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

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

@@ -1,9 +1,9 @@
 import { n as AnatomyInstance } from "../../create-anatomy-9eFQs7lO.cjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-B24gMTKq.cjs";
+import { b as Service, p as Machine, u as EventObject } from "../../types-u-LWCSDE.cjs";
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/checkbox/checkbox.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "indicator" | "label">;
+declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control">;
 //#endregion
 //#region src/machines/checkbox/checkbox.types.d.ts
 type CheckedState = boolean | "indeterminate";

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

@@ -1,9 +1,9 @@
 import { n as AnatomyInstance } from "../../create-anatomy-BedZVdg0.mjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-DUM9rzfD.mjs";
+import { b as Service, p as Machine, u as EventObject } from "../../types-DvUmCWsb.mjs";
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/checkbox/checkbox.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "indicator" | "label">;
+declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control">;
 //#endregion
 //#region src/machines/checkbox/checkbox.types.d.ts
 type CheckedState = boolean | "indeterminate";

package/dist/machines/checkbox/index.mjs

@@ -1,7 +1,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 createMachine, i as createGuards } from "../../core-CTtbW9qh.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

package/dist/machines/clipboard/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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_core = require("../../core-Bw_czdwX.cjs");
 const require_create_props = require("../../create-props-DP39rHnH.cjs");
 //#region src/machines/clipboard/clipboard.anatomy.ts
 const anatomy = require_create_anatomy.createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");

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

@@ -1,9 +1,9 @@
 import { n as AnatomyInstance } from "../../create-anatomy-9eFQs7lO.cjs";
-import { p as Machine, y as Service } from "../../types-B24gMTKq.cjs";
+import { b as Service, p as Machine } from "../../types-u-LWCSDE.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" | "control" | "trigger" | "indicator" | "input" | "label">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "indicator" | "label" | "control" | "input">;
 //#endregion
 //#region src/machines/clipboard/clipboard.types.d.ts
 interface CopyStatusDetails {

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

@@ -1,9 +1,9 @@
 import { n as AnatomyInstance } from "../../create-anatomy-BedZVdg0.mjs";
-import { p as Machine, y as Service } from "../../types-DUM9rzfD.mjs";
+import { b as Service, p as Machine } from "../../types-DvUmCWsb.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" | "control" | "trigger" | "indicator" | "input" | "label">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "indicator" | "label" | "control" | "input">;
 //#endregion
 //#region src/machines/clipboard/clipboard.types.d.ts
 interface CopyStatusDetails {

package/dist/machines/clipboard/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
 import { ct as setElementValue, on as getWindow, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
 import { s as setRafTimeout, u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
-import { a as createMachine } from "../../core-Ci9Yu6QI.mjs";
+import { a as createMachine } from "../../core-CTtbW9qh.mjs";
 import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
 //#region src/machines/clipboard/clipboard.anatomy.ts
 const anatomy = createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");

package/dist/machines/collapsible/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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_core = require("../../core-Bw_czdwX.cjs");
 const require_create_props = require("../../create-props-DP39rHnH.cjs");
 //#region src/machines/collapsible/collapsible.anatomy.ts
 const anatomy = require_create_anatomy.createAnatomy("collapsible").parts("root", "trigger", "content", "indicator");

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

@@ -1,5 +1,5 @@
 import { n as AnatomyInstance } from "../../create-anatomy-9eFQs7lO.cjs";
-import { p as Machine, y as Service } from "../../types-B24gMTKq.cjs";
+import { b as Service, p as Machine } from "../../types-u-LWCSDE.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

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

@@ -1,5 +1,5 @@
 import { n as AnatomyInstance } from "../../create-anatomy-BedZVdg0.mjs";
-import { p as Machine, y as Service } from "../../types-DUM9rzfD.mjs";
+import { b as Service, p as Machine } from "../../types-DvUmCWsb.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

package/dist/machines/collapsible/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
 import { B as observeChildren, H as nextTick, Qt as getComputedStyle, W as raf, c as setAttribute, et as getTabbables, ht as getEventTarget, u as setStyle, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
 import { H as toPx, u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
-import { a as createMachine } from "../../core-Ci9Yu6QI.mjs";
+import { a as createMachine } from "../../core-CTtbW9qh.mjs";
 import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
 //#region src/machines/collapsible/collapsible.anatomy.ts
 const anatomy = createAnatomy("collapsible").parts("root", "trigger", "content", "indicator");

package/dist/machines/color-picker/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_color_utils = require("../../color-utils-XoYeFX3g.cjs");
-const require_core = require("../../core-DwdPztGA.cjs");
+const require_core = require("../../core-Bw_czdwX.cjs");
 require("../../interact-outside-Bg-QSXqp.cjs");
 const require_dismissable = require("../../dismissable-DxjbwsOf.cjs");
 const require_popper = require("../../popper-viCrafLC.cjs");
@@ -1036,6 +1036,7 @@ const machine = require_core.createMachine({
 			}
 		},
 		focused: {
+			id: "color-picker-focused",
 			tags: ["closed", "focused"],
 			on: {
 				"CONTROLLED.OPEN": {
@@ -1067,52 +1068,13 @@ const machine = require_core.createMachine({
 		open: {
 			tags: ["open"],
 			effects: ["trackPositioning", "trackDismissableElement"],
+			initial: "idle",
 			on: {
 				"CONTROLLED.CLOSE": [{
 					guard: "shouldRestoreFocus",
 					target: "focused",
 					actions: ["setReturnFocus"]
 				}, { target: "idle" }],
-				"TRIGGER.CLICK": [{
-					guard: "isOpenControlled",
-					actions: ["invokeOnClose"]
-				}, {
-					target: "idle",
-					actions: ["invokeOnClose"]
-				}],
-				"AREA.POINTER_DOWN": {
-					target: "open:dragging",
-					actions: [
-						"setActiveChannel",
-						"setAreaColorFromPoint",
-						"focusAreaThumb"
-					]
-				},
-				"AREA.FOCUS": { actions: ["setActiveChannel"] },
-				"CHANNEL_SLIDER.POINTER_DOWN": {
-					target: "open:dragging",
-					actions: [
-						"setActiveChannel",
-						"setChannelColorFromPoint",
-						"focusChannelThumb"
-					]
-				},
-				"CHANNEL_SLIDER.FOCUS": { actions: ["setActiveChannel"] },
-				"AREA.ARROW_LEFT": { actions: ["decrementAreaXChannel"] },
-				"AREA.ARROW_RIGHT": { actions: ["incrementAreaXChannel"] },
-				"AREA.ARROW_UP": { actions: ["incrementAreaYChannel"] },
-				"AREA.ARROW_DOWN": { actions: ["decrementAreaYChannel"] },
-				"AREA.PAGE_UP": { actions: ["incrementAreaXChannel"] },
-				"AREA.PAGE_DOWN": { actions: ["decrementAreaXChannel"] },
-				"CHANNEL_SLIDER.ARROW_LEFT": { actions: ["decrementChannel"] },
-				"CHANNEL_SLIDER.ARROW_RIGHT": { actions: ["incrementChannel"] },
-				"CHANNEL_SLIDER.ARROW_UP": { actions: ["incrementChannel"] },
-				"CHANNEL_SLIDER.ARROW_DOWN": { actions: ["decrementChannel"] },
-				"CHANNEL_SLIDER.PAGE_UP": { actions: ["incrementChannel"] },
-				"CHANNEL_SLIDER.PAGE_DOWN": { actions: ["decrementChannel"] },
-				"CHANNEL_SLIDER.HOME": { actions: ["setChannelToMin"] },
-				"CHANNEL_SLIDER.END": { actions: ["setChannelToMax"] },
-				"CHANNEL_INPUT.BLUR": { actions: ["setChannelColorFromInput"] },
 				INTERACT_OUTSIDE: [
 					{
 						guard: "isOpenControlled",
@@ -1134,72 +1096,84 @@ const machine = require_core.createMachine({
 				}, {
 					target: "idle",
 					actions: ["invokeOnClose"]
-				}],
-				"SWATCH_TRIGGER.CLICK": [
-					{
-						guard: and("isOpenControlled", "closeOnSelect"),
-						actions: ["setValue", "invokeOnClose"]
-					},
-					{
-						guard: "closeOnSelect",
-						target: "focused",
-						actions: [
-							"setValue",
-							"invokeOnClose",
-							"setReturnFocus"
-						]
-					},
-					{ actions: ["setValue"] }
-				]
-			}
-		},
-		"open:dragging": {
-			tags: ["open"],
-			exit: ["clearActiveChannel"],
-			effects: [
-				"trackPointerMove",
-				"disableTextSelection",
-				"trackPositioning",
-				"trackDismissableElement"
-			],
-			on: {
-				"CONTROLLED.CLOSE": [{
-					guard: "shouldRestoreFocus",
-					target: "focused",
-					actions: ["setReturnFocus"]
-				}, { target: "idle" }],
-				"AREA.POINTER_MOVE": { actions: ["setAreaColorFromPoint", "focusAreaThumb"] },
-				"AREA.POINTER_UP": {
-					target: "open",
-					actions: ["invokeOnChangeEnd"]
-				},
-				"CHANNEL_SLIDER.POINTER_MOVE": { actions: ["setChannelColorFromPoint", "focusChannelThumb"] },
-				"CHANNEL_SLIDER.POINTER_UP": {
-					target: "open",
-					actions: ["invokeOnChangeEnd"]
-				},
-				INTERACT_OUTSIDE: [
-					{
+				}]
+			},
+			states: {
+				idle: { on: {
+					"TRIGGER.CLICK": [{
 						guard: "isOpenControlled",
 						actions: ["invokeOnClose"]
+					}, {
+						target: "#color-picker-focused",
+						actions: ["invokeOnClose"]
+					}],
+					"AREA.POINTER_DOWN": {
+						target: "dragging",
+						actions: [
+							"setActiveChannel",
+							"setAreaColorFromPoint",
+							"focusAreaThumb"
+						]
 					},
-					{
-						guard: "shouldRestoreFocus",
-						target: "focused",
-						actions: ["invokeOnClose", "setReturnFocus"]
+					"AREA.FOCUS": { actions: ["setActiveChannel"] },
+					"CHANNEL_SLIDER.POINTER_DOWN": {
+						target: "dragging",
+						actions: [
+							"setActiveChannel",
+							"setChannelColorFromPoint",
+							"focusChannelThumb"
+						]
 					},
-					{
-						target: "idle",
-						actions: ["invokeOnClose"]
+					"CHANNEL_SLIDER.FOCUS": { actions: ["setActiveChannel"] },
+					"AREA.ARROW_LEFT": { actions: ["decrementAreaXChannel"] },
+					"AREA.ARROW_RIGHT": { actions: ["incrementAreaXChannel"] },
+					"AREA.ARROW_UP": { actions: ["incrementAreaYChannel"] },
+					"AREA.ARROW_DOWN": { actions: ["decrementAreaYChannel"] },
+					"AREA.PAGE_UP": { actions: ["incrementAreaXChannel"] },
+					"AREA.PAGE_DOWN": { actions: ["decrementAreaXChannel"] },
+					"CHANNEL_SLIDER.ARROW_LEFT": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_RIGHT": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_UP": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_DOWN": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.PAGE_UP": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.PAGE_DOWN": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.HOME": { actions: ["setChannelToMin"] },
+					"CHANNEL_SLIDER.END": { actions: ["setChannelToMax"] },
+					"CHANNEL_INPUT.BLUR": { actions: ["setChannelColorFromInput"] },
+					"SWATCH_TRIGGER.CLICK": [
+						{
+							guard: and("isOpenControlled", "closeOnSelect"),
+							actions: ["setValue", "invokeOnClose"]
+						},
+						{
+							guard: "closeOnSelect",
+							target: "focused",
+							actions: [
+								"setValue",
+								"invokeOnClose",
+								"setReturnFocus"
+							]
+						},
+						{ actions: ["setValue"] }
+					]
+				} },
+				dragging: {
+					tags: ["dragging"],
+					exit: ["clearActiveChannel"],
+					effects: ["trackPointerMove", "disableTextSelection"],
+					on: {
+						"AREA.POINTER_MOVE": { actions: ["setAreaColorFromPoint", "focusAreaThumb"] },
+						"AREA.POINTER_UP": {
+							target: "idle",
+							actions: ["invokeOnChangeEnd"]
+						},
+						"CHANNEL_SLIDER.POINTER_MOVE": { actions: ["setChannelColorFromPoint", "focusChannelThumb"] },
+						"CHANNEL_SLIDER.POINTER_UP": {
+							target: "idle",
+							actions: ["invokeOnChangeEnd"]
+						}
 					}
-				],
-				CLOSE: [{
-					guard: "isOpenControlled",
-					actions: ["invokeOnClose"]
-				}, {
-					target: "idle",
-					actions: ["invokeOnClose"]
-				}]
+				}
 			}
 		}
 	},

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

@@ -1,12 +1,12 @@
 import { t as Anatomy } from "../../create-anatomy-9eFQs7lO.cjs";
 import { a as ColorFormat, n as ColorAxes, r as ColorChannel, s as ColorType, t as Color } from "../../color-vvN_Cdao.cjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-B24gMTKq.cjs";
+import { b as Service, p as Machine, u as EventObject } from "../../types-u-LWCSDE.cjs";
 import { b as NormalizeProps, d as Orientation, 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 { d as PositioningOptions } from "../../types-CZAtqGqH.cjs";
 
 //#region src/machines/color-picker/color-picker.anatomy.d.ts
-declare const anatomy: Anatomy<"root" | "control" | "trigger" | "label" | "area" | "content" | "valueText" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: Anatomy<"root" | "trigger" | "content" | "label" | "valueText" | "control" | "area" | "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";
@@ -78,7 +78,7 @@ interface ColorPickerProps extends CommonProperties, DirectionProperty, Interact
 type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
 type ColorPickerSchema = {
   tag: "open" | "closed" | "dragging" | "focused";
-  state: "idle" | "focused" | "open" | "open:dragging";
+  state: "idle" | "focused" | "open" | "open.idle" | "open.dragging";
   props: RequiredBy<ColorPickerProps, PropsWithDefault>;
   computed: {
     disabled: boolean;