beez-ui 0.5.6 → 0.6.0

package/dist/components/select.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
+import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
@@ -115,7 +116,7 @@ function SelectTrigger(t0) {
 	const size = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border data-[state=open]:*:data-[slot=select-icon]:rotate-180 border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -125,7 +126,13 @@ function SelectTrigger(t0) {
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ _jsx(SelectPrimitive.Icon, {
 			asChild: true,
-			children: /* @__PURE__ */ _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "rotate",
+				children: /* @__PURE__ */ _jsx(ChevronDownIcon, {
+					"data-slot": "select-icon",
+					className: "pointer-events-none size-4 text-muted-foreground"
+				})
+			})
 		});
 		$[7] = t3;
 	} else {
@@ -234,18 +241,21 @@ function SelectContent(t0) {
 	if ($[17] !== align || $[18] !== position || $[19] !== props || $[20] !== t3 || $[21] !== t5 || $[22] !== t9) {
 		t11 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "surface",
-			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
-				"data-slot": "select-content",
-				"data-align-trigger": t3,
-				className: t5,
-				position,
-				align,
-				...props,
-				children: [
-					t6,
-					t9,
-					t10
-				]
+			children: /* @__PURE__ */ _jsx(GlideSlot, {
+				preset: "menu",
+				children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
+					"data-slot": "select-content",
+					"data-align-trigger": t3,
+					className: t5,
+					position,
+					align,
+					...props,
+					children: [
+						t6,
+						t9,
+						t10
+					]
+				})
 			})
 		}) });
 		$[17] = align;
