beez-ui 3.0.1 → 4.0.0

package/dist/motion/motion-slot.js

@@ -1,135 +1,96 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-/** Animates the original primitive node with Motion, without adding DOM wrappers. */
+/**
+* Animates the original primitive node with Motion, without adding DOM wrappers. Every kind plays Arc's motion
+* (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) for the component it serves.
+*/
 import { useLayoutEffect, useRef } from "react";
 import { Slot } from "radix-ui";
-import { animate, hover, press, usePresence, frame } from "motion/react";
+import { animate, usePresence, frame } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
-import { HOVER_CAPABLE_QUERY, MILLISECONDS_PER_SECOND, MOTION_ENTERING_ATTRIBUTE } 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_ITEM_CHECK_SCALE, MOTION_ITEM_ENTER_SCALE, MOTION_ICON_SWAP_SCALE, MOTION_CLOSE_BUTTON_SCALE, MOTION_EASE_IN_OUT, MOTION_REVEAL_BLUR_PX, MOTION_REVEAL_SCALE, MOTION_SHIMMER_TRANSLATE, MOTION_CARD_SHADOW_LIFT, MOTION_CARD_SHADOW_REST, SPRING_CHEVRON, SPRING_PANEL, SPRING_POP, SPRING_PRESS, SPRING_THUMB } from "./tokens.js";
+import { MOTION_ENTERING_ATTRIBUTE } from "../constants/motion.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "./arc-tokens.js";
+import { SPRING_CHEVRON, SPRING_POP } from "./tokens.js";
 import { surfaceEnter, surfaceExit, withRestingStyle } 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 EASE_ENTER = [...ARC_EASE.enter];
 const SURFACE_KINDS = [
-	"tooltip",
-	"surface",
 	"dialog",
-	"center-morph",
 	"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"
+	"filter"
 ];
