@sableui/react 0.13.2 → 0.15.0

package/dist/components/feedback/feedback.js

@@ -1,8 +1,16 @@
 "use client";
 
 // src/components/feedback/feedback.tsx
-import { useId, useState } from "react";
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { Button } from "../button/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.js";
 import { Textarea } from "../textarea/index.js";
@@ -13,79 +21,144 @@ var DEFAULT_RATINGS = [
   { value: "ok", label: "\u{1F610}" },
   { value: "good", label: "\u{1F642}" }
 ];
+var SUCCESS_DWELL_MS = 1200;
 function Feedback({
   label = "Feedback",
   heading = "Send feedback",
   placeholder = "What can we improve?",
   submitLabel = "Send",
   ratings = DEFAULT_RATINGS,
+  successMessage = "Thanks for the feedback.",
   onSubmit,
+  motion,
   className,
   ...props
 }) {
   const [open, setOpen] = useState(false);
   const [rating, setRating] = useState(void 0);
   const [message, setMessage] = useState("");
+  const [sent, setSent] = useState(false);
+  const [drawn, setDrawn] = useState(false);
+  const thanksRef = useRef(null);
   const headingId = useId();
   function reset() {
     setRating(void 0);
     setMessage("");
+    setSent(false);
+    setDrawn(false);
   }
   function handleSubmit(event) {
     event.preventDefault();
-    if (!rating && message.trim() === "") return;
+    if (sent || !rating && message.trim() === "") return;
     onSubmit?.({ rating, message });
-    reset();
-    setOpen(false);
+    setSent(true);
   }
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(
-      PopoverTrigger,
-      {
-        render: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: label })
-      }
-    ),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxs(
-      "form",
-      {
-        className: cn("flex flex-col gap-3", className),
-        "aria-labelledby": headingId,
-        onSubmit: handleSubmit,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("p", { id: headingId, className: "text-title-sm text-popover-foreground", children: heading }),
-          /* @__PURE__ */ jsx(
-            ToggleGroup,
+  useLayoutEffect(() => {
+    if (sent) thanksRef.current?.focus({ preventScroll: true });
+  }, [sent]);
+  useEffect(() => {
+    if (!sent) return;
+    let frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(() => setDrawn(true));
+    });
+    const timer = setTimeout(() => setOpen(false), SUCCESS_DWELL_MS);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+    };
+  }, [sent]);
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: setOpen,
+      onOpenChangeComplete: (isOpen) => {
+        if (!isOpen) reset();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
+          {
+            render: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: label })
+          }
+        ),
+        /* @__PURE__ */ jsxs(PopoverContent, { className: "grid w-80", "data-motion": motionAttribute(motion), children: [
+          /* @__PURE__ */ jsxs(
+            "form",
             {
-              value: rating ? [rating] : [],
-              onValueChange: (value) => setRating(value[0]),
-              "aria-label": "Rating",
-              children: ratings.map((option) => /* @__PURE__ */ jsx(
-                Toggle,
-                {
-                  value: option.value,
-                  "aria-label": option.value,
-                  className: "flex-1 text-base",
-                  children: option.label
-                },
-                option.value
-              ))
+              className: cn(
+                "col-start-1 row-start-1 flex flex-col gap-3 transition-opacity duration-(--motion-duration-fast) ease-standard",
+                sent && "opacity-0",
+                className
+              ),
+              "aria-labelledby": headingId,
+              inert: sent,
+              onSubmit: handleSubmit,
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx("p", { id: headingId, className: "text-title-sm text-popover-foreground", children: heading }),
+                /* @__PURE__ */ jsx(
+                  ToggleGroup,
+                  {
+                    value: rating ? [rating] : [],
+                    onValueChange: (value) => setRating(value[0]),
+                    "aria-label": "Rating",
+                    children: ratings.map((option) => /* @__PURE__ */ jsx(
+                      Toggle,
+                      {
+                        value: option.value,
+                        "aria-label": option.value,
+                        className: "flex-1 text-base",
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn("inline-flex", rating === option.value && "motion-bloom"),
+                            children: option.label
+                          },
+                          rating === option.value ? "chosen" : "rest"
+                        )
+                      },
+                      option.value
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    value: message,
+                    onChange: (event) => setMessage(event.target.value),
+                    placeholder,
+                    "aria-label": placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !rating && message.trim() === "", children: submitLabel }) })
+              ]
             }
           ),
