@sableui/react 0.13.2 → 0.15.0

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

@@ -34,6 +34,10 @@ var otpFieldMeta = {
         guidance: "dont",
         description: 'Do not use OtpField for a password, an arbitrary-length PIN, or anything the user types from memory. Slots promise a fixed length; use Input with `type="password"` and `autocomplete="current-password"` instead.'
       },
+      {
+        guidance: "do",
+        description: "Clear the error as soon as the user edits the code (`onValueChange` \u2192 reset the error), and set it again when the next code is refused. Each refusal is then a fresh change to invalid, so the field shakes for every wrong code, not only the first."
+      },
       {
         guidance: "dont",
         description: "Do not intercept paste or clear the field on a wrong code before the user has seen the error. Blocking paste breaks SMS autofill and password managers, and wiping the slots erases the evidence of which digit was wrong."
@@ -123,7 +127,13 @@ var otpFieldMeta = {
     {
       name: "aria-invalid",
       type: "boolean",
-      description: "Marks every slot invalid (destructive border). `<Field error>` sets it for you."
+      description: "Marks every slot invalid (destructive border and digits). Turning it on after mount shakes the field once. `<Field error>` sets it for you."
+    },
+    {
+      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 shake is the flourish; the destructive colour stays at every level."
     },
     {
       name: "disabled / readOnly / required / name / id / form",
@@ -160,6 +170,12 @@ var otpFieldMeta = {
       part: "Slot",
       why: "A filled slot strengthens its border, so a pasted code visibly lands in every slot at once. Easing it reads as the code arriving rather than the field flickering."
     },
+    {
+      slot: "transition",
+      recipe: "motion-shake",
+      part: "Root",
+      why: "A refused code shakes the field once as it turns invalid \u2014 the short horizontal no that makes a second wrong code feel noticed rather than ignored. It never carries the refusal alone: the digits and borders turn destructive and the Field says why. It plays on the change to invalid, not on mount, and is expressive, so `subtle` keeps only the colour."
+    },
     {
       slot: "activity",
       recipe: "none",
@@ -171,7 +187,8 @@ var otpFieldMeta = {
     'The root is a role=group named by the field label; the first slot shares the label through `id`/`htmlFor`, and later slots are announced by position ("Character 2 of 6").',
     "Only one slot is in the tab order. Arrow keys, Home/End and Backspace move between slots; Tab leaves the whole field.",
     'The first slot carries autocomplete="one-time-code" and the numeric virtual keyboard, so iOS and Android offer the SMS code above the keyboard.',
-    "Slots render at 20px (`text-mono-lg`), above the 16px floor that stops iOS Safari zooming on focus."
+    "Slots render at 20px (`text-mono-lg`), above the 16px floor that stops iOS Safari zooming on focus.",
+    "An invalid code is never signalled by motion alone: every slot carries aria-invalid, the digits and borders turn destructive, and the Field's error message is wired through aria-describedby. The shake resolves instantly under reduced motion and `subtle`."
   ],
   examples: [
     {
@@ -186,6 +203,10 @@ var otpFieldMeta = {
       label: "With an error",
       code: '<Field label="Verification code" error="That code has expired. Request a new code and try again."><OtpField length={6} groupSize={3} defaultValue="482913" /></Field>'
     },
+    {
+      label: "Verify on completion, shake on a wrong code",
+      code: 'const [code, setCode] = useState("")\nconst [wrong, setWrong] = useState(false)\n<Field label="Verification code" error={wrong ? "That code does not match. Check the message and try again." : undefined}><OtpField length={6} groupSize={3} value={code} onValueChange={(next) => { setCode(next); setWrong(false) }} onValueComplete={(value) => setWrong(value !== expected)} /></Field>'
+    },
     {
       label: "Alphanumeric",
       code: '<Field label="Pairing code"><OtpField length={8} groupSize={4} validationType="alphanumeric" /></Field>'

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

@@ -83,6 +83,32 @@ var panelGroupMeta = {
       description: "Controlled width for a Panel, clamped and optionally persisted to localStorage (only when `storageKey` is passed). Read through useSyncExternalStore, so there is no server/client hydration mismatch and no setState in an effect; do not hand-roll a localStorage read during render or a write from an effect. Without `storageKey` the width is kept in memory per hook instance. The third element is the `{ min, max }` it clamps to: spread it onto the paired PanelResizer so the separator's aria-valuemin/max and Home/End match the real clamp."
     }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Panels are the app's frame, present from first paint. A dock that slid in on load would make the workspace look like it is still assembling."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "PanelResizer",
+      why: "The hairline widens into a visible bar on hover and turns primary on keyboard focus, eased, so a 1px edge says it can be grabbed before the pointer commits."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Panel",
+      why: "Width tracks the pointer one-to-one while dragging, and keyboard steps land at once. An eased width would trail the cursor, and resizing is a layout change: easing it would reflow the canvas beside the panel on every frame."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Layout chrome has no working state."
+    }
+  ],
   a11y: [
     "PanelResizer is a role=separator with aria-orientation, aria-valuenow/min/max, and is focusable \u2014 a pointer-only resizer is a keyboard trap.",
     "Arrow keys resize by `step`; Home and End jump to the minimum and maximum.",

package/dist/components/panel-section/panel-section.js

@@ -1,6 +1,7 @@
 "use client";
 
 // src/components/panel-section/panel-section.tsx
+import { useState } from "react";
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { beginScrub } from "../../lib/scrub-gesture.js";
@@ -110,16 +111,42 @@ function PropertyPair({ labels, className, children, ...props }) {
   ] });
 }
 PropertyPair.displayName = "PropertyPair";
-function PropertyGroup({ label, summary, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(Collapsible, { className: cn("border-t border-hairline", className), ...props, children: [
-    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group/property-group flex h-(--control-sm) w-full items-center gap-2 rounded-xs text-start motion-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-ui-md text-foreground", children: label }),
-      summary != null ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 shrink items-center gap-2 truncate text-ui-md text-muted-foreground", children: summary }) : null,
-      /* @__PURE__ */ jsx(Icon, { name: "plus", className: "shrink-0 text-xs text-muted-foreground group-data-[panel-open]/property-group:hidden" }),
-      /* @__PURE__ */ jsx(Icon, { name: "minus", className: "hidden shrink-0 text-xs text-muted-foreground group-data-[panel-open]/property-group:block" })
-    ] }),
-    /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 pt-0.5 pb-2", children }) })
-  ] });
+function PropertyGroup({
+  label,
+  summary,
+  className,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}) {
+  const [openState, setOpenState] = useState(defaultOpen);
+  const open = openProp ?? openState;
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      className: cn("border-t border-hairline", className),
+      open: openProp,
+      defaultOpen,
+      onOpenChange: (next, details) => {
+        setOpenState(next);
+        onOpenChange?.(next, details);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex h-(--control-sm) w-full items-center gap-2 rounded-xs text-start motion-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-ui-md text-foreground", children: label }),
+          summary != null ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 shrink items-center gap-2 truncate text-ui-md text-muted-foreground", children: summary }) : null,
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "motion-icon-swap shrink-0 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { "data-active": !open, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "plus" }) }),
+            /* @__PURE__ */ jsx("span", { "data-active": open, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "minus" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 pt-0.5 pb-2", children }) })
+      ]
+    }
+  );
 }
 PropertyGroup.displayName = "PropertyGroup";
 export {

package/dist/components/panel-section/panel-section.meta.js

@@ -101,6 +101,38 @@ var panelSectionMeta = {
       description: "A collapsible set of properties inside a section, at the panel's scale (an Accordion is page furniture). The row shows the label, then the summary (the group's value, readable while closed: a word, a few swatches, or both), then a + that turns to \u2212 when open. Groups open independently and stack with a hairline between them. Built on Collapsible."
     }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Sections are part of the inspector they sit in and arrive with it. Animating each in would make a panel switch look like a page load."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "PropertyGroup trigger",
+      why: "The fold row eases its focus ring, so arrowing down a dense inspector shows where the keyboard is without the ring flickering from row to row."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-disclosure",
+      part: "PropertyGroup panel",
+      why: "The group opens by easing its height, so the rows below slide down to make room instead of jumping. In an inspector, the next section moving is otherwise how you lose your place."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-icon-swap",
+      part: "PropertyGroup indicator",
+      why: "The + collapses into \u2212 as the group opens, both glyphs stacked as one mark, so the indicator reads as this row changing state rather than a different icon landing."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "The inspector edits values in place; nothing in it loads."
+    }
+  ],
   a11y: [
     "PropertyGroup's row is a real button with aria-expanded (Collapsible); its summary is part of the button's name, so a closed group still announces its value.",
     "PropertyRow renders a real <label>; pass htmlFor with the control's id so clicking the label focuses it.",

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

@@ -98,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/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

@@ -67,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.",