@sableui/react 0.13.2 → 0.14.0

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

@@ -0,0 +1,143 @@
+// src/components/confirm-button/confirm-button.meta.ts
+var confirmButtonMeta = {
+  name: "ConfirmButton",
+  summary: 'An inline two-step confirm for a low-stakes destructive or irreversible action: the first press arms it ("Delete" \u2192 "Confirm delete?", destructive), a second press within a few seconds runs it, and leaving it disarms it.',
+  status: "stable",
+  keywords: [
+    "confirm",
+    "confirmation",
+    "two-step",
+    "press again",
+    "click again",
+    "arm",
+    "delete",
+    "remove",
+    "destructive",
+    "inline confirm",
+    "hold to confirm"
+  ],
+  usage: {
+    description: "Use ConfirmButton when an action deserves one beat of second thought but not a modal: deleting a draft, removing a row, revoking one token, clearing a list that can be rebuilt. The question appears on the button the user is already pressing, so confirming costs one more press in the same place and backing out costs nothing.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Keep the idle label a plain verb ("Delete", "Remove", "Revoke") and let the confirm label ask about it ("Confirm delete?" by default, or `confirmLabel`). The user should read the consequence on the very control they are about to press again.'
+      },
+      {
+        guidance: "do",
+        description: "Leave room for it to grow. The button eases wider to fit the question, so give it space at the end of a row or in a table's action column rather than wedging it between fixed-width neighbours."
+      },
+      {
+        guidance: "do",
+        description: "Return the promise from `onConfirm` when the action is async. The button stays armed with a spinner until it settles and refuses further presses, so a slow network cannot run it twice."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for high-stakes or wide-reaching actions \u2014 deleting a project, an account, anything other people depend on. Those need the consequence spelled out and a typed or deliberate confirmation; use DestructiveActionModal.",
+        instead: ["DestructiveActionModal"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it where an undo is possible. If the action can be reversed, run it on the first press and offer Undo in a Toast \u2014 no question at all is faster than a good question.",
+        instead: ["Toast"]
+      },
+      {
+        guidance: "dont",
+        description: 'Do not use it for a non-destructive primary action ("Save", "Send"). Asking twice for something harmless teaches people to press twice without reading, which is what defeats the confirm when it matters; use Button.',
+        instead: ["Button"]
+      }
+    ]
+  },
+  related: {
+    components: ["Button", "DestructiveActionModal", "Toast", "OverflowMenu"]
+  },
+  props: [
+    { name: "children", type: "ReactNode", description: 'The idle label \u2014 the action, e.g. "Delete".' },
+    {
+      name: "confirmLabel",
+      type: "ReactNode",
+      default: '"Confirm <label>?"',
+      description: 'The label while armed. Defaults to "Confirm delete?" for a text label "Delete" (first letter lowered) and "Confirm?" otherwise. Pass it to localise.'
+    },
+    {
+      name: "onConfirm",
+      type: "() => unknown",
+      description: "Runs on the second press while armed. Return a promise to hold the button armed with a spinner until it settles."
+    },
+    { name: "timeout", type: "number", default: "3000", description: "How long it waits for the second press, in ms. A decision time, so it is not scaled by motion settings." },
+    { name: "variant", type: "ButtonVariant", default: '"secondary"', description: "The idle look \u2014 any Button variant." },
+    { name: "confirmVariant", type: "ButtonVariant", default: '"destructive"', description: "The armed look \u2014 any Button variant." },
+    { name: "size", type: '"xs" | "sm" | "md" | "cta"', default: '"md"', description: "A labelled Button size. Icon-only sizes are excluded: the label is the interaction." },
+    { name: "icon", type: "ReactNode", description: 'A leading icon kept through both states, e.g. `<Icon name="trash" />`.' },
+    { name: "disabled", type: "boolean", default: "false", description: "Disables it; disabling while armed also disarms." },
+    {
+      name: "confirmHint",
+      type: "string",
+      default: '"Press again to confirm."',
+      description: "Read to assistive tech after the armed label when it arms. Override to localise."
+    },
+    {
+      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 width easing and the draining countdown are the flourish; the label cross-fade and colour change stay."
+    }
+  ],
+  variants: {
+    variant: ["primary", "secondary", "ghost", "outline", "destructive", "link", "floating", "field", "on-color", "on-color-outline", "on-color-ghost"],
+    confirmVariant: ["destructive", "primary", "secondary", "outline"],
+    size: ["xs", "sm", "md", "cta"]
+  },
+  tokensUsed: ["secondary", "secondary-foreground", "destructive", "destructive-foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It is a button in a row of actions, and arrives with that row. Its moment is the arming, not the mount."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Root",
+      why: "Inherited from Button with motion-interactive. The press settle confirms the first press landed even before the label has finished changing \u2014 which is what stops a second, accidental press."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-size",
+      part: "Root",
+      why: "Arming changes the label, so the button's width changes. Easing it makes the button visibly grow into the question and its neighbours travel, instead of the row jumping under the pointer that is about to press again. useAutoSize measures the content and writes a px width for motion-size to ease between (a content-sized box is width:auto before and after, which cannot transition). The labels cross-fade in one cell so there is never a frame with both or neither."
+    },
+    {
+      slot: "activity",
+      recipe: "custom",
+      part: "Countdown",
+      why: "While armed, a thin line drains along the foot of the button over the timeout \u2014 the only way to see that the question expires. A transition on scale, timed by the `timeout` prop and multiplied by the motion scale and expressive factor, so under reduced motion or `subtle` it is absent rather than frozen full."
+    }
+  ],
+  a11y: [
+    "A native <button> through Button. Focus stays on it through both presses; Enter and Space confirm exactly as a click does.",
+    "Only the current label is in the accessible name \u2014 the other is aria-hidden \u2014 so the name changes to the question while armed.",
+    `Arming is also announced through a polite role=status region outside the button ("Confirm delete? Press again to confirm."), because a focused button's name change is not read by every screen reader.`,
+    "Escape disarms and is consumed, so it does not also close the dialog or popover around it. Focus leaving, a press elsewhere, or the timeout disarm it too.",
+    "A second press within 300ms of arming is ignored: a double-click is a habit, not a decision.",
+    "Under reduced motion the label still changes and the colour still turns; only the width easing and countdown are dropped."
+  ],
+  examples: [
+    {
+      label: "Delete a row",
+      code: '<ConfirmButton icon={<Icon name="trash" />} onConfirm={() => removeRow(id)}>Delete</ConfirmButton>'
+    },
+    {
+      label: "Custom question, longer wait",
+      code: '<ConfirmButton variant="ghost" size="sm" confirmLabel="Revoke this key?" timeout={5000} onConfirm={revokeKey}>Revoke</ConfirmButton>'
+    },
+    {
+      label: "Async confirm",
+      code: "<ConfirmButton onConfirm={() => api.deleteDraft(draft.id)}>Discard draft</ConfirmButton>"
+    }
+  ]
+};
+export {
+  confirmButtonMeta
+};

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

