beez-ui 0.6.1 → 0.7.0

package/dist/components/typing-animation.js

@@ -3,6 +3,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 import { motion } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_TIMING } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const motionElements = {
@@ -19,8 +20,23 @@ const motionElements = {
 	section: motion.section,
 	span: motion.span
 };
+/** Idle cursors fade out and back in, like a text editor's caret. */
+const CURSOR_BLINK_OPACITY = [
+	1,
+	1,
+	0,
+	0,
+	1
+];
+const CURSOR_BLINK_TIMES = [
+	0,
+	.4,
+	.5,
+	.9,
+	1
+];
 export function TypingAnimation(t0) {
-	const $ = _c(67);
+	const $ = _c(68);
 	let children;
 	let className;
 	let deleteSpeed;
@@ -293,6 +309,7 @@ export function TypingAnimation(t0) {
 	const currentWordGraphemes = t19;
 	const isComplete = !loop && currentWordIndex === wordsToAnimate.length - 1 && currentCharIndex >= currentWordGraphemes.length && phase !== "deleting";
 	const shouldShowCursor = showCursor && !shouldReduceMotion && !isComplete && (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
+	const isCursorIdle = !shouldStart || phase === "pause" || displayedText === "";
 	let t20;
 	if ($[51] !== cursorStyle) {
 		t20 = () => {
@@ -328,20 +345,30 @@ export function TypingAnimation(t0) {
 		t23 = $[56];
 	}
 	let t24;
-	if ($[57] !== blinkCursor || $[58] !== getCursorChar || $[59] !== shouldShowCursor) {
-		t24 = shouldShowCursor && /* @__PURE__ */ _jsx("span", {
-			className: cn("inline-block", blinkCursor && "animate-blink-cursor"),
+	if ($[57] !== blinkCursor || $[58] !== getCursorChar || $[59] !== isCursorIdle || $[60] !== shouldShowCursor) {
+		t24 = shouldShowCursor && /* @__PURE__ */ _jsx(motion.span, {
+			"aria-hidden": "true",
+			"data-slot": "typing-animation-cursor",
+			className: "inline-block",
+			animate: { opacity: blinkCursor && isCursorIdle ? CURSOR_BLINK_OPACITY : 1 },
+			transition: blinkCursor && isCursorIdle ? {
+				duration: MOTION_TIMING.cursorBlink,
+				times: CURSOR_BLINK_TIMES,
+				repeat: Infinity,
+				ease: "easeInOut"
+			} : { duration: MOTION_TIMING.fast },
 			children: getCursorChar()
 		});
 		$[57] = blinkCursor;
 		$[58] = getCursorChar;
-		$[59] = shouldShowCursor;
-		$[60] = t24;
+		$[59] = isCursorIdle;
+		$[60] = shouldShowCursor;
+		$[61] = t24;
 	} else {
-		t24 = $[60];
+		t24 = $[61];
 	}
 	let t25;
-	if ($[61] !== MotionComponent || $[62] !== displayedText || $[63] !== props || $[64] !== t23 || $[65] !== t24) {
+	if ($[62] !== MotionComponent || $[63] !== displayedText || $[64] !== props || $[65] !== t23 || $[66] !== t24) {
 		t25 = /* @__PURE__ */ _jsxs(MotionComponent, {
 			ref: elementRef,
 			"data-slot": "typing-animation",
@@ -349,14 +376,14 @@ export function TypingAnimation(t0) {
 			...props,
 			children: [displayedText, t24]
 		});
-		$[61] = MotionComponent;
-		$[62] = displayedText;
-		$[63] = props;
-		$[64] = t23;
-		$[65] = t24;
-		$[66] = t25;
+		$[62] = MotionComponent;
+		$[63] = displayedText;
+		$[64] = props;
+		$[65] = t23;
+		$[66] = t24;
+		$[67] = t25;
 	} else {
-		t25 = $[66];
+		t25 = $[67];
 	}
 	return t25;
 }

package/dist/lib/column-filter-value.d.ts

@@ -0,0 +1,12 @@
+/** Normalizes text for accent- and case-insensitive comparisons. */
+export declare function normalizeFilterToken(value: string): string;
+/**
+ * Evalúa el valor de una celda contra un filtro de columna de la barra de filtros.
+ * Entiende los valores estructurados (`numberRange`, `enum`, `presence`, `yearMonthRange`)
+ * y, para texto plano, busca coincidencias parciales sin distinguir acentos ni mayúsculas.
+ * Una celda sin valor comparable no cumple los rangos; un filtro vacío deja pasar la fila.
+ * @param cellValue - Valor de la celda tal como lo devuelve el accessor de la columna.
+ * @param filterValue - Valor activo del filtro de esa columna.
+ * @returns `true` cuando la fila debe mostrarse.
+ */
+export declare function matchesColumnFilterValue(cellValue: unknown, filterValue: unknown): boolean;

package/dist/lib/column-filter-value.js

@@ -0,0 +1,52 @@
+import { matchesAdvancedYearMonthRangeFilter } from "./year-month-filter.js";
+const DIACRITICS_PATTERN = /[̀-ͯ]/g;
+/** Normalizes text for accent- and case-insensitive comparisons. */
+export function normalizeFilterToken(value) {
+	return value.normalize("NFD").replace(DIACRITICS_PATTERN, "").toLocaleLowerCase().trim();
+}
+/** Distinguishes the grammar's structured values from plain text written by the search input. */
+function isColumnFilterValue(value) {
+	return typeof value === "object" && value !== null && typeof value.kind === "string";
+}
+/** Reads numbers and numeric strings; anything else has no comparable value. */
+function toFiniteNumber(value) {
+	if (typeof value === "number") return Number.isFinite(value) ? value : null;
+	if (typeof value === "string" && value.trim() !== "") {
+		const parsed = Number(value);
+		return Number.isFinite(parsed) ? parsed : null;
+	}
+	return null;
+}
+/** Treats `null`, `undefined`, blank strings and empty lists as a missing value. */
+function isMissingValue(value) {
+	if (value == null) return true;
+	if (typeof value === "string") return value.trim() === "";
+	if (Array.isArray(value)) return value.length === 0;
+	return false;
+}
+/**
+* Evalúa el valor de una celda contra un filtro de columna de la barra de filtros.
+* Entiende los valores estructurados (`numberRange`, `enum`, `presence`, `yearMonthRange`)
+* y, para texto plano, busca coincidencias parciales sin distinguir acentos ni mayúsculas.
+* Una celda sin valor comparable no cumple los rangos; un filtro vacío deja pasar la fila.
+* @param cellValue - Valor de la celda tal como lo devuelve el accessor de la columna.
+* @param filterValue - Valor activo del filtro de esa columna.
+* @returns `true` cuando la fila debe mostrarse.
+*/
+export function matchesColumnFilterValue(cellValue, filterValue) {
+	if (!isColumnFilterValue(filterValue)) {
+		const query = normalizeFilterToken(String(filterValue ?? ""));
+		return query === "" || normalizeFilterToken(String(cellValue ?? "")).includes(query);
+	}
+	switch (filterValue.kind) {
+		case "numberRange": {
+			const value = toFiniteNumber(cellValue);
+			if (value == null) return false;
+			if (filterValue.min != null && value < filterValue.min) return false;
+			return filterValue.max == null || value <= filterValue.max;
+		}
+		case "enum": return Array.isArray(cellValue) ? cellValue.some((item) => String(item) === filterValue.value) : String(cellValue ?? "") === filterValue.value;
+		case "presence": return filterValue.value === "hasValue" ? !isMissingValue(cellValue) : isMissingValue(cellValue);
+		case "yearMonthRange": return matchesAdvancedYearMonthRangeFilter(filterValue, toFiniteNumber(cellValue));
+	}
+}

package/dist/motion/glide-indicator.d.ts

@@ -1,4 +1,4 @@
-import { SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
+import { SPRING_HIGHLIGHT, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
 /** Which part of the active item carries the highlight that must travel. */
 type GlideSurface = "background" | "after";
 /** Describes the items of one container and how their active state is exposed. */
@@ -13,7 +13,13 @@ export interface GlidePreset {
     attributes: string[];
     isActive: (item: Element) => boolean;
     surface: (container: HTMLElement) => GlideSurface;
-    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS;
+    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS | typeof SPRING_HIGHLIGHT;
+    /**
+     * Highlights that follow the pointer (menus, listboxes) jump straight to the hovered item:
+     * the pointer already marks the position, so a travelling copy would only trail behind it.
+     * The glide is kept for keyboard navigation.
+     */
+    instantOnPointer?: boolean;
 }
 export declare const GLIDE_PRESETS: {
     tabs: {
@@ -42,7 +48,7 @@ export declare const GLIDE_PRESETS: {
             readonly mass: 0.6;
         };
     };
-    menu: {
+    pagination: {
         itemSelector: string;
         containerSelector: string;
         attributes: string[];
@@ -55,6 +61,34 @@ export declare const GLIDE_PRESETS: {
             readonly mass: 0.6;
         };
     };
+    suggestions: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly stiffness: 700;
+            readonly damping: 45;
+            readonly mass: 0.5;
+        };
+        instantOnPointer: true;
+    };
+    menu: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly stiffness: 700;
+            readonly damping: 45;
+            readonly mass: 0.5;
+        };
+        instantOnPointer: true;
+    };
 };
 export type GlidePresetName = keyof typeof GLIDE_PRESETS;
 /** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */

package/dist/motion/glide-indicator.js

@@ -4,7 +4,7 @@
 * previous item and is removed once it lands, leaving the item's own styles in charge again.
 */
 import { animate } from "motion/react";
-import { GLIDE_CONTINUITY_MS, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
+import { GLIDE_CONTINUITY_MS, SPRING_HIGHLIGHT, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
 export const GLIDE_PRESETS = {
 	tabs: {
 		itemSelector: "[data-slot=\"tabs-trigger\"]",
@@ -22,13 +22,31 @@ export const GLIDE_PRESETS = {
 		surface: () => "background",
 		spring: SPRING_LAYOUT
 	},
+	pagination: {
+		itemSelector: "[data-slot=\"pagination-link\"]",
+		containerSelector: "[data-slot=\"pagination-content\"]",
+		attributes: ["aria-current"],
+		isActive: (item) => item.getAttribute("aria-current") === "page",
+		surface: () => "background",
+		spring: SPRING_LAYOUT
+	},
+	suggestions: {
+		itemSelector: "[role=\"option\"]",
+		containerSelector: "[role=\"listbox\"]",
+		attributes: ["aria-selected"],
+		isActive: (item) => item.getAttribute("aria-selected") === "true",
+		surface: () => "background",
+		spring: SPRING_HIGHLIGHT,
+		instantOnPointer: true
+	},
 	menu: {
 		itemSelector: "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"option\"]",
 		containerSelector: "[role=\"menu\"],[role=\"listbox\"]",
 		attributes: ["data-highlighted"],
 		isActive: (item) => item.hasAttribute("data-highlighted"),
 		surface: () => "background",
-		spring: SPRING_LAYOUT
+		spring: SPRING_HIGHLIGHT,
+		instantOnPointer: true
 	}
 };
 /** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */
@@ -136,6 +154,20 @@ export function attachGlideIndicator(container, preset) {
 		position: container.style.position,
 		isolation: container.style.isolation
 	};
+	// The last input decides whether a highlight change was driven by the pointer or the keyboard.
+	// Keyboard focus may live outside the container (a combobox input), so both are read from the
+	// document; the pointer only counts while it moves over this container.
+	let isPointerDriven = false;
+	const onPointerMove = () => {
+		isPointerDriven = true;
+	};
+	const onKeyDown = () => {
+		isPointerDriven = false;
+	};
+	if (preset.instantOnPointer) {
+		container.addEventListener("pointermove", onPointerMove);
+		container.ownerDocument.addEventListener("keydown", onKeyDown, true);
+	}
 	/** Puts the item's own highlight back and removes the travelling copy. */
 	function settle() {
 		animation?.cancel();
@@ -236,7 +268,7 @@ export function attachGlideIndicator(container, preset) {
 		const isContinuous = previous !== null && previous !== active && previous.isConnected && !preset.isActive(previous) && (lastActiveSeenAt === Number.NEGATIVE_INFINITY || now - lastActiveSeenAt <= GLIDE_CONTINUITY_MS);
 		lastActive = active;
 		lastActiveSeenAt = Number.NEGATIVE_INFINITY;
-		if (isContinuous) glide(previous, active);
+		if (isContinuous && !(preset.instantOnPointer && isPointerDriven)) glide(previous, active);
 		else settle();
 	});
 	observer.observe(container, {
@@ -247,6 +279,8 @@ export function attachGlideIndicator(container, preset) {
 	});
 	return () => {
 		observer.disconnect();
+		container.removeEventListener("pointermove", onPointerMove);
+		container.ownerDocument.removeEventListener("keydown", onKeyDown, true);
 		settle();
 	};
 }

package/dist/motion/motion-slot.js

@@ -6,7 +6,7 @@ import { Slot } from "radix-ui";
 import { animate, hover, press, usePresence, frame } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.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 { 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, MOTION_REVEAL_BLUR_PX, MOTION_REVEAL_SCALE, MOTION_SHIMMER_TRANSLATE, MOTION_CARD_SHADOW_LIFT, MOTION_CARD_SHADOW_REST, 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";
@@ -277,16 +277,14 @@ export function MotionSlot(t0) {
 				});
 				return dispose;
 			}
-			if (kind === "skeleton") {
-				animations.set(animate(element, { opacity: [
-					1,
-					.6,
-					1
-				] }, {
-					duration: MOTION_TIMING.skeleton,
-					repeat: Infinity,
-					ease: "easeInOut"
-				}), ["opacity"]);
+			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"
+				});
+				cleanups.push(() => shimmer.cancel());
 			} else {
 				if (kind === "icon-swap") {
 					play({
@@ -398,6 +396,13 @@ export function MotionSlot(t0) {
 					}));
 				}
 			}
+			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")) {
@@ -405,7 +410,9 @@ export function MotionSlot(t0) {
 					}
 					const keep = { restoreOnComplete: false };
 					if (kind === "card") {
-						play({ boxShadow: "0 4px 16px rgba(0,0,0,0.08)" }, tween(MOTION_TIMING.enter), keep);
+						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);
@@ -415,7 +422,7 @@ export function MotionSlot(t0) {
 					}
 					return () => {
 						if (kind === "card") {
-							play({ boxShadow: original.boxShadow || "0 0px 0px rgba(0,0,0,0)" }, tween(MOTION_TIMING.fast));
+							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);
@@ -544,6 +551,28 @@ export function MotionSlot(t0) {
 				}
 				cleanups.push(() => observer_1.disconnect());
 			}
+			if (kind === "reveal") {
+				const isLoading = () => element.hasAttribute("data-loading");
+				let wasLoading = isLoading();
+				const observer_2 = new MutationObserver(() => {
+					const loading = isLoading();
+					const loaded = wasLoading && !loading && !element.hasAttribute("data-error");
+					wasLoading = loading;
+					if (!loaded) {
+						return;
+					}
+					play({
+						opacity: [0, 1],
+						transform: [`scale(${MOTION_REVEAL_SCALE})`, "scale(1)"],
+						filter: [`blur(${MOTION_REVEAL_BLUR_PX}px)`, "blur(0px)"]
+					}, tween(MOTION_TIMING.reveal));
+				});
+				observer_2.observe(element, {
+					attributes: true,
+					attributeFilter: ["data-loading", "data-error"]
+				});
+				cleanups.push(() => observer_2.disconnect());
+			}
 			if (kind === "thumb") {
 				const restingOffset = () => {
 					if (!element.getClientRects().length) {
@@ -565,7 +594,7 @@ export function MotionSlot(t0) {
 					element.parentElement?.removeEventListener("pointerenter", remeasure);
 					element.parentElement?.removeEventListener("focusin", remeasure);
 				});
-				const observer_2 = new MutationObserver(() => {
+				const observer_3 = new MutationObserver(() => {
 					const glideOffset = translateXOf(getComputedStyle(element).transform);
 					cancel(["transform"]);
 					restore(["transform"]);
@@ -576,11 +605,11 @@ export function MotionSlot(t0) {
 						play({ transform: [`translateX(${delta_0}px)`, "translateX(0px)"] }, SPRING_THUMB);
 					}
 				});
-				observer_2.observe(element, {
+				observer_3.observe(element, {
 					attributes: true,
 					attributeFilter: ["data-state"]
 				});
-				cleanups.push(() => observer_2.disconnect());
+				cleanups.push(() => observer_3.disconnect());
 				const root = element.parentElement;
 				if (root && typeof element.animate === "function") {
 					const squishTiming = {
@@ -597,9 +626,9 @@ export function MotionSlot(t0) {
 						squish?.cancel();
 						squish = element.animate({ scale: ["1", String(MOTION_THUMB_SQUISH_SCALE)] }, squishTiming);
 						return () => {
-							const from = getComputedStyle(element).scale;
+							const from_0 = getComputedStyle(element).scale;
 							squish?.cancel();
-							const release = element.animate({ scale: [from === "none" ? "1" : from, "1"] }, squishTiming);
+							const release = element.animate({ scale: [from_0 === "none" ? "1" : from_0, "1"] }, squishTiming);
 							squish = release;
 							release.finished.then(() => {
 								if (squish === release) {

package/dist/motion/surface-keyframes.js

@@ -1,5 +1,6 @@
-import { MOTION_DIALOG_DISTANCE, MOTION_EASE, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, SPRING_PANEL, SPRING_TOOLTIP } from "./tokens.js";
+import { MOTION_DIALOG_DISTANCE, MOTION_EASE, MOTION_EASE_DRAWER, MOTION_SURFACE_CLIP_BLEED_PX, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, SPRING_PANEL, SPRING_TOOLTIP } from "./tokens.js";
 const EASE_OUT = [...MOTION_EASE];
+const EASE_DRAWER = [...MOTION_EASE_DRAWER];
 const SIDES = [
 	"top",
 	"right",
@@ -48,18 +49,25 @@ function offsetAwayFromTrigger(side, distance) {
 		y: 0
 	};
 }
+/**
+* Open edges extend the clip past the box, so the ring and drop shadow drawn outside it
+* (Tailwind rings are box-shadows) are never cut while the surface reveals or settles.
+*/
+const OPEN_EDGE = `-${MOTION_SURFACE_CLIP_BLEED_PX}px`;
+/** Fully revealed clip: nothing of the surface, its outline or its shadow is hidden. */
+const REVEALED_CLIP = `inset(${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE})`;
 /** Collapsed clip anchored at the corner or edge closest to the trigger. */
 function collapsedClip(side, align) {
 	const hidden = `${MOTION_SURFACE_CLIP_PERCENT}%`;
 	const half = `${MOTION_SURFACE_CLIP_PERCENT / 2}%`;
 	/** Maps an alignment to the inset kept on the leading and trailing edges of the cross axis. */
-	const crossAxis = (value) => value === "start" ? ["0%", hidden] : value === "end" ? [hidden, "0%"] : [half, half];
+	const crossAxis = (value) => value === "start" ? [OPEN_EDGE, hidden] : value === "end" ? [hidden, OPEN_EDGE] : [half, half];
 	if (side === "bottom" || side === "top") {
 		const [left, right] = crossAxis(align);
-		return side === "bottom" ? `inset(0% ${right} ${hidden} ${left})` : `inset(${hidden} ${right} 0% ${left})`;
+		return side === "bottom" ? `inset(${OPEN_EDGE} ${right} ${hidden} ${left})` : `inset(${hidden} ${right} ${OPEN_EDGE} ${left})`;
 	}
 	const [top, bottom] = crossAxis(align);
-	return side === "right" ? `inset(${top} ${hidden} ${bottom} 0%)` : `inset(${top} 0% ${bottom} ${hidden})`;
+	return side === "right" ? `inset(${top} ${hidden} ${bottom} ${OPEN_EDGE})` : `inset(${top} ${OPEN_EDGE} ${bottom} ${hidden})`;
 }
 /** Edge-panel travel: fully off-screen on the side the sheet is attached to. */
 function sheetOffset(element) {
@@ -136,7 +144,7 @@ export function surfaceEnter(element, kind) {
 	};
 	// Primitives aligned over their trigger (Select item-aligned) have no side to reveal from.
 	if (side) {
-		keyframes.clipPath = [collapsedClip(side, align), "inset(0% 0% 0% 0%)"];
+		keyframes.clipPath = [collapsedClip(side, align), REVEALED_CLIP];
 	}
 	return {
 		keyframes,
@@ -190,9 +198,13 @@ export function surfaceExit(element, kind) {
 	}
 	if (kind === "sheet") {
 		const offset = sheetOffset(element);
+		// A spring would linger at the edge; the drawer curve accelerates the panel away.
 		return {
 			keyframes: { transform: [transform("0%", "0%"), transform(offset.x, offset.y)] },
-			transition: SPRING_PANEL
+			transition: {
+				duration: MOTION_TIMING.sheetExit,
+				ease: EASE_DRAWER
+			}
 		};
 	}
 	return {

package/dist/motion/tokens.d.ts

@@ -16,6 +16,10 @@ export declare const MOTION_TIMING: {
     readonly listStagger: 0.035;
     readonly closeEnter: 0.2;
     readonly closeDelay: 0.16;
+    readonly sheetExit: 0.24;
+    readonly reveal: 0.4;
+    readonly monthSwap: 0.24;
+    readonly cursorBlink: 1;
     readonly skeleton: 1.8;
 };
 /** Items beyond this position share the last stagger delay, so long lists never lag behind. */
@@ -47,6 +51,13 @@ export declare const SPRING_LAYOUT: {
     readonly damping: 32;
     readonly mass: 0.6;
 };
+/** Keyboard highlight in menus and lists: quick enough to keep up with a held arrow key. */
+export declare const SPRING_HIGHLIGHT: {
+    readonly type: "spring";
+    readonly stiffness: 700;
+    readonly damping: 45;
+    readonly mass: 0.5;
+};
 /** Tab indicator glide, tuned to settle without overshooting the list edges. */
 export declare const SPRING_TABS: {
     readonly type: "spring";
@@ -84,13 +95,25 @@ export declare const MOTION_ITEM_CHECK_SCALE = 0.75;
 export declare const MOTION_ICON_SWAP_SCALE = 0.25;
 export declare const MOTION_CLOSE_BUTTON_SCALE = 0.8;
 export declare const MOTION_LIST_ITEM_DISTANCE = 6;
+/** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
+export declare const MOTION_REVEAL_SCALE = 1.06;
+export declare const MOTION_REVEAL_BLUR_PX = 6;
+/** Calendar months slide just enough to show the direction of navigation. */
+export declare const MOTION_MONTH_DISTANCE = 12;
+/** Skeleton shine travels from fully before the box to fully past it, as a `translate` value. */
+export declare const MOTION_SHIMMER_TRANSLATE: readonly ["-100% 0", "100% 0"];
+/** Hovered interactive cards gain a soft drop shadow; the rest value has the same shape, invisible. */
+export declare const MOTION_CARD_SHADOW_LIFT = "0px 4px 16px 0px rgba(0, 0, 0, 0.08)";
+export declare const MOTION_CARD_SHADOW_REST = "0px 0px 0px 0px rgba(0, 0, 0, 0)";
 export declare const MOTION_SURFACE_SCALE = 0.96;
 /** Fraction of the surface kept hidden by the clip at the start of its reveal, in percent. */
 export declare const MOTION_SURFACE_CLIP_PERCENT = 92;
+/** Room left outside a revealing surface for its ring and drop shadow (`shadow-lg` spans ~22px). */
+export declare const MOTION_SURFACE_CLIP_BLEED_PX = 24;
 export declare const MOTION_TOOLTIP_DISTANCE = 8;
 export declare const MOTION_DIALOG_DISTANCE = 20;
 export declare const MOTION_CONTENT_DISTANCE = 4;
 export declare const MOTION_INVALID_SHAKE_PX: readonly [0, -6, 6, -4, 4, -2, 0];
 /** Time after an item loses its active state during which a new active item still glides from it. */
 export declare const GLIDE_CONTINUITY_MS = 300;
-export type MotionKind = "press" | "subtle-press" | "toggle" | "fade" | "content" | "message" | "card" | "row" | "field" | "thumb" | "check" | "selection" | "item-check" | "rotate" | "list-item" | "icon-swap" | "delayed-pop" | "skeleton" | "link" | "icon" | "tooltip" | "surface" | "dialog" | "sheet" | "overlay";
+export type MotionKind = "press" | "subtle-press" | "toggle" | "fade" | "content" | "message" | "card" | "row" | "field" | "thumb" | "check" | "selection" | "item-check" | "rotate" | "list-item" | "icon-swap" | "delayed-pop" | "skeleton" | "reveal" | "link" | "icon" | "tooltip" | "surface" | "dialog" | "sheet" | "overlay";

package/dist/motion/tokens.js

@@ -16,6 +16,10 @@ export const MOTION_TIMING = {
 	listStagger: .035,
 	closeEnter: .2,
 	closeDelay: .16,
+	sheetExit: .24,
+	reveal: .4,
+	monthSwap: .24,
+	cursorBlink: 1,
 	skeleton: 1.8
 };
 /** Items beyond this position share the last stagger delay, so long lists never lag behind. */
@@ -62,6 +66,13 @@ export const SPRING_LAYOUT = {
 	damping: 32,
 	mass: .6
 };
+/** Keyboard highlight in menus and lists: quick enough to keep up with a held arrow key. */
+export const SPRING_HIGHLIGHT = {
+	type: "spring",
+	stiffness: 700,
+	damping: 45,
+	mass: .5
+};
 /** Tab indicator glide, tuned to settle without overshooting the list edges. */
 export const SPRING_TABS = {
 	type: "spring",
@@ -99,9 +110,21 @@ export const MOTION_ITEM_CHECK_SCALE = .75;
 export const MOTION_ICON_SWAP_SCALE = .25;
 export const MOTION_CLOSE_BUTTON_SCALE = .8;
 export const MOTION_LIST_ITEM_DISTANCE = 6;
+/** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
+export const MOTION_REVEAL_SCALE = 1.06;
+export const MOTION_REVEAL_BLUR_PX = 6;
+/** Calendar months slide just enough to show the direction of navigation. */
+export const MOTION_MONTH_DISTANCE = 12;
+/** Skeleton shine travels from fully before the box to fully past it, as a `translate` value. */
+export const MOTION_SHIMMER_TRANSLATE = ["-100% 0", "100% 0"];
+/** Hovered interactive cards gain a soft drop shadow; the rest value has the same shape, invisible. */
+export const MOTION_CARD_SHADOW_LIFT = "0px 4px 16px 0px rgba(0, 0, 0, 0.08)";
+export const MOTION_CARD_SHADOW_REST = "0px 0px 0px 0px rgba(0, 0, 0, 0)";
 export const MOTION_SURFACE_SCALE = .96;
 /** Fraction of the surface kept hidden by the clip at the start of its reveal, in percent. */
 export const MOTION_SURFACE_CLIP_PERCENT = 92;
+/** Room left outside a revealing surface for its ring and drop shadow (`shadow-lg` spans ~22px). */
+export const MOTION_SURFACE_CLIP_BLEED_PX = 24;
 export const MOTION_TOOLTIP_DISTANCE = 8;
 export const MOTION_DIALOG_DISTANCE = 20;
 export const MOTION_CONTENT_DISTANCE = 4;