@sableui/react 0.13.2 → 0.15.0

package/dist/components/accordion/accordion.meta.js

@@ -122,6 +122,12 @@ var accordionMeta = {
       part: "AccordionPanel",
       why: "Panel height is the only cue that content came from THIS header rather than appearing at the bottom of the page. Snapping it open moves everything below by a screenful with nothing connecting cause to effect."
     },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Chevron",
+      why: "The chevron turning is the header's half of the same event as the panel opening. motion-interactive lists `rotate` (what Tailwind's rotate-* writes), so it turns with the panel instead of flipping 180\xB0 in one frame beside an easing panel. A custom `indicator` that rotates should carry motion-interactive itself."
+    },
     {
       slot: "activity",
       recipe: "none",
@@ -134,7 +140,7 @@ var accordionMeta = {
     "Arrow keys move roving focus between triggers; Home/End jump to the first/last; loopFocus wraps by default.",
     "Each trigger toggles its panel with Enter/Space; the panel is announced as a labelled region.",
     "A disabled AccordionItem dims and is skipped by keyboard focus while neighbouring items stay interactive.",
-    "The chevron rotation is driven by data-[panel-open] and the focus ring by focus-visible \u2014 both honor reduced-motion via the consumer's transitions."
+    "The chevron rotation is driven by data-[panel-open] and the focus ring by focus-visible; both ride motion-interactive, so reduced motion stills them with everything else."
   ],
   examples: [
     {
@@ -147,7 +153,7 @@ var accordionMeta = {
     },
     {
       label: "Custom indicator (plus-becomes-\xD7)",
-      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground transition-transform [[data-panel-open]_&]:rotate-45" />}>Can I cancel anytime?</AccordionTrigger><AccordionPanel>Yes \u2014 from billing settings.</AccordionPanel></AccordionItem></Accordion>'
+      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground motion-interactive [[data-panel-open]_&]:rotate-45" />}>Can I cancel anytime?</AccordionTrigger><AccordionPanel>Yes \u2014 from billing settings.</AccordionPanel></AccordionItem></Accordion>'
     }
   ]
 };

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

@@ -117,11 +117,18 @@ var areaChartMeta = {
       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 (draw-on, rising fill) and the data-change morph are the flourish; the gliding cursor 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",
@@ -176,7 +183,7 @@ var areaChartMeta = {
       slot: "arrival",
       recipe: "custom",
       part: "Area + line",
-      why: "Once on screen, each line draws on (stroke-dashoffset) and its fill rises from the baseline, series staggered \u2014 the trend is read as it is drawn. On the motion tokens; reduced motion shows the finished chart."
+      why: 'Once on screen, each line draws on (stroke-dashoffset) and its fill rises from the baseline, series staggered \u2014 the trend is read as it is drawn. 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",
@@ -188,7 +195,7 @@ var areaChartMeta = {
       slot: "transition",
       recipe: "custom",
       part: "Area + line",
-      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/attachment/attachment.meta.js

@@ -148,6 +148,32 @@ var attachmentMeta = {
     "overlay-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "An attachment lands as part of a composer or a message, and that surface owns the entrance. A card that animated in on its own would read as a second, separate event \u2014 as if another file had been added."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "With `onOpen`, the edge steps up under the pointer; it is the only cue that the card itself opens the file, not just its actions. Eased, it reads as the card answering the cursor rather than a border flickering as the pointer crosses a busy composer."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "Uploading to failed re-colours the edge and fill without changing the shape. The ease keeps it legible as the same file turning red; snapped, a failed card looks like a different card replaced the one that was sent."
+    },
+    {
+      slot: "activity",
+      recipe: "motion-pulse",
+      part: "Progress",
+      why: "While uploading with no known `progress`, the bar is indeterminate and pulses (Progress's own recipe); with a number, the fill eases toward each new value. A still bar at a fixed width is indistinguishable from an upload that has stalled."
+    }
+  ],
   a11y: [
     "The full-card trigger is a real stretched `<button>` with an accessible label, not a click handler on a div \u2014 so it is one tab stop, keyboard-activatable, and focus-ringed.",
     "Actions sit above that trigger in the stacking order, which keeps them individually focusable and stops a click on `remove` from also opening the file. Text is only made click-through when a trigger is present, so a filename stays selectable otherwise.",

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

@@ -117,11 +117,18 @@ var barChartMeta = {
       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 (bars rising in sequence) and the data-change morph are the flourish; the hover dim and gliding cursor 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",
@@ -199,19 +206,19 @@ var barChartMeta = {
       slot: "arrival",
       recipe: "custom",
       part: "Bar",
-      why: "Once on screen, bars rise from the baseline in sequence on the emphasized easing (scale from the zero line) and their labels fade in. On the motion tokens; reduced motion shows the finished chart."
+      why: 'Once on screen, bars rise from the baseline in sequence on the emphasized easing (scale from the zero line) and their 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",
       recipe: "none",
       part: "Cursor + tooltip",
-      why: "The hovered category gets a band behind it and the other bars dim at once \u2014 a lagging highlight reads as a slow chart."
+      why: "The hovered category gets a band behind it and the other bars dim at once \u2014 a lagging highlight reads as a slow chart. The dim mixes each bar toward the surface instead of fading it, so gridlines never strike through a dimmed column and stacked segments stay solid. Essential: `subtle` keeps it."
     },
     {
       slot: "transition",
       recipe: "custom",
       part: "Bar",
-      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/bottom-nav/bottom-nav.js

@@ -38,8 +38,10 @@ function BottomNavItem({
       "data-active": active ? "" : void 0,
       "aria-current": active ? "page" : void 0,
       className: cn(
+        // motion-press: on a phone there is no hover to say the tap landed, and
+        // a route change can take a beat to paint — the settle is the receipt.
         // design-lint-disable-next-line raw-control-height -- the WCAG 2.5.5 touch-target floor, deliberately density-independent: a compact register still owes a 44px hit area.
-        "relative flex min-h-[44px] min-w-[44px] flex-col items-center justify-center gap-0.5 rounded-lg text-muted-foreground motion-interactive hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground",
+        "relative flex min-h-[44px] min-w-[44px] flex-col items-center justify-center gap-0.5 rounded-lg text-muted-foreground motion-interactive motion-press hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground",
         className
       ),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -57,6 +57,38 @@ var bottomNavMeta = {
       description: 'A single tab, placed as a child of BottomNav. `label` is the accessible name (aria-label) and optional visible label; `icon` is the glyph node (consumer swaps fill weight for the active state); `active` marks the current route (active ink + aria-current); `badge` overlays a corner dot/count on the icon; `showLabel` shows the label text beneath the icon \u2014 defaults to false (icon-only); turn it on when the icons alone are not self-evident; `render` renders as another element, e.g. render={<Link to="/x" />}.'
     }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Fixed app chrome, present from the first paint of every screen. Animating it in on navigation would make each route change look like the app restarting."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "BottomNavItem",
+      why: "The ink steps up on hover and the focus ring eases in, so a pointer or a keyboard on a tablet gets the same answer as every other control in the app."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "BottomNavItem",
+      why: "On a phone there is no hover to say a tap landed, and a route can take a beat to paint. The settle on press is the receipt; without it people tap the tab a second time."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "BottomNavItem",
+      why: "Changing tab eases the active ink out of one item and into the next. It is a cross-fade, not a travelling indicator: each item owns its colour, so there is no single mark to glide."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Navigation has no working state of its own. A slow route shows its pending state in the page it is loading, not in the tab bar."
+    }
+  ],
   a11y: [
     "BottomNav renders a <nav> landmark.",
     "Each tab is a 44px minimum touch target with an aria-label.",

package/dist/components/breadcrumbs/breadcrumbs.meta.js

@@ -89,6 +89,32 @@ var breadcrumbsMeta = {
     }
   ],
   tokensUsed: ["muted-foreground", "foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "The trail is page furniture, rendered with the page header. An entrance would replay on every navigation, which is exactly when the reader looks at it to get their bearings."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "BreadcrumbLink",
+      why: "Ancestors are muted until hovered or focused. Easing the ink makes the trail read as links answering the pointer; a hard snap across a row of small text looks like flicker."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "A breadcrumb has no state of its own. The current page changes by navigation, which replaces the trail; animating between two trails would imply the path itself moved."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "It never works in the background. A route that is still loading says so in the page, not in its address."
+    }
+  ],
   a11y: [
     'The <nav> carries aria-label="Breadcrumb" so assistive tech announces the landmark.',
     "Crumbs sit in an ordered list (<ol>) to convey hierarchy and position.",

package/dist/components/bubble/bubble.js

@@ -1,7 +1,22 @@
+"use client";
+
 // src/components/bubble/bubble.tsx
+import {
+  Children,
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { useTypeTier } from "../../lib/density.js";
+import { Burst } from "../../motion/Burst.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { NumberTicker } from "../number-ticker/number-ticker.js";
 import { Pill } from "../pill/pill.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { DEFAULT_REACTIONS, ReactionPicker } from "../reaction-picker/reaction-picker.js";
 import {
   bubbleTailVariants,
   bubbleReactionsVariants,
@@ -60,28 +75,46 @@ function BubbleTail({ variant, align }) {
   );
 }
 Bubble.displayName = "Bubble";
+var ReactionRowLive = createContext(false);
 function BubbleReactions({
   align = "start",
   className,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const [live, setLive] = useState(false);
+  useEffect(() => setLive(true), []);
+  return /* @__PURE__ */ jsx(ReactionRowLive.Provider, { value: live, children: /* @__PURE__ */ jsx(
     "div",
     {
+      hidden: Children.toArray(children).length === 0 || void 0,
       className: cn(bubbleReactionsVariants({ align }), className),
-      ...props
+      ...props,
+      children
     }
-  );
+  ) });
 }
 BubbleReactions.displayName = "BubbleReactions";
 function BubbleReaction({
   emoji,
+  label,
   count,
   active = false,
+  motion,
   className,
   ...props
 }) {
   const tier = useTypeTier();
+  const live = useContext(ReactionRowLive);
+  const [arrived] = useState(() => live && active);
+  const [shots, setShots] = useState(arrived ? 1 : 0);
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
+    if (active) setShots((n) => n + 1);
+  }
+  const shown = count !== void 0 && count > 1 ? count : void 0;
+  const named = label === void 0 ? void 0 : shown === void 0 ? label : `${label}, ${shown}`;
   return (
     // Pill's own quiet chip: outline (a hairline at rest, a primary tint when
     // it is the reader's) at the xs control height. No overrides — a reaction
@@ -92,19 +125,86 @@ function BubbleReaction({
         appearance: "outline",
         size: "sm",
         selected: active,
+        "aria-label": named,
+        "data-motion": motionAttribute(motion),
         className: cn(tier.secondary, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji }),
-          count !== void 0 && count > 1 ? /* @__PURE__ */ jsx("span", { className: "text-mono-caption tabular-nums", children: count }) : null
+          /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: { "--motion-bloom-delay": "60ms" },
+                className: cn("inline-flex text-body-lg leading-none", active && shots > 0 && "motion-bloom"),
+                children: emoji
+              },
+              shots
+            ),
+            /* @__PURE__ */ jsx(
+              Burst,
+              {
+                trigger: shots,
+                playOnMount: arrived,
+                particle: emoji,
+                count: 5,
+                motion,
+                className: "[--burst-size:4em]"
+              }
+            )
+          ] }),
+          shown === void 0 ? null : /* @__PURE__ */ jsx(NumberTicker, { value: shown, motion, className: "text-mono-caption tabular-nums" })
         ]
       }
     )
   );
 }
 BubbleReaction.displayName = "BubbleReaction";
