@sableui/react 0.13.1 → 0.14.0

package/dist/components/pie-chart/pie-chart.js

@@ -2,10 +2,12 @@
 
 // src/components/pie-chart/pie-chart.tsx
 import { useId } from "react";
-import { ChartFrame } from "../../lib/chart/chart-frame.js";
+import { ChartCenter } from "../../lib/chart/chart-center.js";
+import { ChartFrame, chartMotion } from "../../lib/chart/chart-frame.js";
 import { ChartLegend } from "../../lib/chart/chart-legend.js";
 import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
-import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
+import { FILL_HOVER, dimmed } from "../../lib/chart/dim.js";
+import { categoryText, chartFormatters } from "../../lib/chart/format.js";
 import { arcPath, polar } from "../../lib/chart/geometry.js";
 import { DRAW_DURATION, morphTransition, pathStyle } from "../../lib/chart/motion.js";
 import {
@@ -30,7 +32,8 @@ function PieChart({
   tooltip = true,
   valueFormatter,
   locale,
-  animate = true,
+  motion,
+  animate,
   activeIndex,
   defaultActiveIndex,
   onActiveIndexChange
@@ -52,6 +55,7 @@ function PieChart({
     });
   });
   const tooltipOptions = typeof tooltip === "object" ? tooltip : {};
+  const level = chartMotion(motion, animate);
   const ratio = donut === true ? 0.6 : typeof donut === "number" ? Math.min(0.9, Math.max(0, donut)) : 0;
   const geometry = (size) => {
     const margin = labels === "outside" ? 30 : 8;
@@ -105,7 +109,7 @@ function PieChart({
       className: cn("h-64", className),
       count: data.length,
       interactive: tooltip !== false,
-      animate,
+      motion: level,
       activeIndex,
       defaultActiveIndex,
       onActiveIndexChange,
@@ -117,6 +121,10 @@ function PieChart({
         rows: data.map((_, i) => [styles[i].label, ...keys.map((_2, r) => fmt.full(rings[r][i].v))])
       },
       legend: legend ?? labels === "none" ? /* @__PURE__ */ jsx(ChartLegend, { items: names.map((n, i) => ({ key: n, label: styles[i].label, color: styles[i].color, icon: styles[i].icon })) }) : null,
+      overlay: centerLabel && ratio > 0 ? ({ size }) => {
+        const g = geometry(size);
+        return /* @__PURE__ */ jsx(ChartCenter, { center: centerLabel, x: g.cx, y: g.cy, locale, motion: level });
+      } : void 0,
       children: ({ size, activeIndex: active }) => {
         const g = geometry(size);
         const maskId = `${uid}-sweep`;
@@ -148,8 +156,13 @@ function PieChart({
                   d,
                   strokeWidth: separator ? 2 : 0,
                   strokeLinejoin: "round",
-                  className: cn(separator && "stroke-(--sable-surface-bg,var(--background))", active != null && active !== i && "opacity-60"),
-                  style: { ...pathStyle(d), fill: styles[i].color, transition: morphTransition() }
+                  className: cn(separator && "stroke-(--sable-surface-bg,var(--background))"),
+                  style: {
+                    ...pathStyle(d),
+                    // Stepped back toward the surface rather than faded (see lib/chart/dim).
+                    fill: active != null && active !== i ? dimmed(styles[i].color, 60) : styles[i].color,
+                    transition: `${morphTransition()}, ${FILL_HOVER}`
+                  }
                 },
                 `${r}-${names[i]}`
               );
@@ -175,11 +188,7 @@ function PieChart({
               },
               `l-${names[i]}`
             );
-          }) : null,
-          centerLabel && g.inner > 0 ? /* @__PURE__ */ jsxs("text", { x: g.cx, y: g.cy, textAnchor: "middle", className: "[[data-reveal=out]_&]:opacity-0", style: { transition: morphTransition() }, children: [
-            /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
-            centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
-          ] }) : null
+          }) : null
         ] });
       }
     }

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