@@ -0,0 +1,7 @@
+// src/components/confirm-button/index.ts
+import { ConfirmButton } from "./confirm-button.js";
+import { confirmButtonMeta } from "./confirm-button.meta.js";
+export {
+  ConfirmButton,
+  confirmButtonMeta
+};

package/dist/components/data-table/data-table.js

@@ -122,8 +122,12 @@ function DataTable({
                     /* @__PURE__ */ jsx(
                       Icon,
                       {
-                        name: active && sort.direction === "desc" ? "chevron-down" : "chevron-up",
-                        className: cn("text-xs", !active && "opacity-60")
+                        name: "chevron-up",
+                        className: cn(
+                          "text-xs motion-interactive",
+                          active && sort.direction === "desc" && "rotate-180",
+                          !active && "opacity-60"
+                        )
                       }
                     )
                   ]

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

@@ -139,6 +139,38 @@ var dataTableMeta = {
     }
   ],
   tokensUsed: ["muted-foreground", "foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Rows render with the page or the query that produced them. Staggering rows in delays reading a table someone opened to scan."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Row",
+      why: "Body rows ease to a muted wash under the pointer (TableRow's recipe), which keeps the eye on the right line across a wide row of numbers. Sortable headers are ghost Buttons and answer on Button's recipe."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Sort chevron",
+      why: "One chevron turns to show direction instead of two glyphs swapping, so ascending to descending reads as the same column reversing. Its opacity rises from the resting 60% as the column becomes the sort."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Row",
+      why: "A checked row's fill eases in across its cells, so selecting by checkbox reads as the row being picked rather than a band stamped over it."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "DataTable has no loading state. While data is fetched, render Skeleton rows (motion-shimmer) in its place \u2014 only the caller knows a fetch is in flight."
+    }
+  ],
   a11y: [
     "Sorted columns set aria-sort=ascending/descending on the header cell.",
     "Sortable headers are real <button>s with a focus-visible ring, keyboard-operable.",

package/dist/components/entity/entity.meta.js

@@ -86,6 +86,32 @@ var entityMeta = {
     density: ["compact", "comfortable"]
   },
   tokensUsed: ["accent", "accent-foreground", "foreground", "muted-foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Rows arrive with the list they belong to. Entering one at a time is a stagger, and a stagger on a list someone opened to scan is a delay."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "Only the interactive row reacts: its hover fill, a step off the surface it sits on, eases in. A static row never fakes clickability, and an interactive one answers the pointer without flicker as it moves down a list."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "`selected` eases the fill onto the current row of a list\u2013detail view, so opening another record reads as the selection moving rather than two rows flashing."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A record row has nothing of its own to wait for. A row whose action is pending puts a loading Button in `action`."
+    }
+  ],
   a11y: [
     "Default rows are presentational layout; semantics come from the content you place in title/subtitle/action.",
     "interactive rows render a real <button> around the leading visual and text, with its ::after stretched over the whole row \u2014 native focus, a focus-visible ring, and Enter/Space. The action slot sits outside that button and above the overlay, so a Button there stays valid HTML and keeps its own clicks.",

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,137 @@ 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: option.label
+                      },
+                      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,43 @@ 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: "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 +143,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/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>'
     }
   ]
 };