+function BubbleReactionAdd({
+  reactions = DEFAULT_REACTIONS,
+  selected,
+  onSelect,
+  label = "Add reaction",
+  motion,
+  className,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          Pill,
+          {
+            appearance: "outline",
+            size: "sm",
+            "aria-label": label,
+            className: cn("text-muted-foreground", className),
+            ...props
+          }
+        ),
+        children: /* @__PURE__ */ jsx(Icon, { name: "emoji", className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: "start", sideOffset: 6, className: "w-auto rounded-full p-1", children: /* @__PURE__ */ jsx(
+      ReactionPicker,
+      {
+        reactions,
+        selected,
+        motion,
+        onSelect: (emoji) => {
+          setOpen(false);
+          onSelect?.(emoji);
+        }
+      }
+    ) })
+  ] });
+}
+BubbleReactionAdd.displayName = "BubbleReactionAdd";
 export {
   Bubble,
   BubbleReaction,
+  BubbleReactionAdd,
   BubbleReactions
 };

package/dist/components/bubble/bubble.meta.js

@@ -66,12 +66,17 @@ var bubbleMeta = {
       {
         name: "BubbleReaction",
         required: false,
-        description: "One reaction pill \u2014 emoji, count (hidden at 1), and pressed state."
+        description: "One reaction pill \u2014 emoji, count (hidden at 1), and pressed state. Celebrates when it becomes the reader's own."
+      },
+      {
+        name: "BubbleReactionAdd",
+        required: false,
+        description: "The add-reaction pill at the end of the row: opens a ReactionPicker above it."
       }
     ]
   },
   related: {
-    components: ["Message", "MessageScroller", "Marker", "Attachment"]
+    components: ["Message", "MessageScroller", "Marker", "Attachment", "ReactionPicker"]
   },
   props: [
     {
@@ -106,8 +111,13 @@ var bubbleMeta = {
     },
     {
       name: "BubbleReaction",
-      type: '{ emoji: ReactNode; count?: number; active?: boolean } & ComponentPropsWithRef<"button">',
-      description: 'One reaction pill. A toggle, not a label: `active` drives `aria-pressed` as well as the styling, and `count` is hidden at 1 because the pill already says "one".'
+      type: '{ emoji: ReactNode; label?: string; count?: number; active?: boolean; motion?: MotionLevel } & ComponentPropsWithRef<"button">',
+      description: 'One reaction pill. A toggle, not a label: `active` drives `aria-pressed` as well as the styling, `label` names it ("Party, 3"), and `count` is hidden at 1 because the pill already says "one". When it turns on \u2014 pressed, or newly added already on \u2014 the emoji blooms, copies of it burst out and the count rolls; pills the page loads with stay still.'
+    },
+    {
+      name: "BubbleReactionAdd",
+      type: '{ reactions?: Reaction[]; selected?: string[]; onSelect?: (emoji: string) => void; label?: string; motion?: MotionLevel } & ComponentPropsWithRef<"button">',
+      description: "The add-reaction pill: a smiley that opens a ReactionPicker above it. Choosing an emoji closes the picker and calls `onSelect`; add the emoji to the row and its new pill celebrates on arrival."
     }
   ],
   variants: {
@@ -128,9 +138,35 @@ var bubbleMeta = {
     "muted-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Bubble",
+      why: "A bubble arrives with its Message row, which owns how a new message enters the transcript. A reaction pill that the reader just added arrives with its own celebration (below)."
+    },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "BubbleReaction",
+      why: "Reacting is the reader's choice, so it is answered like a like: the emoji grows from nothing past its size and settles, while copies of it spray outward and fade (Burst with the emoji as its particle, the way chat apps answer a reaction). Plays when a pill turns on and when a pill mounts already on into a row that has rendered \u2014 never for the pills a page loads with. Pills inherit Pill's motion-interactive and motion-press."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "BubbleReaction",
+      why: "The count rolls with NumberTicker as people react. Turning a reaction off is quiet: the tint eases out and the count rolls back, with no burst. Under `subtle` or reduced motion the bloom and the spray are dropped and the tint and count alone answer."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Bubble",
+      why: "A bubble is static content; a message still being written is StreamingText or a Marker, not a state of the surface."
+    }
+  ],
   a11y: [
     "The surface is a plain container with no imposed role \u2014 a bubble is presentation, and announcing one as a region would put a landmark around every line of a conversation.",
-    "Reaction pills are real buttons reporting `aria-pressed`, so the reader's own reaction is state rather than colour alone; the emoji is hidden from AT and the count is left readable.",
+    'Reaction pills are real buttons reporting `aria-pressed`, so the reader\'s own reaction is state rather than colour alone. Give each a `label`: it is named "Party, 3", with the emoji and its burst hidden from AT. The add-reaction pill is named "Add reaction" and opens a toolbar picker.',
     "`whitespace-pre-wrap` and `break-words` keep pasted logs, long URLs, and hard-wrapped text inside the surface instead of overflowing the conversation.",
     "Every variant meets AA against its own surface, including `primary`, which pairs the primary fill with its paired foreground token rather than a hardcoded white."
   ],
