@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/carousel/index.js

@@ -0,0 +1,920 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { L as ariaAttr, f as queryAll, p as contains, r as resizeObserverBorderBox, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { m as isLeftClick, r as getEventKey, s as getEventTarget, t as addDomEvent } from "../../event-bTItRgiw.js";
+import { c as getTabbables, l as isFocusable } from "../../tabbable-CDA1YMjZ.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as trackPointerMove } from "../../pointer-move-Tijb8Ptk.js";
+import { _ as prevIndex, m as nextIndex, t as add, v as remove, x as uniq } from "../../array-C4KbHsha.js";
+import { G as throttle, L as callAll, l as clampValue, n as createSplitProps, tt as isObject } from "../../utils-Cht5XaHf.js";
+import { n as ensureProps } from "../../warning-CrzBpWT1.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { n as getScrollSnapPositions, t as findSnapPoint } from "../../scroll-snap-DqMiFASa.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/carousel/anatomy.ts
+const anatomy = createAnatomy("carousel").parts("root", "itemGroup", "item", "control", "nextTrigger", "prevTrigger", "indicatorGroup", "indicator", "autoplayTrigger", "progressText");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/carousel/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `carousel:${ctx.id}`;
+const getItemId = (ctx, index) => ctx.ids?.item?.(index) ?? `carousel:${ctx.id}:item:${index}`;
+const getItemGroupId = (ctx) => ctx.ids?.itemGroup ?? `carousel:${ctx.id}:item-group`;
+const getNextTriggerId = (ctx) => ctx.ids?.nextTrigger ?? `carousel:${ctx.id}:next-trigger`;
+const getPrevTriggerId = (ctx) => ctx.ids?.prevTrigger ?? `carousel:${ctx.id}:prev-trigger`;
+const getIndicatorGroupId = (ctx) => ctx.ids?.indicatorGroup ?? `carousel:${ctx.id}:indicator-group`;
+const getIndicatorId = (ctx, index) => ctx.ids?.indicator?.(index) ?? `carousel:${ctx.id}:indicator:${index}`;
+const getItemGroupEl = (ctx) => ctx.getById(getItemGroupId(ctx));
+const getItemEls = (ctx) => queryAll(getItemGroupEl(ctx), `[data-part=item]`);
+const getIndicatorEl = (ctx, page) => ctx.getById(getIndicatorId(ctx, page));
+const syncTabIndex = (ctx) => {
+	const el = getItemGroupEl(ctx);
+	if (!el) return;
+	const tabbables = getTabbables(el);
+	el.setAttribute("tabindex", tabbables.length > 0 ? "-1" : "0");
+};
+//#endregion
+//#region src/machines/carousel/connect.ts
+function connect(service, normalize) {
+	const { state, context, computed, send, scope, prop } = service;
+	const isPlaying = state.matches("autoplay");
+	const isDragging = state.matches("dragging");
+	const canScrollNext = computed("canScrollNext");
+	const canScrollPrev = computed("canScrollPrev");
+	const horizontal = computed("isHorizontal");
+	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: activePage,
+		pageSnapPoints,
+		canScrollNext,
+		canScrollPrev,
+		getProgress() {
+			return activePage / pageSnapPoints.length;
+		},
+		getProgressText() {
+			const details = {
+				page: activePage + 1,
+				totalPages: pageSnapPoints.length
+			};
+			return translations.progressText?.(details) ?? "";
+		},
+		scrollToIndex(index, instant) {
+			send({
+				type: "INDEX.SET",
+				index,
+				instant
+			});
+		},
+		scrollTo(index, instant) {
+			send({
+				type: "PAGE.SET",
+				index,
+				instant
+			});
+		},
+		scrollNext(instant) {
+			send({
+				type: "PAGE.NEXT",
+				instant
+			});
+		},
+		scrollPrev(instant) {
+			send({
+				type: "PAGE.PREV",
+				instant
+			});
+		},
+		play() {
+			send({ type: "AUTOPLAY.START" });
+		},
+		pause() {
+			send({ type: "AUTOPLAY.PAUSE" });
+		},
+		isInView(index) {
+			return Array.from(context.get("slidesInView")).includes(index);
+		},
+		refresh() {
+			send({ type: "SNAP.REFRESH" });
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				role: "region",
+				"aria-roledescription": "carousel",
+				"data-orientation": prop("orientation"),
+				dir: prop("dir"),
+				style: {
+					"--slides-per-page": slidesPerPage,
+					"--slide-spacing": prop("spacing"),
+					"--slide-item-size": autoSize ? "auto" : "calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"
+				}
+			});
+		},
+		getItemGroupProps() {
+			return normalize.element({
+				...parts.itemGroup.attrs,
+				id: getItemGroupId(scope),
+				"data-orientation": prop("orientation"),
+				"data-dragging": dataAttr(isDragging),
+				dir: prop("dir"),
+				"aria-live": isPlaying ? "off" : "polite",
+				onFocus(event) {
+					if (!contains(event.currentTarget, getEventTarget(event))) return;
+					send({ type: "VIEWPORT.FOCUS" });
+				},
+				onBlur(event) {
+					if (contains(event.currentTarget, event.relatedTarget)) return;
+					send({ type: "VIEWPORT.BLUR" });
+				},
+				onMouseDown(event) {
+					if (event.defaultPrevented) return;
+					if (!prop("allowMouseDrag")) return;
+					if (!isLeftClick(event)) return;
+					const target = getEventTarget(event);
+					if (isFocusable(target) && target !== event.currentTarget) return;
+					event.preventDefault();
+					send({ type: "DRAGGING.START" });
+				},
+				onWheel: throttle((event) => {
+					const axis = prop("orientation") === "horizontal" ? "deltaX" : "deltaY";
+					if (event[axis] < 0 && !computed("canScrollPrev")) return;
+					if (event[axis] > 0 && !computed("canScrollNext")) return;
+					send({ type: "USER.SCROLL" });
+				}, 150),
+				onTouchStart() {
+					send({ type: "USER.SCROLL" });
+				},
+				style: {
+					display: autoSize ? "flex" : "grid",
+					gap: "var(--slide-spacing)",
+					scrollSnapType: [horizontal ? "x" : "y", prop("snapType")].join(" "),
+					gridAutoFlow: horizontal ? "column" : "row",
+					scrollbarWidth: "none",
+					overscrollBehaviorX: "contain",
+					[horizontal ? "gridAutoColumns" : "gridAutoRows"]: autoSize ? void 0 : "var(--slide-item-size)",
+					[horizontal ? "scrollPaddingInline" : "scrollPaddingBlock"]: padding,
+					[horizontal ? "paddingInline" : "paddingBlock"]: padding,
+					[horizontal ? "overflowX" : "overflowY"]: "auto"
+				}
+			});
+		},
+		getItemProps(props) {
+			const isInView = context.get("slidesInView").includes(props.index);
+			return normalize.element({
+				...parts.item.attrs,
+				id: getItemId(scope, props.index),
+				dir: prop("dir"),
+				role: "group",
+				"data-index": props.index,
+				"data-inview": dataAttr(isInView),
+				"aria-roledescription": "slide",
+				"data-orientation": prop("orientation"),
+				"aria-label": translations.item(props.index, prop("slideCount")),
+				"aria-hidden": ariaAttr(!isInView),
+				style: {
+					flex: "0 0 auto",
+					[horizontal ? "maxWidth" : "maxHeight"]: "100%",
+					scrollSnapAlign: (() => {
+						const snapAlign = props.snapAlign ?? "start";
+						const slidesPerMove = prop("slidesPerMove");
+						const perMove = slidesPerMove === "auto" ? Math.floor(prop("slidesPerPage")) : slidesPerMove;
+						return (props.index + perMove) % perMove === 0 ? snapAlign : void 0;
+					})()
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				"data-orientation": prop("orientation")
+			});
+		},
+		getPrevTriggerProps() {
+			return normalize.button({
+				...parts.prevTrigger.attrs,
+				id: getPrevTriggerId(scope),
+				type: "button",
+				disabled: !canScrollPrev,
+				dir: prop("dir"),
+				"aria-label": translations.prevTrigger,
+				"data-orientation": prop("orientation"),
+				"aria-controls": getItemGroupId(scope),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: "PAGE.PREV",
+						src: "trigger"
+					});
+				}
+			});
+		},
+		getNextTriggerProps() {
+			return normalize.button({
+				...parts.nextTrigger.attrs,
+				dir: prop("dir"),
+				id: getNextTriggerId(scope),
+				type: "button",
+				"aria-label": translations.nextTrigger,
+				"data-orientation": prop("orientation"),
+				"aria-controls": getItemGroupId(scope),
+				disabled: !canScrollNext,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: "PAGE.NEXT",
+						src: "trigger"
+					});
+				}
+			});
+		},
+		getIndicatorGroupProps() {
+			return normalize.element({
+				...parts.indicatorGroup.attrs,
+				dir: prop("dir"),
+				id: getIndicatorGroupId(scope),
+				"data-orientation": prop("orientation"),
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					const src = "indicator";
+					const exec = {
+						ArrowDown(event) {
+							if (horizontal) return;
+							send({
+								type: "PAGE.NEXT",
+								src
+							});
+							event.preventDefault();
+						},
+						ArrowUp(event) {
+							if (horizontal) return;
+							send({
+								type: "PAGE.PREV",
+								src
+							});
+							event.preventDefault();
+						},
+						ArrowRight(event) {
+							if (!horizontal) return;
+							send({
+								type: "PAGE.NEXT",
+								src
+							});
+							event.preventDefault();
+						},
+						ArrowLeft(event) {
+							if (!horizontal) return;
+							send({
+								type: "PAGE.PREV",
+								src
+							});
+							event.preventDefault();
+						},
+						Home(event) {
+							send({
+								type: "PAGE.SET",
+								index: 0,
+								src
+							});
+							event.preventDefault();
+						},
+						End(event) {
+							send({
+								type: "PAGE.SET",
+								index: pageSnapPoints.length - 1,
+								src
+							});
+							event.preventDefault();
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation: prop("orientation")
+					})];
+					exec?.(event);
+				}
+			});
+		},
+		getIndicatorProps(props) {
+			return normalize.button({
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				id: getIndicatorId(scope, props.index),
+				type: "button",
+				"data-orientation": prop("orientation"),
+				"data-index": props.index,
+				"data-readonly": dataAttr(props.readOnly),
+				"data-current": dataAttr(props.index === activePage),
+				"aria-label": translations.indicator(props.index),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (props.readOnly) return;
+					send({
+						type: "PAGE.SET",
+						index: props.index,
+						src: "indicator"
+					});
+				}
+			});
+		},
+		getAutoplayTriggerProps() {
+			return normalize.button({
+				...parts.autoplayTrigger.attrs,
+				type: "button",
+				"data-orientation": prop("orientation"),
+				"data-pressed": dataAttr(isPlaying),
+				"aria-label": isPlaying ? translations.autoplayStop : translations.autoplayStart,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({ type: isPlaying ? "AUTOPLAY.PAUSE" : "AUTOPLAY.START" });
+				}
+			});
+		},
+		getProgressTextProps() {
+			return normalize.element({ ...parts.progressText.attrs });
+		}
+	};
+}
+//#endregion
+//#region src/machines/carousel/machine.ts
+const DRIFT_THRESHOLD = 1;
+const machine = createMachine({
+	props({ props }) {
+		ensureProps(props, ["slideCount"], "carousel");
+		return {
+			dir: "ltr",
+			defaultPage: 0,
+			orientation: "horizontal",
+			snapType: "mandatory",
+			loop: !!props.autoplay,
+			slidesPerPage: 1,
+			slidesPerMove: "auto",
+			spacing: "0px",
+			autoplay: false,
+			allowMouseDrag: false,
+			inViewThreshold: .6,
+			autoSize: false,
+			...props,
+			translations: {
+				nextTrigger: "Next slide",
+				prevTrigger: "Previous slide",
+				indicator: (index) => `Go to slide ${index + 1}`,
+				item: (index, count) => `${index + 1} of ${count}`,
+				autoplayStart: "Start slide rotation",
+				autoplayStop: "Stop slide rotation",
+				progressText: ({ page, totalPages }) => `${page} / ${totalPages}`,
+				...props.translations
+			}
+		};
+	},
+	refs() {
+		return { timeoutRef: void 0 };
+	},
+	initialState({ prop }) {
+		return prop("autoplay") ? "autoplay" : "idle";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			page: bindable(() => ({
+				defaultValue: prop("defaultPage"),
+				value: prop("page"),
+				onChange(page) {
+					const pageSnapPoints = getContext().get("pageSnapPoints");
+					prop("onPageChange")?.({
+						page,
+						pageSnapPoint: pageSnapPoints[page]
+					});
+				}
+			})),
+			pageSnapPoints: bindable(() => {
+				return { defaultValue: prop("autoSize") ? Array.from({ length: prop("slideCount") }, (_, i) => i) : getPageSnapPoints(prop("slideCount"), prop("slidesPerMove"), prop("slidesPerPage")) };
+			}),
+			slidesInView: bindable(() => ({ defaultValue: [] }))
+		};
+	},
+	computed: {
+		isRtl: ({ prop }) => prop("dir") === "rtl",
+		isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
+		canScrollNext: ({ prop, context }) => prop("loop") || context.get("page") < context.get("pageSnapPoints").length - 1,
+		canScrollPrev: ({ prop, context }) => prop("loop") || context.get("page") > 0,
+		autoplayInterval: ({ prop }) => {
+			const autoplay = prop("autoplay");
+			return isObject(autoplay) ? autoplay.delay : 4e3;
+		}
+	},
+	watch({ track, action, context, prop, send }) {
+		track([() => prop("slidesPerPage"), () => prop("slidesPerMove")], () => {
+			action(["setSnapPoints"]);
+		});
+		track([() => context.get("page")], () => {
+			action(["scrollToPage", "focusIndicatorEl"]);
+		});
+		track([
+			() => prop("orientation"),
+			() => prop("autoSize"),
+			() => prop("dir")
+		], () => {
+			action(["setSnapPoints", "scrollToPage"]);
+		});
+		track([() => prop("slideCount")], () => {
+			send({
+				type: "SNAP.REFRESH",
+				src: "slide.count"
+			});
+		});
+		track([() => !!prop("autoplay")], () => {
+			send({
+				type: prop("autoplay") ? "AUTOPLAY.START" : "AUTOPLAY.PAUSE",
+				src: "autoplay.prop.change"
+			});
+		});
+	},
+	on: {
+		"PAGE.NEXT": {
+			target: "idle",
+			actions: ["clearScrollEndTimer", "setNextPage"]
+		},
+		"PAGE.PREV": {
+			target: "idle",
+			actions: ["clearScrollEndTimer", "setPrevPage"]
+		},
+		"PAGE.SET": {
+			target: "idle",
+			actions: ["clearScrollEndTimer", "setPage"]
+		},
+		"INDEX.SET": {
+			target: "idle",
+			actions: ["clearScrollEndTimer", "setMatchingPage"]
+		},
+		"SNAP.REFRESH": { actions: ["setSnapPoints", "scrollToPageIfDrifted"] },
+		"PAGE.SCROLL": { actions: ["scrollToPage"] }
+	},
+	effects: [
+		"trackSlideMutation",
+		"trackSlideIntersections",
+		"trackSlideResize"
+	],
+	entry: ["setSnapPoints", "setPage"],
+	exit: ["clearScrollEndTimer"],
+	states: {
+		idle: { on: {
+			"DRAGGING.START": {
+				target: "dragging",
+				actions: ["invokeDragStart"]
+			},
+			"AUTOPLAY.START": {
+				target: "autoplay",
+				actions: ["invokeAutoplayStart"]
+			},
+			"USER.SCROLL": { target: "userScroll" },
+			"VIEWPORT.FOCUS": { target: "focus" }
+		} },
+		focus: {
+			effects: ["trackKeyboardScroll"],
+			on: {
+				"VIEWPORT.BLUR": { target: "idle" },
+				"PAGE.NEXT": { actions: ["clearScrollEndTimer", "setNextPage"] },
+				"PAGE.PREV": { actions: ["clearScrollEndTimer", "setPrevPage"] },
+				"PAGE.SET": { actions: ["clearScrollEndTimer", "setPage"] },
+				"INDEX.SET": { actions: ["clearScrollEndTimer", "setMatchingPage"] },
+				"USER.SCROLL": { target: "userScroll" }
+			}
+		},
+		dragging: {
+			effects: ["trackPointerMove"],
+			entry: ["disableScrollSnap"],
+			on: {
+				DRAGGING: { actions: ["scrollSlides", "invokeDragging"] },
+				"DRAGGING.END": {
+					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: {
+				"DRAGGING.START": {
+					target: "dragging",
+					actions: ["invokeDragStart"]
+				},
+				"SCROLL.END": [{
+					guard: "isFocused",
+					target: "focus",
+					actions: ["setClosestPage"]
+				}, {
+					target: "idle",
+					actions: ["setClosestPage"]
+				}]
+			}
+		},
+		autoplay: {
+			effects: [
+				"trackDocumentVisibility",
+				"trackScroll",
+				"autoUpdateSlide"
+			],
+			exit: ["invokeAutoplayEnd"],
+			on: {
+				"AUTOPLAY.TICK": { actions: ["setNextPage", "invokeAutoplay"] },
+				"DRAGGING.START": {
+					target: "dragging",
+					actions: ["invokeDragStart"]
+				},
+				"AUTOPLAY.PAUSE": { target: "idle" }
+			}
+		}
+	},
+	implementations: {
+		guards: { isFocused: ({ scope }) => scope.isActiveElement(getItemGroupEl(scope)) },
+		effects: {
+			autoUpdateSlide({ computed, send }) {
+				const id = setInterval(() => {
+					send({
+						type: computed("canScrollNext") ? "AUTOPLAY.TICK" : "AUTOPLAY.PAUSE",
+						src: "autoplay.interval"
+					});
+				}, computed("autoplayInterval"));
+				return () => clearInterval(id);
+			},
+			trackSlideMutation({ scope, send }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const observer = new (scope.getWin()).MutationObserver(() => {
+					send({
+						type: "SNAP.REFRESH",
+						src: "slide.mutation"
+					});
+					syncTabIndex(scope);
+				});
+				syncTabIndex(scope);
+				observer.observe(el, {
+					childList: true,
+					subtree: true
+				});
+				return () => observer.disconnect();
+			},
+			trackSlideResize({ scope, send }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const exec = () => {
+					send({
+						type: "SNAP.REFRESH",
+						src: "slide.resize"
+					});
+				};
+				raf(() => {
+					exec();
+					raf(() => {
+						send({
+							type: "PAGE.SCROLL",
+							instant: true
+						});
+					});
+				});
+				const itemEls = getItemEls(scope);
+				itemEls.forEach(exec);
+				return callAll(...[resizeObserverBorderBox.observe(el, exec), ...itemEls.map((el) => resizeObserverBorderBox.observe(el, exec))]);
+			},
+			trackSlideIntersections({ scope, prop, context }) {
+				const el = getItemGroupEl(scope);
+				const observer = new (scope.getWin()).IntersectionObserver((entries) => {
+					const slidesInView = entries.reduce((acc, entry) => {
+						const target = entry.target;
+						const index = Number(target.dataset.index ?? "-1");
+						if (index == null || Number.isNaN(index) || index === -1) return acc;
+						return entry.isIntersecting ? add(acc, index) : remove(acc, index);
+					}, context.get("slidesInView"));
+					context.set("slidesInView", uniq(slidesInView));
+				}, {
+					root: el,
+					threshold: prop("inViewThreshold")
+				});
+				getItemEls(scope).forEach((slide) => observer.observe(slide));
+				return () => observer.disconnect();
+			},
+			trackScroll({ send, refs, scope }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const onScroll = () => {
+					clearTimeout(refs.get("timeoutRef"));
+					refs.set("timeoutRef", void 0);
+					refs.set("timeoutRef", setTimeout(() => {
+						send({ type: "SCROLL.END" });
+					}, 150));
+				};
+				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 = () => {
+					if (doc.visibilityState === "visible") return;
+					send({
+						type: "AUTOPLAY.PAUSE",
+						src: "doc.hidden"
+					});
+				};
+				return addDomEvent(doc, "visibilitychange", onVisibilityChange);
+			},
+			trackPointerMove({ scope, send }) {
+				return trackPointerMove(scope.getDoc(), {
+					onPointerMove({ event }) {
+						send({
+							type: "DRAGGING",
+							left: -event.movementX,
+							top: -event.movementY
+						});
+					},
+					onPointerUp() {
+						send({ type: "DRAGGING.END" });
+					}
+				});
+			},
+			trackKeyboardScroll({ scope, send, context }) {
+				const win = scope.getWin();
+				const onKeyDown = (event) => {
+					switch (event.key) {
+						case "ArrowRight":
+							event.preventDefault();
+							send({ type: "PAGE.NEXT" });
+							break;
+						case "ArrowLeft":
+							event.preventDefault();
+							send({ type: "PAGE.PREV" });
+							break;
+						case "Home":
+							event.preventDefault();
+							send({
+								type: "PAGE.SET",
+								index: 0
+							});
+							break;
+						case "End":
+							event.preventDefault();
+							send({
+								type: "PAGE.SET",
+								index: context.get("pageSnapPoints").length - 1
+							});
+					}
+				};
+				return addDomEvent(win, "keydown", onKeyDown, { capture: true });
+			}
+		},
+		actions: {
+			clearScrollEndTimer({ refs }) {
+				if (refs.get("timeoutRef") == null) return;
+				clearTimeout(refs.get("timeoutRef"));
+				refs.set("timeoutRef", void 0);
+			},
+			scrollToPage({ context, event, scope, computed, flush }) {
+				const behavior = event.instant ? "instant" : "smooth";
+				const index = clampValue(event.index ?? context.get("page"), 0, context.get("pageSnapPoints").length - 1);
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const axis = computed("isHorizontal") ? "left" : "top";
+				flush(() => {
+					el.scrollTo({
+						[axis]: context.get("pageSnapPoints")[index],
+						behavior
+					});
+				});
+			},
+			scrollToPageIfDrifted({ context, scope, computed }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const snapPoint = context.get("pageSnapPoints")[context.get("page")];
+				if (snapPoint == null) return;
+				const scrollPos = computed("isHorizontal") ? el.scrollLeft : el.scrollTop;
+				if (Math.abs(scrollPos - snapPoint) <= DRIFT_THRESHOLD) return;
+				const axis = computed("isHorizontal") ? "left" : "top";
+				el.scrollTo({
+					[axis]: snapPoint,
+					behavior: "instant"
+				});
+			},
+			setClosestPage({ context, scope, computed }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const scrollPosition = computed("isHorizontal") ? el.scrollLeft : el.scrollTop;
+				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 }) {
+				const loop = state.matches("autoplay") || prop("loop");
+				const page = nextIndex(context.get("pageSnapPoints"), context.get("page"), { loop });
+				context.set("page", page);
+			},
+			setPrevPage({ context, prop, state }) {
+				const loop = state.matches("autoplay") || prop("loop");
+				const page = prevIndex(context.get("pageSnapPoints"), context.get("page"), { loop });
+				context.set("page", page);
+			},
+			setMatchingPage({ context, event, computed, scope }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const snapPoint = findSnapPoint(el, computed("isHorizontal") ? "x" : "y", (node) => node.dataset.index === event.index.toString());
+				if (snapPoint == null) return;
+				const page = context.get("pageSnapPoints").findIndex((point) => Math.abs(point - snapPoint) < 1);
+				context.set("page", page);
+			},
+			setPage({ context, event }) {
+				const page = event.index ?? context.get("page");
+				context.set("page", page);
+			},
+			setSnapPoints({ context, computed, scope }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				const scrollSnapPoints = getScrollSnapPositions(el);
+				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);
+				if (!el) return;
+				const styles = getComputedStyle(el);
+				el.dataset.scrollSnapType = styles.getPropertyValue("scroll-snap-type");
+				el.style.setProperty("scroll-snap-type", "none");
+			},
+			scrollSlides({ scope, event }) {
+				getItemGroupEl(scope)?.scrollBy({
+					left: event.left,
+					top: event.top,
+					behavior: "instant"
+				});
+			},
+			endDragging({ scope, context, computed }) {
+				const el = getItemGroupEl(scope);
+				if (!el) return;
+				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]);
+				raf(() => {
+					el.scrollTo({
+						left: isHorizontal ? closest : el.scrollLeft,
+						top: isHorizontal ? el.scrollTop : closest,
+						behavior: "smooth"
+					});
+					const scrollSnapType = el.dataset.scrollSnapType;
+					if (scrollSnapType) {
+						el.style.setProperty("scroll-snap-type", scrollSnapType);
+						delete el.dataset.scrollSnapType;
+					}
+				});
+			},
+			focusIndicatorEl({ context, event, scope }) {
+				if (event.src !== "indicator") return;
+				const el = getIndicatorEl(scope, context.get("page"));
+				if (!el) return;
+				raf(() => el.focus({ preventScroll: true }));
+			},
+			invokeDragStart({ context, prop }) {
+				prop("onDragStatusChange")?.({
+					type: "dragging.start",
+					isDragging: true,
+					page: context.get("page")
+				});
+			},
+			invokeDragging({ context, prop }) {
+				prop("onDragStatusChange")?.({
+					type: "dragging",
+					isDragging: true,
+					page: context.get("page")
+				});
+			},
+			invokeDraggingEnd({ context, prop }) {
+				prop("onDragStatusChange")?.({
+					type: "dragging.end",
+					isDragging: false,
+					page: context.get("page")
+				});
+			},
+			invokeAutoplay({ context, prop }) {
+				prop("onAutoplayStatusChange")?.({
+					type: "autoplay",
+					isPlaying: true,
+					page: context.get("page")
+				});
+			},
+			invokeAutoplayStart({ context, prop }) {
+				prop("onAutoplayStatusChange")?.({
+					type: "autoplay.start",
+					isPlaying: true,
+					page: context.get("page")
+				});
+			},
+			invokeAutoplayEnd({ context, prop }) {
+				prop("onAutoplayStatusChange")?.({
+					type: "autoplay.stop",
+					isPlaying: false,
+					page: context.get("page")
+				});
+			}
+		}
+	}
+});
+function getPageSnapPoints(totalSlides, slidesPerMove, slidesPerPage) {
+	if (totalSlides == null || slidesPerPage <= 0) return [];
+	const snapPoints = [];
+	const perMove = slidesPerMove === "auto" ? Math.floor(slidesPerPage) : slidesPerMove;
+	if (perMove <= 0) return [];
+	for (let i = 0; i < totalSlides; i += perMove) {
+		if (i + slidesPerPage > totalSlides) break;
+		snapPoints.push(i);
+	}
+	return snapPoints;
+}
+//#endregion
+//#region src/machines/carousel/props.ts
+const props = createProps()([
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"loop",
+	"page",
+	"defaultPage",
+	"onPageChange",
+	"orientation",
+	"slideCount",
+	"slidesPerPage",
+	"slidesPerMove",
+	"spacing",
+	"padding",
+	"autoplay",
+	"allowMouseDrag",
+	"inViewThreshold",
+	"translations",
+	"snapType",
+	"autoSize",
+	"onDragStatusChange",
+	"onAutoplayStatusChange"
+]);
+const splitProps = createSplitProps(props);
+const indicatorProps = createProps()(["index", "readOnly"]);
+const splitIndicatorProps = createSplitProps(indicatorProps);
+const itemProps = createProps()(["index", "snapAlign"]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };