beez-ui 0.6.2 → 0.7.0

package/dist/components/sheet.js

@@ -196,7 +196,7 @@ function SheetContent(t0) {
 	}
 	let t5;
 	if ($[7] !== className) {
-		t5 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg transition ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm ", className);
+		t5 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm ", className);
 		$[7] = className;
 		$[8] = t5;
 	} else {
@@ -207,14 +207,17 @@ function SheetContent(t0) {
 		t6 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
-			children: /* @__PURE__ */ _jsxs(Button, {
-				variant: "ghost",
-				className: "absolute top-4 right-4",
-				size: "icon-sm",
-				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "delayed-pop",
+				children: /* @__PURE__ */ _jsxs(Button, {
+					variant: "ghost",
+					className: "absolute top-4 right-4",
+					size: "icon-sm",
+					children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
+						className: "sr-only",
+						children: "Close"
+					})]
+				})
 			})
 		});
 		$[9] = showCloseButton;

package/dist/components/sidebar.js

@@ -7,6 +7,7 @@ import { useIsMobile } from "../hooks/use-mobile.js";
 import { useSidebarPersistence, saveSidebarPreference } from "../hooks/use-sidebar-persistence.js";
 import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
+import { MOTION_EASE_DRAWER } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sidebar.js";
 import { Button } from "./button.js";
@@ -21,6 +22,8 @@ const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+/** Drawer curve shared by the collapse transitions: quick start, long gentle settle. */
+const SIDEBAR_EASE = `cubic-bezier(${MOTION_EASE_DRAWER.join(", ")})`;
 const SIDEBAR_MENU_SKELETON_TEXT_WIDTH = "70%";
 function subscribeToClientMount() {
 	return () => {};
@@ -158,6 +161,7 @@ function SidebarProvider(t0) {
 		t7 = {
 			"--sidebar-width": SIDEBAR_WIDTH,
 			"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+			"--sidebar-ease": SIDEBAR_EASE,
 			...style
 		};
 		$[26] = style;
@@ -339,7 +343,7 @@ function Sidebar(t0) {
 	const t5 = variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)";
 	let t6;
 	if ($[27] !== t5) {
-		t6 = cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t5);
+		t6 = cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-(--sidebar-ease)", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t5);
 		$[27] = t5;
 		$[28] = t6;
 	} else {
@@ -359,7 +363,7 @@ function Sidebar(t0) {
 	const t8 = variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l";
 	let t9;
 	if ($[31] !== className || $[32] !== t8) {
-		t9 = cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", t8, className);
+		t9 = cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-(--sidebar-ease) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", t8, className);
 		$[31] = className;
 		$[32] = t8;
 		$[33] = t9;
@@ -507,7 +511,7 @@ function SidebarRail(t0) {
 	const { toggleSidebar } = useSidebar();
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className);
+		t1 = cn("absolute inset-y-0 z-20 hidden w-4 transition-all duration-300 ease-(--sidebar-ease) group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -812,7 +816,7 @@ function SidebarGroupLabel(t0) {
 	const Comp = asChild ? Slot.Root : "div";
 	let t2;
 	if ($[4] !== className) {
-		t2 = cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className);
+		t2 = cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-300 ease-(--sidebar-ease) group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className);
 		$[4] = className;
 		$[5] = t2;
 	} else {
@@ -996,7 +1000,7 @@ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w
 	variants: {
 		variant: {
 			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-			outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
 		},
 		size: {
 			default: "h-8 text-sm",

package/dist/components/skeleton.d.ts

@@ -1,2 +1,8 @@
+/**
+ * Placeholder with a soft shine that sweeps across it while content loads.
+ * The shine rests outside the box, so reduced motion shows a plain muted block.
+ * @param props - Native div properties and optional consumer overrides.
+ * @returns The placeholder element with its loading animation.
+ */
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 export { Skeleton };

package/dist/components/skeleton.js

@@ -1,12 +1,18 @@
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Placeholder with a soft shine that sweeps across it while content loads.
+* The shine rests outside the box, so reduced motion shows a plain muted block.
+* @param props - Native div properties and optional consumer overrides.
+* @returns The placeholder element with its loading animation.
+*/
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ _jsx(MotionSlot, {
 		kind: "skeleton",
 		children: /* @__PURE__ */ _jsx("div", {
 			"data-slot": "skeleton",
-			className: cn("rounded-md bg-muted", className),
+			className: cn("relative overflow-hidden rounded-md bg-muted after:pointer-events-none after:absolute after:inset-0 after:-translate-x-full after:bg-linear-to-r after:from-transparent after:via-foreground/6 after:to-transparent", className),
 			...props
 		})
 	});

package/dist/components/switch.js

@@ -36,7 +36,7 @@ function Switch(t0) {
 			kind: "thumb",
 			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
 				"data-slot": "switch-thumb",
-				className: "pointer-events-none block rounded-full bg-background ring-0  group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+				className: "pointer-events-none block rounded-full bg-background shadow-sm ring-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
 			})
 		});
 		$[6] = t3;

package/dist/components/textarea.js

@@ -12,7 +12,7 @@ function Textarea({ className, ...props }) {
 		kind: "field",
 		children: /* @__PURE__ */ _jsx("textarea", {
 			"data-slot": "textarea",
-			className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 			...props
 		})
 	});

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) {