@sableui/react 0.13.2 → 0.15.0

package/dist/components/radio-card/radio-card.meta.js

@@ -122,6 +122,44 @@ var radioCardMeta = {
     "tone-info",
     "tone-warning"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Cards arrive with the form. A plan picker that animated each card in would delay the choice it exists to make."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The edge steps toward the ring colour on hover, eased. On a card-sized target a hard snap across the whole border reads as the layout flickering."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Root",
+      why: "The settle on press confirms a click anywhere in the card \u2014 the radio is small, and without it a click in the card's body can feel like it missed the control."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "Checking eases the tone ring and wash onto the new card as the old one releases, so the choice reads as moving between cards rather than two cards repainting."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Indicator",
+      why: "The radio dot grows in on a spring, the same mark as Radio, so a card and a plain radio confirm a choice the same way."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A choice commits instantly. A slow write belongs to the surrounding form's pending state."
+    }
+  ],
   a11y: [
     "Base UI provides the radiogroup/radio roles, aria-checked, hidden native inputs, and roving tabindex.",
     "Arrow keys move and select between cards; Space selects the focused card; Tab enters/leaves the group.",

package/dist/components/reaction-picker/index.js

@@ -0,0 +1,13 @@
+// src/components/reaction-picker/index.ts
+import {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker
+} from "./reaction-picker.js";
+import { reactionPickerMeta } from "./reaction-picker.meta.js";
+export {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker,
+  reactionPickerMeta
+};

package/dist/components/reaction-picker/reaction-picker.js

@@ -0,0 +1,104 @@
+"use client";
+
+// src/components/reaction-picker/reaction-picker.tsx
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { cn } from "../../lib/cn.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { Toolbar, ToolbarButton } from "../toolbar/toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_REACTIONS = [
+  { emoji: "\u{1F44D}", label: "Thumbs up" },
+  { emoji: "\u2764\uFE0F", label: "Heart" },
+  { emoji: "\u{1F602}", label: "Laughing" },
+  { emoji: "\u{1F389}", label: "Party" },
+  { emoji: "\u{1F62E}", label: "Surprised" },
+  { emoji: "\u{1F622}", label: "Sad" },
+  { emoji: "\u{1F64F}", label: "Thank you" }
+];
+var PRESSED = "aria-pressed:bg-primary/10 data-[checked]:bg-primary/10";
+var MENU_CELL = `group/reaction grid size-(--control-md) shrink-0 cursor-pointer select-none place-items-center rounded-full outline-none sable-surface-interactive motion-interactive motion-press ${PRESSED}`;
+function Glyph({ emoji, index }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "motion-bloom",
+      style: { "--motion-bloom-delay": `${index * 24}ms` },
+      children: /* @__PURE__ */ jsx("span", { className: "block text-[calc(var(--control-md)*0.6)] leading-none transition-[scale] duration-(--motion-duration-fast) ease-standard group-hover/reaction:scale-125 group-focus-visible/reaction:scale-125 group-data-[highlighted]/reaction:scale-125", children: emoji })
+    }
+  );
+}
+function ReactionPicker({
+  reactions = DEFAULT_REACTIONS,
+  selected = [],
+  onSelect,
+  motion,
+  className,
+  children,
+  "aria-label": ariaLabel = "Reactions",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      "aria-label": ariaLabel,
+      "data-motion": motionAttribute(motion),
+      className: cn("gap-0.5", className),
+      ...props,
+      children: [
+        reactions.map((reaction, index) => /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            size: "icon",
+            "aria-label": reaction.label,
+            "aria-pressed": selected.includes(reaction.emoji),
+            onClick: () => onSelect?.(reaction.emoji),
+            className: cn("group/reaction rounded-full", PRESSED),
+            children: /* @__PURE__ */ jsx(Glyph, { emoji: reaction.emoji, index })
+          },
+          reaction.emoji
+        )),
+        children
+      ]
+    }
+  );
+}
+ReactionPicker.displayName = "ReactionPicker";
+function MenuReactions({
+  reactions = DEFAULT_REACTIONS,
+  selected = [],
+  onSelect,
+  motion,
+  className,
+  "aria-label": ariaLabel = "Reactions",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    BaseMenu.Group,
+    {
+      "aria-label": ariaLabel,
+      "data-motion": motionAttribute(motion),
+      className: cn("flex items-center gap-0.5", className),
+      ...props,
+      children: reactions.map((reaction, index) => /* @__PURE__ */ jsx(
+        BaseMenu.CheckboxItem,
+        {
+          label: reaction.label,
+          "aria-label": reaction.label,
+          checked: selected.includes(reaction.emoji),
+          onCheckedChange: () => onSelect?.(reaction.emoji),
+          closeOnClick: true,
+          className: MENU_CELL,
+          children: /* @__PURE__ */ jsx(Glyph, { emoji: reaction.emoji, index })
+        },
+        reaction.emoji
+      ))
+    }
+  );
+}
+MenuReactions.displayName = "MenuReactions";
+export {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker
+};