-          /* @__PURE__ */ jsx(
-            Textarea,
+          sent ? /* @__PURE__ */ jsxs(
+            "div",
             {
-              value: message,
-              onChange: (event) => setMessage(event.target.value),
-              placeholder,
-              "aria-label": placeholder
+              ref: thanksRef,
+              tabIndex: -1,
+              "data-slot": "feedback-thanks",
+              className: "col-start-1 row-start-1 flex flex-col items-center justify-center gap-2 text-center outline-none transition-opacity duration-(--motion-duration-base) ease-standard starting:opacity-0",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "inline-flex size-10 items-center justify-center rounded-full bg-success/15 text-2xl text-success",
+                    children: /* @__PURE__ */ jsx("span", { "data-starting-style": drawn ? void 0 : "", className: "inline-flex motion-tick", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "text-body-md text-popover-foreground", children: successMessage })
+              ]
             }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !rating && message.trim() === "", children: submitLabel }) })
-        ]
-      }
-    ) })
-  ] });
+          ) : null
+        ] })
+      ]
+    }
+  );
 }
 Feedback.displayName = "Feedback";
 export {

package/dist/components/feedback/feedback.meta.js

@@ -1,7 +1,7 @@
 // src/components/feedback/feedback.meta.ts
 var feedbackMeta = {
   name: "Feedback",
-  summary: "A compact feedback popover. Composes Popover + Textarea + Button + Toggle into a rating row plus a message field; submitting reports the rating + message and closes the popover.",
+  summary: "A compact feedback popover. Composes Popover + Textarea + Button + Toggle into a rating row plus a message field; submitting reports the rating + message, shows a brief drawn-check thanks, and closes the popover.",
   status: "stable",
   composition: "Popover, Textarea, ToggleGroup, Button",
   keywords: [
@@ -72,7 +72,19 @@ var feedbackMeta = {
     {
       name: "onSubmit",
       type: "(data: { rating?: string; message: string }) => void",
-      description: "Called with the selected rating + message when the form is submitted."
+      description: "Called with the selected rating + message when the form is submitted. The thanks shows right away; send the report in the background."
+    },
+    {
+      name: "successMessage",
+      type: "string",
+      default: '"Thanks for the feedback."',
+      description: "The line shown, and read out, for about 1.2s after sending, before the popover closes on its own."
+    },
+    {
+      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. The drawn check is the flourish; the thanks line and its dwell stay."
     }
   ],
   tokensUsed: [
@@ -85,14 +97,49 @@ var feedbackMeta = {
     "muted-foreground",
     "accent",
     "accent-foreground",
-    "ring"
+    "ring",
+    "success"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-pop",
+      part: "Popover",
+      why: "The form opens from its trigger, so the eye goes from the button it pressed to the field it should type in. Popover owns the recipe."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Rating toggles",
+      why: "The rating row is a choice among a few similar marks. The eased selected fill is what makes the pick read as made, not just hovered."
+    },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "Chosen rating mark",
+      why: "The mark itself answers the pick: it blooms past its size and settles, so choosing reads as a small decision landing rather than a fill changing. Only the chosen mark, only on choosing \u2014 nothing blooms when the form opens or a pick is let go. Expressive: under subtle the fill alone answers."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-tick",
+      part: "Thanks",
+      why: "Sending is the one moment the person needs to know their words arrived. The form fades out in place and a check draws itself in over it, then the popover closes. Without it the popover just vanished, which looks the same as the form being dismissed or the message lost."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "The thanks shows as soon as the form is sent; delivery is the app's background work. A spinner for a one-line report would make a quick, optional gesture feel heavy."
+    }
   ],
   a11y: [
     "Trigger opens the popover on press; Base UI manages focus into the form and restores it to the trigger on close.",
     "The rating row is a Base UI ToggleGroup with arrow-key roving focus; each toggle carries an aria-label.",
     'The form is named by its heading (aria-labelledby), so it is announced as "Send feedback" rather than an unnamed form.',
     "The message field carries an aria-label matching its placeholder.",
-    "Submit is disabled until there is a rating or a non-whitespace message. Either alone is a complete answer."
+    "Submit is disabled until there is a rating or a non-whitespace message. Either alone is a complete answer.",
+    "On send, focus moves to the thanks line (tabIndex=-1), which reads it out, and the form becomes inert so focus cannot land in invisible fields. The line is not also a live region, which read it twice. When the popover closes, Base UI returns focus to the trigger.",
+    "The thanks dwell (about 1.2s) is a reading time, not motion, so it is the same under reduced motion."
   ],
   examples: [
     {
@@ -102,6 +149,10 @@ var feedbackMeta = {
     {
       label: "Custom labels",
       code: '<Feedback label="Tell us" submitLabel="Send it" placeholder="Describe the issue\u2026" />'
+    },
+    {
+      label: "Custom thanks",
+      code: '<Feedback successMessage="Got it \u2014 thank you." onSubmit={({ rating, message }) => report(rating, message)} />'
     }
   ]
 };

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

@@ -76,6 +76,32 @@ var inputGroupMeta = {
     }
   ],
   tokensUsed: ["input", "card", "ring", "destructive", "muted-foreground", "foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the form it belongs to. A field that animated in on its own would be briefly unusable for no stated reason."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The shell owns one focus ring for the input and its addons and eases it in, so focusing the text, or tabbing to a copy button inside the field, reads as the one field taking focus."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "An invalid value turns the shell's edge destructive on the same ease, so the error lands as the field changing state rather than a red box swapping in."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A field does no work of its own. A pending check (an availability lookup) puts a Spinner in `trailing`, which is where its answer will appear."
+    }
+  ],
   a11y: [
     "The Input stays the focusable control; the group draws the focus ring around the whole field while it is focused.",
     "Inside a Field, the label, description and error are wired to the Input itself, not the group.",
@@ -93,7 +119,7 @@ var inputGroupMeta = {
     },
     {
       label: "Copy button",
-      code: '<Field label="API key"><InputGroup trailing={<Button variant="ghost" size="icon-sm" aria-label="Copy key" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button>}><Input readOnly value={key} /></InputGroup></Field>'
+      code: '<Field label="API key"><InputGroup trailing={<Button variant="ghost" size="icon-sm" aria-label="Copy key" onClick={copy}><span aria-hidden="true" className="motion-icon-swap"><span data-active={!copied} className="inline-flex"><Icon name="copy" /></span><span data-active={copied} className="inline-flex"><Icon name="check" /></span></span></Button>}><Input readOnly value={key} /></InputGroup></Field>'
     },
     {
       label: "Password with reveal",

package/dist/components/like-button/index.js

@@ -0,0 +1,7 @@
+// src/components/like-button/index.ts
+import { LikeButton } from "./like-button.js";
+import { likeButtonMeta } from "./like-button.meta.js";
+export {
+  LikeButton,
+  likeButtonMeta
+};

package/dist/components/like-button/like-button.js

@@ -0,0 +1,89 @@
+"use client";
+
+// src/components/like-button/like-button.tsx
+import { useMemo, useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { Burst } from "../../motion/Burst.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { Button } from "../button/button.js";
+import { NumberTicker } from "../number-ticker/number-ticker.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_SIZE = { xs: "icon-xs", sm: "icon-sm", md: "icon" };
+function LikeButton({
+  className,
+  count,
+  format,
+  icon = "heart",
+  tone = "red",
+  label = "Like",
+  variant = "ghost",
+  size = "sm",
+  motion,
+  pressed: pressedProp,
+  defaultPressed = false,
+  onPressedChange,
+  onClick,
+  ...props
+}) {
+  const [innerPressed, setInnerPressed] = useState(defaultPressed);
+  const pressed = pressedProp ?? innerPressed;
+  const [baseline, setBaseline] = useState({ count, pressed });
+  if (!Object.is(count, baseline.count)) setBaseline({ count, pressed });
+  const shown = count === void 0 ? void 0 : count + Number(pressed) - Number(baseline.pressed);
+  const [likes, setLikes] = useState(0);
+  const [armed, setArmed] = useState(false);
+  if (armed) {
+    setArmed(false);
+    if (pressed) setLikes((n) => n + 1);
+  }
+  const formatter = useMemo(() => new Intl.NumberFormat(void 0, format), [format]);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ...props,
+      variant,
+      size: shown === void 0 ? ICON_SIZE[size] : size,
+      className: cn("tabular-nums", className),
+      "aria-pressed": pressed,
+      "data-pressed": pressed ? "" : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        const next = !pressed;
+        if (pressedProp === void 0) setInnerPressed(next);
+        if (next) setArmed(true);
+        onPressedChange?.(next, event);
+      },
+      "aria-label": props["aria-label"] ?? (shown === void 0 ? label : `${label} ${formatter.format(shown)}`),
+      "data-motion": motionAttribute(motion),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { "--motion-bloom-delay": "90ms" },
+              className: cn("inline-flex", pressed && likes > 0 && "motion-bloom"),
+              "data-palette": pressed ? tone : void 0,
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: icon,
+                  variant: pressed ? "solid" : "regular",
+                  className: cn("size-(--button-icon)", pressed && "text-palette-dot")
+                }
+              )
+            },
+            likes
+          ),
+          /* @__PURE__ */ jsx("span", { "data-palette": tone, className: "contents text-palette-dot", children: /* @__PURE__ */ jsx(Burst, { trigger: likes, motion, className: "[--burst-size:calc(var(--button-icon)*2.25)]" }) })
+        ] }),
+        shown === void 0 ? null : /* @__PURE__ */ jsx(NumberTicker, { value: shown, format, motion })
+      ]
+    }
+  );
+}
+LikeButton.displayName = "LikeButton";
+export {
+  LikeButton
+};