-/** 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-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");
-}
-/** 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;
-}
-/** 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)";
-}
+/** Arc's theme switch grows the incoming icon from .7. */
+const THEME_ICON_ENTER_SCALE = .7;
+/** Arc's chosen-option check sharpens in just after its row: scale .6 and a subtle blur. */
+const ITEM_CHECK_ENTER_SCALE = .6;
+const ITEM_CHECK_DELAY_S = .04;
+/** Arc's helper and error rows rise into place by a third of a line while they sharpen. */
+const MESSAGE_RISE = "0.35em";
 /** 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
+		b: 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
+		b: parts[1] ?? 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;
 }
-/** 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. */
+/** Composes refs through Radix Slot and delegates entry, exit and state playback to Motion. */
 export function MotionSlot(t0) {
 	const $ = _c(20);
 	let children;
+	let kind;
 	let props;
 	let ref;
-	let t1;
 	if ($[0] !== t0) {
-		({children, kind: t1, ref, ...props} = t0);
+		({children, kind, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
-		$[2] = props;
-		$[3] = ref;
-		$[4] = t1;
+		$[2] = kind;
+		$[3] = props;
+		$[4] = ref;
 	} else {
 		children = $[1];
-		props = $[2];
-		ref = $[3];
-		t1 = $[4];
+		kind = $[2];
+		props = $[3];
+		ref = $[4];
 	}
-	const kind = t1 === undefined ? "fade" : t1;
 	const [element, attach] = useAttachedElement(ref);
 	const reduceMotion = usePrefersReducedMotion();
 	const [isPresent, safeToRemove] = usePresence();
 	const safeToRemoveRef = useRef(safeToRemove);
-	let t2;
+	let t1;
 	if ($[5] !== safeToRemove) {
-		t2 = () => {
+		t1 = () => {
 			safeToRemoveRef.current = safeToRemove;
 		};
 		$[5] = safeToRemove;
-		$[6] = t2;
+		$[6] = t1;
 	} else {
-		t2 = $[6];
+		t1 = $[6];
 	}
-	useLayoutEffect(t2);
+	useLayoutEffect(t1);
 	const interruptedRef = useRef(null);
+	let t2;
 	let t3;
-	let t4;
 	if ($[7] !== element || $[8] !== isPresent || $[9] !== kind || $[10] !== reduceMotion) {
-		t3 = () => {
+		t2 = () => {
 			let active = true;
 			const safeToRemove_0 = () => safeToRemoveRef.current?.();
 			if (!element || !element.isConnected) {
@@ -145,23 +106,20 @@ export function MotionSlot(t0) {
 				};
 			}
 			const animations = new Map();
-			const held = new Set();
 			const cleanups = [];
 			const original = {
 				opacity: element.style.opacity,
 				transform: element.style.transform,
-				boxShadow: element.style.boxShadow,
-				filter: element.style.filter,
-				clipPath: element.style.clipPath
+				filter: element.style.filter
 			};
-			const restore = function restore(t5) {
-				const properties = t5 === undefined ? ANIMATED_PROPERTIES : t5;
+			const restore = function restore(t4) {
+				const properties = t4 === undefined ? ANIMATED_PROPERTIES : t4;
 				properties.forEach((property) => {
 					element.style[property] = original[property];
 				});
 			};
-			const cancel = function cancel(t6) {
-				const properties_0 = t6 === undefined ? ANIMATED_PROPERTIES : t6;
+			const cancel = function cancel(t5) {
+				const properties_0 = t5 === undefined ? ANIMATED_PROPERTIES : t5;
 				animations.forEach((driven, animation) => {
 					if (!driven.some((property_0) => properties_0.includes(property_0))) {
 						return;
@@ -193,7 +151,7 @@ export function MotionSlot(t0) {
 			};
 			const interrupted = interruptedRef.current;
 			interruptedRef.current = null;
-			if (reduceMotion || !isPresent && element.hasAttribute("data-beez-theme-menu")) {
+			if (reduceMotion) {
 				if (!isPresent) {
 					queueMicrotask(() => {
 						if (active) {
@@ -203,24 +161,22 @@ export function MotionSlot(t0) {
 				}
 				return dispose;
 			}
-			const play = function play(keyframes, transition, t7) {
-				const { remove: t8, restoreOnComplete: t9, onSettled } = t7 === undefined ? {} : t7;
-				const remove = t8 === undefined ? false : t8;
-				const restoreOnComplete = t9 === undefined ? true : t9;
+			const play = function play(keyframes, transition, t6) {
+				const { remove: t7, onSettled } = t6 === undefined ? {} : t6;
+				const remove = t7 === undefined ? false : t7;
 				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)) {
+					if (!busy.has(property_3)) {
 						original[property_3] = element.style[property_3];
 					}
 				});
 				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];
+				properties_1.forEach((property_4) => {
+					const values = frames[property_4];
 					if (Array.isArray(values) && values.length > 1) {
-						element.style[property_5] = String(values[0]);
+						element.style[property_4] = String(values[0]);
 					}
 				});
 				const animation_0 = animate(element, keyframes, transition);
@@ -233,15 +189,12 @@ export function MotionSlot(t0) {
 						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)));
+						restore(ANIMATED_PROPERTIES.filter((property_5) => !busy_0.has(property_5)));
 						onSettled?.();
 					});
 				});
@@ -255,14 +208,14 @@ export function MotionSlot(t0) {
 					opacity: Number.parseFloat(computed_0.opacity)
 				});
 				if (interrupted?.element === element) {
-					Object.entries(interrupted.values).forEach((t10) => {
-						const [property_8, value_0] = t10;
-						const frames_0 = keyframes_0[property_8];
+					Object.entries(interrupted.values).forEach((t8) => {
+						const [property_6, value_0] = t8;
+						const frames_0 = keyframes_0[property_6];
 						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)];
+						const start = property_6 === "opacity" ? Number.parseFloat(value_0) : value_0;
+						keyframes_0[property_6] = [start, ...frames_0.slice(1)];
 					});
 				}
 				if (isPresent) {
@@ -282,224 +235,35 @@ export function MotionSlot(t0) {
 				});
 				return dispose;
 			}
-			if (kind === "skeleton" && typeof element.animate === "function") {
-				const shimmer = element.animate({ translate: [...MOTION_SHIMMER_TRANSLATE] }, {
-					duration: MOTION_TIMING.skeleton * MILLISECONDS_PER_SECOND,
-					easing: `cubic-bezier(${MOTION_EASE_IN_OUT.join(", ")})`,
-					iterations: Infinity,
-					pseudoElement: "::after"
+			if (kind === "icon-swap") {
+				play({
+					opacity: [0, 1],
+					transform: [`scale(${THEME_ICON_ENTER_SCALE})`, "scale(1)"],
+					filter: [`blur(${ARC_BLUR.subtle}px)`, "blur(0px)"]
+				}, {
+					...SPRING_POP,
+					opacity: tween(ARC_DURATION.fast),
+					filter: tween(ARC_DURATION.fast)
 				});
-				cleanups.push(() => shimmer.cancel());
 			} else {
-				if (kind === "icon-swap") {
+				if (kind === "item-check") {
 					play({
 						opacity: [0, 1],
-						transform: [`scale(${MOTION_ICON_SWAP_SCALE})`, "scale(1)"]
+						transform: [`scale(${ITEM_CHECK_ENTER_SCALE})`, "scale(1)"],
+						filter: [`blur(${ARC_BLUR.subtle}px)`, "blur(0px)"]
 					}, {
-						...SPRING_POP,
-						opacity: tween(MOTION_TIMING.iconSwap)
+						...tween(ARC_DURATION.standard),
+						delay: ITEM_CHECK_DELAY_S
 					});
 				} else {
-					if (kind === "item-check") {
+					if (kind === "message") {
 						play({
 							opacity: [0, 1],
-							transform: [`scale(${MOTION_ITEM_CHECK_SCALE})`, "scale(1)"]
-						}, {
-							...SPRING_PANEL,
-							opacity: tween(MOTION_TIMING.fast)
-						});
-					} else {
-						if (kind === "list-item") {
-							play({
-								opacity: [0, 1],
-								transform: [`scale(${MOTION_ITEM_ENTER_SCALE})`, "scale(1)"]
-							}, tween(MOTION_TIMING.listItem));
-						} 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: [`scale(${MOTION_ITEM_ENTER_SCALE})`, "scale(1)"]
-											}, tween(MOTION_TIMING.message));
-										} else {
-											if (kind === "fade" || kind === "card" || kind === "row") {
-												play({ opacity: [0, 1] }, tween(MOTION_TIMING.enter));
-											}
-										}
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-			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;
+							transform: [`translateY(${MESSAGE_RISE})`, "translateY(0px)"],
+							filter: [`blur(${ARC_BLUR.soft}px)`, "blur(0px)"]
+						}, tween(ARC_DURATION.standard));
 					}
-					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();
-						};
-					}));
-				}
-			}
-			let restingShadow = "none";
-			const withRestingShadow = (shadow) => {
-				if (!element.style.boxShadow) {
-					restingShadow = getComputedStyle(element).boxShadow;
 				}
-				return restingShadow === "none" ? shadow : `${restingShadow}, ${shadow}`;
-			};
-			if (kind === "card" || kind === "link" || kind === "icon") {
-				cleanups.push(hover(element, () => {
-					if (!isEnabled(element) || !canHover() || kind === "card" && !element.querySelector("a,button")) {
-						return;
-					}
-					const keep = { restoreOnComplete: false };
-					if (kind === "card") {
-						const rest = withRestingShadow(MOTION_CARD_SHADOW_REST);
-						const from = element.style.boxShadow ? getComputedStyle(element).boxShadow : rest;
-						play({ boxShadow: [from, withRestingShadow(MOTION_CARD_SHADOW_LIFT)] }, tween(MOTION_TIMING.enter), keep);
-					} else {
-						if (kind === "icon") {
-							play({ transform: ["rotate(0deg) scale(1)", "rotate(-3deg) scale(1.025)"] }, SPRING_PRESS, keep);
-						} else {
-							play({ opacity: .75 }, tween(MOTION_TIMING.fast), keep);
-						}
-					}
-					return () => {
-						if (kind === "card") {
-							play({ boxShadow: [getComputedStyle(element).boxShadow, withRestingShadow(MOTION_CARD_SHADOW_REST)] }, tween(MOTION_TIMING.fast));
-						} else {
-							if (kind === "icon") {
-								play({ transform: [currentTransform(element), "rotate(0deg) scale(1)"] }, SPRING_PRESS);
-							} else {
-								play({ opacity: 1 }, tween(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", settleField);
-				cleanups.push(() => element.removeEventListener("focusin", settleField));
-				const observer = new MutationObserver(settleField);
-				observer.observe(element, {
-					attributes: true,
-					attributeFilter: FIELD_STATE_ATTRIBUTES
-				});
-				cleanups.push(() => observer.disconnect());
-			}
-			if (kind === "check") {
-				let wasChecked = isChecked(element);
-				const strokeDraws = new Set();
-				const settleStrokes = () => {
-					strokeDraws.forEach(_temp3);
-					strokeDraws.clear();
-					element.querySelectorAll("path").forEach(_temp4);
-				};
-				cleanups.push(settleStrokes);
-				const observer_0 = new MutationObserver(() => {
-					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, {
-					attributes: true,
-					attributeFilter: ["data-state"]
-				});
-				cleanups.push(() => observer_0.disconnect());
 			}
 			if (kind === "rotate") {
 				const restingAngle = () => parseFloat(getComputedStyle(element).rotate) || 0;
@@ -515,13 +279,13 @@ export function MotionSlot(t0) {
 						play({ transform: [`rotate(${delta}deg)`, "rotate(0deg)"] }, SPRING_CHEVRON);
 					}
 				};
-				const observer_1 = new MutationObserver(turn);
-				observer_1.observe(element, {
+				const observer = new MutationObserver(turn);
+				observer.observe(element, {
 					attributes: true,
 					attributeFilter: ["class"]
 				});
 				if (element.parentElement) {
-					observer_1.observe(element.parentElement, {
+					observer.observe(element.parentElement, {
 						attributes: true,
 						attributeFilter: [
 							"aria-expanded",
@@ -530,12 +294,12 @@ export function MotionSlot(t0) {
 						]
 					});
 				}
-				cleanups.push(() => observer_1.disconnect());
+				cleanups.push(() => observer.disconnect());
 			}
 			if (kind === "reveal") {
 				const isLoading = () => element.hasAttribute("data-loading");
 				let wasLoading = isLoading();
-				const observer_2 = new MutationObserver(() => {
+				const observer_0 = new MutationObserver(() => {
 					const loading = isLoading();
 					const loaded = wasLoading && !loading && !element.hasAttribute("data-error");
 					wasLoading = loading;
@@ -544,86 +308,18 @@ export function MotionSlot(t0) {
 					}
 					play({
 						opacity: [0, 1],
-						transform: [`scale(${MOTION_REVEAL_SCALE})`, "scale(1)"],
-						filter: [`blur(${MOTION_REVEAL_BLUR_PX}px)`, "blur(0px)"]
-					}, tween(MOTION_TIMING.reveal));
+						filter: [`blur(${ARC_BLUR.soft}px)`, "blur(0px)"]
+					}, tween(ARC_DURATION.standard));
 				});
-				observer_2.observe(element, {
+				observer_0.observe(element, {
 					attributes: true,
 					attributeFilter: ["data-loading", "data-error"]
 				});
-				cleanups.push(() => observer_2.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_3 = 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_3.observe(element, {
-					attributes: true,
-					attributeFilter: ["data-state"]
-				});
-				cleanups.push(() => observer_3.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_0 = getComputedStyle(element).scale;
-							squish?.cancel();
-							const release = element.animate({ scale: [from_0 === "none" ? "1" : from_0, "1"] }, squishTiming);
-							squish = release;
-							release.finished.then(() => {
-								if (squish === release) {
-									release.cancel();
-									squish = null;
-								}
-							}).catch(_temp5);
-						};
-					}));
-				}
+				cleanups.push(() => observer_0.disconnect());
 			}
 			return dispose;
 		};
-		t4 = [
+		t3 = [
 			element,
 			kind,
 			reduceMotion,
@@ -633,53 +329,46 @@ export function MotionSlot(t0) {
 		$[8] = isPresent;
 		$[9] = kind;
 		$[10] = reduceMotion;
-		$[11] = t3;
-		$[12] = t4;
+		$[11] = t2;
+		$[12] = t3;
 	} else {
-		t3 = $[11];
-		t4 = $[12];
+		t2 = $[11];
+		t3 = $[12];
 	}
-	useLayoutEffect(t3, t4);
-	let t5;
+	useLayoutEffect(t2, t3);
+	let t4;
 	if ($[13] !== isPresent) {
-		t5 = isPresent ? {} : {
+		t4 = isPresent ? {} : {
 			inert: true,
 			"aria-hidden": true
 		};
 		$[13] = isPresent;
-		$[14] = t5;
+		$[14] = t4;
 	} else {
-		t5 = $[14];
+		t4 = $[14];
 	}
-	let t6;
-	if ($[15] !== attach || $[16] !== children || $[17] !== props || $[18] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(Slot.Root, {
+	let t5;
+	if ($[15] !== attach || $[16] !== children || $[17] !== props || $[18] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(Slot.Root, {
 			...props,
 			ref: attach,
-			...t5,
+			...t4,
 			children
 		});
 		$[15] = attach;
 		$[16] = children;
 		$[17] = props;
-		$[18] = t5;
-		$[19] = t6;
+		$[18] = t4;
+		$[19] = t5;
 	} else {
-		t6 = $[19];
+		t5 = $[19];
 	}
-	return t6;
-}
-function _temp5() {}
-function _temp4(path) {
-	STROKE_DRAW_ATTRIBUTES.forEach((attribute) => path.removeAttribute(attribute));
-}
-function _temp3(draw) {
-	return draw.cancel();
+	return t5;
 }
 function _temp2(duration) {
 	return {
 		duration,
-		ease: EASE_OUT
+		ease: EASE_ENTER
 	};
 }
 function _temp(cleanup) {