package/dist/components/reaction-picker/reaction-picker.meta.js

@@ -0,0 +1,156 @@
+// src/components/reaction-picker/reaction-picker.meta.ts
+var reactionPickerMeta = {
+  name: "ReactionPicker",
+  summary: "The quick row of emoji you react to a message with: a toolbar of large emoji toggles that bloom in one after another as it opens and magnify under the pointer, with MenuReactions as the same row inside a right-click menu.",
+  status: "stable",
+  keywords: [
+    "reaction",
+    "reactions",
+    "emoji",
+    "emoji picker",
+    "react",
+    "tapback",
+    "quick reactions",
+    "message actions",
+    "chat"
+  ],
+  usage: {
+    description: "Use ReactionPicker wherever a reader chooses a reaction for something: in a Popover from an add-reaction control (BubbleReactionAdd is that, ready-made), or as a hover bar over a message. Use MenuReactions for the same row as the first group of the menu a message opens on right-click or long-press, above Reply and Copy. Both report which emoji the reader has already used, so choosing one again removes it.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Keep the quick set short \u2014 six to eight. It is the reactions people actually use; a full emoji catalogue belongs behind a trailing "more" control passed as children.'
+      },
+      {
+        guidance: "do",
+        description: "Give every reaction a `label`. It is the accessible name and the menu's typeahead, and an emoji's own spoken name differs between platforms."
+      },
+      {
+        guidance: "do",
+        description: "Pass `selected` so the reader's own reactions show pressed, and toggle in `onSelect`: choosing a reaction you already gave takes it back."
+      },
+      {
+        guidance: "do",
+        description: "Offer the right-click menu and a visible add-reaction control together. A context menu is invisible until you know it is there; the pill is how a first-time reader finds reactions."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a ReactionPicker inside a Menu or ContextMenu. A toolbar is not a menu item, so the menu's arrow keys would skip it; use MenuReactions there.",
+        instead: ["MenuReactions"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it to rate an answer or collect a verdict. Reactions are social and many-valued; a helpful / not-helpful question is Feedback.",
+        instead: ["Feedback"]
+      }
+    ],
+    anatomy: [
+      {
+        name: "ReactionPicker",
+        required: true,
+        description: "The toolbar: one tab stop, arrow keys move between emoji, each a toggle with `aria-pressed`."
+      },
+      {
+        name: "MenuReactions",
+        required: false,
+        description: "The same row as a group of checkbox menu items, for MenuContent and ContextMenuContent. Choosing one closes the menu."
+      }
+    ]
+  },
+  related: {
+    components: ["Bubble", "ContextMenu", "Popover", "Toolbar", "Feedback"]
+  },
+  props: [
+    {
+      name: "reactions",
+      type: "readonly { emoji: string; label: string }[]",
+      default: "DEFAULT_REACTIONS",
+      description: "The choices, in order. The default is \u{1F44D} \u2764\uFE0F \u{1F602} \u{1F389} \u{1F62E} \u{1F622} \u{1F64F}."
+    },
+    {
+      name: "selected",
+      type: "readonly string[]",
+      default: "[]",
+      description: "The emoji the reader has already reacted with: shown pressed, and choosing one again removes it."
+    },
+    {
+      name: "onSelect",
+      type: "(emoji: string) => void",
+      description: "Called with the emoji the reader chose. Toggle it in or out of `selected`."
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "ReactionPicker only: trailing controls after the emoji, such as a button that opens a full emoji picker."
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      default: '"Reactions"',
+      description: "The name of the toolbar or menu group."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps the press and drops the wave of emoji blooming in and the magnify, `off` stills it. It can only turn motion down."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "MenuReactions",
+      type: "{ reactions?; selected?; onSelect?; motion? } & ComponentProps<typeof Menu.Group>",
+      description: "The quick row as checkbox menu items, for the first group of a MenuContent or ContextMenuContent. Same props as ReactionPicker, without children."
+    }
+  ],
+  tokensUsed: ["accent", "primary", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-bloom",
+      part: "Glyph",
+      why: "Opening the picker is the reader's own action, so the emoji answer it: each blooms in 24ms after the one before, a short wave from first to last. The surface it sits in (a Popover or a menu) arrives with its own motion-pop. Expressive only \u2014 under `subtle` the emoji are simply there."
+    },
+    {
+      slot: "response",
+      recipe: "custom",
+      part: "Glyph",
+      why: "The emoji under the pointer or the keyboard highlight magnifies to 1.25 on a fast standard ease, so you can see which one a release will choose; each cell also carries motion-interactive and motion-press. The magnify rides an inner layer so it never fights the bloom over `scale`."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Cell",
+      why: "Pressed and not pressed differ by a tint, eased by motion-interactive. The celebration belongs to the reaction that lands under the message (BubbleReaction), not to the picker that chose it."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Choosing is instant; there is no in-between state to show."
+    }
+  ],
+  a11y: [
+    "ReactionPicker is a Base UI toolbar: one tab stop, Left/Right move between emoji, Home/End jump to the ends.",
+    "Each emoji is a button named by its `label` and reporting `aria-pressed`, so a screen-reader user hears whether choosing it adds or removes their reaction. The glyph itself is aria-hidden.",
+    "MenuReactions renders checkbox menu items (`menuitemcheckbox` with `aria-checked`), reached by the menu's arrow keys and typeahead like every other row.",
+    "Under reduced motion the emoji appear at once and do not magnify; pressed state is carried by `aria-pressed` and a tint, never motion."
+  ],
+  examples: [
+    {
+      label: "In a popover",
+      code: '<Popover>\n	<PopoverTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Add reaction" />}>\n		<Icon name="emoji" />\n	</PopoverTrigger>\n	<PopoverContent side="top" className="w-auto rounded-full p-1">\n		<ReactionPicker selected={mine} onSelect={toggle} />\n	</PopoverContent>\n</Popover>'
+    },
+    {
+      label: "In a right-click menu",
+      code: "<ContextMenu>\n	<ContextMenuTrigger render={<Bubble />}>See you at 6.</ContextMenuTrigger>\n	<ContextMenuContent>\n		<MenuReactions selected={mine} onSelect={toggle} />\n		<ContextMenuSeparator />\n		<ContextMenuItem>Reply</ContextMenuItem>\n		<ContextMenuItem>Copy text</ContextMenuItem>\n	</ContextMenuContent>\n</ContextMenu>"
+    },
+    {
+      label: "A custom set",
+      code: '<ReactionPicker\n	reactions={[\n		{ emoji: "\u2705", label: "Done" },\n		{ emoji: "\u{1F440}", label: "Looking" },\n		{ emoji: "\u{1F680}", label: "Shipped" },\n	]}\n	selected={mine}\n	onSelect={toggle}\n/>'
+    }
+  ]
+};
+export {
+  reactionPickerMeta
+};