package/dist/components/like-button/like-button.meta.js

@@ -0,0 +1,132 @@
+// src/components/like-button/like-button.meta.ts
+var likeButtonMeta = {
+  name: "LikeButton",
+  summary: "A pressed-or-not toggle for a like, a star or a save, with its count. Pressing it on fills the glyph, which blooms while a ring and a spray of dots burst from it and the count rolls up; pressing it off is quiet.",
+  status: "stable",
+  keywords: [
+    "like",
+    "heart",
+    "favorite",
+    "favourite",
+    "love",
+    "star",
+    "bookmark",
+    "save",
+    "upvote",
+    "reaction",
+    "count",
+    "toggle"
+  ],
+  usage: {
+    description: "Use LikeButton for a personal, reversible endorsement that other people can see the tally of: liking a post, starring a repository, saving a recipe. It is the one place in Sable that celebrates, because the person chose it and it costs nothing to undo.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Pass the server's total as `count` and update it when the save lands. The button shows the viewer's own like at once, before the save, and goes back to `count` exactly whenever it changes, so a failed save that leaves `count` alone can also turn `pressed` back off."
+      },
+      {
+        guidance: "do",
+        description: 'Match the glyph, family and label to the meaning: `icon="star" tone="yellow" label="Star"` for a star. The label is the accessible name, so it must say what pressing does.'
+      },
+      {
+        guidance: "do",
+        description: 'Use `format={{ notation: "compact" }}` once counts pass a few thousand, so a feed of buttons keeps one width.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a setting or a view switch (bold, mute, grid or list). Those are tools, not endorsements, and a burst on every press of a formatting control is noise; use Toggle.",
+        instead: ["Toggle"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a rating or a verdict on an answer (helpful, not helpful). That is a question with two sides; use Feedback.",
+        instead: ["Feedback"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not press it for the user. A burst is a reply to a person's choice \u2014 liking something on their behalf, or on load, turns delight into a notification."
+      }
+    ]
+  },
+  related: {
+    components: ["Toggle", "Feedback", "NumberTicker", "Button"]
+  },
+  props: [
+    {
+      name: "count",
+      type: "number",
+      description: "The total, rolled when it changes. Pressing adds or removes the viewer's like at once; the button shows `count` exactly again whenever `count` changes. Omit it for a bare glyph (an icon-size button)."
+    },
+    { name: "pressed", type: "boolean", description: "Controlled pressed state." },
+    { name: "defaultPressed", type: "boolean", default: "false", description: "Initial pressed state when uncontrolled." },
+    {
+      name: "onPressedChange",
+      type: "(pressed: boolean, event) => void",
+      description: "Called when the user presses it, with the new state."
+    },
+    { name: "icon", type: "string", default: '"heart"', description: "The glyph, by icon name. Its `solid` variant is shown while pressed." },
+    {
+      name: "tone",
+      type: "PaletteColor",
+      default: '"red"',
+      description: "The palette family the glyph fills with while pressed, and the burst blooms from. A family, so it follows the theme."
+    },
+    { name: "label", type: "string", default: '"Like"', description: "The accessible name, read before the count." },
+    { name: "format", type: "Intl.NumberFormatOptions", description: 'How to write the count, e.g. `{ notation: "compact" }`.' },
+    { name: "variant", type: '"ghost" | "outline" | "secondary"', default: '"ghost"', description: "The Button surface." },
+    { name: "size", type: '"xs" | "sm" | "md"', default: '"sm"', description: "A Button size; without a count, the matching icon size." },
+    { name: "disabled", type: "boolean", default: "false", description: "Disables 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 flourish, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting. The bloom and the burst are the flourish; the fill and the count changing stay."
+    }
+  ],
+  variants: {
+    variant: ["ghost", "outline", "secondary"],
+    size: ["xs", "sm", "md"],
+    tone: ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"]
+  },
+  tokensUsed: ["palette-dot", "accent", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the post or row it belongs to. A page that loads with likes already given must be still: nothing blooms on mount."
+    },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "Glyph",
+      why: "Pressing it on is the moment. The glyph is 16px, so it needs real amplitude to read as an event: it grows from nothing past its size and settles, after a 90ms beat in which the ring leads. Inherits Button's motion-press for the press itself. Pressing off has no bloom \u2014 taking a like back is not a celebration."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Burst",
+      why: "The follow-through: <Burst> draws a disc that hollows into a ring and shifts colour, then dots thrown outward in the theme's palette families. Expressive only \u2014 under `subtle` or reduced motion it renders nothing and the fill alone answers the press. The count rolls with NumberTicker."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "There is no in-between state to show: the like is shown at once, before it is saved."
+    }
+  ],
+  a11y: [
+    "A native <button> through Button, with `aria-pressed`. Enter and Space press it.",
+    `The accessible name is the label then the count ("Like 1,301"); the burst is aria-hidden and the rolling digits are hidden behind the count's real text.`,
+    "The pressed state is carried by the filled glyph and `aria-pressed`, never by colour alone.",
+    "Under reduced motion the glyph fills and the count changes at once; the bloom and the burst are dropped."
+  ],
+  examples: [
+    { label: "A post's likes", code: "<LikeButton count={post.likes} defaultPressed={post.liked} onPressedChange={(on) => api.like(post.id, on)} />" },
+    { label: "Star a repository", code: '<LikeButton icon="star" tone="yellow" label="Star" variant="outline" count={repo.stars} format={{ notation: "compact" }} />' },
+    { label: "Bare glyph", code: '<LikeButton label="Save recipe" />' }
+  ]
+};
+export {
+  likeButtonMeta
+};

