@sableui/react 0.13.2 → 0.15.0

package/dist/components/sidebar/sidebar.js

@@ -4,9 +4,12 @@
 import { useRender } from "@base-ui/react/use-render";
 import {
   createContext,
-  useContext
+  useContext,
+  useState
 } from "react";
 import { cn } from "../../lib/cn.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { RAIL_ROW_INLINE, sideNavItemIconVariants, sideNavItemVariants } from "../side-nav/side-nav.variants.js";
 import { SimpleTooltip } from "../tooltip/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,6 +17,7 @@ var SidebarContext = createContext({
   collapsed: false,
   icons: true
 });
+var LABEL_FADE = "starting:opacity-0 transition-opacity duration-(--motion-duration-base) ease-decelerate";
 function useSidebar() {
   return useContext(SidebarContext);
 }
@@ -43,13 +47,17 @@ function Sidebar({
   icons = true,
   variant = "app",
   surface = "rail",
+  motion,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed, icons }, children: /* @__PURE__ */ jsx(
+  const [hasCollapsed, setHasCollapsed] = useState(collapsed);
+  if (collapsed && !hasCollapsed) setHasCollapsed(true);
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed, icons, reopened: hasCollapsed && !collapsed }, children: /* @__PURE__ */ jsx(
     "aside",
     {
+      "data-motion": motionAttribute(motion),
       "data-collapsed": collapsed || void 0,
       "data-variant": variant,
       "data-surface": surface,
@@ -66,6 +74,15 @@ function Sidebar({
         surface === "rail" ? cn("border-r border-sidebar-border", SIDEBAR_INK) : PAGE_INK,
         SIDEBAR_VARIANT[variant],
         "w-[var(--sidebar-width,16rem)] data-[collapsed]:w-[var(--sidebar-width-collapsed,4rem)]",
+        // Collapsing eases the width (`motion-size`, expressive) rather than
+        // jumping 192px in one frame. It reflows the page beside the rail for
+        // the length of the ease, which is the point: the content visibly
+        // takes the room the rail gave up. Nothing inside jumps, because a
+        // collapsed row's centred icon and an expanded row's inset icon sit
+        // on the same column (measured: 21px from the rail edge in both).
+        // Labels leave at once and fade back in as the rail reopens; the
+        // clip keeps them from painting past the rail while it is narrow.
+        "overflow-x-clip motion-size",
         className
       ),
       ...props,
@@ -94,7 +111,7 @@ function SidebarHeader({
 }
 SidebarHeader.displayName = "SidebarHeader";
 function SidebarBrand({ mark, label, render, className, "aria-label": ariaLabel, ...props }) {
-  const { collapsed } = useSidebar();
+  const { collapsed, reopened } = useSidebar();
   return useRender({
     render: render ?? /* @__PURE__ */ jsx("div", {}),
     props: {
@@ -111,7 +128,7 @@ function SidebarBrand({ mark, label, render, className, "aria-label": ariaLabel,
       ),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: "rail" }), children: mark }),
-        collapsed ? null : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-title-sm", children: label })
+        collapsed ? null : /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate text-title-sm", reopened && LABEL_FADE), children: label })
       ] })
     },
     defaultTagName: "div"
@@ -120,9 +137,10 @@ function SidebarBrand({ mark, label, render, className, "aria-label": ariaLabel,
 SidebarBrand.displayName = "SidebarBrand";
 function SidebarNav({
   className,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "nav",
     {
       className: cn(
@@ -130,9 +148,14 @@ function SidebarNav({
         // narrow rail, and contained overscroll so a wheel gesture that runs
         // out of nav stops there instead of scrolling the page behind it.
         "flex flex-1 flex-col gap-1 overflow-y-auto overscroll-contain px-3 py-4 scrollbar-quiet",
+        "[&[data-glide]_[data-active]]:bg-transparent",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(HighlightGlide, { follow: "data-active", timing: "selection", className: "rounded-sm bg-sidebar-accent motion-glide" }),
+        children
+      ]
     }
   );
 }
@@ -163,7 +186,7 @@ function SidebarItem({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const { collapsed, icons } = useSidebar();
+  const { collapsed, icons, reopened } = useSidebar();
   const showIcon = icon != null && (icons || collapsed);
   const element = useRender({
     render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
@@ -183,7 +206,7 @@ function SidebarItem({
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         showIcon ? /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: "rail" }), children: icon }) : null,
         collapsed ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", reopened && LABEL_FADE), children: label }),
           badge ? /* @__PURE__ */ jsx("span", { className: "ms-auto shrink-0", children: badge }) : null
         ] })
       ] })

package/dist/components/sidebar/sidebar.meta.js

@@ -77,6 +77,12 @@ var sidebarMeta = {
       type: '"rail" | "page"',
       default: '"rail"',
       description: `Which surface the rail is painted on. "rail" is its own --sidebar-* surface with a border \u2014 right for a full-height rail that frames the app, which a theme may tint or paint dark. "page" uses the page's surface and ink with no border \u2014 use it when a full-width header sits above the rail, where a tinted column starting under a page-coloured bar reads as pasted on. Use it instead of overriding bg-/text- classes, which the rail's re-pointed tokens defeat.`
+    },
+    {
+      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 collapse ease and the current-page glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
     }
   ],
   subcomponents: [
@@ -96,6 +102,38 @@ var sidebarMeta = {
       description: 'A single nav row. label is the row text (inline when expanded, in a hover tooltip when collapsed); icon is the leading icon node (the consumer swaps fill weight for the active state); active marks the current route (accent fill + aria-current="page"); badge is a trailing node (e.g. a count) pushed to the row end and hidden when collapsed; render composes another element, e.g. render={<Link to="/x" />}.'
     }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "The rail is the app's frame, present from first paint. It is not summoned, so it has no entrance."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "SidebarItem",
+      why: "Rows ease their hover fill (SideNav's row recipe on the rail rung), so moving down the nav reads as the pointer travelling rather than rows flashing."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "SidebarNav",
+      why: "The current-page fill is one element that travels to the new item when the page 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, and each item keeps its own fill as the server-render fallback. Expressive: `subtle` moves it at once."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-size",
+      part: "Root",
+      why: "Collapsing to the icon rail eases the width instead of jumping 192px in one frame, so the content beside it visibly takes the room the rail gave up. Nothing inside jumps \u2014 a collapsed row's centred icon and an expanded row's inset icon sit on the same column \u2014 and labels leave at once and fade back in on reopen, clipped to the rail meanwhile. It reflows the page for the length of the ease, which is acceptable for a deliberate user toggle and never happens on load. Expressive: `subtle` snaps."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Navigation chrome has no working state; a loading route shows it in the page."
+    }
+  ],
   a11y: [
     "SidebarNav renders a <nav> landmark.",
     'Active item carries aria-current="page".',

package/dist/components/slider/slider.meta.js

@@ -173,6 +173,32 @@ var sliderMeta = {
     }
   ],
   tokensUsed: ["secondary", "primary", "background", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the form or panel it sits in."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Thumb",
+      why: "The thumb's dot grows from 12px to full size on hover and keyboard focus, and a little past it while dragging, on a spring. Only the paint resizes, never the hit target, so the growth says the thumb is live without moving where you have to aim."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Thumb",
+      why: "The thumb and the filled range follow the pointer one-to-one, and keyboard steps land at once. An eased position would trail the drag and show a value the user has already moved past."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A slider commits as it moves; there is nothing to wait for."
+    }
+  ],
   a11y: [
     "Base UI provides role=slider, aria-valuemin/max/now, and arrow-key / Page Up-Down / Home-End control.",
     "Each thumb is a focusable input[type=range] nested in the thumb element; keyboard focus raises a 2px ring on the thumb via has-[:focus-visible] (a bare focus-visible: on the thumb never fires, since the div itself is not focusable).",

package/dist/components/sparkline/sparkline.js

@@ -5,15 +5,17 @@ import { areaPath, linePath } from "../../lib/chart/geometry.js";
 import { drawTransition, riseTransition, stagger } from "../../lib/chart/motion.js";
 import { toneColor } from "../../lib/chart/types.js";
 import { cn } from "../../lib/cn.js";
-import { useMotion } from "../../motion/MotionProvider.js";
+import { motionAttribute, useMotionLevel } from "../../motion/MotionProvider.js";
+import { chartMotion } from "../../lib/chart/chart-frame.js";
 import { useArrival } from "../../lib/chart/use-arrival.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var W = 100;
 var H = 32;
-function Sparkline({ data, label, variant = "line", tone = "primary", animate = true, locale, className, ...props }) {
-  const { enabled } = useMotion();
+function Sparkline({ data, label, variant = "line", tone = "primary", motion, animate, locale, className, ...props }) {
+  const level = chartMotion(motion, animate);
+  const { expressive } = useMotionLevel(level);
   const [ref, inView] = useArrival();
-  const shown = !animate || !enabled || inView;
+  const shown = !expressive || inView;
   const color = toneColor(tone);
   const min = data.length ? Math.min(...data) : 0;
   const max = data.length ? Math.max(...data) : 1;
@@ -72,6 +74,7 @@ function Sparkline({ data, label, variant = "line", tone = "primary", animate =
       viewBox: `0 0 ${W} ${H}`,
       preserveAspectRatio: "none",
       "data-reveal": shown ? "in" : "out",
+      "data-motion": motionAttribute(level),
       className: cn("inline-block h-8 w-24 shrink-0 overflow-visible align-middle", className),
       ...props,
       children: marks

package/dist/components/sparkline/sparkline.meta.js

@@ -70,11 +70,18 @@ var sparklineMeta = {
       default: '"h-8 w-24"',
       description: "Sizes it; the drawing stretches to fit."
     },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting. Drawing on (or rising) is the flourish, so `subtle` and `off` show the finished line."
+    },
     {
       name: "animate",
       type: "boolean",
       default: "true",
-      description: "Draw on (or rise) when it scrolls into view."
+      description: 'Draw on (or rise) when it scrolls into view. `animate={false}` is `motion="subtle"`.',
+      deprecated: 'motion="subtle" (what animate={false} now maps to) or motion="off"'
     },
     {
       name: "locale",
@@ -106,7 +113,7 @@ var sparklineMeta = {
       slot: "arrival",
       recipe: "custom",
       part: "Line / bars",
-      why: "Once on screen the line draws on (or the bars rise, in sequence). On the motion tokens; reduced motion shows the finished drawing."
+      why: 'Once on screen the line draws on (or the bars rise, in sequence). On the motion tokens; reduced motion shows the finished drawing. The arrival is expressive: it plays at the full motion level only, so `motion="subtle"` (or a subtle app policy) shows the finished line.'
     },
     {
       slot: "response",

package/dist/components/table/table.meta.js

@@ -115,6 +115,32 @@ var tableMeta = {
     }
   ],
   tokensUsed: ["border", "muted", "muted-foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "A table renders with the page it sits in. Staggering rows in delays reading data someone opened to scan."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "TableRow",
+      why: "Body rows ease to a muted wash under the pointer. Across a wide row, the wash is what keeps the eye on the right line, and eased it follows the cursor down the table rather than strobing."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "TableCell",
+      why: "A `data-selected` row's fill eases in on every cell together, so the selected row reads as one band being set rather than a stamp."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Table is markup. Loading rows are Skeletons, which carry the shimmer."
+    }
+  ],
   a11y: [
     "Renders semantic native table elements (thead/tbody/tfoot/th/td/caption) preserving built-in table semantics.",
     "Use TableHead (th) for column headers and TableCaption for an accessible description.",

package/dist/components/tabs/tabs.js

@@ -3,19 +3,38 @@ import { Tabs as Base } from "@base-ui/react/tabs";
 import { createContext, useContext } from "react";
 import { cn } from "../../lib/cn.js";
 import { trimLabel } from "../../lib/trim-label.js";
-import { jsx } from "react/jsx-runtime";
-var Tabs = Base.Root;
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tabs({ motion, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Root, { "data-motion": motionAttribute(motion), ...props });
+}
+Tabs.displayName = "Tabs";
 var TabsVariantContext = createContext("underline");
-function TabsList({ className, variant = "underline", ...props }) {
-  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+var UNDERLINE_HANDOFF = "[&:has(>[data-tabs-indicator]:not([hidden]))>[role=tab]]:border-transparent";
+var PILL_HANDOFF = "[&:has(>[data-tabs-indicator]:not([hidden]))>[role=tab]]:bg-transparent";
+var INDICATOR = "pointer-events-none absolute left-0 w-(--active-tab-width) translate-x-(--active-tab-left) motion-glide";
+var INDICATOR_UNDERLINE = "-bottom-px h-0.5 bg-foreground";
+var INDICATOR_PILL = "top-0 h-(--active-tab-height) translate-y-(--active-tab-top) rounded-[var(--button-radius,9999px)] bg-muted";
+function TabsList({ className, variant = "underline", children, ...props }) {
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxs(
     Base.List,
     {
       "data-variant": variant,
       className: cn(
-        variant === "underline" ? "inline-flex items-center gap-1 border-b border-border" : "inline-flex items-center gap-1",
+        variant === "underline" ? cn("relative inline-flex items-center gap-1 border-b border-border", UNDERLINE_HANDOFF) : cn("relative inline-flex items-center gap-1", PILL_HANDOFF),
         className
       ),
-      ...props
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Base.Indicator,
+          {
+            "data-tabs-indicator": "",
+            className: cn(INDICATOR, variant === "underline" ? INDICATOR_UNDERLINE : INDICATOR_PILL)
+          }
+        ),
+        children
+      ]
     }
   ) });
 }
@@ -25,7 +44,7 @@ function TabsTrigger({ className, children, ...props }) {
     Base.Tab,
     {
       className: cn(
-        "cursor-pointer text-label-lg text-muted-foreground motion-interactive hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative cursor-pointer text-label-lg text-muted-foreground motion-interactive hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         variant === "underline" ? (
           // On the control ladder like the pill variant (it was py-2 plus
           // the label's line, ~36px — no rung).
@@ -43,7 +62,7 @@ function TabsPanel({ className, ...props }) {
     Base.Panel,
     {
       className: cn(
-        "pt-4 text-foreground focus-visible:outline-none",
+        "pt-4 text-foreground focus-visible:outline-none not-data-[activation-direction=none]:animate-fade-in data-[ending-style]:hidden",
         className
       ),
       ...props

package/dist/components/tabs/tabs.meta.js

@@ -1,7 +1,7 @@
 // src/components/tabs/tabs.meta.ts
 var tabsMeta = {
   name: "Tabs",
-  summary: "Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers). Tabs (Root) + TabsList + TabsTrigger + TabsPanel.",
+  summary: "Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers), with one indicator that glides to the active tab. Tabs (Root) + TabsList + TabsTrigger + TabsPanel.",
   status: "stable",
   keywords: [
     "tabs",
@@ -71,13 +71,19 @@ var tabsMeta = {
       type: "Base UI Tabs.Root props (value, defaultValue, onValueChange, orientation)",
       default: "defaultValue: 0",
       description: "Controls the active tab. Uncontrolled via defaultValue; controlled via value + onValueChange."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "On Tabs: how much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
     }
   ],
   subcomponents: [
     {
       name: "TabsList",
       type: 'Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" | "pill" + className',
-      description: `The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant.`
+      description: `The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant. It renders the gliding indicator (Base UI Tabs.Indicator) itself, so do not add one.`
     },
     {
       name: "TabsTrigger",
@@ -96,11 +102,44 @@ var tabsMeta = {
     }
   ],
   tokensUsed: ["border", "muted", "muted-foreground", "foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Tabs arrive with the section they organise. An entrance of their own would announce navigation chrome louder than the content it navigates."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "TabsTrigger",
+      why: "The label steps from muted to foreground under the pointer; the ease is what makes that read as an answer rather than a repaint."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Indicator",
+      why: `One underline (or pill) travels to the new tab and stretches to its width. A mark that teleports makes the reader re-find the selection on every click; one that moves is tracked without looking. Expressive: motion="subtle" lands it in place. Each tab's own mark is the fallback until the indicator has measured, so the server render is already right.`
+    },
+    {
+      slot: "transition",
+      recipe: "animate-fade-in",
+      part: "TabsPanel",
+      why: 'The incoming panel fades in, opacity only, so a switch between two similar panels still registers. Skipped on first render (activation direction "none") so a page of tabs does not fade in on load, and the outgoing panel leaves layout at once so a quick second click never stacks both.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Switching tabs is synchronous. A panel that loads data shows its own Skeleton or Spinner inside the panel, where the wait is."
+    }
+  ],
   a11y: [
     "Base UI provides the tablist/tab/tabpanel roles, aria-selected, and roving tabindex.",
     "Arrow keys move between tabs; Home/End jump to first/last; panels are linked via aria-controls.",
     "Active tab styling reads from the data-active attribute; disabled tabs from data-disabled. Disabled tabs are skipped by arrow-key navigation.",
-    "Keyboard focus shows a ring on the focused trigger in both variants; the panel remains focusable."
+    "Keyboard focus shows a ring on the focused trigger in both variants; the panel remains focusable.",
+    'The gliding indicator is role="presentation" decoration; aria-selected on the tab carries the state.'
   ],
   examples: [
     {
@@ -114,6 +153,10 @@ var tabsMeta = {
     {
       label: "With a disabled tab",
       code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="billing" disabled>Billing</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>'
+    },
+    {
+      label: "Subtle motion",
+      code: '<Tabs defaultValue="table" motion="subtle"><TabsList><TabsTrigger value="table">Table</TabsTrigger><TabsTrigger value="chart">Chart</TabsTrigger></TabsList><TabsPanel value="table">Rows</TabsPanel><TabsPanel value="chart">Trend</TabsPanel></Tabs>'
     }
   ]
 };

package/dist/components/theme-selector/theme-selector.meta.js

@@ -117,6 +117,38 @@ var themeSelectorMeta = {
     "muted-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It sits in a settings panel or a popover, which owns the entrance."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Option (list)",
+      why: "List rows ease their hover fill like Menu and Select rows, so a theme list beside a menu reads as the same kind of row."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Name (grid)",
+      why: "In the grid, the theme's name brightens on hover, eased. The preview tile's outline steps rather than easing \u2014 outline is not in the recipe's transition list \u2014 so the name carries the motion."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Check (list)",
+      why: "The check fades into the chosen row and out of the old one, so the choice reads as moving, at the same moment the whole interface repaints in the new theme."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Applying a theme is synchronous: the whole interface repaints at once, and that repaint is the feedback."
+    }
+  ],
   a11y: [
     'The container is role="radiogroup" with an aria-label; each card is a role="radio" button with aria-checked reflecting the selected theme.',
     "Standard radio keyboard: arrow keys move the check \u2014 calling onValueChange on each press \u2014 and Space checks the focused option. That instant switching is right for a free, reversible choice; where a switch has a cost, use a DisclosurePicker list (a listbox: arrows move, Enter commits) with ThemePreview tiles instead.",

package/dist/components/theme-switcher/theme-switcher.js

@@ -3,6 +3,7 @@
 // src/components/theme-switcher/theme-switcher.tsx
 import { Radio as RadioBase } from "@base-ui/react/radio";
 import { Icon } from "../../icon/index.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { cn } from "../../lib/cn.js";
 import {
   SEGMENTED_INNER_RADIUS,
@@ -21,6 +22,7 @@ function ThemeSwitcher({
   value,
   onValueChange,
   label = "Theme",
+  motion,
   className,
   ref,
   ...props
@@ -31,6 +33,7 @@ function ThemeSwitcher({
     {
       ref,
       "aria-label": label,
+      "data-motion": motionAttribute(motion),
       value,
       onValueChange: (next) => onValueChange(next),
       className: cn(
@@ -54,7 +57,7 @@ function ThemeSwitcher({
           {
             "aria-hidden": true,
             className: cn(
-              "pointer-events-none absolute start-0.5 top-0.5 size-7 bg-accent transition-[translate,opacity] duration-(--motion-duration-base) ease-emphasized",
+              "pointer-events-none absolute start-0.5 top-0.5 size-7 bg-accent motion-glide",
               SEGMENTED_INNER_RADIUS,
               "[translate:calc(var(--segment-index)*var(--segment-step))_0] rtl:[translate:calc(var(--segment-index)*var(--segment-step)*-1)_0]",
               activeIndex < 0 && "opacity-0"

package/dist/components/theme-switcher/theme-switcher.meta.js

@@ -58,6 +58,12 @@ var themeSwitcherMeta = {
       default: '"Theme"',
       description: "Accessible label for the radiogroup."
     },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
+    },
     {
       name: "className",
       type: "string",
@@ -73,6 +79,38 @@ var themeSwitcherMeta = {
     "accent-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the header or settings row it lives in; a theme control that announces itself competes with the page it themes."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Option",
+      why: "The icon steps from muted to foreground under the pointer, which is what tells an icon-only segment it is a control."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Option",
+      why: "A settle under the press confirms the tap on a 28px target before the theme change repaints the page around it."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Active pill",
+      why: 'One pill slides to the chosen mode, stepping by option + gap on the spacing scale, so light \u2192 dark reads as the same control moving, not three icons trading a fill. Expressive: motion="subtle" lands it in place.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Changing the theme is synchronous; the repaint is the feedback."
+    }
+  ],
   a11y: [
     'The container is role="radiogroup" with an aria-label; each option is role="radio" with aria-checked reflecting the selected value.',
     "Each icon button carries an aria-label (Light / Dark / System) plus a title tooltip, since the visual is icon-only.",
@@ -91,6 +129,10 @@ var themeSwitcherMeta = {
     {
       label: "Light selected",
       code: '<ThemeSwitcher value="light" onValueChange={setTheme} />'
+    },
+    {
+      label: "Subtle motion",
+      code: '<ThemeSwitcher value={theme} onValueChange={setTheme} motion="subtle" />'
     }
   ]
 };

package/dist/components/toast/toast.js

@@ -5,6 +5,7 @@ import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../button/button.js";
 import { hitTargetMin } from "../../lib/hit-target.js";
+import { STATUS_TONE_ICON } from "../../lib/status-tone.js";
 import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
 import { Spinner } from "../spinner/spinner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -51,7 +52,11 @@ var STACKED_ROOT = [
   // steps down to shadow-md and the cards behind to shadow-sm; fanned out,
   // each is a toast again and takes the full step back.
   "not-data-expanded:shadow-md not-data-expanded:has-[>[data-behind]]:shadow-sm",
-  "transition-[transform,translate,opacity,height,box-shadow] duration-(--motion-duration-slow) ease-emphasized"
+  // The deck springs: cards stepping back and fanning out overshoot a touch
+  // and settle, which is what makes them read as cards rather than rows. A
+  // leaving toast takes the standard curve (nothing overshoots on its way
+  // out), and under "subtle" the spring is a plain decelerate.
+  "transition-[transform,translate,opacity,height,box-shadow] duration-(--motion-duration-slow) ease-spring data-ending-style:ease-standard"
 ].join(" ");
 var STACKED_EDGE = {
   top: "top-0 origin-top [--toast-dir:1] after:top-full",
@@ -204,11 +209,11 @@ function ToastProvider({
     )
   ] });
 }
-var TYPE_ACCENT = {
-  success: "bg-success",
-  error: "bg-destructive",
-  warning: "bg-tone-warning",
-  info: "bg-tone-info"
+var TYPE_TONE = {
+  success: "success",
+  error: "destructive",
+  warning: "warning",
+  info: "info"
 };
 function ToastList({
   closeIcon,
@@ -218,7 +223,8 @@ function ToastList({
 }) {
   const { toasts } = useToast();
   return /* @__PURE__ */ jsx(ToastViewport, { position, stacked, className: viewportClassName, children: toasts.map((item) => {
-    const accent = item.type ? TYPE_ACCENT[item.type] : void 0;
+    const tone = item.type ? TYPE_TONE[item.type] : void 0;
+    const status = tone ? STATUS_TONE_ICON[tone] : void 0;
     return /* @__PURE__ */ jsx(ToastRoot, { toast: item, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
       item.type === "loading" ? /* @__PURE__ */ jsx(
         Spinner,
@@ -226,12 +232,18 @@ function ToastList({
           "aria-hidden": true,
           className: "mt-0.5 size-4 shrink-0 text-muted-foreground"
         }
-      ) : accent ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn("w-1 shrink-0 self-stretch rounded-full", accent)
-        }
+      ) : status ? (
+        // Blooms in once the card has landed, and again when a
+        // loading toast settles into success or failure: the
+        // glyph mounts in the spinner's place.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "mt-0.5 flex shrink-0 motion-bloom [--motion-bloom-delay:120ms]",
+            children: /* @__PURE__ */ jsx(Icon, { name: status.name, className: cn("text-base", status.className) })
+          }
+        )
       ) : null,
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
         item.title ? /* @__PURE__ */ jsx(ToastTitle, { children: item.title }) : null,