@@ -145,7 +181,7 @@ var bubbleMeta = {
     },
     {
       label: "With reactions",
-      code: '<Message messageId="m3">\n	<Bubble>Shipped 0.45.0.</Bubble>\n	<BubbleReactions>\n		<BubbleReaction emoji="\u{1F389}" count={3} active onClick={() => toggle("\u{1F389}")} />\n		<BubbleReaction emoji="\u{1F440}" count={1} onClick={() => toggle("\u{1F440}")} />\n	</BubbleReactions>\n</Message>'
+      code: '<Message messageId="m3">\n	<Bubble>Shipped 0.45.0.</Bubble>\n	<BubbleReactions>\n		<BubbleReaction emoji="\u{1F389}" label="Party" count={3} active onClick={() => toggle("\u{1F389}")} />\n		<BubbleReaction emoji="\u{1F440}" label="Eyes" count={1} onClick={() => toggle("\u{1F440}")} />\n		<BubbleReactionAdd selected={mine} onSelect={toggle} />\n	</BubbleReactions>\n</Message>'
     },
     {
       label: "A grouped run drops the repeated tail",

package/dist/components/bubble/bubble.variants.js

@@ -28,7 +28,7 @@ var bubbleTailVariants = cva(
   }
 );
 var bubbleVariants = cva(
-  "relative w-fit max-w-[42rem] whitespace-pre-wrap break-words rounded-lg px-3.5 py-2.5 text-body-md",
+  "relative w-fit max-w-[42rem] whitespace-pre-wrap break-words rounded-lg px-3.5 py-2.5 text-body-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
   {
     variants: {
       variant: {

package/dist/components/bubble/index.js

@@ -2,12 +2,14 @@
 import {
   Bubble,
   BubbleReaction,
+  BubbleReactionAdd,
   BubbleReactions
 } from "./bubble.js";
 import { bubbleMeta } from "./bubble.meta.js";
 export {
   Bubble,
   BubbleReaction,
+  BubbleReactionAdd,
   BubbleReactions,
   bubbleMeta
 };

package/dist/components/button/button.js

@@ -21,6 +21,7 @@ var BLEED_CLASS = {
   end: "-me-(--button-pe,var(--button-px))",
   both: "-ms-(--button-ps,var(--button-px)) -me-(--button-pe,var(--button-px))"
 };
+var LABEL_FADE = "[&>.sable-label-trim]:transition-opacity [&>.sable-label-trim]:duration-(--motion-duration-fast) [&>.sable-label-trim]:ease-standard";
 function Button({
   variant,
   size,
@@ -71,12 +72,19 @@ function Button({
   const stacked = useContext(StackedActionsContext) && !String(size ?? "md").startsWith("icon");
   const resolvedSize = stacked ? "cta" : size ?? "md";
   const hasLabel = children != null && children !== false;
-  const spinner = /* @__PURE__ */ jsx(Spinner, { className: "size-(--button-icon)", thickness: 2 });
-  const start = busy ? spinner : iconStart;
   const iconOnly = String(resolvedSize).startsWith("icon");
+  const overlay = busy && !iconOnly && hasLabel && iconStart == null && loadingLabel == null && badge == null;
+  const spinner = /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      className: cn("size-(--button-icon) motion-appear", overlay && "absolute inset-0 m-auto"),
+      thickness: 2
+    }
+  );
+  const start = busy ? spinner : iconStart;
   const inner = busy && iconOnly ? spinner : /* @__PURE__ */ jsxs(Fragment, { children: [
     start,
-    trimLabel(busy ? loadingLabel ?? children : children),
+    trimLabel(busy && !overlay ? loadingLabel ?? children : children),
     iconEnd
   ] });
   const content = badge != null ? /* @__PURE__ */ jsxs("span", { "data-slot": "button-badge-anchor", className: "relative inline-flex items-center gap-(--control-gap)", children: [
@@ -84,7 +92,9 @@ function Button({
     /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute -end-1 -top-1 flex", children: badge })
   ] }) : inner;
   const optical = cn(
-    start && hasLabel && !iconOnly ? OPTICAL_START : null,
+    // An overlaid spinner is not a leading glyph: trimming the padding for it
+    // changed the width by 2px, the exact shift the overlay exists to avoid.
+    start && hasLabel && !iconOnly && !overlay ? OPTICAL_START : null,
     iconEnd && hasLabel && !iconOnly ? OPTICAL_END : null
   );
   const bleedable = BORDERLESS.has(variant ?? "primary") && !stacked;
@@ -104,6 +114,13 @@ function Button({
         // double-fire, but fading it to 50% made a working button read as an
         // unavailable one. It keeps full colour; the spinner says "working".
         busy ? "cursor-progress disabled:opacity-100 aria-disabled:opacity-100" : null,
+        // The label hands over to the spinner laid on top of it (see
+        // `overlay`). Its fade is declared at rest too, so the label also
+        // fades BACK when the work settles instead of snapping in. Only the
+        // trimLabel span is targeted: a caller's icon may carry a transition
+        // of its own (a chevron's rotate) that a child selector would clobber.
+        LABEL_FADE,
+        overlay ? "relative [&>:not([role=status])]:opacity-0" : null,
         className
       ),
       children: content,

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

@@ -33,7 +33,7 @@ var buttonMeta = {
       },
       {
         guidance: "do",
-        description: "For a copy control, pair an icon Button with `useCopy(text, { timeout? })`. It takes the text when the hook is called and returns `{ copy, copied }`; `copy()` takes no argument, so pass the value the button copies to the hook, not to `copy`. Text that costs something to produce (a file to fetch) goes in as a function, `useCopy(() => fetch(url).then((r) => r.text()))`, called only on click."
+        description: 'For a copy control, pair an icon Button with `useCopy(text, { timeout? })`. It takes the text when the hook is called and returns `{ copy, copied }`; `copy()` takes no argument, so pass the value the button copies to the hook, not to `copy`. Text that costs something to produce (a file to fetch) goes in as a function, `useCopy(() => fetch(url).then((r) => r.text()))`, called only on click. Keep both glyphs mounted in a `motion-icon-swap` cell so the copy mark visibly becomes a check (a `copied ? "check" : "copy"` swap snaps between frames and is easy to miss), and say "Copied" in a polite `role="status"` region: the glyph change is silent to a screen reader.'
       },
       {
         guidance: "do",
@@ -126,7 +126,7 @@ var buttonMeta = {
       name: "loading",
       type: "boolean",
       default: "false",
-      description: "Show a leading Spinner while an action is in flight and refuse presses. Sets aria-busy and aria-disabled, never the native disabled: disabling the focused button sent focus to <body>, so a sheet the action opened had nowhere to return it."
+      description: "Show a Spinner while an action is in flight and refuse presses. The spinner takes the iconStart slot when there is one; otherwise it lays over the label, which fades out in place, so the button keeps its width. Sets aria-busy and aria-disabled, never the native disabled: disabling the focused button sent focus to <body>, so a sheet the action opened had nowhere to return it."
     },
     {
       name: "onClick",
@@ -141,7 +141,7 @@ var buttonMeta = {
     {
       name: "loadingLabel",
       type: "ReactNode",
-      description: "Optional text shown in place of children while loading."
+      description: "Optional text shown in place of children while loading, with the spinner beside it. The width follows the new text, so prefer no loadingLabel where the row must not move."
     },
     {
       name: "iconStart",
@@ -211,9 +211,9 @@ var buttonMeta = {
     },
     {
       slot: "transition",
-      recipe: "none",
-      part: "Root",
-      why: "A button has no state of its own to move between. A control that toggles is a Switch or a Toggle, and those carry the transition."
+      recipe: "motion-appear",
+      part: "Spinner",
+      why: "Going busy is the one state change a button has. The spinner fades in where it mounts \u2014 in the icon slot, or laid over a plain label that fades out beneath it and keeps its place \u2014 so the width never changes and the row does not shift under the pointer that just pressed it. The label fades back when the work settles. A toggling control is a Switch or a Toggle; those carry their own transition."
     },
     {
       slot: "activity",
@@ -247,7 +247,7 @@ var buttonMeta = {
     },
     {
       label: "Copy to clipboard",
-      code: 'const { copy, copied } = useCopy(address)\n<Button variant="ghost" size="icon-sm" aria-label="Copy address" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button>'
+      code: 'const { copy, copied } = useCopy(address)\n<Row gap={1}><Button variant="ghost" size="icon-sm" aria-label="Copy address" 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>'
     },
     {
       label: "As link",