@sableui/react 0.13.1 → 0.14.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,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/inline-status/inline-status.meta.js

@@ -22,7 +22,8 @@ var inlineStatusMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use InlineStatus for global announcements or page-level alerts."
+        description: "Do not use InlineStatus for global announcements or page-level alerts.",
+        instead: ["Banner"]
       },
       {
         guidance: "dont",

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/menu/menu.meta.js

@@ -26,7 +26,8 @@ var menuMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not build a Select out of it. A menu fires actions and has no value; a Select holds one and reports changes. Swapping them loses form semantics and keyboard type-ahead."
+        description: "Do not build a Select out of it. A menu fires actions and has no value; a Select holds one and reports changes. Swapping them loses form semantics and keyboard type-ahead.",
+        instead: ["Select"]
       },
       {
         guidance: "do",

package/dist/components/menubar/menubar.meta.js

@@ -25,7 +25,8 @@ var menubarMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use a menubar for site navigation. Its items are commands in menus (role=menuitem), not links between pages."
+        description: "Do not use a menubar for site navigation. Its items are commands in menus (role=menuitem), not links between pages.",
+        instead: ["NavigationMenu"]
       }
     ],
     anatomy: [

package/dist/components/meter/meter.meta.js

@@ -26,7 +26,8 @@ var meterMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use Meter for a task in flight \u2014 an upload, an install, a step count. That is Progress; Meter tells assistive tech nothing is happening."
+        description: "Do not use Meter for a task in flight \u2014 an upload, an install, a step count. That is Progress; Meter tells assistive tech nothing is happening.",
+        instead: ["Progress"]
       },
       {
         guidance: "dont",

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>'
     }
   ]
 };

package/dist/components/note/note.meta.js

