beez-ui 0.5.6 → 0.6.1

package/dist/motion/motion-slot.js

@@ -1,36 +1,107 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 /** Animates the original primitive node with Motion, without adding DOM wrappers. */
-import { useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { Slot } from "radix-ui";
 import { animate, hover, press, usePresence, frame } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
-import { MOTION_EASE, MOTION_TIMING, MOTION_PRESS_SCALE, MOTION_SURFACE_DISTANCE, MOTION_PANEL_DISTANCE } from "./tokens.js";
+import { HOVER_CAPABLE_QUERY, MILLISECONDS_PER_SECOND } from "../constants/motion.js";
+import { MOTION_EASE, MOTION_TIMING, MOTION_PRESS_SCALE, MOTION_SUBTLE_PRESS_SCALE, MOTION_TOGGLE_PRESS_SCALE, MOTION_HOVER_SCALE, MOTION_THUMB_SQUISH_SCALE, MOTION_CONTENT_DISTANCE, MOTION_INVALID_SHAKE_PX, MOTION_ITEM_CHECK_SCALE, MOTION_ICON_SWAP_SCALE, MOTION_CLOSE_BUTTON_SCALE, MOTION_LIST_ITEM_DISTANCE, MOTION_LIST_STAGGER_LIMIT, MOTION_EASE_IN_OUT, SPRING_CHEVRON, SPRING_PANEL, SPRING_PRESS, SPRING_THUMB } from "./tokens.js";
+import { surfaceEnter, surfaceExit } from "./surface-keyframes.js";
+import { useAttachedElement } from "./use-attached-element.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const EASE_OUT = [...MOTION_EASE];
+const SURFACE_KINDS = [
+	"tooltip",
+	"surface",
+	"dialog",
+	"sheet",
+	"overlay"
+];
+const PRESS_SCALES = {
+	press: MOTION_PRESS_SCALE,
+	"subtle-press": MOTION_SUBTLE_PRESS_SCALE,
+	toggle: MOTION_TOGGLE_PRESS_SCALE
+};
+const FIELD_KINDS = ["field", "toggle"];
+/** Inline style properties Motion playback may write; they are restored after playback. */
+const ANIMATED_PROPERTIES = [
+	"opacity",
+	"transform",
+	"boxShadow",
+	"filter",
+	"clipPath"
+];
+/** Input groups draw the field frame; their controls are borderless. */
+const INPUT_GROUP_SLOT = "input-group";
+/** SVG attributes Motion writes to draw a stroke with `pathLength`. */
+const STROKE_DRAW_ATTRIBUTES = [
+	"pathLength",
+	"stroke-dasharray",
+	"stroke-dashoffset"
+];
+/** Attributes whose changes re-announce a field's state with a subtle settle. */
+const FIELD_STATE_ATTRIBUTES = [
+	"data-state",
+	"aria-invalid",
+	"aria-selected",
+	"aria-checked",
+	"data-loading",
+	"data-error"
+];
 /** Checks the actual DOM state rather than intercepting the component's event handlers. */
 function isEnabled(element) {
 	return !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true" && !element.hasAttribute("data-disabled");
 }
-/** Computes a small offset toward the surface's originating edge. */
-function entryTransform(element, kind) {
-	if (kind === "dialog") return "scale(0.985)";
-	const distance = kind === "sheet" ? MOTION_PANEL_DISTANCE : MOTION_SURFACE_DISTANCE;
-	const direction = element.getAttribute("data-side");
-	const offset = kind === "sheet" ? distance : -distance;
-	if (direction === "left") return `translateX(${-offset}px)`;
-	if (direction === "right") return `translateX(${offset}px)`;
-	if (direction === "top") return `translateY(${-offset}px)`;
-	return `translateY(${offset}px)`;
+/** Touch devices keep phantom hovers after a tap, so hover lifts need a real hover pointer. */
+function canHover() {
+	return typeof window.matchMedia === "function" && window.matchMedia(HOVER_CAPABLE_QUERY).matches;
 }
-/** Uses explicit identity transforms so Motion never interprets a missing scale as zero. */
-function restingTransform(element, kind) {
-	if (kind === "dialog") return "scale(1)";
-	const direction = element.getAttribute("data-side");
-	return direction === "left" || direction === "right" ? "translateX(0px)" : "translateY(0px)";
+/** Reads the currently rendered transform, including a running animation, as a start keyframe. */
+function currentTransform(element) {
+	const value = getComputedStyle(element).transform;
+	return value && value !== "none" ? value : "scale(1)";
+}
+/** Reads a computed `matrix()` or `matrix3d()` transform as its 2D components. */
+function matrixOf(transform) {
+	const values = /^matrix(3d)?\(([^)]+)\)$/.exec(transform);
+	if (!values) return {
+		a: 1,
+		b: 0,
+		translateX: 0
+	};
+	const parts = values[2].split(",").map(parseFloat);
+	return {
+		a: parts[0] ?? 1,
+		b: parts[1] ?? 0,
+		translateX: (values[1] ? parts[12] : parts[4]) ?? 0
+	};
+}
+/** Extracts the horizontal translation of a computed transform. */
+function translateXOf(transform) {
+	return matrixOf(transform).translateX;
+}
+/** Extracts the rotation, in degrees, of a computed transform. */
+function rotationOf(transform) {
+	const { a, b } = matrixOf(transform);
+	return Math.atan2(b, a) * 180 / Math.PI;
+}
+/** Position of an item among its siblings of the same slot inside the closest list or menu. */
+function listIndexOf(element) {
+	const slot = element.getAttribute("data-slot");
+	const list = element.closest("[role=\"listbox\"],[role=\"menu\"],[role=\"list\"]");
+	if (!slot || !list) return 0;
+	const items = Array.from(list.querySelectorAll(`[data-slot="${slot}"]`));
+	return Math.max(items.indexOf(element), 0);
+}
+/** Checked and indeterminate indicators are visible; only unchecked ones are hidden. */
+function isChecked(element) {
+	const state = element.getAttribute("data-state");
+	return state === "checked" || state === "indeterminate";
 }
 /** Composes refs through Radix Slot and delegates gesture, entry and exit playback to Motion. */
 export function MotionSlot(t0) {
-	const $ = _c(21);
+	const $ = _c(20);
 	let children;
 	let props;
 	let ref;
@@ -49,48 +120,33 @@ export function MotionSlot(t0) {
 		t1 = $[4];
 	}
 	const kind = t1 === undefined ? "fade" : t1;
-	const [element, setElement] = useState(null);
+	const [element, attach] = useAttachedElement(ref);
+	const reduceMotion = usePrefersReducedMotion();
+	const [isPresent, safeToRemove] = usePresence();
+	const safeToRemoveRef = useRef(safeToRemove);
 	let t2;
-	if ($[5] !== ref) {
-		t2 = (node) => {
-			setElement(node);
-			const cleanup = typeof ref === "function" ? ref(node) : undefined;
-			if (ref && typeof ref !== "function") {
-				ref.current = node;
-			}
-			return () => {
-				setElement(null);
-				if (typeof cleanup === "function") {
-					cleanup();
-				} else {
-					if (typeof ref === "function") {
-						ref(null);
-					} else {
-						if (ref) {
-							ref.current = null;
-						}
-					}
-				}
-			};
+	if ($[5] !== safeToRemove) {
+		t2 = () => {
+			safeToRemoveRef.current = safeToRemove;
 		};
-		$[5] = ref;
+		$[5] = safeToRemove;
 		$[6] = t2;
 	} else {
 		t2 = $[6];
 	}
-	const attach = t2;
-	const reduceMotion = usePrefersReducedMotion();
-	const [isPresent, safeToRemove] = usePresence();
+	useLayoutEffect(t2);
+	const interruptedRef = useRef(null);
 	let t3;
 	let t4;
-	if ($[7] !== element || $[8] !== isPresent || $[9] !== kind || $[10] !== reduceMotion || $[11] !== safeToRemove) {
+	if ($[7] !== element || $[8] !== isPresent || $[9] !== kind || $[10] !== reduceMotion) {
 		t3 = () => {
 			let active = true;
-			if (!element) {
+			const safeToRemove_0 = () => safeToRemoveRef.current?.();
+			if (!element || !element.isConnected) {
 				if (!isPresent) {
 					queueMicrotask(() => {
 						if (active) {
-							safeToRemove?.();
+							safeToRemove_0();
 						}
 					});
 				}
@@ -98,189 +154,357 @@ export function MotionSlot(t0) {
 					active = false;
 				};
 			}
-			const animations = new Set();
+			const animations = new Map();
+			const held = new Set();
 			const cleanups = [];
 			const original = {
 				opacity: element.style.opacity,
 				transform: element.style.transform,
-				translate: element.style.translate,
-				boxShadow: element.style.boxShadow
+				boxShadow: element.style.boxShadow,
+				filter: element.style.filter,
+				clipPath: element.style.clipPath
 			};
-			const restore = function restore() {
-				element.style.opacity = original.opacity;
-				element.style.transform = original.transform;
-				element.style.translate = original.translate;
-				element.style.boxShadow = original.boxShadow;
+			const restore = function restore(t5) {
+				const properties = t5 === undefined ? ANIMATED_PROPERTIES : t5;
+				properties.forEach((property) => {
+					element.style[property] = original[property];
+				});
+			};
+			const cancel = function cancel(t6) {
+				const properties_0 = t6 === undefined ? ANIMATED_PROPERTIES : t6;
+				animations.forEach((driven, animation) => {
+					if (!driven.some((property_0) => properties_0.includes(property_0))) {
+						return;
+					}
+					animation.cancel();
+					animations.delete(animation);
+				});
 			};
 			const dispose = function dispose() {
 				active = false;
+				if (animations.size) {
+					const computed = getComputedStyle(element);
+					const snapshot = {};
+					new Set([...animations.values()].flat()).forEach((property_1) => {
+						const value = computed[property_1];
+						if (value && value !== "none") {
+							snapshot[property_1] = value;
+						}
+					});
+					interruptedRef.current = snapshot;
+				}
 				cleanups.forEach(_temp);
-				animations.forEach(_temp2);
+				cancel();
 				restore();
 			};
 			if (reduceMotion || !isPresent && element.hasAttribute("data-beez-theme-menu")) {
 				if (!isPresent) {
 					queueMicrotask(() => {
 						if (active) {
-							safeToRemove?.();
+							safeToRemove_0();
 						}
 					});
 				}
 				return dispose;
 			}
-			const play = function play(keyframes, duration, t5, t6) {
-				const remove = t5 === undefined ? false : t5;
-				const restoreOnComplete = t6 === undefined ? true : t6;
-				animations.forEach(_temp3);
-				animations.clear();
-				const animation_1 = animate(element, keyframes, {
-					duration,
-					ease: [...MOTION_EASE]
+			const play = function play(keyframes, transition, t7) {
+				const { remove: t8, restoreOnComplete: t9 } = t7 === undefined ? {} : t7;
+				const remove = t8 === undefined ? false : t8;
+				const restoreOnComplete = t9 === undefined ? true : t9;
+				const properties_1 = ANIMATED_PROPERTIES.filter((property_2) => property_2 in keyframes);
+				const busy = new Set([...animations.values()].flat());
+				properties_1.forEach((property_3) => {
+					if (!busy.has(property_3) && !held.has(property_3)) {
+						original[property_3] = element.style[property_3];
+					}
 				});
-				animations.add(animation_1);
-				animation_1.then(() => {
-					animations.delete(animation_1);
-					if (!active) {
+				cancel(properties_1);
+				properties_1.forEach((property_4) => held.delete(property_4));
+				const frames = keyframes;
+				properties_1.forEach((property_5) => {
+					const values = frames[property_5];
+					if (Array.isArray(values) && values.length > 1) {
+						element.style[property_5] = String(values[0]);
+					}
+				});
+				const animation_0 = animate(element, keyframes, transition);
+				animations.set(animation_0, properties_1);
+				animation_0.then(() => {
+					if (!animations.delete(animation_0) || !active) {
 						return;
 					}
 					if (remove) {
-						safeToRemove?.();
-					} else {
-						if (restoreOnComplete) {
-							frame.postRender(() => {
-								if (active && !animations.size) {
-									restore();
-								}
-							});
-						}
+						safeToRemove_0();
+						return;
+					}
+					if (!restoreOnComplete) {
+						properties_1.forEach((property_6) => held.add(property_6));
 					}
+					frame.postRender(() => {
+						if (!active) {
+							return;
+						}
+						const busy_0 = new Set([...animations.values()].flat());
+						restore(ANIMATED_PROPERTIES.filter((property_7) => !busy_0.has(property_7) && !held.has(property_7)));
+					});
 				});
 			};
-			const isSurface = [
-				"surface",
-				"dialog",
-				"sheet",
-				"overlay"
-			].includes(kind);
-			if (!isPresent) {
-				if (!isSurface) {
-					queueMicrotask(() => {
-						if (active) {
-							safeToRemove?.();
+			const tween = _temp2;
+			const interrupted = interruptedRef.current;
+			interruptedRef.current = null;
+			if (SURFACE_KINDS.includes(kind)) {
+				const step = isPresent ? surfaceEnter(element, kind) : surfaceExit(element, kind);
+				const keyframes_0 = { ...step.keyframes };
+				if (!isPresent && interrupted) {
+					Object.entries(interrupted).forEach((t10) => {
+						const [property_8, value_0] = t10;
+						const frames_0 = keyframes_0[property_8];
+						if (!Array.isArray(frames_0) || !value_0) {
+							return;
 						}
+						const start = property_8 === "opacity" ? Number.parseFloat(value_0) : value_0;
+						keyframes_0[property_8] = [start, ...frames_0.slice(1)];
 					});
-					return dispose;
 				}
-				const keyframes_0 = kind === "overlay" ? { opacity: [1, 0] } : {
-					opacity: [1, 0],
-					transform: [restingTransform(element, kind), entryTransform(element, kind)]
-				};
-				play(keyframes_0, MOTION_TIMING.exit, true);
+				play(keyframes_0, step.transition, { remove: !isPresent });
 				return dispose;
 			}
-			if (isSurface) {
-				const keyframes_1 = kind === "overlay" ? { opacity: [0, 1] } : {
-					opacity: [0, 1],
-					transform: [entryTransform(element, kind), restingTransform(element, kind)]
-				};
-				play(keyframes_1, kind === "dialog" || kind === "sheet" ? MOTION_TIMING.panel : MOTION_TIMING.enter);
+			if (!isPresent) {
+				queueMicrotask(() => {
+					if (active) {
+						safeToRemove_0();
+					}
+				});
+				return dispose;
+			}
+			if (kind === "skeleton") {
+				animations.set(animate(element, { opacity: [
+					1,
+					.6,
+					1
+				] }, {
+					duration: MOTION_TIMING.skeleton,
+					repeat: Infinity,
+					ease: "easeInOut"
+				}), ["opacity"]);
 			} else {
-				if (kind === "skeleton") {
-					animations.add(animate(element, { opacity: [
-						1,
-						.6,
-						1
-					] }, {
-						duration: MOTION_TIMING.skeleton,
-						repeat: Infinity,
-						ease: "easeInOut"
-					}));
+				if (kind === "icon-swap") {
+					play({
+						opacity: [0, 1],
+						transform: [`scale(${MOTION_ICON_SWAP_SCALE})`, "scale(1)"],
+						filter: ["blur(8px)", "blur(0px)"]
+					}, {
+						duration: MOTION_TIMING.iconSwap,
+						ease: [...MOTION_EASE_IN_OUT]
+					});
 				} else {
-					if (kind === "selection") {
+					if (kind === "item-check") {
 						play({
 							opacity: [0, 1],
-							transform: ["scale(0.85)", "scale(1)"]
-						}, MOTION_TIMING.fast);
+							transform: [`scale(${MOTION_ITEM_CHECK_SCALE})`, "scale(1)"]
+						}, {
+							...SPRING_PANEL,
+							opacity: tween(MOTION_TIMING.fast)
+						});
 					} else {
-						if (kind === "fade" || kind === "card" || kind === "row") {
-							play({ opacity: [0, 1] }, MOTION_TIMING.enter);
+						if (kind === "list-item") {
+							const index = listIndexOf(element);
+							const position = Math.min(index, MOTION_LIST_STAGGER_LIMIT);
+							play(index < MOTION_LIST_STAGGER_LIMIT ? {
+								opacity: [0, 1],
+								transform: [`translateY(${-MOTION_LIST_ITEM_DISTANCE}px)`, "translateY(0px)"],
+								filter: ["blur(3px)", "blur(0px)"]
+							} : { opacity: [0, 1] }, {
+								...tween(MOTION_TIMING.listItem),
+								delay: MOTION_TIMING.listDelay + position * MOTION_TIMING.listStagger
+							});
+						} else {
+							if (kind === "delayed-pop" && typeof element.animate === "function") {
+								const pop = element.animate({
+									opacity: [0, 1],
+									scale: [String(MOTION_CLOSE_BUTTON_SCALE), "1"]
+								}, {
+									duration: MOTION_TIMING.closeEnter * MILLISECONDS_PER_SECOND,
+									delay: MOTION_TIMING.closeDelay * MILLISECONDS_PER_SECOND,
+									easing: `cubic-bezier(${EASE_OUT.join(", ")})`,
+									fill: "backwards"
+								});
+								cleanups.push(() => pop.cancel());
+							} else {
+								if (kind === "selection") {
+									play({
+										opacity: [0, 1],
+										transform: ["scale(0.5)", "scale(1)"]
+									}, {
+										...SPRING_PANEL,
+										opacity: tween(MOTION_TIMING.fast)
+									});
+								} else {
+									if (kind === "content") {
+										play({
+											opacity: [0, 1],
+											transform: [`translateY(${MOTION_CONTENT_DISTANCE}px)`, "translateY(0px)"]
+										}, tween(MOTION_TIMING.enter));
+									} else {
+										if (kind === "message") {
+											play({
+												opacity: [0, 1],
+												transform: [`translateY(${-MOTION_CONTENT_DISTANCE}px)`, "translateY(0px)"],
+												filter: ["blur(4px)", "blur(0px)"]
+											}, tween(MOTION_TIMING.message));
+										} else {
+											if (kind === "fade" || kind === "card" || kind === "row") {
+												play({ opacity: [0, 1] }, tween(MOTION_TIMING.enter));
+											}
+										}
+									}
+								}
+							}
 						}
 					}
 				}
 			}
-			if (kind === "press") {
+			const pressScale = PRESS_SCALES[kind];
+			if (pressScale !== undefined) {
+				const liftsOnHover = kind === "press" && element.getAttribute("data-variant") !== "link";
+				let hovered = false;
+				let pressed = false;
+				const settle = () => {
+					const target = pressed ? pressScale : hovered ? MOTION_HOVER_SCALE : 1;
+					play({ transform: [currentTransform(element), `scale(${target})`] }, SPRING_PRESS, { restoreOnComplete: target === 1 });
+				};
 				cleanups.push(press(element, () => {
 					if (!isEnabled(element)) {
 						return;
 					}
-					play({ transform: ["scale(1)", `scale(${MOTION_PRESS_SCALE})`] }, MOTION_TIMING.fast, false, false);
-					return () => play({ transform: [`scale(${MOTION_PRESS_SCALE})`, "scale(1)"] }, MOTION_TIMING.fast);
+					pressed = true;
+					settle();
+					return () => {
+						pressed = false;
+						settle();
+					};
 				}));
+				if (liftsOnHover) {
+					cleanups.push(hover(element, () => {
+						if (!isEnabled(element) || !canHover()) {
+							return;
+						}
+						hovered = true;
+						settle();
+						return () => {
+							hovered = false;
+							settle();
+						};
+					}));
+				}
 			}
 			if (kind === "card" || kind === "link" || kind === "icon") {
 				cleanups.push(hover(element, () => {
-					if (!isEnabled(element) || kind === "card" && !element.querySelector("a,button")) {
+					if (!isEnabled(element) || !canHover() || kind === "card" && !element.querySelector("a,button")) {
 						return;
 					}
+					const keep = { restoreOnComplete: false };
 					if (kind === "card") {
-						play({ boxShadow: "0 4px 16px rgba(0,0,0,0.08)" }, MOTION_TIMING.enter, false, false);
+						play({ boxShadow: "0 4px 16px rgba(0,0,0,0.08)" }, tween(MOTION_TIMING.enter), keep);
 					} else {
 						if (kind === "icon") {
-							play({ transform: ["rotate(0deg) scale(1)", "rotate(-3deg) scale(1.025)"] }, MOTION_TIMING.enter, false, false);
+							play({ transform: ["rotate(0deg) scale(1)", "rotate(-3deg) scale(1.025)"] }, SPRING_PRESS, keep);
 						} else {
-							play({ opacity: .75 }, MOTION_TIMING.fast, false, false);
+							play({ opacity: .75 }, tween(MOTION_TIMING.fast), keep);
 						}
 					}
 					return () => {
 						if (kind === "card") {
-							play({ boxShadow: original.boxShadow || "0 0px 0px rgba(0,0,0,0)" }, MOTION_TIMING.fast);
+							play({ boxShadow: original.boxShadow || "0 0px 0px rgba(0,0,0,0)" }, tween(MOTION_TIMING.fast));
 						} else {
 							if (kind === "icon") {
-								play({ transform: ["rotate(-3deg) scale(1.025)", "rotate(0deg) scale(1)"] }, MOTION_TIMING.fast);
+								play({ transform: [currentTransform(element), "rotate(0deg) scale(1)"] }, SPRING_PRESS);
 							} else {
-								play({ opacity: 1 }, MOTION_TIMING.fast);
+								play({ opacity: 1 }, tween(MOTION_TIMING.fast));
 							}
 						}
 					};
 				}));
 			}
-			if (kind === "field") {
-				const focus = () => {
-					if (isEnabled(element)) {
-						play({ opacity: [.94, 1] }, MOTION_TIMING.fast);
+			if (FIELD_KINDS.includes(kind)) {
+				const settleField = () => {
+					if (isEnabled(element) && !element.hasAttribute("hidden")) {
+						play({ opacity: [.94, 1] }, tween(MOTION_TIMING.fast));
 					}
 				};
-				element.addEventListener("focusin", focus);
-				cleanups.push(() => element.removeEventListener("focusin", focus));
-				const observer = new MutationObserver(() => {
-					if (isEnabled(element) && !element.hasAttribute("hidden")) {
-						play({ opacity: [.94, 1] }, MOTION_TIMING.fast);
+				element.addEventListener("focusin", settleField);
+				cleanups.push(() => element.removeEventListener("focusin", settleField));
+				const isGroup = element.getAttribute("data-slot") === INPUT_GROUP_SLOT;
+				const isGroupControl = !isGroup && element.parentElement?.closest(`[data-slot="${INPUT_GROUP_SLOT}"]`) != null;
+				const readInvalid = () => isGroup ? element.querySelector("[data-slot][aria-invalid=\"true\"]") !== null : element.getAttribute("aria-invalid") === "true";
+				let wasInvalid = readInvalid();
+				const observer = new MutationObserver((records) => {
+					const isInvalid = readInvalid();
+					const becameInvalid = isInvalid && !wasInvalid;
+					wasInvalid = isInvalid;
+					if (becameInvalid && !isGroupControl && !element.hasAttribute("hidden")) {
+						play({ transform: MOTION_INVALID_SHAKE_PX.map(_temp3) }, { duration: MOTION_TIMING.shake });
+					} else {
+						if (records.some((record) => record.target === element && record.attributeName !== "aria-invalid")) {
+							settleField();
+						}
 					}
 				});
 				observer.observe(element, {
 					attributes: true,
-					attributeFilter: [
-						"data-state",
-						"aria-invalid",
-						"aria-selected",
-						"aria-checked",
-						"data-loading",
-						"data-error"
-					]
+					attributeFilter: FIELD_STATE_ATTRIBUTES,
+					subtree: isGroup
 				});
 				cleanups.push(() => observer.disconnect());
 			}
-			if (kind === "thumb") {
-				let previousTranslate = getComputedStyle(element).translate;
+			if (kind === "check") {
+				let wasChecked = isChecked(element);
+				const strokeDraws = new Set();
+				const settleStrokes = () => {
+					strokeDraws.forEach(_temp4);
+					strokeDraws.clear();
+					element.querySelectorAll("path").forEach(_temp5);
+				};
+				cleanups.push(settleStrokes);
 				const observer_0 = new MutationObserver(() => {
-					const from = animations.size ? getComputedStyle(element).translate : previousTranslate;
-					animations.forEach(_temp4);
-					animations.clear();
-					element.style.translate = original.translate;
-					const to = getComputedStyle(element).translate;
-					previousTranslate = to;
-					if (from !== to) {
-						play({ translate: [from, to] }, MOTION_TIMING.enter);
+					const checked = isChecked(element);
+					if (checked === wasChecked) {
+						return;
+					}
+					wasChecked = checked;
+					settleStrokes();
+					if (checked) {
+						play({
+							opacity: [0, 1],
+							transform: ["scale(0.5)", "scale(1)"],
+							filter: ["blur(0px)", "blur(0px)"]
+						}, tween(MOTION_TIMING.enter));
+						element.querySelectorAll("path").forEach((path_0) => {
+							path_0.setAttribute("pathLength", "1");
+							path_0.setAttribute("stroke-dasharray", "0 1");
+							path_0.setAttribute("stroke-dashoffset", "0");
+							const draw_0 = animate(path_0, { pathLength: [0, 1] }, {
+								...tween(MOTION_TIMING.checkDraw),
+								delay: MOTION_TIMING.checkDrawDelay
+							});
+							strokeDraws.add(draw_0);
+							draw_0.then(() => {
+								if (!strokeDraws.delete(draw_0)) {
+									return;
+								}
+								frame.postRender(() => {
+									if (active && !strokeDraws.size) {
+										settleStrokes();
+									}
+								});
+							});
+						});
+					} else {
+						play({
+							opacity: [1, 0],
+							transform: ["scale(1)", "scale(0.5)"],
+							filter: ["blur(0px)", "blur(4px)"]
+						}, tween(MOTION_TIMING.enter));
 					}
 				});
 				observer_0.observe(element, {
@@ -289,65 +513,168 @@ export function MotionSlot(t0) {
 				});
 				cleanups.push(() => observer_0.disconnect());
 			}
+			if (kind === "rotate") {
+				const restingAngle = () => parseFloat(getComputedStyle(element).rotate) || 0;
+				let previousAngle = restingAngle();
+				const turn = () => {
+					const inFlight = rotationOf(getComputedStyle(element).transform);
+					cancel(["transform"]);
+					restore(["transform"]);
+					const nextAngle = restingAngle();
+					const delta = previousAngle + inFlight - nextAngle;
+					previousAngle = nextAngle;
+					if (Math.abs(delta) >= 1) {
+						play({ transform: [`rotate(${delta}deg)`, "rotate(0deg)"] }, SPRING_CHEVRON);
+					}
+				};
+				const observer_1 = new MutationObserver(turn);
+				observer_1.observe(element, {
+					attributes: true,
+					attributeFilter: ["class"]
+				});
+				if (element.parentElement) {
+					observer_1.observe(element.parentElement, {
+						attributes: true,
+						attributeFilter: [
+							"aria-expanded",
+							"data-state",
+							"class"
+						]
+					});
+				}
+				cleanups.push(() => observer_1.disconnect());
+			}
+			if (kind === "thumb") {
+				const restingOffset = () => {
+					if (!element.getClientRects().length) {
+						return null;
+					}
+					const rect = element.getBoundingClientRect();
+					const trackLeft = element.parentElement?.getBoundingClientRect().left ?? 0;
+					return rect.left - trackLeft + (rect.width - element.offsetWidth) / 2;
+				};
+				let previousOffset = restingOffset();
+				const remeasure = () => {
+					if (!animations.size) {
+						previousOffset = restingOffset();
+					}
+				};
+				element.parentElement?.addEventListener("pointerenter", remeasure);
+				element.parentElement?.addEventListener("focusin", remeasure);
+				cleanups.push(() => {
+					element.parentElement?.removeEventListener("pointerenter", remeasure);
+					element.parentElement?.removeEventListener("focusin", remeasure);
+				});
+				const observer_2 = new MutationObserver(() => {
+					const glideOffset = translateXOf(getComputedStyle(element).transform);
+					cancel(["transform"]);
+					restore(["transform"]);
+					const nextOffset = restingOffset();
+					const delta_0 = previousOffset === null || nextOffset === null ? 0 : previousOffset + glideOffset - nextOffset;
+					previousOffset = nextOffset;
+					if (delta_0 !== 0) {
+						play({ transform: [`translateX(${delta_0}px)`, "translateX(0px)"] }, SPRING_THUMB);
+					}
+				});
+				observer_2.observe(element, {
+					attributes: true,
+					attributeFilter: ["data-state"]
+				});
+				cleanups.push(() => observer_2.disconnect());
+				const root = element.parentElement;
+				if (root && typeof element.animate === "function") {
+					const squishTiming = {
+						duration: MOTION_TIMING.fast * MILLISECONDS_PER_SECOND,
+						easing: `cubic-bezier(${EASE_OUT.join(", ")})`,
+						fill: "forwards"
+					};
+					let squish = null;
+					cleanups.push(() => squish?.cancel());
+					cleanups.push(press(root, () => {
+						if (!isEnabled(root)) {
+							return;
+						}
+						squish?.cancel();
+						squish = element.animate({ scale: ["1", String(MOTION_THUMB_SQUISH_SCALE)] }, squishTiming);
+						return () => {
+							const from = getComputedStyle(element).scale;
+							squish?.cancel();
+							const release = element.animate({ scale: [from === "none" ? "1" : from, "1"] }, squishTiming);
+							squish = release;
+							release.finished.then(() => {
+								if (squish === release) {
+									release.cancel();
+									squish = null;
+								}
+							}).catch(_temp6);
+						};
+					}));
+				}
+			}
 			return dispose;
 		};
 		t4 = [
 			element,
 			kind,
 			reduceMotion,
-			isPresent,
-			safeToRemove
+			isPresent
 		];
 		$[7] = element;
 		$[8] = isPresent;
 		$[9] = kind;
 		$[10] = reduceMotion;
-		$[11] = safeToRemove;
-		$[12] = t3;
-		$[13] = t4;
+		$[11] = t3;
+		$[12] = t4;
 	} else {
-		t3 = $[12];
-		t4 = $[13];
+		t3 = $[11];
+		t4 = $[12];
 	}
 	useLayoutEffect(t3, t4);
 	let t5;
-	if ($[14] !== isPresent) {
+	if ($[13] !== isPresent) {
 		t5 = isPresent ? {} : {
 			inert: true,
 			"aria-hidden": true
 		};
-		$[14] = isPresent;
-		$[15] = t5;
+		$[13] = isPresent;
+		$[14] = t5;
 	} else {
-		t5 = $[15];
+		t5 = $[14];
 	}
 	let t6;
-	if ($[16] !== attach || $[17] !== children || $[18] !== props || $[19] !== t5) {
+	if ($[15] !== attach || $[16] !== children || $[17] !== props || $[18] !== t5) {
 		t6 = /* @__PURE__ */ _jsx(Slot.Root, {
 			...props,
 			ref: attach,
 			...t5,
 			children
 		});
-		$[16] = attach;
-		$[17] = children;
-		$[18] = props;
-		$[19] = t5;
-		$[20] = t6;
+		$[15] = attach;
+		$[16] = children;
+		$[17] = props;
+		$[18] = t5;
+		$[19] = t6;
 	} else {
-		t6 = $[20];
+		t6 = $[19];
 	}
 	return t6;
 }
-function _temp4(animation_2) {
-	return animation_2.cancel();
+function _temp6() {}
+function _temp5(path) {
+	STROKE_DRAW_ATTRIBUTES.forEach((attribute) => path.removeAttribute(attribute));
+}
+function _temp4(draw) {
+	return draw.cancel();
 }
-function _temp3(animation_0) {
-	return animation_0.cancel();
+function _temp3(offset) {
+	return `translateX(${offset}px)`;
 }
-function _temp2(animation) {
-	return animation.cancel();
+function _temp2(duration) {
+	return {
+		duration,
+		ease: EASE_OUT
+	};
 }
-function _temp(cleanup_0) {
-	return cleanup_0();
+function _temp(cleanup) {
+	return cleanup();
 }