@@ -334,7 +344,10 @@ function SelectItem(t0) {
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx("span", {
 			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
-			children: /* @__PURE__ */ _jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { className: "pointer-events-none" }) })
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "item-check",
+				children: /* @__PURE__ */ _jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { className: "pointer-events-none" }) })
+			})
 		});
 		$[6] = t2;
 	} else {
@@ -351,7 +364,7 @@ function SelectItem(t0) {
 	let t4;
 	if ($[9] !== props || $[10] !== t1 || $[11] !== t3) {
 		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
+			kind: "list-item",
 			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Item, {
 				"data-slot": "select-item",
 				className: t1,

package/dist/components/sidebar.js

@@ -5,6 +5,7 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 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 { cn } from "../lib/utils.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sidebar.js";
@@ -937,11 +938,14 @@ function SidebarMenu(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("ul", {
-			"data-slot": "sidebar-menu",
-			"data-sidebar": "menu",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx(GlideSlot, {
+			preset: "sidebar",
+			children: /* @__PURE__ */ _jsx("ul", {
+				"data-slot": "sidebar-menu",
+				"data-sidebar": "menu",
+				className: t1,
+				...props
+			})
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -1056,7 +1060,7 @@ function SidebarMenuButton(t0) {
 	let t6;
 	if ($[12] !== Comp || $[13] !== isActive || $[14] !== props || $[15] !== size || $[16] !== t5) {
 		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "press",
+			kind: "subtle-press",
 			children: /* @__PURE__ */ _jsx(Comp, {
 				"data-slot": "sidebar-menu-button",
 				"data-sidebar": "menu-button",
@@ -1396,7 +1400,7 @@ function SidebarMenuSubButton(t0) {
 	let t5;
 	if ($[8] !== Comp || $[9] !== isActive || $[10] !== props || $[11] !== size || $[12] !== t4) {
 		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "press",
+			kind: "subtle-press",
 			children: /* @__PURE__ */ _jsx(Comp, {
 				"data-slot": "sidebar-menu-sub-button",
 				"data-sidebar": "menu-sub-button",

package/dist/components/tabs.js

@@ -3,6 +3,7 @@ import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
+import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -83,11 +84,14 @@ function TabsList(t0) {
 	}
 	let t3;
 	if ($[7] !== props || $[8] !== t2 || $[9] !== variant) {
-		t3 = /* @__PURE__ */ _jsx(TabsPrimitive.List, {
-			"data-slot": "tabs-list",
-			"data-variant": variant,
-			className: t2,
-			...props
+		t3 = /* @__PURE__ */ _jsx(GlideSlot, {
+			preset: "tabs",
+			children: /* @__PURE__ */ _jsx(TabsPrimitive.List, {
+				"data-slot": "tabs-list",
+				"data-variant": variant,
+				className: t2,
+				...props
+			})
 		});
 		$[7] = props;
 		$[8] = t2;
@@ -113,7 +117,7 @@ function TabsTrigger(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className);
+		t1 = cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 data-glide-target:after:opacity-0! data-glide-freeze:after:transition-none", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -122,7 +126,7 @@ function TabsTrigger(t0) {
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "press",
+			kind: "subtle-press",
 			children: /* @__PURE__ */ _jsx(TabsPrimitive.Trigger, {
 				"data-slot": "tabs-trigger",
 				className: t1,
@@ -161,7 +165,7 @@ function TabsContent(t0) {
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "fade",
+			kind: "content",
 			children: /* @__PURE__ */ _jsx(TabsPrimitive.Content, {
 				"data-slot": "tabs-content",
 				className: t1,

package/dist/components/tooltip.js

@@ -138,7 +138,7 @@ function TooltipContent(t0) {
 	let t5;
 	if ($[8] !== children || $[9] !== props || $[10] !== sideOffset || $[11] !== t3) {
 		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
+			kind: "tooltip",
 			children: /* @__PURE__ */ _jsxs(TooltipPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "tooltip-content",

package/dist/constants/motion.d.ts

@@ -1,2 +1,6 @@
 /** Shares the operating-system preference across CSS-adjacent and JavaScript animations. */
 export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Only true hover pointers get hover lifts; touch devices keep phantom hovers after taps. */
+export declare const HOVER_CAPABLE_QUERY = "(hover: hover) and (pointer: fine)";
+/** Converts Motion's second-based timings to the millisecond timings of Web Animations. */
+export declare const MILLISECONDS_PER_SECOND = 1000;

package/dist/constants/motion.js

@@ -1,2 +1,6 @@
 /** Shares the operating-system preference across CSS-adjacent and JavaScript animations. */
 export const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Only true hover pointers get hover lifts; touch devices keep phantom hovers after taps. */
+export const HOVER_CAPABLE_QUERY = "(hover: hover) and (pointer: fine)";
+/** Converts Motion's second-based timings to the millisecond timings of Web Animations. */
+export const MILLISECONDS_PER_SECOND = 1e3;

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

@@ -0,0 +1,66 @@
+import { 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. */
+export interface GlidePreset {
+    itemSelector: string;
+    /**
+     * Matches the container and any nested container of the same kind, so items that belong to a
+     * nested one (a submenu rendered inside its parent menu) are left to that container's glide.
+     */
+    containerSelector: string;
+    /** Attributes whose mutations can change which item is active. */
+    attributes: string[];
+    isActive: (item: Element) => boolean;
+    surface: (container: HTMLElement) => GlideSurface;
+    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS;
+}
+export declare const GLIDE_PRESETS: {
+    tabs: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: (container: HTMLElement) => "after" | "background";
+        spring: {
+            readonly type: "spring";
+            readonly stiffness: 245;
+            readonly damping: 36;
+            readonly mass: 1.2;
+        };
+    };
+    sidebar: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly stiffness: 360;
+            readonly damping: 32;
+            readonly mass: 0.6;
+        };
+    };
+    menu: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly stiffness: 360;
+            readonly damping: 32;
+            readonly mass: 0.6;
+        };
+    };
+};
+export type GlidePresetName = keyof typeof GLIDE_PRESETS;
+/** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */
+export declare const GLIDE_TARGET_ATTRIBUTE = "data-glide-target";
+/** Marks items whose transitions, including pseudo-element ones, are suspended during a glide. */
+export declare const GLIDE_FREEZE_ATTRIBUTE = "data-glide-freeze";
+/** Observes the container and glides the highlight whenever the active item changes. */
+export declare function attachGlideIndicator(container: HTMLElement, preset: GlidePreset): () => void;
+export {};

package/dist/motion/glide-indicator.js

@@ -0,0 +1,252 @@
+/**
+* Glides an active-item indicator between items of a container, like a shared `layoutId`,
+* without adding persistent markup: a transient copy of the target's highlight travels from the
+* 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";
+export const GLIDE_PRESETS = {
+	tabs: {
+		itemSelector: "[data-slot=\"tabs-trigger\"]",
+		containerSelector: "[role=\"tablist\"]",
+		attributes: ["data-state"],
+		isActive: (item) => item.getAttribute("data-state") === "active",
+		surface: (container) => container.getAttribute("data-variant") === "line" ? "after" : "background",
+		spring: SPRING_TABS
+	},
+	sidebar: {
+		itemSelector: "[data-slot=\"sidebar-menu-button\"]",
+		containerSelector: "[data-slot=\"sidebar-menu\"]",
+		attributes: ["data-active"],
+		isActive: (item) => item.getAttribute("data-active") === "true",
+		surface: () => "background",
+		spring: SPRING_LAYOUT
+	},
+	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
+	}
+};
+/** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */
+export const GLIDE_TARGET_ATTRIBUTE = "data-glide-target";
+/** Marks items whose transitions, including pseudo-element ones, are suspended during a glide. */
+export const GLIDE_FREEZE_ATTRIBUTE = "data-glide-freeze";
+/** Converts a viewport rectangle into the container's scrolling coordinate space. */
+function toContainerBox(container, rect) {
+	const origin = container.getBoundingClientRect();
+	return {
+		left: rect.left - origin.left - container.clientLeft + container.scrollLeft,
+		top: rect.top - origin.top - container.clientTop + container.scrollTop,
+		width: rect.width,
+		height: rect.height
+	};
+}
+/** Translation an item's own running entrance adds, read from its computed `matrix()`. */
+function inFlightTranslation(item) {
+	const values = /^matrix\(([^)]+)\)$/.exec(getComputedStyle(item).transform);
+	if (!values) return {
+		x: 0,
+		y: 0
+	};
+	const parts = values[1].split(",").map(Number.parseFloat);
+	return {
+		x: parts[4] ?? 0,
+		y: parts[5] ?? 0
+	};
+}
+/**
+* Measures the highlight: the item box, or its positioned `::after` bar for line variants.
+* An item still sliding into place (staggered Select options) is measured where it will
+* settle, so the highlight does not land offset and jump when the entrance ends.
+*/
+function highlightBox(item, surface) {
+	const box = item.getBoundingClientRect();
+	const offset = inFlightTranslation(item);
+	const rect = {
+		left: box.left - offset.x,
+		top: box.top - offset.y,
+		width: box.width,
+		height: box.height
+	};
+	if (surface === "background") return rect;
+	const pseudo = getComputedStyle(item, "::after");
+	return {
+		left: rect.left + item.clientLeft + (parseFloat(pseudo.left) || 0),
+		top: rect.top + item.clientTop + (parseFloat(pseudo.top) || 0),
+		width: parseFloat(pseudo.width) || rect.width,
+		height: parseFloat(pseudo.height) || 0
+	};
+}
+/** Copies only the paint that identifies the highlight, never layout or content. */
+function highlightPaint(item, surface) {
+	const style = getComputedStyle(item, surface === "after" ? "::after" : null);
+	return {
+		backgroundColor: style.backgroundColor,
+		borderRadius: style.borderRadius,
+		boxShadow: style.boxShadow,
+		borderStyle: style.borderStyle,
+		borderWidth: style.borderWidth,
+		borderColor: style.borderColor,
+		boxSizing: "border-box"
+	};
+}
+/** Tracks overlapping freezes so the caller-owned inline transition is restored exactly once. */
+const frozenItems = new WeakMap();
+/**
+* Suppresses CSS transitions for one item, so state changes paint instantly; the returned
+* release restores them after two painted frames. Overlapping freezes are reference-counted.
+*/
+function freezeTransitions(item) {
+	const frozen = frozenItems.get(item) ?? {
+		transition: item.style.transition,
+		holds: 0
+	};
+	frozen.holds += 1;
+	frozenItems.set(item, frozen);
+	item.style.transition = "none";
+	item.setAttribute(GLIDE_FREEZE_ATTRIBUTE, "");
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				frozen.holds -= 1;
+				if (frozen.holds > 0) return;
+				frozenItems.delete(item);
+				item.style.transition = frozen.transition;
+				item.removeAttribute(GLIDE_FREEZE_ATTRIBUTE);
+			});
+		});
+	};
+}
+/** Observes the container and glides the highlight whenever the active item changes. */
+export function attachGlideIndicator(container, preset) {
+	const items = () => Array.from(container.querySelectorAll(preset.itemSelector)).filter((item) => item.parentElement?.closest(preset.containerSelector) === container);
+	let lastActive = items().find(preset.isActive) ?? null;
+	let lastActiveSeenAt = Number.NEGATIVE_INFINITY;
+	let overlay = null;
+	let animation = null;
+	let releaseTarget = null;
+	const containerStyle = {
+		position: container.style.position,
+		isolation: container.style.isolation
+	};
+	/** Puts the item's own highlight back and removes the travelling copy. */
+	function settle() {
+		animation?.cancel();
+		animation = null;
+		overlay?.remove();
+		overlay = null;
+		releaseTarget?.();
+		releaseTarget = null;
+		container.style.position = containerStyle.position;
+		container.style.isolation = containerStyle.isolation;
+	}
+	/** Hides the frozen target's highlight so the copy is the only one visible. */
+	function hideTarget(item, surface, thaw) {
+		item.setAttribute(GLIDE_TARGET_ATTRIBUTE, "");
+		const inline = {
+			backgroundColor: item.style.getPropertyValue("background-color"),
+			backgroundPriority: item.style.getPropertyPriority("background-color"),
+			boxShadow: item.style.getPropertyValue("box-shadow"),
+			boxShadowPriority: item.style.getPropertyPriority("box-shadow"),
+			borderColor: item.style.getPropertyValue("border-color"),
+			borderPriority: item.style.getPropertyPriority("border-color")
+		};
+		if (surface === "background") {
+			item.style.setProperty("background-color", "transparent", "important");
+			item.style.setProperty("box-shadow", "none", "important");
+			item.style.setProperty("border-color", "transparent", "important");
+		}
+		return () => {
+			item.style.setProperty("background-color", inline.backgroundColor, inline.backgroundPriority);
+			item.style.setProperty("box-shadow", inline.boxShadow, inline.boxShadowPriority);
+			item.style.setProperty("border-color", inline.borderColor, inline.borderPriority);
+			// Transitions stay frozen until the restored highlight has painted in place.
+			item.removeAttribute(GLIDE_TARGET_ATTRIBUTE);
+			thaw();
+		};
+	}
+	/** Starts, or redirects, the glide from the previous highlight to the new active item. */
+	function glide(from, to) {
+		const surface = preset.surface(container);
+		const origin = overlay ? overlay.getBoundingClientRect() : highlightBox(from, surface);
+		settle();
+		// The previous item drops its highlight instantly: the copy is what leaves it.
+		freezeTransitions(from)();
+		// Read the target's settled paint before any transition has a chance to start.
+		const thawTarget = freezeTransitions(to);
+		const destination = toContainerBox(container, highlightBox(to, surface));
+		const paint = highlightPaint(to, surface);
+		if (destination.width === 0 || destination.height === 0) {
+			thawTarget();
+			return;
+		}
+		if (getComputedStyle(container).position === "static") {
+			container.style.position = "relative";
+		}
+		// Negative z-index keeps the copy above the container background and below item content.
+		container.style.isolation = "isolate";
+		overlay = document.createElement("span");
+		overlay.setAttribute("aria-hidden", "true");
+		overlay.setAttribute("data-glide-indicator", "");
+		Object.assign(overlay.style, paint, {
+			position: "absolute",
+			pointerEvents: "none",
+			zIndex: "-1",
+			margin: "0"
+		});
+		const start = toContainerBox(container, origin);
+		container.prepend(overlay);
+		releaseTarget = hideTarget(to, surface, thawTarget);
+		animation = animate(overlay, {
+			left: [`${start.left}px`, `${destination.left}px`],
+			top: [`${start.top}px`, `${destination.top}px`],
+			width: [`${start.width}px`, `${destination.width}px`],
+			height: [`${start.height}px`, `${destination.height}px`]
+		}, preset.spring);
+		const current = animation;
+		void current.then(() => {
+			if (animation === current) settle();
+		});
+	}
+	const observer = new MutationObserver(() => {
+		// Items can be remounted (a sidebar button wrapped in a tooltip after hydration); the
+		// highlight then belongs to the item that replaced the detached one.
+		if (lastActive && !lastActive.isConnected) {
+			lastActive = items().find(preset.isActive) ?? null;
+			lastActiveSeenAt = Number.NEGATIVE_INFINITY;
+		}
+		const active = items().find(preset.isActive) ?? null;
+		const now = performance.now();
+		if (active && active === lastActive) return;
+		if (!active) {
+			if (lastActive && lastActiveSeenAt === Number.NEGATIVE_INFINITY) {
+				lastActiveSeenAt = now;
+			}
+			settle();
+			return;
+		}
+		const previous = lastActive;
+		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);
+		else settle();
+	});
+	observer.observe(container, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: preset.attributes
+	});
+	return () => {
+		observer.disconnect();
+		settle();
+	};
+}

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

@@ -0,0 +1,9 @@
+/** Adds a gliding active-item indicator to the original container, without DOM wrappers. */
+import { type ComponentProps, type ReactElement } from "react";
+import { Slot } from "radix-ui";
+import { type GlidePresetName } from "./glide-indicator.js";
+/** Composes refs through Radix Slot and glides the preset's highlight between its items. */
+export declare function GlideSlot({ children, preset, ref, ...props }: Omit<ComponentProps<typeof Slot.Root>, "children"> & {
+    children: ReactElement;
+    preset: GlidePresetName;
+}): import("react").JSX.Element;

package/dist/motion/glide-slot.js

@@ -0,0 +1,71 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Adds a gliding active-item indicator to the original container, without DOM wrappers. */
+import { useLayoutEffect } from "react";
+import { Slot } from "radix-ui";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { attachGlideIndicator, GLIDE_PRESETS } from "./glide-indicator.js";
+import { useAttachedElement } from "./use-attached-element.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Composes refs through Radix Slot and glides the preset's highlight between its items. */
+export function GlideSlot(t0) {
+	const $ = _c(14);
+	let children;
+	let preset;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({children, preset, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = preset;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		preset = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	const [element, attach] = useAttachedElement(ref);
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	let t2;
+	if ($[5] !== element || $[6] !== preset || $[7] !== reduceMotion) {
+		t1 = () => {
+			if (!element || reduceMotion) {
+				return;
+			}
+			return attachGlideIndicator(element, GLIDE_PRESETS[preset]);
+		};
+		t2 = [
+			element,
+			preset,
+			reduceMotion
+		];
+		$[5] = element;
+		$[6] = preset;
+		$[7] = reduceMotion;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t1 = $[8];
+		t2 = $[9];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[10] !== attach || $[11] !== children || $[12] !== props) {
+		t3 = /* @__PURE__ */ _jsx(Slot.Root, {
+			...props,
+			ref: attach,
+			children
+		});
+		$[10] = attach;
+		$[11] = children;
+		$[12] = props;
+		$[13] = t3;
+	} else {
+		t3 = $[13];
+	}
+	return t3;
+}