package/dist/components/relative-time/relative-time.meta.js

@@ -54,6 +54,38 @@ var relativeTimeMeta = {
     }
   ],
   tokensUsed: ["popover", "popover-foreground", "border", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It is a word in a line of text and arrives with that line."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Root",
+      why: "The only hover change on the timestamp is a dotted underline, and text-decoration-line is discrete: CSS cannot tween it, so a transition here would animate nothing and imply the snap had been handled."
+    },
+    {
+      slot: "response",
+      recipe: "motion-pop",
+      part: "Tooltip",
+      why: "The pointer's real answer is the absolute time, which arrives in a Tooltip on its own fast pop. That short entrance is what makes the full date read as belonging to the word under the cursor."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "The label does not tick: it is computed when the component renders, so it never changes in front of the reader. A timestamp rolling from one minute to two would pull the eye off the content it dates."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A timestamp has nothing to wait for."
+    }
+  ],
   a11y: [
     "Renders a semantic <time> element with a machine-readable dateTime (ISO) attribute.",
     "The <time> carries tabIndex=0 (it is not focusable natively), so the absolute time \u2014 exposed via Base UI's Tooltip, which opens on keyboard focus as well as hover and wires aria-describedby \u2014 is reachable from the keyboard.",

package/dist/components/scroller/scroller.meta.js

@@ -92,6 +92,38 @@ var scrollerMeta = {
     wheelScroll: ["true", "false"]
   },
   tokensUsed: ["ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It is a region, not an event; its content arrives with whatever fills it."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Viewport",
+      why: "The region is focusable so the keyboard can scroll it, and its focus ring eases in like any control's. It is the one sign the region, not the page, now takes the arrow keys."
+    },
+    {
+      slot: "response",
+      recipe: "custom",
+      part: "Scrollbar",
+      why: "The vertical bar (`scrollbar-quiet`) stays hidden until the region is hovered, focused or scrolled, then fades its thumb in on the motion tokens. A bar that appeared in one frame would flash every time the pointer crossed the list."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Edge fade",
+      why: "The edge fades switch on and off as you scroll, in the frame the content is already moving, so the change is carried by the scroll itself. They are a mask gradient, which CSS cannot interpolate without registered custom properties."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A scroll region does no work of its own. Content still loading inside it brings its own Skeleton or Spinner."
+    }
+  ],
   a11y: [
     "The edge fades are a CSS mask-image on the scrolling element, not overlay elements \u2014 there is nothing in the DOM to intercept a pointer or be read by assistive tech, and the content under a fade stays fully interactive.",
     'Two boxes: a chrome box carrying `className` (border, background, radius, sizing) and, inside it, the element that actually scrolls and carries the fade mask. They are split because a `mask-image` applies to its element\'s own border \u2014 so with both on one box, a bordered Scroller watched its frame dissolve at the scrolling edge. The axis is published as `data-orientation`, not `aria-orientation`, which is invalid on `role="group"`.',

package/dist/components/scrub-field/scrub-field.meta.js

@@ -99,6 +99,38 @@ var scrubFieldMeta = {
     { name: "disabled", type: "boolean", description: "Disables typing and scrubbing." },
     { name: "id", type: "string", description: "Input id, for a PropertyRow's htmlFor." }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the inspector row it sits in."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The shell eases its focus ring like every field, so tabbing through a column of numbers shows where the keyboard is without flicker."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Handle",
+      why: "The handle's ink brightens while the field is hovered. It is the only sign that the icon or prefix can be dragged, which nobody would guess from a label."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Value",
+      why: "The number follows the drag pixel for pixel. Easing it \u2014 or rolling it with a NumberTicker \u2014 would show a value the pointer has already left, in a control whose whole point is precision."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Scrubbing is synchronous; there is nothing to wait for."
+    }
+  ],
   a11y: [
     "The input carries the accessible name via `label`; the glyph is aria-hidden because it is decorative.",
     "Every scrub gesture is reachable from the keyboard: ArrowUp/ArrowDown step by `step`, Shift+Arrow by ten steps.",

package/dist/components/search-input/search-input.js

@@ -66,21 +66,23 @@ function SearchInput({
         }
       ),
       hasValue && !props.disabled ? (
-        // Sable's own icon button, not a hand-sized <button>: the hit area,
-        // focus ring, press and disabled fade follow the control ladder with
-        // every other icon button. Muted ink until hovered, so the X never
-        // out-shouts the query it clears.
-        /* @__PURE__ */ jsx(
+        // The wrapper carries the arrival, the button keeps its own response.
+        // motion-appear declares a transition list of its own, and on the
+        // Button it would fight motion-interactive for the one
+        // transition-property slot — whichever sorted last would win, and
+        // either the hover ease or the arrival would silently go. Removal
+        // stays instant: an emptied field should not wait on its X.
+        /* @__PURE__ */ jsx("span", { className: "absolute end-2 flex motion-appear", children: /* @__PURE__ */ jsx(
           Button,
           {
             variant: "ghost",
             size: "icon-xs",
             onClick: handleClear,
             "aria-label": "Clear search",
-            className: "absolute end-2 text-muted-foreground hover:text-foreground",
+            className: "text-muted-foreground hover:text-foreground",
             children: /* @__PURE__ */ jsx(Icon, { name: "xmark" })
           }
-        )
+        ) })
       ) : null
     ] })
   );