@@ -33,7 +33,8 @@ var noteMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use Note for state the whole page or app is in (an outage, an offline session, a blocked account) \u2014 that is Banner \u2014 or for a message tied to one field, which is the field's own error text."
+        description: "Do not use Note for state the whole page or app is in (an outage, an offline session, a blocked account) \u2014 that is Banner \u2014 or for a message tied to one field, which is the field's own error text.",
+        instead: ["Banner"]
       },
       {
         guidance: "dont",
@@ -84,6 +85,38 @@ var noteMeta = {
     "success",
     "destructive"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "A note is part of the content it annotates and renders with it. A callout that animated in would pull the eye before the reader has reached it in the flow."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Action",
+      why: "The action's focus ring eases in, and its underline thickens on hover. Inside a block of guidance, that is what separates the one thing to do from the prose around it."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Action",
+      why: "A note's action usually navigates or opens something; the small settle on press is the only confirmation before the next surface paints."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "A note has no states to move between: its tone is fixed when it renders. A note that changes tone is a new message, and should arrive as one."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Static guidance. Work in progress belongs in a Progress or a Spinner, not in a callout."
+    }
+  ],
   a11y: [
     'Rendered with role="note" so assistive tech can announce it as an aside.',
     "Color is never the sole signal \u2014 the leading icon and optional title reinforce severity."

package/dist/components/notification-badge/notification-badge.js

@@ -1,6 +1,10 @@
+"use client";
+
 // src/components/notification-badge/notification-badge.tsx
+import { useState } from "react";
 import { cn } from "../../lib/cn.js";
-import { trimLabel } from "../../lib/trim-label.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { NumberTicker } from "../number-ticker/number-ticker.js";
 import {
   notificationCountVariants,
   notificationDotVariants
@@ -13,16 +17,22 @@ function NotificationBadge({
   tone,
   size,
   overlay = false,
+  motion,
   className,
   ...props
 }) {
+  const empty = !dot && (count === void 0 || count <= 0);
+  const [wasEmpty, setWasEmpty] = useState(empty);
+  if (empty && !wasEmpty) setWasEmpty(true);
+  const appear = wasEmpty && "motion-appear";
   if (dot) {
     return /* @__PURE__ */ jsx(
       "span",
       {
         "data-slot": "notification-badge",
+        "data-motion": motionAttribute(motion),
         "aria-hidden": true,
-        className: cn(notificationDotVariants({ tone, size, overlay }), className),
+        className: cn(notificationDotVariants({ tone, size, overlay }), appear, className),
         ...props
       }
     );
@@ -30,18 +40,20 @@ function NotificationBadge({
   if (count === void 0 || count <= 0) {
     return null;
   }
-  const label = count > max ? `${max}+` : String(count);
+  const over = count > max;
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-slot": "notification-badge",
+      "data-motion": motionAttribute(motion),
       "aria-hidden": true,
-      className: cn(notificationCountVariants({ tone, size, overlay }), className),
+      className: cn(notificationCountVariants({ tone, size, overlay }), appear, className),
       ...props,
-      children: trimLabel(label)
+      children: /* @__PURE__ */ jsx("span", { className: "sable-label-trim", children: /* @__PURE__ */ jsx(NumberTicker, { value: over ? max : count, suffix: over ? "+" : void 0, format: NO_GROUPING, motion }) })
     }
   );
 }
+var NO_GROUPING = { useGrouping: false };
 NotificationBadge.displayName = "NotificationBadge";
 export {
   NotificationBadge

package/dist/components/notification-badge/notification-badge.meta.js

@@ -1,7 +1,7 @@
 // src/components/notification-badge/notification-badge.meta.ts
 var notificationBadgeMeta = {
   name: "NotificationBadge",
-  summary: `An unread indicator. Renders a bare dot or a count pill (capped as "{max}+"), or nothing when there's nothing to show. overlay pins it to the corner of a relative host; it is aria-hidden, so the host's name carries the count.`,
+  summary: `An unread indicator. Renders a bare dot or a count pill (capped as "{max}+"), or nothing when there's nothing to show. A changing count rolls to its new number, and a badge that appears after being empty pops in. overlay pins it to the corner of a relative host; it is aria-hidden, so the host's name carries the count.`,
   status: "stable",
   keywords: [
     "notification",
@@ -35,7 +35,7 @@ var notificationBadgeMeta = {
     ]
   },
   related: {
-    components: ["Badge", "StatusDot"]
+    components: ["Badge", "StatusDot", "NumberTicker"]
   },
   props: [
     {
@@ -72,6 +72,12 @@ var notificationBadgeMeta = {
       type: "boolean",
       default: "false",
       description: "Pin to the top-end corner of the nearest relative host (an icon button) \u2014 one placement for every caller instead of hand-tuned absolute offsets."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting. Under `subtle` the count updates in place and the badge fades in without the pop."
     }
   ],
   variants: {
@@ -87,6 +93,32 @@ var notificationBadgeMeta = {
     "secondary",
     "secondary-foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-appear",
+      part: "root",
+      why: "A badge that shows up after being empty is the news \u2014 something just arrived \u2014 so it fades and scales in where it sits instead of popping into existence. Never on first paint: a badge that mounts with a count is content, and a page of them popping on load is noise."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "root",
+      why: "It is decorative and not interactive; the host it sits on answers the pointer."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Count",
+      why: 'The count rolls to its new number through NumberTicker (expressive), so 3 \u2192 4 reads as one more arriving rather than a different badge. Past the cap the ticker holds at max with a static "+", so a count climbing beyond 99 does not keep rolling a badge that has not changed.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "root",
+      why: "An unread count has no working state."
+    }
+  ],
   a11y: [
     'The badge is aria-hidden: a count rendered on a control is not associated with it, so the host needs an accessible name that includes the count \u2014 "Notifications, 3 unread" \u2014 or a screen-reader user hears "Notifications, button" and never learns there is anything new. Pass aria-hidden={false} only for a standalone badge whose number is the information.',
     "A dot carries no number and no words: on its own it tells a sighted user only that something changed, and tells everyone else nothing. Pair it with a label that says what is new, and never make its colour the only difference between two states."

package/dist/components/number-ticker/index.js

@@ -0,0 +1,7 @@
+// src/components/number-ticker/index.ts
+import { NumberTicker } from "./number-ticker.js";
+import { numberTickerMeta } from "./number-ticker.meta.js";
+export {
+  NumberTicker,
+  numberTickerMeta
+};