@@ -127,11 +127,18 @@ var pieChartMeta = {
       default: "runtime locale",
       description: "BCP 47 locale for default number and date formatting."
     },
+    {
+      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 sweep, the slice morph and the rolling centre number are the flourish; the hover pull-out and dim are the feedback `subtle` keeps."
+    },
     {
       name: "animate",
       type: "boolean",
       default: "true",
-      description: "Sweep the slices in clockwise when the chart scrolls into view."
+      description: 'Sweep the slices in clockwise when the chart scrolls into view. `animate={false}` is `motion="subtle"`.',
+      deprecated: 'motion="subtle" (what animate={false} now maps to: no arrival, hover kept) or motion="off"'
     },
     {
       name: "activeIndex",
@@ -168,19 +175,25 @@ var pieChartMeta = {
       slot: "arrival",
       recipe: "custom",
       part: "Slices",
-      why: "Once on screen the slices are revealed by a mask that sweeps clockwise from 12 o'clock \u2014 the whole is read as it fills. On the motion tokens; reduced motion shows the finished chart."
+      why: 'Once on screen the slices are revealed by a mask that sweeps clockwise from 12 o\'clock \u2014 the whole is read as it fills. 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: "Active slice",
-      why: "The hovered slice pulls outward and the rest dim at once; the geometry change itself eases (see transition)."
+      why: "The hovered slice pulls outward and the rest dim at once (mixed toward the surface, not faded); the geometry change itself eases (see transition). Essential: `subtle` keeps it."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Centre value",
+      why: "A numeric centre value rolls to its new total digit by digit (NumberTicker) when the data changes, so the headline is seen moving with the slices instead of being found different afterwards. Expressive: under `subtle` it updates in place."
     },
     {
       slot: "transition",
       recipe: "custom",
       part: "Slices",
-      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/pill/pill.meta.js

@@ -24,7 +24,8 @@ var pillMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use Pill as a static label. A pressable-looking chip that does nothing is the most common cause of dead clicks in a filter row \u2014 that is a Badge."
+        description: "Do not use Pill as a static label. A pressable-looking chip that does nothing is the most common cause of dead clicks in a filter row \u2014 that is a Badge.",
+        instead: ["Badge"]
       },
       {
         guidance: "dont",
@@ -97,6 +98,38 @@ var pillMeta = {
     "muted-foreground",
     "foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Pills arrive with the filter row or the content they annotate. A chip that animated in alone would read as a filter someone just added."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The hover wash eases, so sweeping the pointer along a filter row reads as one cursor moving rather than chips flashing in turn."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Root",
+      why: "A pill often toggles a filter that takes a moment to reach the results; the settle on press confirms the click landed before they change."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "`selected` lifts the chip onto its selected surface on the same ease, so toggling reads as this chip changing state, not a different chip appearing in its place."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A chip is a choice, not a process. If applying it is slow, the results show it."
+    }
+  ],
   a11y: [
     'Renders a native <button type="button"> for focus and keyboard activation.',
     "Selected state is exposed via aria-pressed."

package/dist/components/popover/popover.meta.js

@@ -22,11 +22,13 @@ var popoverMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use Popover for blocking confirmations, long forms, or critical information."
+        description: "Do not use Popover for blocking confirmations, long forms, or critical information.",
+        instead: ["Dialog"]
       },
       {
         guidance: "dont",
-        description: "Do not put a form that can fail validation inside one. A popover dismisses on outside click, which discards what the user typed with no warning \u2014 that is a Dialog."
+        description: "Do not put a form that can fail validation inside one. A popover dismisses on outside click, which discards what the user typed with no warning \u2014 that is a Dialog.",
+        instead: ["Dialog"]
       }
     ],
     anatomy: [

package/dist/components/progress/progress.meta.js

@@ -26,7 +26,8 @@ var progressMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use a determinate Progress for an unknown duration. A bar that sits at 90% is worse than a Spinner, because it makes a promise about time that you cannot keep."
+        description: "Do not use a determinate Progress for an unknown duration. A bar that sits at 90% is worse than a Spinner, because it makes a promise about time that you cannot keep.",
+        instead: ["Spinner"]
       }
     ],
     anatomy: [

package/dist/components/radar-chart/radar-chart.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/radar-chart/radar-chart.tsx
-import { ChartFrame } from "../../lib/chart/chart-frame.js";
+import { ChartFrame, chartMotion } from "../../lib/chart/chart-frame.js";
 import { ChartLegend } from "../../lib/chart/chart-legend.js";
 import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
 import { approxTextWidth, categoryText, chartFormatters } from "../../lib/chart/format.js";
@@ -29,7 +29,8 @@ function RadarChart({
   tooltip = true,
   valueFormatter,
   locale,
-  animate = true,
+  motion,
+  animate,
   activeIndex,
   defaultActiveIndex,
   onActiveIndexChange
@@ -80,7 +81,7 @@ function RadarChart({
       className: cn("h-72", className),
       count: n,
       interactive: tooltip !== false,
-      animate,
+      motion: chartMotion(motion, animate),
       activeIndex,
       defaultActiveIndex,
       onActiveIndexChange,

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

@@ -121,11 +121,18 @@ var radarChartMeta = {
       default: "runtime locale",
       description: "BCP 47 locale for default number and date formatting."
     },
+    {
+      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 polygons growing in and morphing are the flourish; the hover highlight is the feedback `subtle` keeps."
+    },
     {
       name: "animate",
       type: "boolean",
       default: "true",
-      description: "Grow the polygons from the centre when the chart scrolls into view."
+      description: 'Grow the polygons from the centre when the chart scrolls into view. `animate={false}` is `motion="subtle"`.',
+      deprecated: 'motion="subtle" (what animate={false} now maps to: no arrival, hover kept) or motion="off"'
     },
     {
       name: "activeIndex",
@@ -162,7 +169,7 @@ var radarChartMeta = {
       slot: "arrival",
       recipe: "custom",
       part: "Polygon",
-      why: "Once on screen each polygon grows from the centre and fades in, series staggered, on the emphasized easing. On the motion tokens; reduced motion shows the finished chart."
+      why: 'Once on screen each polygon grows from the centre and fades in, series staggered, on the emphasized easing. 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",
@@ -174,7 +181,7 @@ var radarChartMeta = {
       slot: "transition",
       recipe: "custom",
       part: "Polygon",
-      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/radial-chart/radial-chart.js

@@ -1,12 +1,14 @@
 "use client";
 
 // src/components/radial-chart/radial-chart.tsx
-import { ChartFrame } from "../../lib/chart/chart-frame.js";
+import { ChartCenter } from "../../lib/chart/chart-center.js";
+import { ChartFrame, chartMotion } from "../../lib/chart/chart-frame.js";
 import { ChartLegend } from "../../lib/chart/chart-legend.js";
 import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
-import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
+import { STROKE_HOVER, dimmed } from "../../lib/chart/dim.js";
+import { categoryText, chartFormatters } from "../../lib/chart/format.js";
 import { polar, strokeArcPath } from "../../lib/chart/geometry.js";
-import { drawTransition, morphTransition, pathStyle, stagger } from "../../lib/chart/motion.js";
+import { drawTransition, pathStyle, stagger } from "../../lib/chart/motion.js";
 import {
   categoryStyle,
   numberValue
@@ -30,7 +32,8 @@ function RadialChart({
   tooltip = true,
   valueFormatter,
   locale,
-  animate = true,
+  motion,
+  animate,
   activeIndex,
   defaultActiveIndex,
   onActiveIndexChange
@@ -45,6 +48,7 @@ function RadialChart({
   const start = -span / 2 + (sweep >= 360 ? span / 2 : 0);
   const tooltipOptions = typeof tooltip === "object" ? tooltip : {};
   const gauge = sweep < 360;
+  const level = chartMotion(motion, animate);
   const geometry = (size) => {
     const outer = gauge ? Math.min(size.width / 2, size.height * (sweep <= 180 ? 0.92 : 0.6)) - 8 : Math.min(size.width, size.height) / 2 - 8;
     const cx = size.width / 2;
@@ -102,7 +106,7 @@ function RadialChart({
       className: cn("h-64", className),
       count: data.length,
       interactive: tooltip !== false,
-      animate,
+      motion: level,
       activeIndex,
       defaultActiveIndex,
       onActiveIndexChange,
@@ -114,6 +118,10 @@ function RadialChart({
         rows: data.map((_, i) => [styles[i].label, fmt.full(values[i])])
       },
       legend: legend ?? !labels ? /* @__PURE__ */ jsx(ChartLegend, { items: names.map((n, i) => ({ key: n, label: styles[i].label, color: styles[i].color, icon: styles[i].icon })) }) : null,
+      overlay: centerLabel ? ({ size }) => {
+        const g = geometry(size);
+        return gauge && sweep <= 180 ? /* @__PURE__ */ jsx(ChartCenter, { center: centerLabel, x: g.cx, y: g.cy - 6, placement: "gauge", locale, motion: level }) : /* @__PURE__ */ jsx(ChartCenter, { center: centerLabel, x: g.cx, y: g.cy, locale, motion: level });
+      } : void 0,
       children: ({ size, activeIndex: active }) => {
         const g = geometry(size);
         const ringCount = stacked ? 1 : data.length;
@@ -140,8 +148,14 @@ function RadialChart({
                 fill: "none",
                 strokeWidth: g.thickness,
                 strokeLinecap: stacked ? "butt" : "round",
-                className: cn("[stroke-dasharray:1] [stroke-dashoffset:0] [[data-reveal=out]_&]:[stroke-dashoffset:1]", active != null && active !== a.i && "opacity-60"),
-                style: { ...pathStyle(d), stroke: styles[a.i].color, transition: drawTransition(stagger(a.i, 90)) }
+                className: "[stroke-dasharray:1] [stroke-dashoffset:0] [[data-reveal=out]_&]:[stroke-dashoffset:1]",
+                style: {
+                  ...pathStyle(d),
+                  // Stepped back toward the surface rather than faded: a faded ring
+                  // lets its muted track show through and turns muddy (lib/chart/dim).
+                  stroke: active != null && active !== a.i ? dimmed(styles[a.i].color, 60) : styles[a.i].color,
+                  transition: `${drawTransition(stagger(a.i, 90))}, ${STROKE_HOVER}`
+                }
               },
               names[a.i]
             );
@@ -149,21 +163,7 @@ function RadialChart({
           labels && !stacked ? arcs.map((a) => {
             const [x, y] = polar(g.cx, g.cy, radiusOf(g, a.ring), start);
             return /* @__PURE__ */ jsx("text", { x: x - 8, y, dy: "0.32em", textAnchor: "end", className: "fill-muted-foreground text-caption", children: styles[a.i].label }, `l${a.i}`);
-          }) : null,
-          centerLabel ? /* @__PURE__ */ jsxs(
-            "text",
-            {
-              x: g.cx,
-              y: gauge && sweep <= 180 ? g.cy - 6 : g.cy,
-              textAnchor: "middle",
-              className: "[[data-reveal=out]_&]:opacity-0",
-              style: { transition: morphTransition() },
-              children: [
-                /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? centerLabel.label ? "-1.4em" : "0" : "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
-                centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? "1.6em" : "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
-              ]
-            }
-          ) : null
+          }) : null
         ] });
       }
     }

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

@@ -133,11 +133,18 @@ var radialChartMeta = {
       default: "runtime locale",
       description: "BCP 47 locale for default number and date formatting."
     },
+    {
+      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 draw-on, the ring morph and the rolling centre number are the flourish; the hover dim is the feedback `subtle` keeps."
+    },
     {
       name: "animate",
       type: "boolean",
       default: "true",
-      description: "Draw the rings round from their start when the chart scrolls into view."
+      description: 'Draw the rings round from their start when the chart scrolls into view. `animate={false}` is `motion="subtle"`.',
+      deprecated: 'motion="subtle" (what animate={false} now maps to: no arrival, hover kept) or motion="off"'
     },
     {
       name: "activeIndex",
@@ -174,19 +181,25 @@ var radialChartMeta = {
       slot: "arrival",
       recipe: "custom",
       part: "Ring",
-      why: "Once on screen each ring draws round from its start (stroke-dashoffset on a round-capped arc), staggered outside in. On the motion tokens; reduced motion shows the finished chart."
+      why: 'Once on screen each ring draws round from its start (stroke-dashoffset on a round-capped arc), staggered outside 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: "Active ring",
-      why: "The hovered ring stays full strength and the others dim at once."
+      why: "The hovered ring stays full strength and the others dim at once \u2014 mixed toward the surface rather than faded, so a dimmed ring stays solid over its track instead of turning muddy. Essential: `subtle` keeps it."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Centre value",
+      why: "A numeric centre value rolls to its new total digit by digit (NumberTicker) when the data changes, so the headline is seen moving with the rings instead of being found different afterwards. Expressive: under `subtle` it updates in place."
     },
     {
       slot: "transition",
       recipe: "custom",
       part: "Ring",
-      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/radio/radio.meta.js

@@ -22,7 +22,8 @@ var radioMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use Radio for independent toggles or multiple selection; use Checkbox or Switch."
+        description: "Do not use Radio for independent toggles or multiple selection; use Checkbox or Switch.",
+        instead: ["Checkbox", "Switch"]
       },
       {
         guidance: "dont",
@@ -66,6 +67,32 @@ var radioMeta = {
     }
   ],
   tokensUsed: ["input", "card", "primary", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Radios arrive with the form they belong to. Animating each one in turns a question into a title sequence."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The ring's edge and focus ring ease, so arrowing through a group \u2014 which moves the selection with focus \u2014 reads as one choice moving down the list."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Indicator",
+      why: "The dot grows from the centre on a spring and shrinks out of the radio being left. A group's selection moves from one option to another, and the paired grow and shrink is what makes it read as moving rather than two dots blinking."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A radio commits instantly. A slow write belongs to the surrounding form's pending state, not the control."
+    }
+  ],
   a11y: [
     "Base UI provides the radiogroup/radio roles, aria-checked, hidden native inputs, and roving tabindex.",
     "Arrow keys move and select between items; Space selects the focused item; Tab enters/leaves the group.",

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

@@ -122,6 +122,44 @@ var radioCardMeta = {
     "tone-info",
     "tone-warning"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Cards arrive with the form. A plan picker that animated each card in would delay the choice it exists to make."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The edge steps toward the ring colour on hover, eased. On a card-sized target a hard snap across the whole border reads as the layout flickering."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Root",
+      why: "The settle on press confirms a click anywhere in the card \u2014 the radio is small, and without it a click in the card's body can feel like it missed the control."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "Checking eases the tone ring and wash onto the new card as the old one releases, so the choice reads as moving between cards rather than two cards repainting."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Indicator",
+      why: "The radio dot grows in on a spring, the same mark as Radio, so a card and a plain radio confirm a choice the same way."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A choice commits instantly. A slow write belongs to the surrounding form's pending state."
+    }
+  ],
   a11y: [
     "Base UI provides the radiogroup/radio roles, aria-checked, hidden native inputs, and roving tabindex.",
     "Arrow keys move and select between cards; Space selects the focused card; Tab enters/leaves the group.",

package/dist/components/relative-time/relative-time.meta.js

@@ -54,6 +54,38 @@ var relativeTimeMeta = {
     }
   ],
   tokensUsed: ["popover", "popover-foreground", "border", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It is a word in a line of text and arrives with that line."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Root",
+      why: "The only hover change on the timestamp is a dotted underline, and text-decoration-line is discrete: CSS cannot tween it, so a transition here would animate nothing and imply the snap had been handled."
+    },
+    {
+      slot: "response",
+      recipe: "motion-pop",
+      part: "Tooltip",
+      why: "The pointer's real answer is the absolute time, which arrives in a Tooltip on its own fast pop. That short entrance is what makes the full date read as belonging to the word under the cursor."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "The label does not tick: it is computed when the component renders, so it never changes in front of the reader. A timestamp rolling from one minute to two would pull the eye off the content it dates."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A timestamp has nothing to wait for."
+    }
+  ],
   a11y: [
     "Renders a semantic <time> element with a machine-readable dateTime (ISO) attribute.",
     "The <time> carries tabIndex=0 (it is not focusable natively), so the absolute time \u2014 exposed via Base UI's Tooltip, which opens on keyboard focus as well as hover and wires aria-describedby \u2014 is reachable from the keyboard.",

package/dist/components/scroller/scroller.meta.js

@@ -92,6 +92,38 @@ var scrollerMeta = {
     wheelScroll: ["true", "false"]
   },
   tokensUsed: ["ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It is a region, not an event; its content arrives with whatever fills it."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Viewport",
+      why: "The region is focusable so the keyboard can scroll it, and its focus ring eases in like any control's. It is the one sign the region, not the page, now takes the arrow keys."
+    },
+    {
+      slot: "response",
+      recipe: "custom",
+      part: "Scrollbar",
+      why: "The vertical bar (`scrollbar-quiet`) stays hidden until the region is hovered, focused or scrolled, then fades its thumb in on the motion tokens. A bar that appeared in one frame would flash every time the pointer crossed the list."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Edge fade",
+      why: "The edge fades switch on and off as you scroll, in the frame the content is already moving, so the change is carried by the scroll itself. They are a mask gradient, which CSS cannot interpolate without registered custom properties."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A scroll region does no work of its own. Content still loading inside it brings its own Skeleton or Spinner."
+    }
+  ],
   a11y: [
     "The edge fades are a CSS mask-image on the scrolling element, not overlay elements \u2014 there is nothing in the DOM to intercept a pointer or be read by assistive tech, and the content under a fade stays fully interactive.",
     'Two boxes: a chrome box carrying `className` (border, background, radius, sizing) and, inside it, the element that actually scrolls and carries the fade mask. They are split because a `mask-image` applies to its element\'s own border \u2014 so with both on one box, a bordered Scroller watched its frame dissolve at the scrolling edge. The axis is published as `data-orientation`, not `aria-orientation`, which is invalid on `role="group"`.',

package/dist/components/scrub-field/scrub-field.meta.js

@@ -99,6 +99,38 @@ var scrubFieldMeta = {
     { name: "disabled", type: "boolean", description: "Disables typing and scrubbing." },
     { name: "id", type: "string", description: "Input id, for a PropertyRow's htmlFor." }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the inspector row it sits in."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The shell eases its focus ring like every field, so tabbing through a column of numbers shows where the keyboard is without flicker."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Handle",
+      why: "The handle's ink brightens while the field is hovered. It is the only sign that the icon or prefix can be dragged, which nobody would guess from a label."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Value",
+      why: "The number follows the drag pixel for pixel. Easing it \u2014 or rolling it with a NumberTicker \u2014 would show a value the pointer has already left, in a control whose whole point is precision."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Scrubbing is synchronous; there is nothing to wait for."
+    }
+  ],
   a11y: [
     "The input carries the accessible name via `label`; the glyph is aria-hidden because it is decorative.",
     "Every scrub gesture is reachable from the keyboard: ArrowUp/ArrowDown step by `step`, Shift+Arrow by ten steps.",