package/dist/components/search-input/search-input.meta.js

@@ -98,6 +98,32 @@ var searchInputMeta = {
     "ring",
     "destructive"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-appear",
+      part: "Clear button",
+      why: "The X mounts as the first character lands. Fading and settling in from a smaller scale keeps it from popping into the corner of the eye on every new search; removal is instant so an emptied field does not wait on it."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Input",
+      why: "The focus ring and invalid border ease in, so focus reads as the field answering rather than a repaint."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "The field has no states of its own to move between \u2014 the clear button arriving is its only change, and arrival covers it."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Searching is the results' job: a list skeleton or a Spinner beside them, not a field that animates while you type."
+    }
+  ],
   a11y: [
     'Renders a native <input type="search"> \u2014 keyboard and form semantics come for free.',
     "Associate a <label htmlFor> (or wrap) \u2014 the magnifier glyph is decorative, not a label.",

package/dist/components/show-more/show-more.js

@@ -70,10 +70,7 @@ function ShowMore({
           Icon,
           {
             name: "chevron-down",
-            className: cn(
-              "transition-transform duration-(--motion-duration-fast) ease-standard",
-              expanded && "rotate-180"
-            )
+            className: cn("motion-interactive", expanded && "rotate-180")
           }
         ),
         children: expanded ? "Show less" : "Show more"

package/dist/components/show-more/show-more.meta.js

@@ -58,6 +58,44 @@ var showMoreMeta = {
     }
   ],
   tokensUsed: ["background", "foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "The preview arrives with the content it clips. Its fade and toggle appear only once a measurement proves the content overflows."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Toggle",
+      why: "The toggle is a link Button, so its hover and focus ease on Button's recipe."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Content",
+      why: "The region eases its max-height between the collapsed and the measured full height on the slow motion token. motion-disclosure keys on Base UI's starting and ending styles, which this self-contained toggle does not have. The text unrolling in place keeps the reader's line; a snap drops them at a different scroll position."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Fade",
+      why: "The bottom fade dissolves as the region opens and returns as it closes, so the cut edge and the reveal read as one movement."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Chevron",
+      why: "The chevron turns 180\xB0 in step with the region (motion-interactive lists `rotate`), so the toggle visibly points at what it will do next."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Expanding is local and instant; nothing loads."
+    }
+  ],
   a11y: [
     "The toggle is a real <button> with aria-expanded reflecting the open state.",
     "The fade overlay is pointer-events-none and decorative; it never traps clicks.",

package/dist/components/side-nav/side-nav.js

@@ -4,19 +4,39 @@
 import { useRender } from "@base-ui/react/use-render";
 import { createContext, useContext } from "react";
 import { cn } from "../../lib/cn.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { sideNavItemIconVariants, sideNavItemVariants } from "./side-nav.variants.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SideNavContext = createContext({
   size: "md",
   activeVariant: "content"
 });
+var GLIDE_HANDOFF = "[&[data-glide]_[data-active]]:bg-transparent";
+var GLIDE_FILL = {
+  content: "rounded-sm bg-accent motion-glide",
+  sidebar: "rounded-sm bg-sidebar-accent motion-glide"
+};
 function SideNav({
   className,
   size = "md",
   activeVariant = "content",
+  motion,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SideNavContext.Provider, { value: { size, activeVariant }, children: /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col gap-0.5", className), ...props }) });
+  return /* @__PURE__ */ jsx(SideNavContext.Provider, { value: { size, activeVariant }, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "data-motion": motionAttribute(motion),
+      className: cn("flex flex-col gap-0.5", GLIDE_HANDOFF, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(HighlightGlide, { follow: "data-active", timing: "selection", className: GLIDE_FILL[activeVariant] }),
+        children
+      ]
+    }
+  ) });
 }
 SideNav.displayName = "SideNav";
 function SideNavGroup({

package/dist/components/side-nav/side-nav.meta.js

@@ -80,6 +80,12 @@ var sideNavMeta = {
       type: '"content" | "sidebar"',
       default: '"content"',
       description: 'Active-state token vocabulary shared by all items. "content" uses bg-accent/text-accent-foreground for local rails inside the content area; "sidebar" uses bg-sidebar-accent/text-sidebar-accent-foreground for SideNavs rendered inside app chrome.'
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` inherits the app's policy, `subtle` keeps feedback and drops the current-page glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
     }
   ],
   subcomponents: [
@@ -94,6 +100,32 @@ var sideNavMeta = {
       description: "A labelled section within a SideNav - groups settings into areas. label renders an optional sentence-case caption heading above the group's items."
     }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "In-page navigation arrives with the page it navigates."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "SideNavItem",
+      why: "Rows ease their hover fill and focus ring, so moving down a long nav reads as one pointer travelling rather than rows flashing in turn."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "SideNav",
+      why: "The current-item fill is one element that travels to the new row when the section changes inside a persistent layout, so the marker reads as moving rather than one row dimming while another lights. It lands in place on first paint, each row keeps its own fill as the server-render fallback, and the active row's heavier weight lands at once \u2014 font weight does not ease. Expressive: `subtle` moves it at once."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Navigation chrome has no working state; a loading section shows it in the content."
+    }
+  ],
   a11y: [
     "SideNav renders a <nav> landmark; pair multiple navs with aria-label to distinguish them.",
     'The active item carries aria-current="page".',

package/dist/components/side-nav/side-nav.variants.js

@@ -2,7 +2,9 @@
 import { cva } from "class-variance-authority";
 var RAIL_ROW_INLINE = "gap-3 px-3";
 var sideNavItemVariants = cva(
-  "flex w-full items-center text-start motion-interactive focus-visible:outline-none focus-visible:ring-2 data-[active]:font-semibold",
+  // `relative`: a row paints above SideNav's gliding current-page fill, which is
+  // absolutely positioned and earlier in the DOM.
+  "relative flex w-full items-center text-start motion-interactive focus-visible:outline-none focus-visible:ring-2 data-[active]:font-semibold",
   {
     variants: {
       size: {