@sableui/react 0.13.2 → 0.15.0

package/dist/components/calendar/calendar.js

@@ -3,6 +3,7 @@
 // src/components/calendar/calendar.tsx
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
+import { motionAttribute, useMotionLevel } from "../../motion/MotionProvider.js";
 import { buttonVariants } from "../button/button.variants.js";
 import {
   DayPicker
@@ -23,13 +24,18 @@ function Calendar({
   showOutsideDays = true,
   components,
   bare = false,
+  motion,
+  animate,
   ...props
 }) {
+  const level = useMotionLevel(motion);
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
       "data-slot": "calendar",
+      "data-motion": motionAttribute(motion),
       showOutsideDays,
+      animate: animate ?? level.expressive,
       className: cn(
         // relative: the nav is absolutely positioned (react-day-picker v9
         // renders it inside `months`, not inside each month), and with no
@@ -53,7 +59,10 @@ function Calendar({
         weekdays: "flex",
         weekday: "flex size-9 items-center justify-center text-caption text-muted-foreground",
         week: "mt-1 flex w-full",
-        day: "p-0 text-center",
+        // motion-interactive on the cell too: a range's fill is painted on the
+        // cells (see range_* below), so without it the band between the
+        // endpoints snapped while the endpoint buttons eased.
+        day: "p-0 text-center motion-interactive",
         day_button: "inline-flex size-9 items-center justify-center rounded-md text-body-sm motion-interactive outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring",
         // Range fill lives on the CELL so it forms one continuous bar; only the
         // outer ends are rounded. The selected (primary) endpoint buttons sit on
@@ -76,6 +85,14 @@ function Calendar({
         outside: "[&>button]:text-muted-foreground",
         disabled: "[&>button]:pointer-events-none [&>button]:text-muted-foreground [&>button]:opacity-50",
         hidden: "invisible",
+        weeks_after_enter: "sable-month-enter-after",
+        weeks_before_enter: "sable-month-enter-before",
+        weeks_after_exit: "sable-month-exit-after",
+        weeks_before_exit: "sable-month-exit-before",
+        caption_after_enter: "sable-caption-enter",
+        caption_before_enter: "sable-caption-enter",
+        caption_after_exit: "sable-caption-exit",
+        caption_before_exit: "sable-caption-exit",
         ...classNames
       },
       components: { Chevron: CalendarChevron, ...components },

package/dist/components/calendar/calendar.meta.js

@@ -84,6 +84,12 @@ var calendarMeta = {
       default: "false",
       description: "Drop the card frame (border, fill, padding) so the grid sits flush inside a surface that already has one, such as a Popover. DatePicker renders its Calendar this way."
     },
+    {
+      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 month slide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
+    },
     {
       name: "className",
       type: "string",
@@ -114,6 +120,38 @@ var calendarMeta = {
     "muted-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Inline, it arrives with its form; in a DatePicker the Popover carries the entrance. A grid that animated in by itself would put a second motion on the same opening."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Day",
+      why: "Days ease their hover wash, and the month arrows are ghost Buttons on Button's own recipe. Across a seven-column grid the pointer crosses many cells at once, and an eased wash reads as a cursor travelling rather than a grid flashing."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Day",
+      why: "Picking a day eases the primary fill onto it and off the previous one, so a click reads as the selection moving rather than two cells flipping. A range's band is painted on the cells, which carry the same recipe, so the band eases along with its endpoints as the range grows."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Days are resident data; nothing in the grid loads. Availability fetched per month belongs to the surface around the calendar."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Month",
+      why: "Paging months slides the outgoing grid toward the edge it is leaving by and brings the new one in from the other, over a short travel with a fade (react-day-picker's `animate` mode on Sable keyframes in styles.css), so forward and back read as direction rather than a grid swapping in one frame. RDP adds a single class per part, which a recipe utility cannot be; mirrored in RTL. Expressive: Calendar turns `animate` on only at full motion, and an explicit `animate` prop still wins."
+    }
+  ],
   a11y: [
     "react-day-picker manages the roving-tabindex grid, arrow-key navigation, and ARIA roles/labels for the calendar.",
     "Selected days use bg-primary/text-primary-foreground for AA contrast; today is marked with a dot under the number (not a ring, which is reserved for keyboard focus) rather than color alone.",

package/dist/components/carousel/carousel.js

@@ -14,7 +14,7 @@ import { Icon } from "../../icon/Icon.js";
 import { cn } from "../../lib/cn.js";
 import { PlayPauseGlyph } from "../../lib/glyphs.js";
 import { useResizeObserver } from "../../lib/use-resize-observer.js";
-import { useMotion } from "../../motion/MotionProvider.js";
+import { useMotionLevel } from "../../motion/MotionProvider.js";
 import { Button } from "../button/button.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var CAROUSEL_BREAKPOINTS = [
@@ -92,9 +92,10 @@ function Carousel({
   label,
   className,
   slideClassName,
-  arrowClassName
+  arrowClassName,
+  motion
 }) {
-  const { enabled } = useMotion();
+  const { enabled, attribute: motionAttr } = useMotionLevel(motion);
   const slides = Children.toArray(children);
   const count = slides.length;
   const perView = Math.min(
@@ -278,6 +279,7 @@ function Carousel({
     {
       "aria-roledescription": "carousel",
       "aria-label": label ?? "Slides",
+      "data-motion": motionAttr,
       className: cn("relative flex flex-col", className),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
@@ -401,7 +403,7 @@ function Carousel({
                       {
                         "aria-hidden": true,
                         className: cn(
-                          "h-1.5 rounded-full motion-interactive",
+                          "h-1.5 rounded-full motion-glide",
                           i === logical ? "w-4 bg-foreground" : "w-1.5 bg-muted-foreground/40 group-hover/dot:bg-muted-foreground/70"
                         )
                       }

package/dist/components/carousel/carousel.meta.js

@@ -60,6 +60,12 @@ var carouselMeta = {
       name: "arrowClassName",
       type: "string",
       description: "Class for both prev/next arrow buttons. Merged through cn(), so a radius or shadow utility replaces the default rounded-full shadow-md rather than stacking with it."
+    },
+    {
+      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. Under subtle the slides still travel and the active dot snaps; off also cuts between slides and pauses autoplay."
     }
   ],
   tokensUsed: [
@@ -70,6 +76,38 @@ var carouselMeta = {
     "foreground",
     "muted-foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "A carousel arrives with its section. Its content already moves on every advance; an entrance on top would make the first view feel like an advance nobody asked for."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Dot",
+      why: "The dot's 24px hit area eases its focus ring and the dot brightens under the pointer, which is how a 6px mark tells you it is a button."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Track",
+      why: `The slide track's translate is set inline from the measured slide pitch, on --motion-duration-slow and the emphasized easing, and switched off during a drag so the track follows the finger. A recipe cannot carry a measured, drag-interrupted offset. Essential: it is the answer to "next", so it plays under subtle.`
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Dot",
+      why: 'The active dot stretches to a bar while the one it left shrinks, on one timeline, so the row keeps its length and the mark reads as travelling with the slide. It used to change width unanimated and jumped while the slides beside it glided. Expressive: motion="subtle" snaps it.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Autoplay's progress is the slides themselves advancing and the play/pause control; a separate timer animation would put a second clock beside the first."
+    }
+  ],
   a11y: [
     "Region carries aria-roledescription='carousel'; each slide is a group with aria-roledescription='slide' and an 'N of M' label; clones are aria-hidden.",
     "Arrows and dots are real buttons (dots set aria-current); Left/Right arrow keys navigate when the viewport is focused.",
@@ -92,6 +130,10 @@ var carouselMeta = {
     {
       label: "Autoplay",
       code: "<Carousel loop autoplay={4000} counter>{slides}</Carousel>"
+    },
+    {
+      label: "Subtle motion",
+      code: '<Carousel loop motion="subtle" label="Gallery">{slides}</Carousel>'
     }
   ]
 };

package/dist/components/chat-composer/chat-composer.js

@@ -6,9 +6,11 @@ import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { useTypeTier } from "../../lib/density.js";
 import { setRef } from "../../lib/refs.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { Button } from "../button/index.js";
 import { Textarea } from "../textarea/index.js";
 import { chatComposerVariants } from "./chat-composer.variants.js";
+import { useEasedGrowth } from "./use-eased-growth.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ChatComposer({
   value,
@@ -31,6 +33,7 @@ function ChatComposer({
   stopLabel = "Stop generating",
   footer,
   fieldRef,
+  motion,
   className,
   children,
   ...props
@@ -82,9 +85,11 @@ function ChatComposer({
     [send, mode]
   );
   const showStop = busy && Boolean(onStop);
+  useEasedGrowth(field, text);
   return /* @__PURE__ */ jsxs(
     "form",
     {
+      "data-motion": motionAttribute(motion),
       onSubmit: handleSubmit,
       className: cn(chatComposerVariants({ invalid }), className),
       ...props,
@@ -120,6 +125,9 @@ function ChatComposer({
               // Inline padding puts the text on the attach glyph's edge: an
               // icon-sm button centres a 1.125rem glyph in --control-sm.
               "min-h-0 max-h-40 resize-none border-0 bg-transparent px-[calc((var(--control-sm)-1.125rem)/2)] py-1 focus-visible:ring-0",
+              // Past the cap the field scrolls; the platform bar (stepper arrows on
+              // Windows) would poke into the composer's rounded corner.
+              "scrollbar-quiet",
               // What you type has to match what it becomes: the field and the
               // Bubble it turns into both read `prose`, so the message does not
               // change size the moment it is sent.
@@ -143,33 +151,25 @@ function ChatComposer({
           leading,
           /* @__PURE__ */ jsx("div", { className: "flex-1" }),
           actions,
-          showStop ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             Button,
             {
-              type: "button",
-              variant: "secondary",
+              type: showStop ? "button" : "submit",
+              variant: showStop ? "secondary" : "primary",
               size: "icon-sm",
-              "aria-label": stopLabel,
-              onClick: () => {
+              "aria-label": showStop ? stopLabel : sendLabel,
+              disabled: showStop ? false : !canSend,
+              loading: !showStop && busy,
+              onClick: showStop ? (event) => {
+                event.preventDefault();
                 onStop?.();
                 if (!coarse) field.current?.focus();
-              },
-              children: /* @__PURE__ */ jsx(Icon, { name: "stop", variant: "solid", className: "text-[0.75em]" })
+              } : void 0,
+              children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "motion-icon-swap", children: [
+                /* @__PURE__ */ jsx("span", { "data-active": !showStop, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "arrow-up" }) }),
+                /* @__PURE__ */ jsx("span", { "data-active": showStop, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "stop", variant: "solid", className: "text-[0.75em]" }) })
+              ] })
             }
-          ) : (
-            // Busy without a stop handler: Button's own `loading` swaps the glyph
-            // for its Spinner and keeps full colour, rather than a hand-spun icon.
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "submit",
-                size: "icon-sm",
-                "aria-label": sendLabel,
-                disabled: !canSend,
-                loading: busy,
-                children: /* @__PURE__ */ jsx(Icon, { name: "arrow-up" })
-              }
-            )
           )
         ] }),
         footerContent ? /* @__PURE__ */ jsx("p", { className: cn("px-[calc((var(--control-sm)-1.125rem)/2)] text-muted-foreground", tier.secondary), children: footerContent }) : null,

package/dist/components/chat-composer/chat-composer.meta.js

@@ -209,6 +209,12 @@ var chatComposerMeta = {
       type: "Ref<HTMLTextAreaElement>",
       description: "Ref to the underlying textarea \u2014 for focusing after a send, or on mount, and the extension point for anything that listens to the field. Pass `useCaretTrigger`'s `fieldRef` here for mentions and slash commands (CaretMenu). An Enter another listener already handled (`preventDefault()`) does not send."
     },
+    {
+      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. Under `subtle` the field snaps to its new height and the send/stop glyphs swap without the morph."
+    },
     {
       name: "...form props",
       type: 'Omit<ComponentPropsWithRef<"form">, "onSubmit" | "defaultValue">',
@@ -230,6 +236,38 @@ var chatComposerMeta = {
     "accent",
     "accent-foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "The composer is the fixed foot of a thread, there before anything else is. An entrance would only delay the first keystroke."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The surface's focus ring and invalid border ease in, so focusing the field reads as the whole box waking up rather than a frame flicker."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Field",
+      why: "As a line breaks or a paste lands, the field eases to its new height (up to its cap) instead of jumping, so the transcript above is visibly pushed rather than teleported. `field-sizing` alone cannot ease \u2014 its height stays `auto` \u2014 so a small hook measures and pins a pixel height. Expressive and short (`fast`): the text itself lands at once, and `subtle` snaps the box."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-icon-swap",
+      part: "Send button",
+      why: "Send turning into stop is the moment a reply starts, and stop turning back is the moment it is over. One button changes role in place \u2014 the fill eases, the arrow collapses into the square \u2014 so it reads as the same control changing what it does, not a different button appearing under the cursor."
+    },
+    {
+      slot: "activity",
+      recipe: "motion-spin",
+      part: "Send button",
+      why: "Busy with no stop handler, Button's own loading Spinner replaces the arrow, so a send in flight is not mistaken for a disabled one."
+    }
+  ],
   a11y: [
     "A real `<form>`, so the send button is a submit button and the whole thing behaves as one control to assistive tech and to password managers alike.",
     "Enter never submits while an IME composition is open (`isComposing`), so a CJK reader confirming a candidate word does not mail a fragment of their first sentence.",

package/dist/components/chat-composer/use-eased-growth.js

@@ -0,0 +1,70 @@
+"use client";
+
+// src/components/chat-composer/use-eased-growth.ts
+import { useCallback, useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+var GROW_TRANSITION = "height calc(var(--motion-duration-fast) * var(--motion-expressive, 1)) var(--motion-ease-standard), opacity var(--motion-duration-fast) var(--motion-ease-standard)";
+function useEasedGrowth(ref, value) {
+  const mounted = useRef(false);
+  const width = useRef(0);
+  const fit = useCallback(
+    (animate) => {
+      const el = ref.current;
+      if (!el) return;
+      const style = getComputedStyle(el);
+      const from = Number.parseFloat(style.height);
+      const scrollTop = el.scrollTop;
+      el.style.transition = "none";
+      el.style.height = "auto";
+      if (el.scrollHeight === 0) {
+        el.style.height = "";
+        el.style.overflowY = "";
+        el.style.transition = GROW_TRANSITION;
+        return;
+      }
+      const content = el.scrollHeight + (Number.parseFloat(style.borderTopWidth) || 0) + (Number.parseFloat(style.borderBottomWidth) || 0);
+      const max = Number.parseFloat(style.maxHeight);
+      const target = Number.isNaN(max) ? content : Math.min(content, max);
+      const capped = content > target + 0.5;
+      el.style.overflowY = capped ? "" : "hidden";
+      if (animate && Number.isFinite(from)) {
+        el.style.height = `${from}px`;
+        void el.offsetHeight;
+        el.style.transition = GROW_TRANSITION;
+        el.style.height = `${target}px`;
+      } else {
+        el.style.height = `${target}px`;
+        void el.offsetHeight;
+        el.style.transition = GROW_TRANSITION;
+      }
+      el.scrollTop = capped ? scrollTop : 0;
+    },
+    [ref]
+  );
+  useIsomorphicLayoutEffect(() => {
+    fit(mounted.current);
+    mounted.current = true;
+  }, [value, fit]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    width.current = el.clientWidth;
+    const ro = new ResizeObserver(() => {
+      if (el.clientWidth === width.current) return;
+      width.current = el.clientWidth;
+      fit(false);
+    });
+    ro.observe(el);
+    let live = true;
+    document.fonts?.ready.then(() => {
+      if (live) fit(false);
+    });
+    return () => {
+      live = false;
+      ro.disconnect();
+    };
+  }, [ref, fit]);
+}
+export {
+  useEasedGrowth
+};

package/dist/components/checkbox/checkbox-mark.js

@@ -9,7 +9,14 @@ function CheckboxMark({ className }) {
     Base.Indicator,
     {
       className: cn(
-        "flex items-center justify-center text-current motion-interactive ease-spring data-[starting-style]:scale-0 data-[starting-style]:opacity-0 data-[ending-style]:scale-0 data-[ending-style]:opacity-0",
+        // motion-tick, not a scale from 0: the mark wipes in from its leading
+        // stroke, so checking reads as a tick being drawn rather than a dot
+        // swelling into a check. The dash takes the same wipe, which for a
+        // horizontal bar is simply a line drawn left to right. It declares its
+        // own transition list, so motion-interactive must not sit here too —
+        // two transition-property declarations on one element and the later
+        // class silently wins, dropping the clip-path.
+        "flex items-center justify-center text-current motion-tick",
         className
       ),
       render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", { ...indicatorProps, children: /* @__PURE__ */ jsx(

package/dist/components/checkbox/checkbox.js

@@ -1,13 +1,15 @@
 // src/components/checkbox/checkbox.tsx
 import { Checkbox as Base } from "@base-ui/react/checkbox";
 import { cn } from "../../lib/cn.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { CHECK_BOX } from "../../lib/selection-card.js";
 import { CheckboxMark } from "./checkbox-mark.js";
 import { jsx } from "react/jsx-runtime";
-function Checkbox({ className, children, ...props }) {
+function Checkbox({ className, children, motion, ...props }) {
   return /* @__PURE__ */ jsx(
     Base.Root,
     {
+      "data-motion": motionAttribute(motion),
       className: cn(
         CHECK_BOX,
         "text-primary-foreground",

package/dist/components/checkbox/checkbox.meta.js

@@ -91,6 +91,12 @@ var checkboxMeta = {
       name: "render",
       type: "ReactElement | (props, state) => ReactElement",
       description: "Compose the root with another element through the Base UI render prop."
+    },
+    {
+      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. Under `subtle` the tick fades in instead of drawing itself."
     }
   ],
   tokensUsed: [
@@ -100,6 +106,32 @@ var checkboxMeta = {
     "primary-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the form it belongs to. Animating each box in turns a settings list into a title sequence."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Box",
+      why: "The box fills with the primary colour as it is checked; easing the fill keeps the mark and the box changing as one event rather than two frames apart."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-tick",
+      part: "Mark",
+      why: "The check draws itself in from its leading stroke, so checking reads as the box being ticked rather than a glyph appearing. The dash wipes the same way. Unchecking only fades, so clearing a list is quick; under `subtle` checking fades too."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A checkbox commits instantly. A slow write belongs to the surrounding form's pending state, not the control."
+    }
+  ],
   a11y: [
     "Base UI renders a hidden native <input type=checkbox> for keyboard, focus, and form semantics.",
     "Space toggles; focus-visible draws a 2px ring in the --ring token.",

package/dist/components/checkbox-card/checkbox-card.js

@@ -2,6 +2,7 @@
 import { Checkbox as Base } from "@base-ui/react/checkbox";
 import { CheckboxGroup as BaseGroup } from "@base-ui/react/checkbox-group";
 import { cn } from "../../lib/cn.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import {
   CHECK_BOX,
   SELECTION_CARD_GLYPH,
@@ -52,6 +53,7 @@ function CheckboxCard({
   description,
   icon,
   tone = "neutral",
+  motion,
   ...props
 }) {
   const t = checkboxCardToneClasses[tone];
@@ -59,6 +61,7 @@ function CheckboxCard({
   return /* @__PURE__ */ jsxs(
     Base.Root,
     {
+      "data-motion": motionAttribute(motion),
       className: cn(
         SELECTION_CARD_SHELL,
         icon != null ? SELECTION_CARD_LAYOUT.tile : SELECTION_CARD_LAYOUT.row,

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

@@ -92,6 +92,12 @@ var checkboxCardMeta = {
       name: "checked / onCheckedChange / defaultChecked / disabled",
       type: "Base UI Checkbox.Root props",
       description: "Standard checkbox state. Without a group-owned value, each card is independent \u2014 drive checked/onCheckedChange per item for multi-select."
+    },
+    {
+      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. Under `subtle` the tick fades in instead of drawing itself."
     }
   ],
   subcomponents: [
@@ -124,6 +130,32 @@ var checkboxCardMeta = {
     "tone-warning",
     "tone-warning-foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the form it belongs to. Animating each box in turns a settings list into a title sequence."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Box",
+      why: "The box fills with the primary colour as it is checked; easing the fill keeps the mark and the box changing as one event rather than two frames apart."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-tick",
+      part: "Mark",
+      why: "The check draws itself in from its leading stroke, so checking reads as the box being ticked rather than a glyph appearing. The dash wipes the same way. Unchecking only fades, so clearing a list is quick; under `subtle` checking fades too."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A checkbox commits instantly. A slow write belongs to the surrounding form's pending state, not the control."
+    }
+  ],
   a11y: [
     "Base UI provides the checkbox role, aria-checked, hidden native input, keyboard toggle, and data-[checked]/data-disabled state.",
     "The whole card is the hit target; focus draws a 2px outline outside the card (not a ring, so the checked tone ring survives focus); Space toggles the focused card.",

package/dist/components/code-block/code-block.js

@@ -7,6 +7,15 @@ import { Button } from "../button/button.js";
 import { cn } from "../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CodeHighlightContext = createContext(null);
+function CopyGlyph({ copied }) {
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "motion-icon-swap", children: [
+    /* @__PURE__ */ jsx("span", { "data-active": !copied, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "copy" }) }),
+    /* @__PURE__ */ jsx("span", { "data-active": copied, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) })
+  ] });
+}
+function CopiedStatus({ copied }) {
+  return /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: copied ? "Copied" : "" });
+}
 function CodeHighlightProvider({ highlight, children }) {
   return /* @__PURE__ */ jsx(CodeHighlightContext.Provider, { value: highlight, children });
 }
@@ -39,7 +48,8 @@ function CodeBlock({
             ] }),
             code
           ] }),
-          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy command", onClick: copy, className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy command", onClick: copy, className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(CopyGlyph, { copied }) }) : null,
+          showCopy ? /* @__PURE__ */ jsx(CopiedStatus, { copied }) : null
         ]
       }
     );
@@ -57,7 +67,7 @@ function CodeBlock({
       children: [
         hasHeader ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2", children: [
           /* @__PURE__ */ jsx("span", { className: "text-mono-caption text-muted-foreground", children: filename }),
-          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "text-muted-foreground", children: /* @__PURE__ */ jsx(CopyGlyph, { copied }) }) : null
         ] }) : null,
         /* @__PURE__ */ jsx(
           "pre",
@@ -72,7 +82,8 @@ function CodeBlock({
             children: /* @__PURE__ */ jsx("code", { children: highlighter ? highlighter(code) : code })
           }
         ),
-        copyColumn ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "m-2 ms-0 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+        copyColumn ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "m-2 ms-0 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(CopyGlyph, { copied }) }) : null,
+        showCopy ? /* @__PURE__ */ jsx(CopiedStatus, { copied }) : null
       ]
     }
   );

package/dist/components/code-block/code-block.meta.js

@@ -79,9 +79,36 @@ var codeBlockMeta = {
     }
   ],
   tokensUsed: ["border", "muted", "muted-foreground", "foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Code is reading content and arrives with the page or message it belongs to. An entrance of its own would delay the text someone came to copy."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Copy button",
+      why: "The copy button is a quiet ghost icon in the corner of a block. Its hover fill is what tells the pointer it is a control and not decoration."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-icon-swap",
+      part: "Copy glyph",
+      why: "The copy mark turning into a check is the only proof the clipboard took the text. Snapped between frames it was easy to miss at the edge of a block; the swap reads as one mark being replaced."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Copying is instant. There is no in-between worth showing, and a spinner for a clipboard write would read as a slow one."
+    }
+  ],
   a11y: [
     "Code renders inside a <pre><code> for correct semantics and screen-reader handling.",
-    "Copy is the ghost icon Button with `useCopy`, which guards clipboard access for SSR safety."
+    "Copy is the ghost icon Button with `useCopy`, which guards clipboard access for SSR safety.",
+    'A successful copy is announced as "Copied" through a polite role=status region that is always mounted; the button keeps its label, which names what it does. Both glyphs are aria-hidden.'
   ],
   examples: [
     {