package/dist/components/line-chart/line-chart.meta.js

@@ -115,11 +115,18 @@ var lineChartMeta = {
       default: "false for columns; true for horizontal bars",
       description: "The vertical axis."
     },
+    {
+      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. The arrival (lines drawing on) and the data-change morph are the flourish; the gliding cursor, dots and tooltip are the feedback `subtle` keeps."
+    },
     {
       name: "animate",
       type: "boolean",
       default: "true",
-      description: "Play the arrival once the chart scrolls into view. Reduced motion shows the finished chart."
+      description: 'Play the arrival once the chart scrolls into view. Reduced motion shows the finished chart. `animate={false}` is `motion="subtle"`.',
+      deprecated: 'motion="subtle" (what animate={false} now maps to: no arrival, hover kept) or motion="off"'
     },
     {
       name: "activeIndex",
@@ -180,7 +187,7 @@ var lineChartMeta = {
       slot: "arrival",
       recipe: "custom",
       part: "Line",
-      why: "Once on screen each line draws on from the first point (stroke-dashoffset), series staggered, then the dots and labels fade in. On the motion tokens; reduced motion shows the finished chart."
+      why: 'Once on screen each line draws on from the first point (stroke-dashoffset), series staggered, then the dots and labels fade in. On the motion tokens; reduced motion shows the finished chart. The arrival is expressive: it plays at the full motion level only, so `motion="subtle"` (or a subtle app policy) shows the finished chart while hover feedback stays.'
     },
     {
       slot: "response",
@@ -192,7 +199,7 @@ var lineChartMeta = {
       slot: "transition",
       recipe: "custom",
       part: "Line + dots",
-      why: "Geometry eases from the old shape to the new one through a CSS `d` transition on the motion tokens (no recipe animates path geometry); browsers without `d` transitions update in place."
+      why: "Geometry eases from the old shape to the new one through a CSS `d` transition on the motion tokens (no recipe animates path geometry); browsers without `d` transitions update in place. Expressive, like the arrival: under `subtle` new data swaps in place."
     },
     {
       slot: "activity",

package/dist/components/middle-truncate/middle-truncate.meta.js

@@ -68,7 +68,7 @@ var middleTruncateMeta = {
     },
     {
       label: "Copyable value",
-      code: 'const { copy, copied } = useCopy(commitHash)\n<Row gap={1}><MiddleTruncate text={commitHash} /><Button variant="ghost" size="icon-xs" aria-label="Copy commit hash" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>'
+      code: 'const { copy, copied } = useCopy(commitHash)\n<Row gap={1}><MiddleTruncate text={commitHash} /><Button variant="ghost" size="icon-xs" aria-label="Copy commit hash" onClick={copy}><span aria-hidden="true" className="motion-icon-swap"><span data-active={!copied} className="inline-flex"><Icon name="copy" /></span><span data-active={copied} className="inline-flex"><Icon name="check" /></span></span></Button><span role="status" className="sr-only">{copied ? "Copied" : ""}</span></Row>'
     }
   ]
 };